/* Landscape phones, buttons-only aiming and the rotate prompt (dist/controls.mjs sets html[data-hud]).
   Phone HUD: minimap top-left with the shop block under it, score/clock top-centre, settings/menu
   top-right, floating joystick on the left, attack in the bottom-right corner with Q E R T on a
   quarter arc around it and H F further left along the bottom. Desktop keeps style.css. */

/* Cooldown sweep (every layout): the dark wedge is the remaining share of the cooldown. */
@property --cd{syntax:'<number>';inherits:true;initial-value:0}
#play-hud .action{transition:--cd .1s linear}
#play-hud .cooldown{background:conic-gradient(#041219d9 calc(var(--cd) * 1turn),#0412194d 0);color:#fff4d8;font-weight:600;text-shadow:0 1px 3px #000,0 0 8px #000}

/* Aim cancel target, shown only while a skill button is held in buttons-only mode. */
#aim-cancel{position:absolute;top:-72px;right:0;z-index:3;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:1px;background:#2a1414d9;border:2px solid #ee8982b3;color:#ffd8d2;font-size:11px;line-height:1.1;pointer-events:none;box-shadow:0 4px 14px #0009}
#aim-cancel b{font-size:17px;line-height:1}
#aim-cancel.active{background:#8a2c26f0;border-color:#ffd0c8;transform:scale(1.12)}
/* html[data-hud] lifts these above the phone button styles below (the ultimate's gold ring included). */
html[data-hud] #play-hud .action.skill.aiming{box-shadow:0 0 0 3px #f3d38e,0 0 24px #dfbc74cc}
html[data-hud] #play-hud .action.skill.aim-cancel{filter:grayscale(.8) brightness(.75);box-shadow:0 0 0 3px #ee8982,0 0 18px #ee898299}
html[data-controls=buttons] #play-hud .skill{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Settings: "หน้าจอ" and "การควบคุม" sections inside the ⚙ dialog (.settings-more, injected by controls.mjs). */
.controls-settings{margin:16px 0 10px;padding-top:14px;border-top:1px solid #bb9c6759}
.controls-settings h3{margin:0 0 4px;font:18px Chonburi,serif;color:#e9cd8c}
.controls-toggle{display:flex;align-items:center;gap:10px;min-height:48px;font-size:15px;color:#f3e8c9;cursor:pointer}
.controls-toggle input{width:22px;height:22px;margin:0;accent-color:#d6b46d;flex:none}
.controls-help{margin:2px 0 0;font-size:13px;line-height:1.55;color:#b8cbc3}
.screen-fullscreen{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:6px 0 2px;padding:8px 12px;color:#e6cf9a;font-size:15px}
.screen-icon{display:inline-flex;width:20px;height:20px;flex:none}
.screen-icon svg{width:100%;height:100%}
.screen-status:empty{display:none}
.screen-status b{color:#f0d08e;font-weight:600}
.screen-status ol{margin:4px 0 2px;padding-left:1.35em}
.screen-status li{margin:1px 0}
/* Opened from the home-screen icon: the status is the whole answer, so it reads as a line of its own. */
.screen-settings[data-screen=installed] .screen-status{margin:6px 0 2px;color:#a7e3cb}
/* Auto fullscreen and the zoom lock only mean something with touch: a mouse-only screen shows just the button. */
@media not all and (any-pointer:coarse){.screen-settings .screen-touch{display:none}}

/* Zoom lock (⚙ หน้าจอ → "กันหน้าจอซูมเมื่อแตะสนาม", html[data-zoom=lock] set by controls.mjs, ON by default).
   pan-x pan-y goes on every element that has no touch-action of its own (zero specificity, so #arena, the joystick and
   the skill buttons keep none and buttons keep manipulation): no double-tap or pinch zoom anywhere, while lists and
   dialogs still scroll with one finger. It sits on every element, not only on html, because WebKit restarts the
   touch-action chain at each scroll container. OFF (data-zoom=free) gives the browser its zoom back, and so does
   data-zoom=pending: the lock turned on while the page is zoomed in waits until the player has pinched back out. */
:where(html[data-zoom=lock]),:where(html[data-zoom=lock] *){touch-action:pan-x pan-y}
html[data-zoom=lock] :is(#play-hud,.topbar){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* The arena canvas never selects, calls out or flashes, lock or not: a long hold on the floating joystick stays a hold. */
#arena{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}

/* Rotate prompt for phones held upright. */
#rotate-prompt{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 38%,#15453f,#061619 74%);color:#f1efdf;text-align:center;outline:none}
.rotate-frame{position:relative;width:min(340px,100%);padding:34px 24px 30px;border:2px solid #dfbc74;border-radius:20px;background:linear-gradient(160deg,#143a3cf5,#081d23f5);box-shadow:inset 0 0 0 5px #0b2328,inset 0 0 0 6px #dfbc7466,0 22px 70px #000b}
.rotate-frame:before,.rotate-frame:after{content:'';position:absolute;left:50%;width:16px;height:16px;border:2px solid #dfbc74;background:#0b2328;transform:translateX(-50%) rotate(45deg)}
.rotate-frame:before{top:-10px}.rotate-frame:after{bottom:-10px}
.rotate-logo{display:block;width:min(200px,70%);height:auto;margin:-8px auto 6px;filter:drop-shadow(0 6px 14px #000a)}
.rotate-frame svg{display:block;width:96px;height:96px;margin:0 auto;color:#e9c47c}
.rotate-phone{transform-box:view-box;transform-origin:60px 62px;animation:ayodea-rotate 2.8s ease-in-out infinite}
.rotate-arc{opacity:.75}
@keyframes ayodea-rotate{0%,16%{transform:rotate(0)}46%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.rotate-frame h2{margin:12px 0 8px;font:clamp(19px,6.4vw,24px)/1.35 Chonburi,serif;color:#f0d08e}
/* Two unbreakable halves ("หมุนมือถือ" / "เป็นแนวนอน") with a break only between them, never inside แนวนอน. */
.rotate-frame h2 span{white-space:nowrap}
.rotate-frame p{margin:0;font-size:15px;line-height:1.6;color:#c4d6cf}
@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}

/* Settings on a short landscape screen: sound on the left, หน้าจอ then การควบคุม on the right. The right column spans every
   row down to the last (1fr) one, so its height goes into that row instead of stretching the slider rows; when the two
   columns do not fit, the dialog scrolls. */
@media (max-height:500px) and (min-width:560px){
 #audio-dialog[open]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(9,auto) 1fr;column-gap:24px;align-content:start;width:min(760px,calc(100% - 24px));max-height:calc(100dvh - 16px);padding:14px 22px 12px}
 #audio-dialog>*{grid-column:1;min-width:0}
 #audio-dialog>.audio-heading{grid-column:1/-1}
 #audio-dialog .audio-heading h2{margin:0 0 2px;font-size:19px}
 #audio-dialog .audio-master{padding:3px 0}
 #audio-dialog .audio-slider{margin:1px 0;gap:2px 9px}
 #audio-dialog #audio-test{min-height:44px;margin-top:6px}
 #audio-dialog #audio-message{margin:4px 0 0}
 #audio-dialog>small{padding-top:2px}
 #audio-dialog>.settings-more{grid-column:2;grid-row:2/-1;align-self:start;padding:0 0 8px 22px;border-left:1px solid #bb9c6759}
 #audio-dialog .settings-more>.controls-settings{margin:0;padding:4px 0 0;border-top:0}
 #audio-dialog .settings-more>.controls-settings+.controls-settings{margin-top:10px;padding-top:10px;border-top:1px solid #bb9c6759}
 #audio-dialog .screen-fullscreen{margin-top:4px}
}

/* ---------- Landscape phone HUD ---------- */
html[data-hud=phone]{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--k:1}
/* style.css keeps #game at least 360px tall; a 320px-tall phone would push the bottom row off the screen. */
html[data-hud=phone] #game{min-height:0}
@media (min-height:386px){html[data-hud=phone]{--k:1.05}}
@media (min-height:405px){html[data-hud=phone]{--k:1.1}}
@media (min-height:425px){html[data-hud=phone]{--k:1.14}}

/* Top bar during a match: no brand (the minimap takes the corner), compact score, 48px utility targets. */
html[data-hud=phone] #game:has(#play-hud:not([hidden])) .topbar{height:calc(var(--st) + 52px);padding:0;background:linear-gradient(#061c25b3,#061c2500);pointer-events:none}
html[data-hud=phone] #game:has(#play-hud:not([hidden])) .brand{display:none}
html[data-hud=phone] #game:has(#play-hud:not([hidden])) .match-score{top:var(--st);gap:14px;padding:3px 18px 4px;border-radius:0 0 14px 14px;border-top:0}
html[data-hud=phone] #game:has(#play-hud:not([hidden])) .match-score b{font-size:20px;line-height:1.25}
html[data-hud=phone] #game:has(#play-hud:not([hidden])) #clock{font-size:13px}
html[data-hud=phone] #game:has(#play-hud:not([hidden])) .utilities{position:absolute;top:calc(var(--st) + 3px);right:calc(var(--sr) + 8px);gap:4px;pointer-events:auto}
html[data-hud=phone] #game:has(#play-hud:not([hidden])) .utility{min-width:48px;height:48px;padding:0 10px;display:grid;place-items:center;font-size:13px;border-radius:12px;background:#0b232dd9}
html[data-hud=phone] #game:has(#play-hud:not([hidden])) .utility kbd{display:none}
html[data-hud=phone] #game:has(#play-hud:not([hidden])) #sound,html[data-hud=phone] #game:has(#play-hud:not([hidden])) .audio-settings{font-size:18px;padding:0}
/* The toast row stays at 170px on every phone width (style.css moves it to the bottom under 651px, over H / F and the
   panel); a phone under 340px tall lifts it above the skill arc. */
html[data-hud=phone] #play-hud #announcement{top:170px;max-width:calc(100% - 2 * (var(--sl) + 20px + 150px * var(--k)));min-width:0;font-size:14px;padding:8px 16px}
@media (max-height:339px){html[data-hud=phone] #play-hud #announcement{top:calc(var(--st) + 94px)}}
html[data-hud=phone] #network-status{top:calc(var(--st) + 64px);font-size:11px;padding:3px 12px}

html[data-hud=phone] #play-hud .objective{top:calc(var(--st) + 40px);left:50%;transform:translateX(-50%);align-items:center;gap:0}
html[data-hud=phone] #play-hud .objective .eyebrow,html[data-hud=phone] #play-hud .objective strong{display:none}
html[data-hud=phone] #play-hud .base-health{gap:5px;font-size:11px}
html[data-hud=phone] #play-hud .base-health meter{width:46px;height:8px}
html[data-hud=phone] #play-hud .bot-status{top:calc(var(--st) + 56px);right:calc(var(--sr) + 8px);max-width:170px;padding:3px 9px;gap:6px;font-size:12px;pointer-events:none}

/* Left column: minimap, then the shop / quick-buy block. */
html[data-hud=phone] #play-hud .minimap{display:block;top:calc(var(--st) + 6px);left:calc(var(--sl) + 8px);right:auto;bottom:auto;width:calc(150px * var(--k));padding:4px;border-radius:8px}
html[data-hud=phone] #play-hud .minimap span{display:none}
html[data-hud=phone] #play-hud .shop{top:calc(var(--st) + 14px + 76px * var(--k));left:calc(var(--sl) + 8px);right:auto;bottom:auto;width:calc(150px * var(--k));padding:4px;gap:4px;border-radius:8px}
html[data-hud=phone] #play-hud #inventory{gap:2px}
html[data-hud=phone] #play-hud #inventory span{height:calc(22px * var(--k))}
html[data-hud=phone] #play-hud #inventory img{width:calc(18px * var(--k));height:calc(18px * var(--k))}
html[data-hud=phone] #play-hud .shop-controls{display:grid;grid-template-columns:auto 1fr;gap:4px}
html[data-hud=phone] #play-hud .shop .shop-controls button{min-width:0;min-height:48px;padding:3px 5px;justify-content:center;text-align:center;font-size:12px;line-height:1.15}
html[data-hud=phone] #play-hud #shop-next{font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Player vitals (RoV style): a slim cluster on the bottom edge between the joystick ring and H / F instead of a framed box
   over the lane. The portrait sits in a gold XP ring (--xp, set by app.mjs) with the level badge under it; name, HP and
   gold ride a lacquer strip that fades out to the right. Touches pass through to the floating joystick.
   Box: left = joystick + 12px, bottom = 6px over the inset, height = portrait + 8px (the ring); width 200px or what is
   left before H (8px gap): 100vw - insets - 50px - 421px*k. vfx-juice measureHud() measures it
   (tests/juice-hud-fixtures.json, hudFallback in juice-cues.mjs). */
html[data-hud=phone] #play-hud .player-panel{--pp:calc(42px * var(--k));top:auto;bottom:calc(var(--sb) + 6px);left:calc(var(--sl) + 30px + 104px * var(--k));width:min(200px,calc(100vw - var(--sl) - var(--sr) - 50px - 421px * var(--k)));height:calc(var(--pp) + 8px);min-height:0;padding:0;gap:0;align-items:center;background:none;border:0;border-image:none;border-radius:0;box-shadow:none;pointer-events:none}
html[data-hud=phone] #play-hud .player-panel::before{content:'';position:absolute;z-index:1;left:0;top:0;width:calc(var(--pp) + 8px);height:calc(var(--pp) + 8px);border-radius:50%;background:radial-gradient(circle,#0000 calc(var(--pp) / 2 + 1px),#06151a calc(var(--pp) / 2 + 1.5px)),conic-gradient(#f6d995 calc(var(--xp,0) * 1turn),#26413f 0);box-shadow:0 0 0 1px #06151ae6,0 3px 10px #000b}
html[data-hud=phone] #play-hud .player-panel>img{position:relative;z-index:2;flex:none;width:var(--pp);height:var(--pp);margin-left:4px;border-radius:50%;object-fit:cover;object-position:50% 6%;background:radial-gradient(circle at 50% 35%,#2f6263,#0a2127 72%)}
html[data-hud=phone] #play-hud #hud-portrait[data-art=thumb]{-webkit-mask-image:none;mask-image:none}
html[data-hud=phone] #play-hud .player-vitals{align-self:center;margin-left:calc(var(--pp) / -2);padding:3px 12px 3px calc(var(--pp) / 2 + 9px);border-radius:0 14px 14px 0;background:linear-gradient(90deg,#04131af2,#04131ae0 62%,#04131a00)}
html[data-hud=phone] #play-hud .player-vitals>div:first-child{margin:0 0 1px;font-size:11.5px;line-height:14px;justify-content:flex-start;text-shadow:0 1px 2px #000}
html[data-hud=phone] #play-hud #hero-name{max-width:104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-hud=phone] #play-hud #level{position:absolute;z-index:3;left:calc(var(--pp) / 2 + 4px);bottom:-1px;transform:translateX(-50%);padding:0 5px;border-radius:7px;font:700 10px/14px var(--ay-display,'Chakra Petch',Sarabun,sans-serif);color:#1d1407;white-space:nowrap;background:linear-gradient(180deg,#fcebb6,#c99a4c);box-shadow:0 0 0 1.5px #06151a,0 2px 5px #000b}
html[data-hud=phone] #play-hud .health-track{height:calc(13px * var(--k));border:0;border-radius:7px;background:#020b0f;box-shadow:inset 0 0 0 1px #9be6a066,0 0 0 1px #06151acc}
html[data-hud=phone] #play-hud .health-track i{background:linear-gradient(180deg,#d2f9a6,#4fb865 70%,#3f9d57);transition:width .2s}
html[data-hud=phone] #play-hud .health-track span{font-size:10.5px;line-height:calc(13px * var(--k));letter-spacing:.2px}
html[data-hud=phone] #play-hud .player-panel[data-low=true] .health-track i{background:linear-gradient(180deg,#ffc4a6,#e0583f 70%,#b8412f)}
html[data-hud=phone] #play-hud .player-panel[data-low=true] .health-track{box-shadow:inset 0 0 0 1px #ff9c8a99,0 0 0 1px #06151acc,0 0 8px #e0583f88}
@media (prefers-reduced-motion:no-preference){html[data-hud=phone] #play-hud .player-panel[data-low=true] .health-track{animation:vitals-low .8s ease-in-out infinite alternate}}
@keyframes vitals-low{to{box-shadow:inset 0 0 0 1px #ffc1b3cc,0 0 0 1px #06151acc,0 0 12px #ff6b52cc}}
html[data-hud=phone] #play-hud .xp-track{display:none}
html[data-hud=phone] #play-hud .gold{margin-top:1px;font-size:12px;line-height:14px;text-shadow:0 1px 2px #000}
/* Narrow phones (568-619px wide): no portrait and ring; the strip becomes a pill, the level sits after the name and the XP
   the ring showed comes back as a slim gold line under the HP bar (in the ring's colours). The pill stays the panel's
   height (2 + 14 + 1 + 13 + 2 + 2 + 14 + 2 = 50 = 42px + 8px at k 1). */
@media (max-width:619px){
 html[data-hud=phone] #play-hud .player-panel>img,html[data-hud=phone] #play-hud .player-panel::before,html[data-hud=phone] #play-hud .gold small{display:none}
 html[data-hud=phone] #play-hud .player-vitals{margin-left:0;padding:2px 10px;border-radius:12px;background:linear-gradient(90deg,#04131af2,#04131ad9)}
 html[data-hud=phone] #play-hud #level{position:static;transform:none;margin-left:auto;padding:0 4px;line-height:13px}
 html[data-hud=phone] #play-hud .xp-track{display:block;height:2px;margin-top:2px;border-radius:1px;overflow:hidden;background:#26413f}
 html[data-hud=phone] #play-hud .xp-track i{background:#f6d995}
 html[data-hud=phone] #play-hud .gold{margin-top:0}
}

/* Floating joystick: rests bottom-left, jumps to wherever the thumb lands on the left half. */
html[data-hud=phone] #play-hud #joystick{display:block;position:absolute;left:calc(var(--sl) + 18px);bottom:calc(var(--sb) + 14px);top:auto;right:auto;width:calc(104px * var(--k));height:calc(104px * var(--k));border:1px solid #d9c48a59;border-radius:50%;background:radial-gradient(circle,#173c4533 0 55%,#173c4599 70%,#dfbc7426 71%,#0000 73%);opacity:.72;touch-action:none;transition:opacity .15s}
html[data-hud=phone] #play-hud #joystick.floating{opacity:1;transition:none}
html[data-hud=phone] #play-hud #joystick i{left:50%;top:50%;width:calc(44px * var(--k));height:calc(44px * var(--k));margin:calc(-22px * var(--k)) 0 0 calc(-22px * var(--k));border:1px solid #efdcaab3;background:radial-gradient(circle at 40% 35%,#9fd9c4cc,#3f7f73cc)}
html[data-hud=phone] #play-hud #joystick span{display:none}

/* Action cluster: box 320x216 (x --k) anchored bottom-right; attack centre at (278,174), skills on radius 130
   at 180°, 152°, 115° and 87° (no two button boxes touch); H and F along the bottom edge. The box is measured by vfx-juice measureHud(). */
html[data-hud=phone] #play-hud .actions{display:block;position:absolute;top:auto;left:auto;right:calc(var(--sr) + 12px);bottom:calc(var(--sb) + 10px);width:calc(320px * var(--k));height:calc(216px * var(--k));max-width:none;gap:0;pointer-events:none}
html[data-hud=phone] #play-hud .actions>*{position:absolute;margin:0;pointer-events:auto}
html[data-hud=phone] #play-hud .actions>.action-divider{display:none}
html[data-hud=phone] #play-hud .action{padding:0;border-radius:50%;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html[data-hud=phone] #play-hud .action>span,html[data-hud=phone] #play-hud .action>kbd,html[data-hud=phone] #play-hud .attack-button>kbd{display:none}
html[data-hud=phone] #play-hud .action:active,html[data-hud=phone] #play-hud .attack-button:active{transform:scale(.95)}
html[data-hud=phone] #play-hud .cooldown{border-radius:50%;font-size:calc(18px * var(--k))}
html[data-hud=phone] #play-hud .skill{width:calc(54px * var(--k));height:calc(54px * var(--k));background:radial-gradient(circle at 50% 35%,#24545a,#0b2229 72%);border:2px solid #9fc7b8a6;box-shadow:0 0 0 3px #06151ab3,0 4px 12px #0009}
html[data-hud=phone] #play-hud .skill img{width:80%;height:80%;border-radius:50%;object-fit:cover}
html[data-hud=phone] #play-hud .skill[data-skill="0"]{left:calc(121px * var(--k));top:calc(147px * var(--k))}
html[data-hud=phone] #play-hud .skill[data-skill="1"]{left:calc(136.2px * var(--k));top:calc(86px * var(--k))}
html[data-hud=phone] #play-hud .skill[data-skill="2"]{left:calc(196.1px * var(--k));top:calc(29.2px * var(--k))}
html[data-hud=phone] #play-hud .skill[data-skill="3"]{left:calc(253.8px * var(--k));top:calc(13.2px * var(--k));width:calc(62px * var(--k));height:calc(62px * var(--k));border:3px solid var(--gold);background:radial-gradient(circle at 50% 35%,#5a5230,#2a2716 72%);box-shadow:0 0 0 3px #06151a,0 0 0 5px #dfbc74b3,0 0 18px #dfbc7466}
html[data-hud=phone] #play-hud .skill[data-skill="3"].cooling{box-shadow:0 0 0 3px #06151a,0 0 0 5px #dfbc7466}
html[data-hud=phone] #play-hud .ultimate-label{top:-9px;padding:0 6px;font-size:11px;line-height:15px;z-index:1}
html[data-hud=phone] #play-hud #attack{left:calc(236px * var(--k));top:calc(132px * var(--k));width:calc(84px * var(--k));height:calc(84px * var(--k));border-width:3px;box-shadow:0 0 0 4px #102630b3,0 6px 18px #000a}
html[data-hud=phone] #play-hud #attack>span{font-size:calc(28px * var(--k))}
html[data-hud=phone] #play-hud #attack strong{font-size:12px}
html[data-hud=phone] #play-hud #basic-charge{top:-11px;font-size:11px}
html[data-hud=phone] #play-hud .utility-action{width:calc(48px * var(--k));height:calc(48px * var(--k));top:calc(168px * var(--k))}
html[data-hud=phone] #play-hud .utility-action img{width:64%;height:64%}
html[data-hud=phone] #play-hud #dash{left:calc(61px * var(--k))}
html[data-hud=phone] #play-hud #heal{left:calc(3px * var(--k))}
/* ยกเลิก sits in the top-right corner (over the menu buttons while a skill is held), out of every normal aim: each skill
   centre is more than AIM.maxDrag + AIM.cancelPad + 20px away, and it stays above the toast row and bot status
   (tests/controls.test.mjs reads these numbers). */
html[data-hud=phone] #play-hud #aim-cancel{position:fixed;z-index:20;top:calc(var(--st) + 2px);right:calc(var(--sr) + 8px);left:auto;bottom:auto;pointer-events:none;width:52px;height:52px;background:#2a1414f2}