/* Mobile arena: compact status at the edges, details only when requested. */
.bank-compact,.rank-toggle,#arena-map-toggle{display:none}
@media(max-width:760px) and (orientation:portrait){
 body.dragon-map-expanded #game-hud{z-index:5}
 #arena-minimap{left:max(8px,env(safe-area-inset-left));top:calc(8px + var(--safe-top));box-sizing:border-box;width:76px;padding:5px;border-radius:16px;background:#ecf5e5e8;box-shadow:0 2px 0 #315f6638;transition:none}
 #arena-minimap>strong{font-size:8px;letter-spacing:0;margin:0 0 4px;gap:2px}
 #arena-minimap>strong #map-count{font-size:9px;padding:1px 3px;min-width:16px}
 #arena-minimap>div{display:none}
 #arena-minimap canvas{border-radius:10px}
 #arena-map-toggle{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;cursor:pointer;pointer-events:auto;touch-action:manipulation}
 #arena-map-toggle:focus-visible{outline:3px solid #e3b64d;outline-offset:2px}
 #arena-minimap.is-expanded{width:150px;padding:8px;z-index:2}
 #arena-minimap.is-expanded>strong{font-size:10px}
 #arena-minimap.is-expanded>div{display:flex;font-size:8px}
 .dragon-run-info{top:calc(8px + var(--safe-top));left:50%;width:138px;max-width:none;padding:4px 5px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 46px;grid-template-rows:25px 19px;column-gap:5px;align-items:center;border-radius:16px;background:#205763dc;box-shadow:0 2px 0 #153b4d26}
 .dragon-run-info>strong{grid-column:1;grid-row:1;min-width:0;font-size:20px;line-height:1;overflow:hidden;text-overflow:ellipsis}
 .dragon-run-info>span{grid-column:1;grid-row:2;min-width:0;margin:0;font-size:8px;line-height:1.2}
 #dragon-bank{grid-column:2;grid-row:1/3;width:46px;height:44px;min-height:44px;margin:0;padding:0 2px;border-radius:12px;font-size:10px;line-height:1.1;box-shadow:inset 0 1px 0 #d3efce70}
 #dragon-bank .bank-full{display:none}
 #dragon-bank .bank-compact{display:inline}
 #dragon-live-ranking{top:calc(96px + var(--safe-top));right:max(8px,env(safe-area-inset-right));width:142px;box-sizing:border-box;color:#fff4dc;font-size:11px}
 #dragon-live-ranking header{padding:0;letter-spacing:0;text-shadow:none}
 #dragon-live-ranking .rank-heading{display:none}
 #dragon-live-ranking .rank-toggle{display:flex;align-items:center;justify-content:space-between;gap:4px;box-sizing:border-box;width:100%;min-height:44px;padding:7px 10px;border:1px solid #b6d8c680;border-radius:14px;background:#205763d9;color:#fff4dc;font:11px 'Trebuchet MS',Arial,sans-serif;box-shadow:0 2px 0 #153b4d26;pointer-events:auto;touch-action:manipulation}
 .rank-toggle span{font-size:10px;color:#d9eddb}
 #dragon-live-ranking:not(.is-expanded)>ol,#dragon-live-ranking:not(.is-expanded)>.dragon-own-rank{display:none}
 #dragon-live-ranking.is-expanded{z-index:2;width:min(200px,52vw);padding:5px;border:1px solid #b6d8c6;border-radius:18px;background:#205763f2}
 #dragon-live-ranking.is-expanded>ol{max-height:34dvh;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;pointer-events:auto;padding:4px 2px}
 #dragon-live-ranking.is-expanded .rank-toggle{border:0;background:transparent;box-shadow:none}
 #dragon-live-ranking li,#dragon-live-ranking .king{grid-template-columns:20px minmax(0,1fr) 38px;min-height:25px;padding:1px 2px;font-size:11px;text-shadow:none}
 #dragon-live-ranking .rank-index .sky-king-crown{width:22px;height:22px;margin:0}
 #dragon-live-ranking .dragon-own-rank{font-size:11px;padding:5px 2px;margin:0;text-shadow:none}
 #dragon-chest-objective{top:var(--chest-hud-top,calc(110px + var(--safe-top)));left:max(8px,env(safe-area-inset-left));right:auto;bottom:auto;transform:none;box-sizing:border-box;width:160px;max-width:calc(100vw - 172px);min-height:44px;gap:5px;padding:0 7px 0 0;border-radius:14px;background:#205763d9;box-shadow:0 2px 0 #153b4d26;pointer-events:none}
 #dragon-chest-objective strong,#dragon-chest-objective .chest-progress,#dragon-chest-objective button span{display:none}
 #dragon-chest-objective>button{min-width:40px;width:40px;flex-basis:40px;min-height:44px}
 #dragon-chest-objective>button svg{width:28px;height:28px}
 #dragon-chest-objective progress{height:3px;margin:2px 0 4px}
 #dragon-chest-objective .chest-progress-compact{display:block;font-size:10px;line-height:12px}
 #dragon-chest-objective time{font-size:11px;flex-basis:27px}
 #dragon-chest-objective[data-status="earned"]{border-color:#f8d584;background:#436f63f0}
 #dragon-buffs,.dragon-chest-visible #dragon-buffs{display:none}
 #dragon-supply-dock{left:50%;transform:translateX(-50%);bottom:calc(8px + var(--safe-bottom));box-sizing:border-box;width:min(360px,calc(100vw - 16px));max-width:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:5px 5px 7px;border-radius:20px;background:#205763b8}
 #dragon-supply-dock button{width:100%;height:50px;min-height:44px;padding:2px;border-radius:14px}
 #dragon-supply-dock img,#dragon-supply-dock svg{width:30px;height:30px;filter:none}
 #dragon-supply-dock small{font-size:10px;line-height:12px}
 .dragon-keyboard-controls #dragon-supply-dock button{height:66px;padding-top:16px}
 #dragon-sprint{width:70px;height:70px;bottom:calc(84px + var(--safe-bottom));right:max(12px,env(safe-area-inset-right));box-shadow:0 3px 0 #73583144,0 0 0 3px #fbe9b71f;background:radial-gradient(circle at 40% 20%,#ffe7a4e8,#dca249db)}
 #dragon-sprint strong{font-size:27px}
 #dragon-sprint span{font-size:9px;margin-top:5px}
 #dragon-sprint small{display:none}
 .dragon-keyboard-controls #dragon-sprint{bottom:calc(100px + var(--safe-bottom))}
 #dragon-control-help{font-size:11px;padding:5px 8px}
}
@media(max-width:359px) and (orientation:portrait){
 #arena-minimap{width:68px}
 .dragon-run-info{width:128px;grid-template-columns:minmax(0,1fr) 44px}
 #dragon-bank{width:44px}
 #dragon-live-ranking{width:134px}
 #dragon-chest-objective{width:148px;max-width:calc(100vw - 156px)}
 #dragon-supply-dock{width:calc(100vw - 8px);padding:4px 2px 6px;gap:0}
 #dragon-supply-dock button{border-width:1px}
}

/* Carried items: opaque artwork and crisp labels, with no backplates. */
#dragon-supply-dock{background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0;padding:2px 4px;overflow:visible;gap:12px}
#dragon-supply-dock button,#dragon-supply-dock button.active,#dragon-supply-dock button:disabled{
 background:none;border:0;box-shadow:none;border-radius:0;min-width:44px;
 opacity:1;filter:none;color:#fff9e6;text-shadow:none;
}
#dragon-supply-dock button,.dragon-keyboard-controls #dragon-supply-dock button{width:60px;height:70px;padding:2px 4px;align-content:center;row-gap:3px}
.dragon-keyboard-controls #dragon-supply-dock button{height:88px;padding-top:19px}
#dragon-supply-dock button img,#dragon-supply-dock button svg{width:46px;height:46px;filter:none;opacity:1}
#dragon-supply-dock small,#dragon-supply-dock kbd,.dragon-keyboard-controls #dragon-supply-dock kbd{
 background:none;border:0;box-shadow:none;padding:0;color:#fff9e6;
 font:700 14px/17px 'Trebuchet MS',Arial,sans-serif;text-shadow:none;
 -webkit-text-stroke:2px #244f58;paint-order:stroke fill;
}
.dragon-keyboard-controls #dragon-supply-dock kbd{top:0;left:50%;transform:translateX(-50%)}
#dragon-supply-dock button.active small{color:#ffe38e}
@media(max-width:760px) and (orientation:portrait){
 #dragon-supply-dock{width:min(392px,calc(100vw - 12px));gap:4px;padding:2px}
 #dragon-supply-dock button{width:100%;height:56px;min-width:0;padding:2px 0}
 .dragon-keyboard-controls #dragon-supply-dock button{width:100%;height:74px;padding:18px 0 2px}
 #dragon-supply-dock button img,#dragon-supply-dock button svg{width:36px;height:36px}
 #dragon-supply-dock small,#dragon-supply-dock kbd,.dragon-keyboard-controls #dragon-supply-dock kbd{font-size:12px;line-height:15px}
}
@media(orientation:landscape) and (max-height:560px){
 #dragon-supply-dock{gap:6px;bottom:8px}
 #dragon-supply-dock button{width:48px;height:54px;padding:0}
 .dragon-keyboard-controls #dragon-supply-dock button{height:70px;padding-top:17px}
 #dragon-supply-dock button img,#dragon-supply-dock button svg{width:34px;height:34px}
 #dragon-supply-dock small,#dragon-supply-dock kbd,.dragon-keyboard-controls #dragon-supply-dock kbd{font-size:12px;line-height:15px}
}