/* v0.77.0 · Phone mode (phone-hud.js). Loaded last: everything here applies only to #gameScreen.phone.
   v0.80.0 · the playfield stays clear around the hero:
   - ONE slim strip on the top edge (#phoneStrip): vitals · boss bar + phase · objective · ping · the tabs (icons);
   - the encounter's intro is a banner under the strip that fades (#phoneBanner);
   - speech and chat are subtitles near the bottom edge (portrait: over the controls; landscape: between them);
   - landscape: the controls stand at the two sides, the strip is a single row.
   Pixel frames, whole pixels, the bitmap font, no blur. Safe areas (notch, home bar, a home-screen app's status bar). */
#gameScreen.phone{--ph-ink:#0e0b17;--ph-panel:#151021;--ph-gold:#ecc25a;--ph-ivory:#f2e7c9;--ph-dim:#b9ab8c;--ph-line:#5c4630;
 --ph-safe-t:env(safe-area-inset-top,0px);--ph-safe-l:env(safe-area-inset-left,0px);--ph-safe-r:env(safe-area-inset-right,0px);--ph-safe-b:env(safe-area-inset-bottom,0px);
 --ph-strip:36px;--ph-ctl:calc(164px + env(safe-area-inset-bottom,0px));touch-action:none}
body.phoneMode{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------------------------------------------------------------- what folds away into the tabs (or the strip) */
#gameScreen.phone #packPanel,#gameScreen.phone #nearbyPanel,#gameScreen.phone #worldDock,#gameScreen.phone #hudPurse,
#gameScreen.phone #zoneContainer,#gameScreen.phone #pauseBtn,#gameScreen.phone #chatPanel,#gameScreen.phone .cameraDock,
#gameScreen.phone #mapZoom,#gameScreen.phone #bossHud,#gameScreen.phone #mechanicHud,#gameScreen.phone .gameBottom{display:none!important}
#gameScreen.phone[data-sheet="map"] #mapZoom:not([hidden]){display:flex!important}
#gameScreen.phone #gameHeader{display:contents!important}

/* ---------------------------------------------------------------- the strip */
#phoneStrip,#phoneBanner,#phoneHint{display:none}
#gameScreen.phone #phoneStrip:not([hidden]){position:absolute;z-index:40;left:0;right:0;top:0;box-sizing:border-box;display:grid;align-items:center;
 grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"vit net tabs" "boss boss boss" "goal goal goal";column-gap:6px;
 padding:calc(3px + var(--ph-safe-t)) calc(6px + var(--ph-safe-r)) 3px calc(6px + var(--ph-safe-l));
 background:#100c18eb;box-shadow:0 1px 0 var(--ph-line),0 2px 0 #0b0812b0;color:var(--ph-ivory);font:8px/1 var(--pixel);letter-spacing:.06em;
 pointer-events:none;-webkit-font-smoothing:none;image-rendering:pixelated}
#gameScreen.phone #phoneStrip>*{min-width:0}
/* vitals: two hairline-framed bars (health over ability) and the draughts */
#gameScreen.phone #phoneVitals{grid-area:vit;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:10px 10px;gap:2px 6px;align-items:center;max-width:240px}
#gameScreen.phone.inHub #phoneVitals{display:none}
#phoneVitals .pvRow{position:relative;height:10px;background:#0e0b17;box-shadow:0 0 0 1px #3e3946;overflow:hidden}
#phoneVitals .pvRow i{position:absolute;left:0;top:0;bottom:0;width:0;background:#6cc47b;box-shadow:inset 0 1px 0 #a6e6ae,inset 0 -1px 0 #3f8a4e;transition:width .12s steps(3)}
#phoneVitals .pvAb i{background:#5f9fe6;box-shadow:inset 0 1px 0 #a9d6ff,inset 0 -1px 0 #3c6aa6}
#phoneVitals[data-state="ready"] .pvAb i{background:#8cc4fb}
#phoneVitals .pvRow span{position:relative;display:block;padding:0 4px;font:8px/10px var(--pixel);white-space:nowrap;overflow:hidden;text-overflow:clip;color:#fffaf0;text-shadow:1px 1px 0 #0e0b17}
#phoneVitals .pvHp{grid-column:1;grid-row:1}#phoneVitals .pvAb{grid-column:1;grid-row:2}
#phoneVitals .pvPot{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:3px;color:#f3c0b8;white-space:nowrap}
#phoneVitals .pvPot b{width:5px;height:8px;background:#d65a5a;box-shadow:0 -2px 0 -1px #f2e7c9,1px 0 0 #8e2f3b}
#phoneVitals .pvPot:has(span:empty){display:none}
/* the place (hubs) shares the vitals' cell */
#gameScreen.phone .psPlace{grid-area:vit;display:none;font:10px/1 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--ph-gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px 0 #0e0b17}
#gameScreen.phone.inHub .psPlace:not(:empty){display:block}
/* the ping (the real #netChip, moved in by phone-hud.js) */
#gameScreen.phone .psNet{grid-area:net;display:flex;align-items:center}
body.phoneMode #phoneStrip #netChip{position:static;left:auto;top:auto;transform:none;padding:0;gap:4px;background:none;border:0;box-shadow:none;font-size:8px;line-height:8px;z-index:auto}
/* the tabs: icons only, quiet; they step back while the thumbs are busy in a fight */
#gameScreen.phone #phoneBar:not([hidden]){grid-area:tabs;position:static;display:flex;align-items:center;gap:2px;margin:0;padding:0 0 0 6px;box-shadow:-1px 0 0 #3e3946;pointer-events:auto;transition:opacity .25s steps(3)}
#gameScreen.phone #phoneBar button{position:relative;display:grid;place-items:center;width:30px;height:26px;min-width:0;margin:0;padding:0;border:0!important;border-image:none!important;border-radius:0!important;
 background:transparent!important;color:#cdbf9f;box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#gameScreen.phone #phoneBar button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#gameScreen.phone #phoneBar button svg{width:12px;height:12px}
#gameScreen.phone #phoneBar button:active{background:#2a2140!important}
#gameScreen.phone #phoneBar button[aria-pressed="true"]{background:#2a2140!important;color:#fff3c4;box-shadow:inset 0 -2px 0 var(--ph-gold)!important}
#gameScreen.phone #phoneBar button[hidden]{display:none}
#gameScreen.phone #phoneBar button b{position:absolute;top:1px;right:1px;min-width:9px;height:9px;padding:0 2px;box-sizing:border-box;background:#ec8f8c;color:#0e0b17;font:8px/9px var(--pixel);text-align:center;box-shadow:0 0 0 1px #0e0b17}
#gameScreen.phone #phoneBar button b[hidden]{display:none}
/* a narrow phone (iPhone SE): the ping keeps its coloured bars, the number yields its room to the vitals */
@media (max-width:389px){body.phoneMode #phoneStrip #netChip:is([data-q=good],[data-q=fair],[data-q=poor],[data-q=bad]) span{display:none}#gameScreen.phoneTall #phoneBar button{width:28px}}
#gameScreen.phone.phoneBusy:not(.inHub) #phoneBar,#gameScreen.phone.phoneBusy:not(.inHub) .psNet{opacity:.42}
/* the boss: a second, slim row: its name and phase over a 5-px bar with the phase marks */
#gameScreen.phone .psBoss{grid-area:boss;display:flex;flex-direction:column;gap:3px;padding:4px 0 1px}
#gameScreen.phone .psBoss[hidden]{display:none}
#gameScreen.phone .psBoss small{font:8px/1 var(--pixel);letter-spacing:.12em;text-transform:uppercase;color:#f0d9b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px 0 #0e0b17}
#gameScreen.phone .psBossBar{position:relative;height:5px;background:#0e0b17;box-shadow:0 0 0 1px #6b3a40}
#gameScreen.phone .psBossBar i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,#cf5a64 0 6px,#a3304a 6px 7px);transition:width .15s steps(3)}
#gameScreen.phone .psBossBar:after{content:"";position:absolute;inset:-1px 0;pointer-events:none;
 background:linear-gradient(to right,transparent calc(var(--phase-stop-a,200%) - 1px),#f8ebce calc(var(--phase-stop-a,200%) - 1px) var(--phase-stop-a,200%),transparent var(--phase-stop-a,200%)),
 linear-gradient(to right,transparent calc(var(--phase-stop-b,200%) - 1px),#f8ebce calc(var(--phase-stop-b,200%) - 1px) var(--phase-stop-b,200%),transparent var(--phase-stop-b,200%))}
#gameScreen.phone .psBoss[data-phase="2"] .psBossBar i{background:repeating-linear-gradient(90deg,#e08a5a 0 6px,#b25a34 6px 7px)}
#gameScreen.phone .psBoss[data-phase="3"] .psBossBar i{background:repeating-linear-gradient(90deg,#ce91ca 0 6px,#9a5a98 6px 7px)}
/* the objective: one quiet line (progress only; the intro text was the banner) */
#gameScreen.phone .psGoal{grid-area:goal;display:flex;gap:6px;align-items:baseline;padding:4px 0 1px;white-space:nowrap;overflow:hidden}
#gameScreen.phone .psGoal[hidden]{display:none}
#gameScreen.phone .psGoal b{flex:none;font:8px/1 var(--pixel);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ph-gold)}
#gameScreen.phone .psGoal b:before{content:"";display:inline-block;width:3px;height:3px;margin:0 5px 1px 1px;background:var(--ph-gold);box-shadow:0 0 0 1px #6b5132}
#gameScreen.phone .psGoal span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ph-dim)}
/* landscape: one row, the middle cell holds the boss, the objective or the place */
#gameScreen.phoneWide #phoneStrip:not([hidden]){grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"vit mid net tabs" "boss boss boss boss";column-gap:10px;padding-top:calc(2px + var(--ph-safe-t));padding-bottom:2px}
#gameScreen.phoneWide #phoneVitals{grid-template-columns:112px 136px auto;grid-template-rows:12px;max-width:none}
#gameScreen.phoneWide #phoneVitals .pvRow{height:12px}
#gameScreen.phoneWide #phoneVitals .pvRow span{line-height:12px}
#gameScreen.phoneWide #phoneVitals .pvAb{grid-column:2;grid-row:1}
#gameScreen.phoneWide #phoneVitals .pvPot{grid-column:3;grid-row:1}
#gameScreen.phoneWide .psGoal{grid-area:mid;padding:0;max-width:420px;justify-self:center;width:100%}
/* the boss: a thin second row, its name and phase on the left of a long bar */
#gameScreen.phoneWide .psBoss{flex-direction:row;align-items:center;gap:10px;padding:3px 0 1px}
#gameScreen.phoneWide .psBoss small{flex:0 1 auto;max-width:55%}
#gameScreen.phoneWide .psGoal b{display:none}
#gameScreen.phoneWide .psBossBar{flex:1 1 auto;min-width:60px}
#gameScreen.phoneWide .psGoal{justify-content:center}
#gameScreen.phoneWide.inHub .psPlace:not(:empty){grid-area:vit}

/* ---------------------------------------------------------------- the encounter banner: in, a few seconds, out */
#gameScreen.phone #phoneBanner:not([hidden]){position:absolute;z-index:36;left:50%;top:calc(var(--ph-strip) + 10px);transform:translateX(-50%);box-sizing:border-box;
 display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;max-width:min(360px,calc(100% - 32px));padding:3px 10px;text-align:center;
 border:8px solid transparent;border-image:var(--frame) 8 fill / 8px / 0 stretch;pointer-events:none;color:var(--ph-ivory)}
#phoneBanner strong{font:10px/1.2 var(--pixel);font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ph-gold);text-shadow:1px 1px 0 #0e0b17}
#phoneBanner span{font:8px/1.5 var(--pixel);letter-spacing:.05em;color:var(--ph-dim)}
#phoneBanner span:empty{display:none}
#phoneBanner.psIn{animation:phBannerIn .24s steps(4) both}
#phoneBanner.psOut{animation:phBannerOut .4s steps(4) both}
@keyframes phBannerIn{from{opacity:0;margin-top:-6px}to{opacity:1;margin-top:0}}
@keyframes phBannerOut{from{opacity:1}to{opacity:0;margin-top:-6px}}

/* ---------------------------------------------------------------- subtitles: speech and chat near the bottom edge */
#gameScreen.phone #chatFeed{position:absolute!important;left:calc(16px + var(--ph-safe-l))!important;right:calc(16px + var(--ph-safe-r))!important;top:auto!important;
 bottom:calc(var(--ph-ctl))!important;width:auto!important;max-width:none!important;max-height:none!important;transform:none!important;z-index:19;
 display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;overflow:visible;pointer-events:none;text-align:center}
#gameScreen.phone #chatFeed[hidden]{display:none!important}
#gameScreen.phone #chatFeed .chatToast{max-width:100%;box-sizing:border-box;padding:3px 8px!important;background:#0e0b17b8!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#gameScreen.phone #chatFeed .chatToast:nth-last-child(n+3){display:none}
#gameScreen.phone #chatFeed .chatLine{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-size:9px!important;line-height:14px!important;text-shadow:1px 1px 0 #0e0b17!important}
#gameScreen.phone #chatFeed .chatLine strong{margin-right:6px;color:var(--ph-gold);font-weight:400}
#gameScreen.phone #chatFeed .loreLine span{font-size:12px!important;line-height:14px!important}
#gameScreen.phoneTall:has(#interaction:not([hidden])) #chatFeed{bottom:calc(var(--ph-ctl) + 58px)!important}
#gameScreen.phone[data-sheet]:not([data-sheet=""]) #chatFeed{display:none!important}

/* ---------------------------------------------------------------- other overlays tuck under the strip */
#gameScreen.phone #teamHud{position:absolute!important;left:calc(6px + var(--ph-safe-l))!important;top:calc(var(--ph-strip) + 8px)!important;z-index:19;transform:scale(.75);transform-origin:left top}
body.phoneMode #toast{top:calc(var(--ph-strip,40px) + 10px)!important;bottom:auto!important;max-width:min(340px,calc(100vw - 32px))!important;padding:2px 10px!important;font-size:9px!important;line-height:1.5!important;text-align:center}
body.phoneMode:has(#phoneBanner:not([hidden])) #toast{top:calc(var(--ph-note,100px) + 6px)!important}

/* ---------------------------------------------------------------- the one-time Add to Home Screen card (iOS) */
#gameScreen.phone #phoneHint{position:absolute;z-index:41;left:50%;top:calc(var(--ph-strip) + 10px);transform:translateX(-50%);box-sizing:border-box;display:flex;align-items:center;gap:8px;
 width:max-content;max-width:min(330px,calc(100% - 24px));padding:2px 2px 2px 6px;border:8px solid transparent;border-image:var(--frame) 8 fill / 8px / 0 stretch;
 color:var(--ph-ivory);pointer-events:auto;animation:phBannerIn .24s steps(4) both}
#gameScreen.phone #phoneHint.psOut{animation:phBannerOut .4s steps(4) both}
#phoneHint .phIcon{display:grid;place-items:center;width:24px;height:24px;flex:none;color:#8cc4fb;box-shadow:inset 0 0 0 1px #3e3946}
#phoneHint p{margin:0;display:flex;flex-direction:column;gap:4px}
#phoneHint p b{font:9px/1 var(--pixel);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ph-gold)}
#phoneHint p span{font:8px/1.3 var(--pixel);letter-spacing:.04em;color:var(--ph-dim)}
#phoneHint em{font-style:normal;color:var(--ph-ivory)}
#phoneHint button{display:grid;place-items:center;width:28px;height:28px;min-width:0;margin:0;padding:0;border:0!important;background:transparent!important;color:var(--ph-dim);box-shadow:none!important;border-radius:0!important}
#gameScreen.phone #phoneBanner:not([hidden])~#phoneHint{display:none}

/* ---------------------------------------------------------------- the sheet */
#gameScreen.phone #phoneSheet{position:absolute;z-index:38;left:var(--phone-sheet-x);top:var(--phone-sheet-y);width:var(--phone-sheet-w);height:var(--phone-sheet-h);
 display:flex;flex-direction:column;box-sizing:border-box;border:12px solid transparent;border-image:var(--frame) 8 fill / 12px / 0 stretch;background:transparent;
 background:#151021f0;background-clip:padding-box;color:var(--ph-ivory);pointer-events:auto;animation:phoneSheetIn .16s steps(4) both}
#gameScreen.phone #phoneSheet[hidden]{display:none}
#gameScreen.phoneWide #phoneSheet{left:auto;right:calc(6px + var(--ph-safe-r))}
@keyframes phoneSheetIn{from{transform:translateY(12px);opacity:.4}to{transform:none;opacity:1}}
#gameScreen.phoneWide #phoneSheet{animation-name:phoneSheetInSide}
@keyframes phoneSheetInSide{from{transform:translateX(16px);opacity:.4}to{transform:none;opacity:1}}
#gameScreen.phone #phoneSheet>header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;height:28px!important;margin:-2px 0 6px;padding:0!important;border:0!important;background:none!important;position:static!important}
#gameScreen.phone #phoneSheet>header strong{font:11px/1 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--ph-gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gameScreen.phone #phoneClose{width:30px;height:28px;min-width:0;margin:0;padding:0;display:grid;place-items:center;border:6px solid transparent!important;border-image:var(--frame-btn) 8 fill / 6px / 0 stretch!important;background:transparent!important;color:#e8dcc0;border-radius:0!important;box-shadow:none!important}
#gameScreen.phone #phoneSheetBody{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;touch-action:pan-y}
/* the Map sheet is a window onto the renderer's own minimap: no fill, just the frame and the header */
#gameScreen.phone #phoneSheet[data-tab="map"]{border-image:none;border:0;background:transparent;pointer-events:none}
#gameScreen.phone #phoneSheet[data-tab="map"]>header{pointer-events:auto;margin:0 0 4px!important;padding:2px 2px 2px 8px!important;height:34px!important;box-sizing:border-box;background:#151021!important;box-shadow:0 0 0 2px #0e0b17,0 0 0 3px #6b5132}

/* panels inside the sheet: static, full width, their own scroll where they have one */
#gameScreen.phone #phoneSheetBody>*{display:block!important;position:static!important;inset:auto!important;transform:none!important;width:auto!important;max-width:none!important;min-width:0!important;max-height:none!important;height:auto!important;margin:0!important;box-shadow:none!important}
#gameScreen.phone #phoneSheetBody>#packPanel{border:0!important;border-image:none!important;background:transparent!important;padding:0!important;overflow:visible!important}
#gameScreen.phone #phoneSheetBody #packBody{max-height:none!important;overflow:visible!important;padding:4px 2px!important}
#gameScreen.phone #phoneSheetBody #equipSlots,#gameScreen.phone #phoneSheetBody #bagSlots,#gameScreen.phone #phoneSheetBody #extraBagSlots{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
#gameScreen.phone #phoneSheetBody .packSlot{aspect-ratio:1!important;height:auto!important;min-height:0!important}
#gameScreen.phone #phoneSheetBody #itemDetail{max-height:none!important;overflow:visible!important;font-size:10px!important;line-height:1.45!important}
#gameScreen.phone #phoneSheetBody>#chatPanel{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;border:0!important;border-image:none!important;background:transparent!important;padding:0!important}
#gameScreen.phone #phoneSheetBody>#chatPanel #chatToggle{display:none!important}
#gameScreen.phone #phoneSheetBody>#chatPanel #chatBody{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0}
#gameScreen.phone #phoneSheetBody>#chatPanel #chatMessages{flex:1 1 auto;height:auto!important;max-height:none!important;min-height:80px;overflow-y:auto}
#gameScreen.phone #phoneSheetBody>#chatPanel .chatCompose input{font-size:16px!important}   /* 16px: iOS never zooms the page into the field */
#gameScreen.phone #phoneSheetBody>#nearbyPanel{border:0!important;border-image:none!important;background:transparent!important;padding:0!important;overflow:visible!important}
#gameScreen.phone #phoneSheetBody>#zoneContainer{border:0!important;border-image:none!important;background:transparent!important;padding:0!important}
#gameScreen.phone #phoneSheetBody>#zoneContainer strong{font-size:18px!important}
#gameScreen.phone #phoneSheetBody>#worldDock,#gameScreen.phone #phoneSheetBody #zoneContainer .worldDock{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important;max-width:none!important}
#gameScreen.phone #phoneSheetBody .worldDock>button{min-height:40px;font-size:10px!important}
#gameScreen.phone #phoneSheetBody .worldDock>button[hidden]{display:none!important}
#gameScreen.phone #phoneSheetBody>#hudPurse{display:flex!important;flex-direction:row;gap:6px}
#gameScreen.phone #phoneSheetBody>#hudPurse .purseTile{flex:1 1 0;width:auto!important;height:64px!important}
#gameScreen.phone #phoneSheetBody>#pauseBtn{width:100%!important;min-height:42px}
#phoneSocial{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#phoneSocial button{min-width:0;min-height:40px;padding:0 2px;font:10px/1 var(--pixel);letter-spacing:.05em;color:#e8dcc0;border:8px solid transparent;border-image:var(--frame-btn) 8 fill / 8px / 0 stretch;background:transparent;border-radius:0;cursor:pointer}
#gameScreen.phoneTall #phoneSocial{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------------------------------------------------------------- the interaction button: big, above the actions */
#gameScreen.phone #interaction:not([hidden]){position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:calc(14px + var(--ph-safe-b))!important;transform:translateX(-50%)!important;width:min(280px,36vw)!important;max-width:none!important;min-width:0!important;padding:0!important;z-index:30}
#gameScreen.phone #interaction #interactBtn{width:100%!important;min-height:44px!important;font-size:10px!important}
#gameScreen.phone #interaction kbd{display:none}
#gameScreen.phoneTall #interaction:not([hidden]){bottom:calc(var(--ph-ctl) + 4px)!important;width:min(300px,calc(100% - 64px))!important}
#gameScreen.phone[data-sheet]:not([data-sheet=""]) #interaction{display:none!important}

/* ---------------------------------------------------------------- touch controls */
#gameScreen.phone #touchPad:not([hidden]){position:absolute!important;left:calc(12px + var(--ph-safe-l))!important;right:calc(12px + var(--ph-safe-r))!important;bottom:calc(12px + var(--ph-safe-b))!important;top:auto!important;height:144px;display:block!important;pointer-events:none;z-index:25}
#gameScreen.phone #joystick{position:absolute!important;left:0!important;bottom:0!important;width:124px!important;height:124px!important;border-radius:50%;background:#0e0b1780;box-shadow:inset 0 0 0 2px #3e3946,inset 0 0 0 5px #0e0b1799;pointer-events:auto;touch-action:none}
#gameScreen.phone #joystick span{position:absolute;left:38px;top:38px;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 3px #ecc25a,0 0 0 2px #0e0b17;background:#ecc25a2e!important;border:0!important;transform-origin:center}
#gameScreen.phone .touchActions{position:absolute!important;right:84px!important;bottom:0!important;left:auto!important;top:auto!important;display:grid!important;grid-template-columns:repeat(2,62px);grid-auto-rows:42px;gap:6px;pointer-events:auto}
#gameScreen.phone .touchActions button,#gameScreen.phone #touchFire{min-width:0!important;margin:0!important;padding:0!important;font:8px/1 var(--pixel)!important;letter-spacing:.06em;color:#f2e7c9;border:8px solid transparent!important;border-image:var(--frame-btn) 8 fill / 8px / 0 stretch!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;opacity:.92}
#gameScreen.phone #touchFire{position:absolute!important;right:0!important;bottom:0!important;width:76px!important;height:90px!important;font-size:10px!important;color:#fff3c4;border-image:var(--frame-hot) 8 fill / 8px / 0 stretch!important;pointer-events:auto}
#gameScreen.phone .touchActions button:active,#gameScreen.phone #touchFire:active{filter:brightness(1.25);opacity:1}
/* landscape: the controls stand at the two sides, smaller, so the middle of the screen is the hero's */
#gameScreen.phoneWide #touchPad:not([hidden]){left:calc(14px + var(--ph-safe-l))!important;right:calc(14px + var(--ph-safe-r))!important;bottom:calc(10px + var(--ph-safe-b))!important;height:112px}
#gameScreen.phoneWide #joystick{width:108px!important;height:108px!important}
#gameScreen.phoneWide #joystick span{left:32px;top:32px;width:44px;height:44px}
#gameScreen.phoneWide .touchActions{right:72px!important;grid-template-columns:repeat(2,54px);grid-auto-rows:38px;gap:4px}
#gameScreen.phoneWide #touchFire{width:66px!important;height:80px!important}
/* subtitles in landscape: the bottom lane between the joystick and the actions */
#gameScreen.phoneWide #chatFeed{left:calc(140px + var(--ph-safe-l))!important;right:calc(204px + var(--ph-safe-r))!important;bottom:calc(10px + var(--ph-safe-b))!important}
#gameScreen.phoneWide #chatFeed .chatToast:nth-last-child(n+2){display:none}
#gameScreen.phoneWide #chatFeed .loreLine span{font-size:11px!important}
#gameScreen.phoneWide.inHub #chatFeed{right:calc(150px + var(--ph-safe-r))!important}
#gameScreen.phoneWide:has(#interaction:not([hidden])) #chatFeed{bottom:calc(62px + var(--ph-safe-b))!important}
/* a sheet open: the right-hand actions are under it in landscape; in portrait the bottom sheet covers the controls */
#gameScreen.phoneWide[data-sheet]:not([data-sheet=""]) .touchActions,#gameScreen.phoneWide[data-sheet]:not([data-sheet=""]) #touchFire{visibility:hidden}
#gameScreen.phoneTall[data-sheet]:not([data-sheet=""]) #touchPad{visibility:hidden}
/* hubs have nothing to fire at: the cluster keeps Dodge, Emote and the interaction button */
#gameScreen.phone.inHub #touchFire,#gameScreen.phone.inHub #touchSkill,#gameScreen.phone.inHub #touchPotion{display:none!important}
#gameScreen.phone.inHub .touchActions{right:0!important}

/* ---------------------------------------------------------------- loot chest and windows on a phone */
#gameScreen.phone #groundLoot:not([hidden]){position:absolute!important;left:50%!important;top:calc(var(--ph-strip) + 6px)!important;bottom:auto!important;transform:translateX(-50%)!important;width:min(360px,calc(100vw - 24px))!important;max-width:none!important;max-height:calc(100dvh - var(--ph-strip) - 170px)!important;overflow-y:auto!important;z-index:35}
body.phoneMode #modal>*{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;overflow:auto!important}
body.phoneMode #app{inset:6px!important}

/* v0.77.0 · the title on a phone held sideways (or any short window): everything, Play included, fits the height */
@media (max-height:520px){
 #titleScreen .titleCopy{top:50%;left:calc(5% + env(safe-area-inset-left,0px));width:min(380px,52vw)}
 .titleEyebrow{font-size:8px;margin:0}
 #titleScreen .titleCopy h1{font-size:56px!important;line-height:.98!important;margin:4px 0 6px!important}   /* half the title's 112: still whole pixels */
 #titleScreen .titleCopy h1 span{margin-top:0!important}
 .titleRule{width:160px}
 #titleScreen .titleLore{font-size:13px!important;line-height:1.35!important;margin:6px 0 10px!important}
 #titleStatus{font-size:9px;margin-top:6px}
 .titleFooter{bottom:8px;font-size:7px}
}
@media (max-height:520px) and (max-width:700px){.titleFooter{display:none}}
/* v0.80.0 · an upright tablet runs the phone layout: its strip, banner and hint draw at twice the size (whole pixels) */
@media (min-width:700px) and (min-height:700px){#gameScreen.phone #phoneStrip,#gameScreen.phone #phoneBanner,#gameScreen.phone #phoneHint{zoom:2}}
/* v0.80.0 · fallen: Respawn Now sits where the interaction button does (bottom centre), never on the strip */
#gameScreen.phone #respawnNow{position:absolute!important;top:auto!important;left:50%!important;bottom:calc(14px + var(--ph-safe-b))!important;transform:translateX(-50%)!important;min-height:44px;z-index:31}
#gameScreen.phoneTall #respawnNow{bottom:calc(var(--ph-ctl) + 4px)!important}
#gameScreen.phone #respawnNow .rsKey{display:none}
#gameScreen.phoneWide:has(#respawnNow:not([hidden])) #chatFeed{bottom:calc(64px + var(--ph-safe-b))!important}