/* Mobile UX (2026-10-29): touch controls, a phone fight HUD, the rotate prompt and cards that fit short screens.
   Loaded after cerberus.css. Everything touch-only hangs off body.touch, which cerberus-touch.js sets on coarse
   pointers or the first touch (never for mouse users). The short-height card rules apply to desktop windows too. */
:root{--st:env(safe-area-inset-top,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px)}

/* ---- Touch layer ---- */
#touchControls{position:fixed;inset:0;z-index:4;display:none;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.touch.fighting #touchControls{display:block}
.touchZone{position:absolute;top:0;bottom:0;width:50%;pointer-events:auto;touch-action:none}
.touchZone[data-zone=move]{left:0}
.touchZone[data-zone=look]{right:0}
/* A faint resting stick shows where the thumb goes; the real one appears wherever the thumb lands. */
.touchZone[data-zone=move]::after{content:"";position:absolute;left:calc(46px + var(--sl));bottom:calc(34px + var(--sb));width:96px;height:96px;border-radius:50%;border:2px dashed #b8fff233;transition:opacity .15s}
#touchControls:has(.touchStick:not([hidden])) .touchZone[data-zone=move]::after{opacity:0}
.touchStick{position:absolute;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:2px solid #b8fff266;background:radial-gradient(circle,#0b1a2433,#0b1a2477);pointer-events:none}
.touchStick[hidden]{display:none}
.touchStick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#b8fff2b0;box-shadow:0 2px 10px #0008}
.touchStick[data-run=true]{border-color:#ffd18baa}
.touchStick[data-run=true] i{background:#ffd18bd0}
.touchButton{--s:56px;position:absolute;width:var(--s);height:var(--s);display:grid;place-items:center;padding:0;margin:0;border-radius:50%;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;
  background:#0b1a24b0;border:2px solid #b8fff277;color:#e8fff8;font:800 11px system-ui,sans-serif;letter-spacing:.08em;text-shadow:0 1px 2px #000;box-shadow:0 3px 12px #0006;transition:transform .06s,background .06s}
.touchButton[hidden]{display:none}
.touchButton[data-held=true]{transform:scale(.92);background:#95e7d7d0;color:#0b1a24;text-shadow:none}
.touchButton[data-touch=fire]{--s:88px;right:calc(22px + var(--sr));bottom:calc(22px + var(--sb));border-color:#ffd18bcc;font-size:13px}
.touchButton[data-touch=fire][data-held=true]{background:#ffd18be0}
.touchButton[data-touch=jump]{--s:64px;right:calc(124px + var(--sr));bottom:calc(14px + var(--sb))}
.touchButton[data-touch=dodge]{--s:60px;right:calc(30px + var(--sr));bottom:calc(122px + var(--sb))}
.touchButton[data-touch=dodge][data-ready=false]{opacity:.5}
.touchButton[data-touch=ultimate]{--s:56px;right:calc(112px + var(--sr));bottom:calc(96px + var(--sb));background:conic-gradient(#c79bffb0 var(--fill,0%),#0b1a24b0 0);border-color:#c79bff99}
.touchButton[data-touch=ultimate][data-ready=true]{background:#ffd25ed8;border-color:#fff4c4;color:#2a1a04;text-shadow:none;box-shadow:0 0 16px #ffd25e99;animation:touchPulse .9s ease-in-out infinite alternate}
.touchButton[data-touch=pause]{--s:40px;left:calc(10px + var(--sl));top:calc(10px + var(--st));border-radius:10px;font-size:13px}
.touchContext{--s:58px;width:auto;min-width:120px;padding:0 18px;border-radius:29px;right:calc(186px + var(--sr));bottom:calc(104px + var(--sb));border-color:#fff4c4;background:#3a2410d8;color:#fff4c4;font-size:13px;letter-spacing:.14em;animation:touchPulse .7s ease-in-out infinite alternate}
.touchContext[data-kind=counter]{border-color:#8ff5e3;color:#8ff5e3;background:#0d3a3ad8}
.touchContext[data-kind=revive]{border-color:#ffe6a8;background:#3a3210d8;color:#ffe6a8}
/* Jump on its back: the one-off big moment of a stagger, so it is the biggest button on the screen, just left of
   the thumb cluster (clear of the boss), with an up arrow and a strong gold pulse. */
.touchContext[data-kind=mount]{--s:68px;grid-auto-flow:column;min-width:190px;border-radius:34px;right:calc(186px + var(--sr));bottom:calc(150px + var(--sb));border-width:3px;border-color:#ffe08a;background:linear-gradient(180deg,#b7781ef0,#6a3a0cf0);color:#fff8de;font-size:15px;letter-spacing:.1em;animation:touchJumpOn .55s ease-in-out infinite alternate}
.touchContext[data-kind=mount]::before{content:'⤒';font-size:24px;margin-right:10px;line-height:1}
@keyframes touchJumpOn{from{box-shadow:0 0 0 0 #ffe08a00;transform:translateY(0)}to{box-shadow:0 0 0 8px #ffe08a33,0 0 30px #ffe08acc;transform:translateY(-4px)}}
@keyframes touchPulse{to{box-shadow:0 0 22px #fff4c477}}
/* Downed in a raid: only pause stays (a tap on the arena changes who you watch). */
#touchControls[data-down=true] .touchButton:not([data-touch=pause]){display:none}

/* ---- Phone fight HUD: vitals and clock up top, a compact boss bar, the melee meter between the thumbs ---- */
body.touch.fighting header{top:calc(8px + var(--st));width:min(360px,44vw)}
body.touch.fighting header h1,body.touch.fighting header>.eyebrow{display:none}
body.touch.fighting #phase{font-size:10px;margin-top:4px}
body.touch.fighting #lockStatus{top:calc(44px + var(--st));font-size:10px;width:auto;max-width:44vw}
body.touch.fighting footer{left:calc(58px + var(--sl));right:auto;top:calc(10px + var(--st));bottom:auto;gap:10px;align-items:center}
body.touch.fighting footer>div{flex:0 0 130px;width:130px}
body.touch.fighting footer .health{margin-top:4px}
body.touch.fighting footer p,body.touch.fighting #ultimateMeter{display:none}
body.touch.fighting #clock{font-size:14px}
body.touch.fighting .objective{left:calc(12px + var(--sl));top:calc(58px + var(--st));bottom:auto;width:200px;padding:6px 10px;margin:0}
body.touch.fighting .objective .eyebrow,body.touch.fighting .objective .chips{display:none}
body.touch.fighting .objective p{font-size:11px;margin:0;line-height:1.35}
body.touch.fighting .weapons{left:50%;right:auto;bottom:calc(8px + var(--sb));transform:translateX(-50%);width:min(230px,30vw);max-width:none;padding:6px 8px;pointer-events:none;background:#10202c99}
body.touch.fighting .weapons>div:not(#meleeQueue),body.touch.fighting #weaponMelee{display:none}
body.touch.fighting #meleeQueue{padding:6px 8px;margin:0 0 4px}
body.touch.fighting .meleeMeterFoot{display:none}
body.touch.fighting #meleeSegments{margin:5px 0 0}
body.touch.fighting .weapons p{margin:2px 0 0;font-size:9px}
body.touch.fighting .power{top:calc(40px + var(--st));right:calc(12px + var(--sr));bottom:auto;width:170px;padding:.4rem .6rem;font-size:11px}
body.touch.fighting #tell{top:26%;font-size:15px;max-width:60vw}
body.touch.fighting #hitChain{right:auto;left:58%;top:24vh}
body.touch.fighting #hitChain b{font-size:32px}
body.touch #mountPrompt{display:none}
body.touch #counterPrompt span{display:none}
body.touch #counterPrompt{top:42%}
body.touch.fighting #reviveHelp{bottom:auto;top:36%;font-size:12px}
body.touch.fighting #coopPanel{top:calc(100px + var(--st));left:calc(8px + var(--sl));pointer-events:none;max-width:200px}

/* ---- Upright phones: a rotate prompt over the fight; menus and results stay usable upright ---- */
#rotatePrompt{display:none}
@media(orientation:portrait){
  body.touch.fighting #rotatePrompt{display:grid;place-content:center;justify-items:center;gap:10px;position:fixed;inset:0;z-index:12;padding:24px;text-align:center;background:#06111bf2;color:#f4f3e8}
  body.touch.fighting #rotatePrompt strong{font-size:22px}
  body.touch.fighting #rotatePrompt span{font-size:13px;color:#b7cad1;max-width:28ch;line-height:1.5}
  .rotatePhone{width:46px;height:78px;border:3px solid #95e7d7;border-radius:9px;margin-bottom:10px;animation:rotatePhone 1.8s ease-in-out infinite}
}
@keyframes rotatePhone{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media(prefers-reduced-motion:reduce){.touchContext,.touchContext[data-kind=mount],.touchButton[data-touch=ultimate][data-ready=true],.rotatePhone{animation:none}}
body:not(.touch) #hapticsSetting,#hapticsSetting[hidden]{display:none}
#haptics{background:#142e3c;color:#d9f9ef;border:1px solid #6d9d9c;padding:5px;margin-top:6px}

/* ---- Cards ---- */
/* Results: Retry spans the card. The raid button beside it is display:none here, not [hidden], so the character
   select's two-column rule used to leave Retry at half width. */
.card[data-mode=results]>#start{grid-column:1/-1}

/* A card taller than the window used to centre into negative space, cutting off its top (the squad panel then sat
   over the title). Auto margins centre it only while it fits; otherwise it starts at the top and the veil scrolls. */
#veil{align-items:start}
#veil>.card{margin-block:auto}

/* Short screens (phones in landscape, short desktop windows): the card uses the page's scroll, not its own. */
@media(max-height:560px){
  #veil{padding:calc(6px + var(--st)) 0 calc(6px + var(--sb));place-items:start center}
  .card,.crewCard{max-height:none;overflow:visible}
  .crewCard{width:min(940px,calc(100vw - 16px - var(--sl) - var(--sr)));padding:12px 16px;margin-left:auto;margin-right:auto}
  .crewCard h2{font-size:22px;margin:2px 0}
  .crewCard>#cardBody{font-size:11px;margin:2px 0 8px}
  .hunterPicker{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}
  .hunterShowcase{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .hunterShowcase #hunterPreview{flex:none;min-height:0;height:170px}
  .hunterBio{padding:8px}
  .hunterBio h4{font-size:20px}
  .hunterBio small{display:none}
  .hunterCards{grid-template-columns:repeat(6,1fr);gap:6px}
  .hunterCard img{height:58px}
  .hunterCard>span{padding:4px 6px}
  .hunterCard strong{font-size:11px}
  .crewCard .hunterCard small{display:none}
  .hunterLoadout{margin-top:8px}
  .hunterLoadout>div{grid-template-columns:repeat(4,1fr);gap:5px}
  .crewCard .hunterLoadout button{padding:5px 7px}
  .crewCard .hunterLoadout button small,.hunterLoadout>small{display:none}
  .crewCard>button{padding:10px;margin:8px 0 4px}
  .crewCard>a,.crewCard>small{margin-top:4px}
  #coopPanel{top:calc(6px + var(--st));left:calc(6px + var(--sl));padding:6px 9px;width:auto;max-width:220px}
  #veil>.crewCard{margin-top:40px}
  /* Results: replay beside the grade, the stats in rows of three or six, buttons side by side. */
  .card[data-mode=results]{width:min(720px,calc(100vw - 16px));padding:12px 18px}
  .card[data-mode=results] h2{font-size:22px;margin:2px 0}
  .card[data-mode=results] .results{display:grid;grid-template-columns:auto 1fr;align-items:start}
  .card[data-mode=results] .results>*{grid-column:1/-1}
  .card[data-mode=results] #resultsReplay{grid-column:1;grid-row:1/3;max-width:180px;margin:6px 14px 0 0}
  .card[data-mode=results] .resultHead{grid-column:2;margin:6px 0 0}
  .card[data-mode=results] .resultStats{grid-column:2;grid-template-columns:repeat(3,1fr);gap:4px;margin:6px 0}
  .resultStats div{padding:4px 7px}
  .resultStats dd{font-size:15px}
  .grade{flex-basis:44px;height:44px;font-size:26px}
  .card[data-mode=results]>#start{grid-column:1;margin:8px 0 4px}
  .card[data-mode=results] #changeHunter{grid-column:2;margin:8px 0 4px}
}
@media(max-height:560px) and (min-width:700px){
  .card[data-mode=results] .resultStats{grid-template-columns:repeat(6,1fr)}
}
/* Upright phones: one column, the hunters in rows of three, raid and solo buttons stacked. */
@media(max-width:520px){
  .crewCard{padding:14px;width:calc(100vw - 16px - var(--sl) - var(--sr))}
  .crewCard h2{font-size:24px}
  .hunterCards{grid-template-columns:repeat(3,1fr);gap:6px}
  .hunterCard img{height:68px}
  .hunterCard strong{font-size:11px}
  .hunterShowcase #hunterPreview{flex:none;min-height:0;height:170px}
  .hunterBio small{display:none}
  .hunterLoadout>div{grid-template-columns:1fr 1fr}
  .crewCard>#raidStart:not([hidden]),.crewCard>#raidStart:not([hidden])~#start{grid-column:1/-1}
  #veil>.crewCard{margin-top:44px}
}

/* iPhone: how to get full screen (Safari only allows it for an installed home-screen app) */
.homeScreenTip{margin:8px 0 0;font-size:12px;line-height:1.45;color:#b7cad1}