/* Survival Royale - earth pigments: ochre, bone, charcoal, ember. */
:root{
  --ink:#f3e7cf; --ink-dim:#cdbb99; --ink-faint:#9b876a;
  --char:#140f0a; --char-2:#1f1811; --char-3:#2b2118; --line:rgba(243,231,207,0.16);
  --ochre:#d9822b; --ochre-2:#b3611c; --ember:#ff9a3c; --blood:#d6453a; --leaf:#8fb35a; --water:#4fb3c8; --bolt:#f2d24b;
  --glass:rgba(20,14,9,0.62);
  --font-d:'Cinzel', Georgia, serif;
  --font-b:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%; overflow:hidden; background:var(--char); color:var(--ink); font-family:var(--font-b); -webkit-font-smoothing:antialiased; overscroll-behavior:none; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
button, .tbtn, canvas{touch-action:none;}
input,select{user-select:text; -webkit-user-select:text; font:inherit; font-size:16px;}
*::selection{background:transparent;}
input::selection{background:rgba(217,130,43,0.4);}
button{font:inherit; cursor:pointer;}
.hidden{display:none !important;}
#game{position:fixed; inset:0;}
#game canvas{display:block; width:100%; height:100%;}
#buildTag{position:fixed; bottom:4px; right:6px; font:10px monospace; color:rgba(255,255,255,.3); pointer-events:none; z-index:9999;}
#vignette{position:fixed; inset:0; pointer-events:none; z-index:5; background:radial-gradient(ellipse at center, transparent 55%, rgba(10,6,3,0.55) 100%);}
#damageFlash{position:fixed; inset:0; pointer-events:none; z-index:6; opacity:0; background:radial-gradient(ellipse at center, transparent 35%, rgba(170,20,10,0.65) 100%); transition:opacity .5s ease-out;}
#damageFlash.on{opacity:1; transition:none;}

/* ---------- shared bits ---------- */
/* screens start under the MDT Shell's bar (--mdts-h, 0 while it is hidden in a match) */
.screen{position:fixed; inset:0; top:var(--mdts-h, 0px); z-index:40; display:flex; align-items:center; justify-content:center; padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));}
.card{background:linear-gradient(180deg, rgba(38,29,20,0.92), rgba(22,16,11,0.95)); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 20px 50px -20px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,240,210,0.06); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.card h2{font-family:var(--font-d); font-weight:700; letter-spacing:0.5px; margin:0 0 12px; font-size:21px;}
.card h3{margin:0 0 10px; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-faint); font-weight:700;}
.eyebrow{font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:var(--ochre); font-weight:700;}
.btn{border:1px solid var(--line); border-radius:12px; padding:12px 18px; font-weight:700; font-size:14.5px; color:var(--ink); background:rgba(255,240,210,0.06); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .08s, filter .15s;}
.btn:active{transform:scale(0.97);}
.btn.primary{background:linear-gradient(180deg, #f0a24d, var(--ochre) 55%, var(--ochre-2)); color:#231304; border-color:#8e4a12; box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 8px 22px -8px rgba(217,130,43,0.7);}
.btn.big{padding:16px 22px; font-size:17px; width:100%; font-family:var(--font-d); letter-spacing:1px;}
.btn.small{padding:7px 12px; font-size:12.5px;}
.btn:disabled{opacity:0.5;}
.link{background:none; border:0; color:var(--ochre); font-weight:600; padding:0; font-size:13px; text-decoration:underline; text-underline-offset:3px;}
.iconBtn{width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:rgba(255,240,210,0.06); color:var(--ink); font-size:22px; line-height:1; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.row.small{font-size:13px; justify-content:space-between; margin-top:12px;}
.muted{color:var(--ink-faint);}
.error{color:#ff9d8f; font-size:13px; margin:6px 0;}
label{display:block; font-size:12px; color:var(--ink-dim); margin-bottom:10px; font-weight:600;}
label input, label select{display:block; width:100%; margin-top:5px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:rgba(0,0,0,0.3); color:var(--ink);}
label.inline{display:flex; align-items:center; gap:8px; margin:0;}
label.inline select{width:auto; margin:0; padding:6px 8px;}
kbd{font-family:ui-monospace, Menlo, monospace; font-size:11px; background:rgba(255,240,210,0.1); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 6px; color:var(--ink);}

/* ---------- front-end lobby ---------- */
#menu{padding:0; display:block; background:#2a1a12;}
#stage{position:absolute; inset:0;}
#stage canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab;}
.feShade{position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(90deg, rgba(14,9,6,0.72) 0%, rgba(14,9,6,0.15) 38%, transparent 55%, rgba(14,9,6,0.35) 100%),
  linear-gradient(0deg, rgba(14,9,6,0.7) 0%, transparent 32%);}
.feTop{position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:16px; padding:14px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); z-index:2;}
.feTabs{display:flex; gap:4px; margin:0 auto; background:rgba(14,9,6,0.55); border:1px solid var(--line); border-radius:14px; padding:4px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.feTabs button{border:0; background:none; color:var(--ink-dim); font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:1.5px; text-transform:uppercase; padding:9px 18px; border-radius:10px;}
.feTabs button.on{background:linear-gradient(180deg, #f0a24d, var(--ochre)); color:#231304;}
.fePane{position:absolute; z-index:1;}
#feLobby{inset:0; pointer-events:none;}
#feLobby > *{pointer-events:auto;}
.feTitle{position:absolute; left:max(28px, env(safe-area-inset-left)); top:84px; max-width:44vw;}
.gameTitle{font-family:var(--font-d); font-weight:900; font-size:clamp(40px, 6.4vw, 84px); line-height:0.9; margin:12px 0 0; letter-spacing:1px; text-shadow:0 6px 30px rgba(0,0,0,0.6);}
.gameTitle span{display:block; color:var(--ochre); letter-spacing:6px; font-size:0.62em;}
.lastMatch{position:absolute; left:max(28px, env(safe-area-inset-left)); bottom:max(28px, env(safe-area-inset-bottom)); width:min(300px, 40vw); padding:14px 16px;}
.lmPlace{font-family:var(--font-d); font-size:24px; font-weight:700; margin:6px 0 2px; color:var(--ember);}
.lmSub{font-size:13px; color:var(--ink-dim); line-height:1.45;}
.fePlay{position:absolute; right:max(28px, env(safe-area-inset-right)); bottom:max(28px, env(safe-area-inset-bottom)); width:min(320px, 44vw); display:flex; flex-direction:column; gap:10px;}
.fePlay .mode{font-size:13px; color:var(--ink-dim); text-align:right; letter-spacing:.3px;}
.fePlay .mode b{color:var(--ink); text-transform:uppercase; letter-spacing:1.5px;}
.playBtn{font-family:var(--font-d); font-weight:900; font-size:30px; letter-spacing:5px; text-transform:uppercase; padding:18px 22px; border-radius:16px; width:100%;}
.fePlay .row.small{justify-content:space-between; margin:0; background:rgba(14,9,6,0.55); border:1px solid var(--line); border-radius:12px; padding:8px 12px;}
.feName{position:absolute; left:50%; transform:translateX(-50%); bottom:max(22px, env(safe-area-inset-bottom)); z-index:1; font-family:var(--font-d); font-weight:700; letter-spacing:2px; font-size:15px; color:var(--ink); background:rgba(14,9,6,0.55); border:1px solid var(--line); border-radius:999px; padding:6px 16px; pointer-events:none; white-space:nowrap;}
.feName:empty{display:none;}
#feLocker{right:max(18px, env(safe-area-inset-right)); top:76px; bottom:max(18px, env(safe-area-inset-bottom)); width:min(430px, 48vw); display:flex;}
#feLocker.hidden{display:none;}
.lockerCard{overflow-y:auto; width:100%; padding:18px;}
.lockerNote{font-size:12.5px; line-height:1.45; margin:-4px 0 14px;}
.lkGroup{margin-bottom:16px;}
.lkGroup h3{display:flex; justify-content:space-between; align-items:baseline;}
.lkGroup h3 span{color:var(--ink); text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600;}
.lkRow{display:flex; flex-wrap:wrap; gap:8px;}
.lk{position:relative; width:42px; height:42px; border-radius:12px; border:2px solid rgba(243,231,207,0.18); background:#000; padding:0;}
.lk.style{width:auto; min-width:58px; height:36px; padding:0 10px; background:rgba(255,240,210,0.06); color:var(--ink); font-size:12.5px; font-weight:600;}
.lk.on{border-color:var(--ember); box-shadow:0 0 0 2px rgba(255,154,60,0.35);}
.lk.locked{opacity:0.38;}
.lk.locked::after{content:'\1F512'; position:absolute; right:-5px; bottom:-6px; font-size:12px;}
#lockerMsg{font-size:12.5px; min-height:18px;}
#feCareer{right:max(18px, env(safe-area-inset-right)); top:76px; width:min(400px, 48vw); max-height:calc(100% - 100px); overflow-y:auto;}
.record{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:18px;}
.record div{background:rgba(0,0,0,0.25); border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center;}
.record b{display:block; font-family:var(--font-d); font-size:22px; color:var(--ember);}
.record small{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:1px;}
.board ol{margin:0; padding:0 0 0 20px; font-size:14px; line-height:1.9;}
.board li b{float:right; font-variant-numeric:tabular-nums; color:var(--ochre);}
#authCard{position:absolute; z-index:3; right:max(28px, env(safe-area-inset-right)); bottom:max(28px, env(safe-area-inset-bottom)); width:min(360px, 92vw); max-height:calc(100% - 40px); overflow-y:auto; overscroll-behavior:contain;}
#menu.signedOut .feTabs, #menu.signedOut #playCard{display:none;}
@media (max-width:760px), (max-aspect-ratio:1/1){
  .feTop{flex-wrap:wrap; gap:8px 12px;}
  .feTabs{order:3; width:100%; justify-content:center; margin:0;}
  .feTabs button{flex:1; padding:8px 6px; font-size:13px;}
  .feTitle{max-width:none; right:16px; top:70px;}
  .gameTitle{font-size:clamp(34px, 11vw, 60px);}
  .fePlay{left:16px; right:16px; width:auto; bottom:max(16px, env(safe-area-inset-bottom));}
  .fePlay .mode{text-align:center;}
  .lastMatch{display:none;}
  /* Your name already shows top-right; on phones the plinth label
     landed on the Play button, so it's dropped here. */
  .feName{display:none;}
  body.inMenu #srNow{display:none;}
  #feLocker,#feCareer{left:12px; right:12px; width:auto; top:auto; bottom:max(12px, env(safe-area-inset-bottom)); height:50%; max-height:50%;}
  #authCard{left:12px; right:12px; width:auto; bottom:max(12px, env(safe-area-inset-bottom));}
}
.modal{background:rgba(10,7,4,0.6); z-index:60;}
.howCard{max-width:720px; max-height:88vh; overflow-y:auto;}
.howGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; font-size:14px; line-height:1.55; color:var(--ink-dim); margin-bottom:16px;}
.howGrid b{color:var(--ink); display:block;}
.keys{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12.5px; color:var(--ink-dim); margin-bottom:18px;}
@media (max-width:600px){ .howGrid{grid-template-columns:1fr;} }

/* ---------- loading ---------- */
#loading{background:radial-gradient(900px 500px at 50% 40%, #3a2413, var(--char));}
.loadInner{text-align:center; width:min(420px, 90vw);}
.loadTitle{font-family:var(--font-d); font-size:24px; margin:12px 0 18px;}
.loadBar{height:4px; border-radius:4px; background:rgba(255,240,210,0.1); overflow:hidden;}
.loadBar i{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--ochre-2), var(--ember)); transition:width .3s;}

/* ---------- lobby ---------- */
#lobbyHud{position:fixed; inset:0; pointer-events:none; z-index:20;}
.lobbyTop{position:absolute; top:max(16px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); text-align:center; background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:12px 26px 14px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.countdown{font-family:var(--font-d); font-size:44px; font-weight:900; line-height:1; margin:6px 0 4px; font-variant-numeric:tabular-nums;}
.countdown small{display:block; font-family:var(--font-b); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-top:6px;}
.lobbyMeta{font-size:13px; color:var(--ink-dim);}
.lobbyMeta b{color:var(--ember);}
#lobbyList{position:absolute; left:max(16px, env(safe-area-inset-left)); top:50%; transform:translateY(-50%); list-style:none; margin:0; padding:12px 14px; background:var(--glass); border:1px solid var(--line); border-radius:14px; font-size:13.5px; line-height:1.9; min-width:170px; max-height:50vh; overflow:hidden;}
#lobbyList li::before{content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--leaf); margin-right:9px; vertical-align:1px;}
#lobbyList li.me{color:var(--ember); font-weight:700;}
.lobbyTip{position:absolute; bottom:max(20px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); max-width:min(560px, 90vw); text-align:center; font-size:14px; color:var(--ink-dim); background:var(--glass); border:1px solid var(--line); border-radius:12px; padding:10px 16px;}
@media (max-width:700px){ #lobbyList{top:auto; bottom:calc(max(20px, env(safe-area-inset-bottom)) + 70px); transform:none; max-height:24vh;} .countdown{font-size:36px;} }

/* ---------- HUD ---------- */
/* above the touch layer (22), so the hotbar, craft card and minimap always win taps */
#hud{position:fixed; inset:0; pointer-events:none; z-index:23;}
.hudTop{position:absolute; top:max(12px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px;}
.timerPill,.alivePill{background:var(--glass); border:1px solid var(--line); border-radius:12px; padding:6px 12px; display:flex; flex-direction:column; align-items:center; min-width:74px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.timerPill b,.alivePill b{font-family:var(--font-d); font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1;}
.alivePill b{color:var(--ember);}
.lbl{font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-faint); font-weight:800;}
.compass{position:relative; width:min(300px, 34vw); height:34px; overflow:hidden; background:var(--glass); border:1px solid var(--line); border-radius:12px; mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);}
#compassStrip{position:absolute; top:0; left:0; height:100%; white-space:nowrap; font-size:12px; font-weight:800; letter-spacing:1px; color:var(--ink-dim);}
#compassStrip span{position:absolute; top:9px; transform:translateX(-50%);}
#compassStrip span.cd{color:var(--ink); font-size:14px; top:7px;}
#compassStrip span.tick{color:var(--ink-faint); font-weight:400;}
.compassTick{position:absolute; left:50%; top:0; width:2px; height:7px; background:var(--ember); transform:translateX(-50%);}
#minimap{position:absolute; top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); width:150px; height:150px; border-radius:50%; border:2px solid rgba(243,231,207,0.35); box-shadow:0 8px 24px rgba(0,0,0,0.5); pointer-events:auto; background:#1b140d;}
#feed{position:absolute; top:calc(max(12px, env(safe-area-inset-top)) + 164px); right:max(12px, env(safe-area-inset-right)); width:min(290px, 60vw); display:flex; flex-direction:column; gap:6px; align-items:flex-end;}
#feed div{background:var(--glass); border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:12.5px; line-height:1.35; color:var(--ink-dim); animation:feedIn .3s ease-out; max-width:100%;}
#feed div b{color:var(--ink);}
#feed div.death{border-color:rgba(214,69,58,0.45);}
#feed div.win{border-color:var(--ember); color:var(--ink);}
@keyframes feedIn{from{opacity:0; transform:translateX(12px);} to{opacity:1; transform:none;}}
#warning{position:absolute; top:calc(max(12px, env(safe-area-inset-top)) + 58px); left:50%; transform:translateX(-50%); text-align:center; background:linear-gradient(180deg, rgba(120,30,15,0.85), rgba(70,18,10,0.85)); border:1px solid rgba(255,154,60,0.55); border-radius:12px; padding:8px 18px; max-width:min(520px, 92vw); animation:warnPulse 1.6s ease-in-out infinite;}
#warning b{display:block; font-family:var(--font-d); font-size:16px; letter-spacing:1px; color:#ffd7a8;}
#warning span{font-size:12.5px; color:#f3d6bd;}
#warning.calm{background:linear-gradient(180deg, rgba(40,52,70,0.88), rgba(24,32,44,0.88)); border-color:rgba(79,179,200,0.5); animation:none;}
@keyframes warnPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,120,40,0.0);} 50%{box-shadow:0 0 0 6px rgba(255,120,40,0.18);}}
#vitals{position:absolute; left:max(14px, env(safe-area-inset-left)); bottom:max(14px, env(safe-area-inset-bottom)); top:auto; display:flex; flex-direction:column; gap:7px; background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:10px 12px; width:210px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.vital{display:flex; align-items:center; gap:9px;}
.vital .ico{font-style:normal; width:18px; text-align:center; font-size:13px;}
.vital .bar{flex:1; height:8px; border-radius:6px; background:rgba(255,240,210,0.1); overflow:hidden;}
.vital .bar b{display:block; height:100%; width:100%; border-radius:6px; transition:width .25s;}
.vital[data-v="health"] b{background:linear-gradient(90deg, #a52a20, var(--blood));}
.vital[data-v="hunger"] b{background:linear-gradient(90deg, #9a5a1c, var(--ochre));}
.vital[data-v="thirst"] b{background:linear-gradient(90deg, #276a7a, var(--water));}
.vital[data-v="stamina"] b{background:linear-gradient(90deg, #a38a20, var(--bolt));}
.vital.low .bar{animation:lowPulse .9s ease-in-out infinite;}
@keyframes lowPulse{50%{background:rgba(214,69,58,0.35);}}
#heldPill{position:absolute; left:max(14px, env(safe-area-inset-left)); bottom:calc(max(14px, env(safe-area-inset-bottom)) + 124px); background:var(--glass); border:1px solid var(--line); border-radius:10px; padding:6px 11px; font-size:13px; font-weight:700; display:flex; flex-direction:column;}
#heldPill small{font-weight:500; color:var(--ink-faint); font-size:11px;}
#prompt{position:absolute; left:50%; bottom:calc(max(18px, env(safe-area-inset-bottom)) + 150px); transform:translateX(-50%); background:var(--glass); border:1px solid var(--line); border-radius:12px; padding:8px 14px; font-size:14px; white-space:nowrap;}
#prompt kbd{margin-right:6px;}
#prompt{max-width:calc(100vw - 32px); white-space:normal; text-align:center;}
.vital.tired .bar{animation:lowPulse .6s ease-in-out infinite;}
.vital.tired .bar b{filter:saturate(.35) brightness(.8);}
#progressRing{position:absolute; left:50%; top:50%; width:54px; height:54px; transform:translate(-50%, 30px);}
#progressRing circle{fill:none; stroke-width:3.5;}
#progressRing .bg{stroke:rgba(255,240,210,0.18);}
#progressRing .fg{stroke:var(--ember); stroke-linecap:round; stroke-dasharray:94.25; stroke-dashoffset:94.25; transform:rotate(-90deg); transform-origin:50% 50%;}
#crosshair{position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:rgba(255,240,210,0.7); box-shadow:0 0 0 2px rgba(0,0,0,0.25);}

/* ---------- touch controls (iPhone / iPad) ----------
   Standard thumb layout: the fixed MDT stick bottom-left; on the right a big
   STRIKE under the thumb, JUMP beside it, a context USE button above that
   shows what it will do, SPRINT; BAG / MAP / EAT under the minimap.
   Shown in the waiting camp too, so you can walk around before a match. */
#touch{position:fixed; inset:0; pointer-events:none; z-index:22; display:none;}
.touchMode[data-phase="lobby"] #touch, .touchMode[data-phase="playing"] #touch{display:block;}
[data-phase="lobby"] #tUse, [data-phase="lobby"] .tside, [data-phase="lobby"] #tEat{display:none;}
.touchMode #crosshair{display:none;}
/* the stick is the shared MDT stick (apps/_shared/mdt-stick.js), fixed bottom-left, with its own CSS */
.tbtn{position:absolute; pointer-events:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-radius:50%; border:1.5px solid rgba(255,240,210,0.35); background:radial-gradient(circle at 50% 35%, rgba(60,44,30,0.72), rgba(18,12,8,0.72)); color:var(--ink); font-weight:800; font-size:9.5px; letter-spacing:1px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 6px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); transition:transform .08s, background .15s, border-color .15s;}
.tbtn svg{width:46%; height:46%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.tbtn span{line-height:1;}
.tbtn:active, .tbtn.pressed{transform:scale(0.92); background:rgba(217,130,43,0.55);}
.tbtn.on{background:radial-gradient(circle at 50% 35%, rgba(240,162,77,0.9), rgba(179,97,28,0.85)); border-color:#ffc27a; color:#231304;}
/* Right thumb: the big attack button in the corner, with Jump, Use and
   Eat in an arc round it (menus - Bag, Map - stay up by the minimap). */
.tStrike{width:90px; height:90px; right:max(18px, env(safe-area-inset-right)); bottom:max(22px, env(safe-area-inset-bottom)); border:2px solid rgba(255,154,60,0.8); background:radial-gradient(circle at 50% 35%, rgba(120,62,20,0.85), rgba(40,18,6,0.85)); --cd:0;}
.tStrike i{font-style:normal; font-size:34px; line-height:1; display:flex;}
.tStrike span{font-size:10px; letter-spacing:1.2px; margin-top:2px;}
/* recovering from a swing: a ring that empties as you get ready again */
.tStrike::after{content:''; position:absolute; inset:-5px; border-radius:50%; background:conic-gradient(rgba(255,205,130,0.95) calc(var(--cd)*360deg), transparent 0); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); opacity:0; transition:opacity .15s; pointer-events:none;}
.tStrike.cooling::after{opacity:1;}
.tJump{width:64px; height:64px; right:calc(max(18px, env(safe-area-inset-right)) + 102px); bottom:max(14px, env(safe-area-inset-bottom));}
.tUse{width:70px; height:70px; right:calc(max(18px, env(safe-area-inset-right)) - 2px); bottom:calc(max(22px, env(safe-area-inset-bottom)) + 102px);}
.tEat{width:54px; height:54px; right:calc(max(18px, env(safe-area-inset-right)) + 94px); bottom:calc(max(14px, env(safe-area-inset-bottom)) + 84px);}
.tEat i{font-style:normal; font-size:22px; line-height:1; display:flex;}
.tEat span{font-size:7.5px; letter-spacing:.8px;}
.tEat.idle{opacity:0.4;}
.tUse i{font-style:normal; font-size:26px; line-height:1;}
.tUse span{font-size:9px; max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tUse.idle{opacity:0.45;}
.tUse.ready{border-color:#ffd27a; box-shadow:0 0 0 0 rgba(255,200,110,0.7), 0 6px 16px rgba(0,0,0,0.45); animation:usePulse 1.4s ease-out infinite;}
@keyframes usePulse{0%{box-shadow:0 0 0 0 rgba(255,200,110,0.65), 0 6px 16px rgba(0,0,0,0.45);} 100%{box-shadow:0 0 0 16px rgba(255,200,110,0), 0 6px 16px rgba(0,0,0,0.45);}}
.tRun{width:54px; height:54px; right:calc(max(18px, env(safe-area-inset-right)) + 104px); bottom:calc(max(16px, env(safe-area-inset-bottom)) + 86px);}
.tside{position:absolute; right:max(12px, env(safe-area-inset-right)); top:calc(max(12px, env(safe-area-inset-top)) + 168px); display:flex; flex-direction:column; gap:10px;}
.tside .tbtn{position:relative; width:50px; height:50px;}
.tside .tbtn i{font-style:normal; font-size:18px; line-height:1;}
.tside .tbtn svg{width:44%; height:44%;}
.tside .tbtn span{font-size:7.5px; letter-spacing:.8px;}
#tEatCount{position:absolute; right:-3px; bottom:-3px; min-width:18px; height:18px; border-radius:9px; background:var(--ember); color:#231304; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0 4px;}
#tEatCount:empty{display:none;}

/* HUD pieces laid out for both mouse and touch */
#heldPill{display:none;}
#hotbar{position:absolute; left:50%; bottom:max(14px, env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; gap:7px; padding:6px; border-radius:16px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:auto;}
.hot{position:relative; width:52px; height:52px; border-radius:12px; border:1.5px solid rgba(255,240,210,0.16); background:rgba(0,0,0,0.28); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:24px; padding:0;}
.hot.sel{border-color:var(--ember); background:rgba(217,130,43,0.28); box-shadow:0 0 0 2px rgba(217,130,43,0.35);}
.hot .k{position:absolute; left:4px; top:2px; font-size:9.5px; font-weight:800; color:var(--ink-faint);}
.hot .dur{position:absolute; left:6px; right:6px; bottom:4px; height:3px; border-radius:2px; background:rgba(255,255,255,0.12); overflow:hidden;}
.hot .dur i{display:block; height:100%; background:var(--leaf);}
.hot .dur i.low{background:var(--blood);}
.hot .n{position:absolute; right:4px; top:2px; font-size:10px; font-weight:800; color:var(--ink);}
.touchMode .hot .k{display:none;}
#pickups{position:absolute; left:max(14px, env(safe-area-inset-left)); top:38%; display:flex; flex-direction:column; gap:5px; pointer-events:none;}
#pickups div{display:flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border-radius:10px; background:linear-gradient(90deg, rgba(30,22,14,0.85), rgba(30,22,14,0.35)); border-left:3px solid var(--leaf); font-size:13.5px; font-weight:700; animation:pickIn .25s ease-out; transition:opacity .4s, transform .4s;}
#pickups div i{font-style:normal; font-size:20px;}
#pickups div small{color:var(--ink-faint); font-weight:600; margin-left:2px;}
#pickups div.out{opacity:0; transform:translateX(-12px);}
@keyframes pickIn{from{opacity:0; transform:translateX(-16px) scale(0.96);} to{opacity:1; transform:none;}}
#worldTag{position:absolute; left:0; top:0; display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:14px; background:rgba(20,14,9,0.82); border:1px solid rgba(255,210,122,0.55); box-shadow:0 6px 18px rgba(0,0,0,0.45); pointer-events:none; white-space:nowrap; will-change:transform;}
#worldTag::after{content:''; position:absolute; left:50%; bottom:-7px; margin-left:-7px; border:7px solid transparent; border-top-color:rgba(255,210,122,0.55); border-bottom:0;}
#worldTag .wtIco{width:34px; height:34px; border-radius:10px; background:rgba(255,240,210,0.1); display:flex; align-items:center; justify-content:center; font-size:22px;}
#worldTag b{display:block; font-size:14px;}
#worldTag small{display:block; font-size:11.5px; color:var(--ink-dim);}
#worldTag small kbd{margin-right:4px;}
#worldTag .wtRing{position:absolute; left:2px; top:2px; width:38px; height:38px; display:none;}
#worldTag.busy .wtRing{display:block;}
#worldTag .wtRing circle{fill:none; stroke-width:3;}
#worldTag .wtRing .bg{stroke:rgba(255,240,210,0.15);}
#worldTag .wtRing .fg{stroke:var(--ember); stroke-linecap:round; stroke-dasharray:94.25; stroke-dashoffset:94.25; transform:rotate(-90deg); transform-origin:50% 50%;}
#worldTag.hint{border-color:rgba(255,240,210,0.25);}
.flyIco{position:fixed; z-index:60; font-size:26px; pointer-events:none; transition:transform .55s cubic-bezier(.5,-0.3,.8,.5), opacity .55s; }
#vitals{top:calc(max(12px, env(safe-area-inset-top)) + 0px); bottom:auto;}
.touchMode #vitals{width:158px; padding:7px 9px; gap:5px;}
.touchMode #feed{top:calc(max(12px, env(safe-area-inset-top)) + 236px);}
.touchMode #hotbar{bottom:max(10px, env(safe-area-inset-bottom));}
.touchMode .hot{width:48px; height:48px; font-size:22px;}
.touchMode #prompt{display:none;}
.touchMode #prompt.flash{display:block; bottom:calc(max(18px, env(safe-area-inset-bottom)) + 76px);}
@media (max-width:700px){
  #minimap{width:112px; height:112px;}
  .compass{display:none;}
  #feed{top:calc(max(12px, env(safe-area-inset-top)) + 124px); width:min(240px, 64vw);}
  .touchMode #feed{top:calc(max(12px, env(safe-area-inset-top)) + 300px);}
  .tside{top:calc(max(12px, env(safe-area-inset-top)) + 124px);}
  #warning{top:calc(max(12px, env(safe-area-inset-top)) + 54px);}
  #prompt{bottom:calc(max(18px, env(safe-area-inset-bottom)) + 190px); font-size:13px;}
}
/* Portrait phones: tools go up under the vitals, clear of both thumbs */
@media (max-aspect-ratio:1/1){
  .touchMode .hudTop{left:max(12px, env(safe-area-inset-left)); transform:none;}
  .touchMode #vitals{top:calc(max(12px, env(safe-area-inset-top)) + 58px);}
  .touchMode #hotbar{top:calc(max(12px, env(safe-area-inset-top)) + 150px); bottom:auto; left:max(12px, env(safe-area-inset-left)); transform:none; gap:5px; padding:5px;}
  .touchMode .hot{width:42px; height:42px; font-size:20px;}
  .touchMode .hotTray{bottom:auto; top:calc(100% + 6px); left:0; transform:none;}
  .touchMode #pickups{top:auto; bottom:calc(max(24px, env(safe-area-inset-bottom)) + 180px);}
}
/* Short landscape phones (the usual way to play): tighter vitals */
@media (max-height:440px) and (min-aspect-ratio:1/1){
  #vitals{width:140px; padding:6px 8px; gap:4px;}
  .vital .bar{height:6px;}
  /* feed goes under the compass, clear of the minimap buttons and the pickups on the left */
  .touchMode #feed{top:calc(max(8px, env(safe-area-inset-top)) + 62px); right:auto; left:50%; transform:translateX(-50%); width:min(380px, 46vw); align-items:center;}
  .touchMode #feed div:nth-last-child(n+3){display:none;}
  .tside{flex-direction:row; top:calc(max(8px, env(safe-area-inset-top)) + 120px); right:calc(max(12px, env(safe-area-inset-right)) + 0px);}
  #minimap{width:108px; height:108px;}
}

/* Map card (loading screen + waiting camp) */
.mapCard{display:flex; gap:12px; align-items:flex-start; text-align:left; background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:12px 14px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.mapCard .mapIcon{font-size:34px; line-height:1;}
.mapCard small{display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ochre); font-weight:800;}
.mapCard b{display:block; font-family:var(--font-d); font-size:20px; margin:2px 0;}
.mapCard em{display:block; font-style:normal; font-size:12px; color:var(--ink-faint);}
.mapCard p{margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--ink-dim); max-width:360px;}
#loading .mapCard{margin:18px auto 6px; max-width:440px;}
#lobbyMap{position:absolute; right:max(16px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%); max-width:min(340px, 42vw); pointer-events:none;}
@media (max-width:700px), (max-height:440px){ #lobbyMap{top:calc(max(16px, env(safe-area-inset-top)) + 110px); transform:none; right:12px; max-width:52vw;} #lobbyMap p{display:none;} }

/* ---------- bag ---------- */
.panel{background:rgba(10,7,4,0.45); z-index:45;}
.bagCard{width:min(760px, 96vw); max-height:88vh; overflow-y:auto;}
.bagHead{display:flex; align-items:center; justify-content:space-between;}
.bagCols{display:grid; grid-template-columns:1fr 1.15fr; gap:22px;}
@media (max-width:640px){ .bagCols{grid-template-columns:1fr;} }
#invGrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:18px;}
.slot{aspect-ratio:1; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,0.25); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; position:relative; color:var(--ink); padding:4px;}
.slot .em{font-size:24px; line-height:1;}
.slot .nm{font-size:10.5px; color:var(--ink-dim); text-align:center; line-height:1.15;}
.slot .ct{position:absolute; top:4px; right:7px; font-size:12px; font-weight:800; color:var(--ember);}
.slot.food{border-color:rgba(143,179,90,0.4);}
.slot.empty{opacity:0.25;}
#toolList{display:flex; flex-direction:column; gap:8px;}
.tool{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,0.2); font-size:13.5px;}
.tool .em{font-size:20px;}
.tool .info{flex:1;}
.tool .info small{display:block; color:var(--ink-faint); font-size:11.5px;}
.tool.held{border-color:var(--ember); background:rgba(217,130,43,0.12);}
#craftList{display:flex; flex-direction:column; gap:9px;}
.recipe{border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:rgba(0,0,0,0.2); display:grid; grid-template-columns:34px 1fr auto; gap:4px 10px; align-items:center;}
.recipe .em{font-size:24px; grid-row:1 / 3;}
.recipe b{font-size:14px;}
.recipe .needs{grid-column:2; font-size:12px; color:var(--ink-dim);}
.recipe .needs span.miss{color:#e7806f;}
.recipe .desc{grid-column:1 / -1; font-size:12px; color:var(--ink-faint); line-height:1.4; margin-top:3px;}
.recipe button{grid-row:1 / 3; grid-column:3;}
.recipe.ready{border-color:rgba(217,130,43,0.5);}

/* ---------- map ---------- */
.mapWrap{position:relative; width:min(86vh, 94vw); aspect-ratio:1;}
#bigMapCanvas{width:100%; height:100%; border-radius:20px; border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.mapWrap .iconBtn{position:absolute; top:10px; right:10px; background:rgba(20,14,9,0.7);}

/* ---------- end screens ---------- */
#deathScreen,#resultScreen{background:radial-gradient(ellipse at center, rgba(40,10,6,0.55), rgba(10,6,3,0.85)); z-index:50;}
.endCard{text-align:center; width:min(460px, 94vw);}
.endCard.wide{width:min(560px, 94vw);}
.endCard h2{font-size:30px; margin:10px 0 8px;}
.endCard p{color:var(--ink-dim); margin:0 0 14px; font-size:15px; line-height:1.5;}
.endCard .place{font-family:var(--font-d); font-size:18px; color:var(--ember); margin-bottom:18px;}
.endCard .row{justify-content:center; margin-bottom:14px;}
#resList{text-align:left; margin:0 0 18px; padding:0; list-style:none; max-height:40vh; overflow-y:auto; border:1px solid var(--line); border-radius:12px;}
#resList li{display:grid; grid-template-columns:34px 1fr auto; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:13.5px; align-items:center;}
#resList li:last-child{border-bottom:0;}
#resList li .pl{font-family:var(--font-d); font-weight:700; color:var(--ink-faint);}
#resList li.first .pl{color:var(--ember);}
#resList li.me{background:rgba(217,130,43,0.1);}
#resList li small{display:block; color:var(--ink-faint); font-size:11.5px;}
#resList li .tm{font-variant-numeric:tabular-nums; font-weight:700;}
#spectateBar{position:fixed; bottom:max(18px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:12px; background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:8px 10px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
#spectateBar small{display:block; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-faint); font-weight:800;}
#spectateBar b{font-size:15px; min-width:110px; display:block;}

/* ---------- music ---------- */
.bagSet{margin:0 12px 0 auto;}
#srNow{position:fixed; left:max(14px, env(safe-area-inset-left)); top:calc(max(12px, env(safe-area-inset-top)) + 8px); transform:translate(0, -6px); z-index:60; pointer-events:none;
  background:rgba(14,9,6,0.7); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13px; color:var(--ink); white-space:nowrap;
  opacity:0; transition:opacity .6s, transform .6s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
#srNow.show{opacity:1; transform:translate(0, 0);}
body.inMenu #srNow{left:50%; top:calc(max(14px, env(safe-area-inset-top)) + 66px); transform:translate(-50%, -6px);}
body.inMenu #srNow.show{transform:translate(-50%, 0);}
#srNow span{color:var(--ochre); margin-right:4px;}
#srNow small{color:var(--ink-faint); margin-left:6px;}

/* Now-playing sits under the vitals during a match, not over them */
[data-phase="playing"] #srNow{top:calc(max(12px, env(safe-area-inset-top)) + 112px);}
/* Waiting camp on touch: keep the tip between the thumbs */
.touchMode .lobbyTip{max-width:min(400px, 46vw); font-size:12.5px; padding:8px 12px;}
@media (max-aspect-ratio:1/1){
  .touchMode[data-phase="playing"] #srNow{top:calc(max(12px, env(safe-area-inset-top)) + 240px);}
  .touchMode #lobbyMap{top:calc(max(16px, env(safe-area-inset-top)) + 158px); left:12px; right:12px; max-width:none;}
  .touchMode #lobbyList{top:calc(max(16px, env(safe-area-inset-top)) + 262px); bottom:auto; max-height:18vh; min-width:0; padding:8px 12px; font-size:12.5px;}
  .touchMode .lobbyTip{bottom:calc(max(20px, env(safe-area-inset-bottom)) + 176px); max-width:calc(100vw - 32px);}
  .touchMode .lobbyTop{padding:10px 18px 12px; white-space:nowrap;}
}

/* ---- v1.6: bots, bloodthirst, waiting camp ---- */
.botsBtn{width:100%; margin-top:10px; font-weight:800; letter-spacing:1px;}
.campWait{display:none; position:absolute; left:50%; top:calc(max(16px, env(safe-area-inset-top)) + 150px); transform:translateX(-50%); width:min(360px, calc(100vw - 32px)); text-align:center; background:rgba(20,14,9,0.88); border:1px solid rgba(255,154,60,0.55); border-radius:16px; padding:12px 14px; pointer-events:auto;}
.campWait b{display:block; font-family:var(--font-d); font-size:17px; color:#ffd7a8;}
.campWait small{display:block; font-size:12.5px; color:var(--ink-dim); margin:4px 0 10px; line-height:1.4;}
.campWait .btn{width:100%;}
#lobbyHud.waiting .campWait{display:block;}
#lobbyHud.waiting .countdown small::after{content:' (needs 2+ humans)';}
.vital.lust.hidden{display:none;}
.vital.lust b{background:linear-gradient(90deg, #5a0808, #d6453a);}
.vital.lust em{font-style:normal; font-size:11px; font-weight:800; color:#ff8a7a; font-variant-numeric:tabular-nums; min-width:30px; text-align:right;}
body.lust #damageFlash{opacity:1; animation:lustPulse 1.1s ease-in-out infinite; background:radial-gradient(ellipse at center, transparent 45%, rgba(150,0,0,0.5) 100%);}
@keyframes lustPulse{0%,100%{opacity:.35;} 50%{opacity:.85;}}
@media (max-aspect-ratio:1/1){
  .touchMode #feed div:nth-child(n+4){display:none;}
  .touchMode #warning{padding:7px 12px; text-align:left;}
  .touchMode #warning b{font-size:14px;}
  .touchMode #warning span{font-size:12px; line-height:1.35; display:block;}
}
#srNow{max-width:calc(100vw - 32px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mxcWin{margin:4px auto 12px; padding:10px 14px; border-radius:12px; background:rgba(255,196,60,0.1); border:1px solid rgba(255,196,60,0.45); color:#ffd98a; font-size:14px; max-width:420px;}
.mxcWin b{font-family:var(--font-d); font-size:20px; margin-right:6px;}
.mxcWin small{display:block; color:var(--ink-dim); font-size:12px; margin-top:3px;}
.mxcWin.hidden{display:none;}
.mxcNote{font-size:12.5px; color:var(--ink-dim); margin-top:-4px;}

/* ---------- hand-drawn item icons (icons.js) ---------- */
svg.ico{width:1em; height:1em; display:inline-block; vertical-align:-0.16em; flex:none; overflow:visible;}
.tbtn svg.ico, .hot svg.ico{width:1em; height:1em; fill:none; stroke:none; stroke-width:1;}
.vital .ico{font-size:15px; display:flex; align-items:center; justify-content:center;}
.tside .tbtn i{font-size:22px;}
.tUse i{font-size:30px;}
#heldName svg.ico{font-size:17px; margin-right:2px;}
#pickups div i{display:flex;}

/* ---------- crafting guide card ---------- */
#goal{position:absolute; left:max(14px, env(safe-area-inset-left)); top:calc(max(12px, env(safe-area-inset-top)) + 150px); width:210px; box-sizing:border-box; display:grid; grid-template-columns:30px 1fr; gap:2px 9px; align-items:start; padding:8px 10px; border-radius:14px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:auto; cursor:pointer; transition:border-color .3s, box-shadow .3s;}
#goal .gIco{font-size:28px; line-height:1; grid-row:1 / 3; padding-top:2px;}
#goal b{font-size:12.5px; display:block; line-height:1.25;}
#goal .gNeeds{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
#goal small{grid-column:1 / -1; font-size:11px; line-height:1.35; color:var(--ink-dim); margin-top:3px;}
#goal .btn{grid-column:1 / -1; margin-top:6px; width:100%;}
#goal.ready{border-color:rgba(255,194,122,0.8); box-shadow:0 0 0 0 rgba(255,160,60,0.5); animation:goalGlow 1.6s ease-in-out infinite;}
@keyframes goalGlow{50%{box-shadow:0 0 14px 2px rgba(255,160,60,0.45);}}
.touchMode #goal{width:158px; padding:7px 8px; grid-template-columns:24px 1fr; gap:2px 7px;}
.touchMode #goal .gIco{font-size:22px;}
.touchMode #goal b{font-size:11.5px;}
.touchMode #goal small{font-size:10.5px;}
.need{display:inline-flex; align-items:center; gap:3px; padding:2px 6px 2px 4px; border-radius:8px; font-size:11.5px; font-weight:700; background:rgba(255,240,210,0.08); color:var(--ink);}
.need svg.ico{font-size:15px;}
.need.miss{background:rgba(214,69,58,0.18); color:#f0a090;}
.need.have{background:rgba(143,179,90,0.2); color:#cfe6a8;}
.recipe .needs{display:flex; flex-wrap:wrap; gap:5px;}
.recipe .find{grid-column:1 / -1; display:flex; align-items:flex-start; gap:7px; font-size:12px; color:var(--ink-dim); line-height:1.35; padding:5px 8px; border-radius:8px; background:rgba(255,240,210,0.05);}
.recipe .find svg.ico{font-size:17px;}
.recipe .find b{color:var(--ink);}
.recipe.tracked{border-color:rgba(255,216,138,0.7); background:rgba(255,216,138,0.06);}
.recipe .btn.on{background:rgba(255,216,138,0.2); border-color:rgba(255,216,138,0.7);}
#goal.compact small{display:none;}

/* v1.17 - a lighter phone HUD: no SPRINT button (push the stick to its
   rim, or hold W, to run), the timer and alive count share one small
   pill, and slimmer vitals, so more of the island shows. */
.tRun{display:none !important;}
@media (max-width:700px){
  .hudTop{gap:0; padding:3px 4px; background:var(--glass); border:1px solid var(--line); border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
  .timerPill,.alivePill{flex-direction:row; align-items:baseline; gap:5px; min-width:0; padding:3px 9px; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none;}
  .timerPill b,.alivePill b{font-size:16px;}
  .timerPill .lbl{display:none;}
  .alivePill{border-left:1px solid var(--line); border-radius:0;}
}
@media (max-aspect-ratio:1/1){
  .touchMode #vitals{top:calc(max(12px, env(safe-area-inset-top)) + 44px); width:128px; padding:6px 8px; gap:4px;}
  .touchMode .vital .bar{height:6px;}
}

/* Hell Creek's ending: the impact cinematic's caption, flash and Skip */
#cine{position:fixed;inset:0;z-index:45;pointer-events:auto;}
#cine .cine-flash{position:absolute;inset:0;opacity:0;pointer-events:none;}
#cine .cine-cap{position:absolute;left:0;right:0;top:16%;text-align:center;color:#ffe9c8;opacity:0;text-shadow:0 2px 18px rgba(0,0,0,.8);pointer-events:none;}
#cine .cine-cap small{display:block;font:600 12px/1.4 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:#ffb070;margin-bottom:8px;}
#cine .cine-cap b{display:block;font:700 clamp(30px,6vw,56px)/1.1 var(--font-d);letter-spacing:.02em;}
#cine .cine-skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));padding:9px 18px;border-radius:999px;border:1px solid rgba(255,220,180,.35);background:rgba(20,10,6,.55);color:#ffe9c8;font:600 14px var(--font-b);cursor:pointer;}
body.cinema #touch, body.cinema #srNow, body.cinema #feed{display:none !important;}

/* Hotbar overflow: "+N" opens a tray of the rest */
.hot.more{font-size:14px; font-weight:800; color:var(--ink-dim); border-style:dashed;}
.hot.more.open{border-color:var(--ember); color:var(--ink);}
.hotTray{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(4, auto); gap:6px; padding:6px; border-radius:14px; background:rgba(20,14,9,0.9); border:1px solid var(--line);}
.hotTray.hidden{display:none;}
/* the crafting card's close button */
#goal .gX{position:absolute; top:3px; right:4px; width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:var(--ink-faint); font-size:17px; line-height:1; padding:0; cursor:pointer;}
#goal .gX:hover{color:var(--ink);}
#goal b{padding-right:16px;}

/* v1.20: smaller on-screen text. A warning shows in full for a few seconds,
   then shrinks to a slim pill with just its title; feed lines are smaller. */
#warning{padding:6px 14px; max-width:min(420px, 88vw); transition:padding .25s;}
#warning b{font-size:13.5px; letter-spacing:.6px;}
#warning span{font-size:11.5px; line-height:1.3;}
#warning.mini{padding:3px 12px; border-radius:999px; animation:none;}
#warning.mini b{font-size:11.5px; letter-spacing:.8px;}
#warning.mini b::before{content:'\26A0\FE0E'; margin-right:6px; color:#ffb070;}
#warning.mini span{display:none !important;}
.touchMode #warning{padding:5px 10px;}
.touchMode #warning b{font-size:12.5px;}
.touchMode #warning span{font-size:11px;}
.touchMode #warning.mini{padding:3px 10px;}
#feed div{font-size:11.5px; padding:4px 9px; line-height:1.3;}
.rcat{margin:6px 2px 0; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ochre); font-weight:800;}
.rcat:first-child{margin-top:0;}

/* the MXC balance in the lobby (opens the shared MXC shop) */