/* الهروب من ماتركس — the look of the horror game: a dark desert night, amber for the things you can use,
   blood red for danger, cyan for the runes. Everything here is for horror.html. */
:root {
  --bg:#07060a; --panel:rgba(14,12,18,.88); --card:#15131b; --card2:#1d1a24; --line:#2c2834; --text:#f1ecf3; --muted:#a39bb0;
  --amber:#e6a24a; --amber2:#ffcf7a; --red:#c4202c; --red2:#7a0d16; --cyan:#3fe0ff; --green:#2fbf7a; --gold:#fbbf24;
  --font:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:#000; color:var(--text); font-family:var(--font); overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
button, input, select { font-family:inherit; }
#app { position:fixed; inset:0; background:#000; }
#stageWrap { position:absolute; inset:0; } #view { width:100%; height:100%; display:block; outline:none; }
.ic { width:1.15em; height:1.15em; flex:none; vertical-align:-0.2em; } .ic.sm { width:1em; height:1em; opacity:.85; margin-inline-end:4px; } .ic.big { width:44px; height:44px; }
.ic.coin { width:1.25em; height:1.25em; }
[hidden] { display:none !important; }

/* screen effects */
#flash, #fade { position:absolute; inset:0; pointer-events:none; opacity:0; z-index:30; transition:opacity .3s; }
#fade { z-index:60; background:#000; }
#bars i { position:absolute; left:0; right:0; height:0; background:#000; z-index:31; transition:height .6s ease; pointer-events:none; } #bars i:first-child { top:0; } #bars i:last-child { bottom:0; }
#bars.on i { height:11vh; }
#hideOverlay { position:absolute; inset:0; z-index:12; pointer-events:none; }
#hideOverlay[data-view=slit] { background:linear-gradient(#000 0 40%, transparent 40% 58%, #000 58%); box-shadow:inset 0 0 120px #000; }
#hideOverlay[data-view=slats] { background:repeating-linear-gradient(#000 0 7%, transparent 7% 9%); box-shadow:inset 0 0 160px #000; }
#hideOverlay[data-view=cloth] { background:radial-gradient(ellipse 36% 22% at 50% 52%, transparent 40%, rgba(10,6,4,.97) 100%), repeating-linear-gradient(90deg,rgba(60,30,20,.4) 0 3px,transparent 3px 7px); }
#hideOverlay[data-view=leaves] { background:radial-gradient(ellipse 46% 36% at 50% 50%, transparent 30%, rgba(8,18,8,.96) 85%); box-shadow:inset 0 0 90px #000; }
#hideOverlay[data-view=window] { background:linear-gradient(#000 0 28%, transparent 28% 64%, #000 64%), repeating-linear-gradient(90deg, transparent 0 22%, #000 22% 24%); }

/* the loading screen and the screens */
#loading { position:absolute; inset:0; z-index:80; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #1a0c10, #040306); }
.lbox { text-align:center; width:min(420px,86vw); }
.logo { font-size:clamp(46px,12vw,84px); font-weight:900; letter-spacing:2px; color:#fff; text-shadow:0 0 24px rgba(196,32,44,.8); animation:glitch 3.2s infinite; }
.bar { height:6px; background:#1d1a24; border-radius:6px; overflow:hidden; margin:18px 0 10px; } .bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red),var(--amber)); transition:width .25s; }
#ldText { color:var(--muted); font-size:.95rem; margin:0; }
@keyframes glitch { 0%,90%,100% { transform:none; text-shadow:0 0 24px rgba(196,32,44,.8); } 91% { transform:translate(3px,-2px) skewX(6deg); text-shadow:-4px 0 #3fe0ff, 4px 0 #ff2a3a; } 93% { transform:translate(-4px,1px); text-shadow:4px 0 #3fe0ff, -4px 0 #ff2a3a; } 95% { transform:translate(2px,0) skewX(-5deg); } }
#layer { position:absolute; inset:0; z-index:50; pointer-events:none; }
#layer > * { pointer-events:auto; }
.screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:20px; overflow:auto; }
/* two spacers centre the content when there is room, and let it scroll from the top when there is not */
.screen::before, .screen::after { content:""; flex:1 0 0; }
#title { padding-top:58px; }
.screen.dim { background:rgba(2,1,4,.78); backdrop-filter:blur(3px); } .screen.solid { background:#05040a; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px; width:min(980px,96vw); max-height:92vh; overflow:auto; box-shadow:0 20px 70px rgba(0,0,0,.7); }
.panel h2 { margin:0 0 6px; font-size:1.7rem; font-weight:900; } .panel .sub { color:var(--muted); margin:0 0 14px; }
.btn { border:0; border-radius:12px; padding:.7em 1.3em; font-weight:800; font-size:1rem; cursor:pointer; color:#fff; background:var(--card2); border:1px solid var(--line); transition:transform .1s, filter .12s, background .12s; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn:hover { filter:brightness(1.18); } .btn:active { transform:scale(.97); } .btn:disabled { opacity:.4; pointer-events:none; }
.btn.red { background:linear-gradient(180deg,#d8283a,#8d1020); border-color:#e5485a; box-shadow:0 6px 22px rgba(196,32,44,.35); }
.btn.amber { background:linear-gradient(180deg,#f0b058,#b8741f); color:#1a0e04; border-color:#ffd48a; }
.btn.green { background:linear-gradient(180deg,#25c987,#0f8a58); border-color:#5ee6ae; }
.btn.big { font-size:1.2rem; padding:.85em 1.8em; border-radius:14px; } .btn.sm { padding:.4em .9em; font-size:.88rem; border-radius:10px; }
.row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }

/* title */
#title { background:linear-gradient(180deg,rgba(2,1,4,.2),rgba(2,1,4,.85) 78%); justify-content:flex-end; padding-bottom:6vh; }
#title canvas.art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:.16; mix-blend-mode:screen; }
.tlogo { font-size:clamp(54px,14vw,128px); font-weight:900; line-height:1; margin:0; color:#fff; text-shadow:0 0 40px rgba(196,32,44,.9), 0 6px 0 #5a0a12; animation:glitch 4s infinite; }
.tsub { font-size:clamp(16px,3.4vw,26px); color:var(--amber2); margin:6px 0 4px; letter-spacing:1px; } .tmini { color:var(--muted); font-size:.95rem; margin:0 0 20px; }
/* the game is shut for maintenance (main.js: showShut): above everything, the loading screen too */
#shut { z-index:90; text-align:center; pointer-events:auto; } #shut .tlogo { font-size:clamp(40px,10vw,88px); opacity:.55; } #shut .tsub { font-size:clamp(20px,4.6vw,32px); font-weight:900; } #shut .tmini { max-width:440px; line-height:1.9; margin-bottom:6px; }
#shut .btn { text-decoration:none; } .shutIcon { width:74px; height:74px; border-radius:50%; display:grid; place-items:center; margin-bottom:12px; background:rgba(240,176,88,.12); border:2px solid var(--amber2); color:var(--amber2); box-shadow:0 0 40px rgba(240,176,88,.25); } .shutIcon .ic { width:36px; height:36px; }
.menu { display:flex; flex-direction:column; gap:10px; width:min(380px,90vw); }
.menu .btn { font-size:1.15rem; padding:.8em 1em; justify-content:flex-start; }
.tinfo { position:absolute; top:14px; inset-inline:14px; display:flex; justify-content:space-between; gap:10px; pointer-events:none; }
.tinfo .chip { pointer-events:auto; }
.chip { background:rgba(10,8,14,.78); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-weight:800; font-size:.92rem; display:inline-flex; align-items:center; gap:7px; backdrop-filter:blur(4px); }

/* rules, difficulty, chapters, shop */
.tabs { display:grid; grid-template-columns:220px 1fr; gap:16px; } .tabs .list { display:flex; flex-direction:column; gap:8px; }
.tabs .list button { text-align:start; background:var(--card); border:1px solid var(--line); color:var(--text); padding:.75em 1em; border-radius:12px; cursor:pointer; font-weight:800; display:flex; gap:8px; align-items:center; }
.tabs .list button.on { background:linear-gradient(180deg,#3a1218,#22090d); border-color:var(--red); } .tabs .list button.seen::after { content:"✓"; margin-inline-start:auto; color:var(--green); }
.tabs .body { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 20px; line-height:1.9; min-height:300px; } .tabs .body h3 { margin:0 0 8px; color:var(--amber2); } .tabs .body p { margin:.55em 0; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.dcard { background:var(--card); border:2px solid var(--line); border-radius:16px; padding:16px; cursor:pointer; text-align:center; transition:transform .15s, border-color .15s; } .dcard:hover { transform:translateY(-3px); } .dcard.on { border-color:var(--amber); box-shadow:0 0 0 3px rgba(230,162,74,.2); }
.dcard h3 { margin:6px 0; font-size:1.4rem; } .dcard p { color:var(--muted); margin:6px 0; font-size:.92rem; } .dcard.locked { opacity:.45; pointer-events:none; }
.dhp { display:flex; align-items:center; gap:8px; justify-content:center; } .dhp > .ic { width:24px; height:24px; color:#ff4a5a; fill:currentColor; } .dhp .hpbar { max-width:150px; } .dhit { color:var(--muted); font-size:.9rem; margin-top:4px; } .dhit b { color:#ff6a7a; }
.chcard { display:flex; gap:14px; align-items:center; text-align:start; } .chcard .n { font-size:2.2rem; font-weight:900; color:var(--red); width:46px; text-align:center; } .chcard small { color:var(--amber2); font-weight:700; }
.shopHead { display:flex; gap:14px; align-items:center; margin-bottom:12px; } .shopHead img { width:84px; height:84px; border-radius:50%; background:#2a2118; border:3px solid var(--amber); }
.bubble { background:#2a2118; border:1px solid #5a4630; padding:10px 14px; border-radius:14px; border-top-right-radius:2px; line-height:1.7; flex:1; }
.items { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.shopItem { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:6px; } .shopItem .top { display:flex; gap:10px; align-items:center; } .shopItem .top .ic { width:30px; height:30px; color:var(--amber2); }
.shopItem b { font-size:1.05rem; } .shopItem p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.6; flex:1; } .shopItem .buy { display:flex; gap:8px; align-items:center; justify-content:space-between; } .price { font-weight:900; color:var(--gold); display:inline-flex; align-items:center; gap:5px; }
.slots { display:flex; gap:12px; justify-content:center; margin:10px 0 18px; } .slot { width:84px; height:84px; border-radius:14px; background:var(--card); border:2px dashed var(--line); display:grid; place-items:center; cursor:pointer; position:relative; } .slot.full { border-style:solid; border-color:var(--amber); } .slot .ic { width:34px; height:34px; color:var(--amber2); } .slot small { position:absolute; bottom:4px; font-size:.7rem; color:var(--muted); } .slot i { position:absolute; top:3px; inset-inline-start:7px; font-style:normal; font-weight:900; color:var(--muted); }

/* story */
#story { background:#000; padding:0; justify-content:flex-end; }
#story .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#story .text { position:relative; width:min(860px,94vw); background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88) 30%); padding:50px 24px 28px; text-align:center; } #story h2 { font-size:clamp(22px,4vw,34px); margin:0 0 8px; color:var(--amber2); } #story p { font-size:clamp(16px,2.6vw,22px); line-height:1.9; margin:0 0 16px; min-height:5.2em; }
.skip { position:absolute; top:14px; inset-inline-start:14px; z-index:2; }

/* the game: the interface over the picture */
#hud { position:absolute; inset:0; z-index:20; pointer-events:none; }
#hud button, #hud .touch * { pointer-events:auto; }
#hud .top { position:absolute; top:max(10px,env(safe-area-inset-top)); left:12px; right:12px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start; direction:ltr; }
#hud .top > * { direction:rtl; }
#hud .colL, #hud .colR { display:flex; flex-direction:column; gap:8px; }
#hud .colR { align-items:flex-end; max-width:min(420px,58vw); }
/* the status card: pause, key pieces and coins, then the blood and the three small bars */
#status { width:min(214px,52vw); display:flex; flex-direction:column; gap:6px; background:rgba(10,8,14,.62); border:1px solid var(--line); border-radius:14px; padding:8px 10px 9px; backdrop-filter:blur(5px); box-shadow:0 6px 24px rgba(0,0,0,.45); direction:ltr; }
.srow0 { display:flex; align-items:center; gap:10px; direction:ltr; } .srow0 .chip.btn { padding:5px 9px; cursor:pointer; color:#fff; background:rgba(255,255,255,.08); } .srow0 .chip.btn .ic { width:18px; height:18px; }
.coinz { display:inline-flex; align-items:center; gap:5px; font-weight:900; margin-inline-start:auto; direction:ltr; } .coinz .ic { width:18px; height:18px; }
.keys { display:inline-flex; gap:4px; } .keys .ic { width:20px; height:20px; color:#4a5560; } .keys .ic.on { color:var(--cyan); filter:drop-shadow(0 0 5px var(--cyan)); }
.hp { display:flex; align-items:center; gap:7px; } .hp > .ic { width:22px; height:22px; color:#ff4a5a; fill:currentColor; flex:none; }
.hpbar { position:relative; flex:1; height:18px; background:rgba(0,0,0,.72); border:1px solid #4a1c24; border-radius:9px; overflow:hidden; }
.hpbar i, .hpbar u { position:absolute; top:0; bottom:0; left:0; width:100%; border-radius:9px; } .hpbar i { background:linear-gradient(90deg,#a3182a,#ff4a5a); transition:width .18s; } .hpbar u { background:rgba(255,255,255,.6); transition:width 1s .45s; }
.hpbar b { position:absolute; inset:0; display:grid; place-items:center; font-size:.78rem; font-weight:900; text-shadow:0 1px 3px #000; }
.hp.healing .hpbar i { background:linear-gradient(90deg,#1f9a56,#7be8a0); } .hp.low .hpbar { animation:hpLow .7s infinite; } @keyframes hpLow { 50% { box-shadow:0 0 12px #ff2030; border-color:#ff4a5a; } }
.hp.hit { animation:hpHit .45s; } @keyframes hpHit { 15% { transform:translateX(-6px); } 35% { transform:translateX(6px); } 55% { transform:translateX(-4px); } 75% { transform:translateX(3px); } }
.stat { display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:800; color:var(--muted); } .stat .ic { width:16px; height:16px; flex:none; } .stat .track { flex:1; height:7px; background:rgba(0,0,0,.65); border:1px solid #3a3544; border-radius:6px; overflow:hidden; } .stat .track i { display:block; height:100%; width:100%; transition:width .1s; }
.stat.stamina i { background:linear-gradient(90deg,#27b96a,#8bf0a8); } .stat.stamina.tired i { background:#c4202c; } .stat.battery i { background:linear-gradient(90deg,#e0a020,#ffe27a); } .stat.battery.low i { background:#c4202c; animation:blink .5s infinite; } .stat.noise i { background:linear-gradient(90deg,#3a7ae0,#e0b030 60%,#e03020); } @keyframes blink { 50% { opacity:.3; } }
#bloodEdge { position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse at center, transparent 48%, rgba(140,0,12,.55) 100%); transition:opacity .4s; }
#hud.lowhp #bloodEdge { opacity:1; animation:bloodPulse 1.2s infinite; } @keyframes bloodPulse { 50% { opacity:.45; } }
/* the objective and the little map */
#obj { display:flex; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line); border-right:4px solid var(--amber); border-radius:12px; padding:8px 14px; backdrop-filter:blur(4px); box-shadow:0 6px 24px rgba(0,0,0,.45); } #obj .ic { width:26px; height:26px; color:var(--amber); flex:none; } #obj small { display:block; color:var(--amber2); font-size:.74rem; font-weight:800; } #obj b { font-size:1rem; line-height:1.4; }
#mapBox { position:relative; width:132px; height:132px; border-radius:50%; border:2px solid rgba(255,255,255,.25); box-shadow:0 0 0 3px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.6); background:#07060a; } #miniMap { width:100%; height:100%; border-radius:50%; display:block; }
#mapPlace { position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); white-space:nowrap; background:rgba(10,8,14,.85); border:1px solid var(--line); border-radius:999px; padding:1px 10px; font-size:.74rem; font-weight:800; color:var(--amber2); } #mapPlace.pop { animation:placePop .9s; } @keyframes placePop { 0% { transform:translateX(-50%) scale(1.35); color:#fff; } 100% { transform:translateX(-50%); } }
#alertBox { position:absolute; top:max(68px,calc(env(safe-area-inset-top) + 58px)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; opacity:0; transition:opacity .2s; }
#alertBox.on { opacity:1; } #alertBox .ic { width:34px; height:34px; color:#ff4a3a; filter:drop-shadow(0 0 8px #ff2a1a); } #alertBox .meter { width:130px; height:6px; background:rgba(0,0,0,.6); border:1px solid #5a1a1a; border-radius:6px; overflow:hidden; } #alertBox .meter i { display:block; height:100%; background:linear-gradient(90deg,#ffb020,#ff2a1a); width:0; }
#alertBox.chase .ic { animation:throb .4s infinite; } @keyframes throb { 50% { transform:scale(1.3); } }
#compassBox { text-align:center; margin-top:8px; background:rgba(10,8,14,.7); border:1px solid var(--line); border-radius:12px; padding:2px 10px 4px; } #compassBox svg { width:40px; height:40px; color:var(--cyan); filter:drop-shadow(0 0 8px var(--cyan)); } #compassBox b { display:block; color:var(--cyan); font-size:.8rem; margin-top:-4px; }
/* words, sounds and messages: in the middle, never over the map or the bars */
#toasts { position:absolute; top:max(124px,calc(env(safe-area-inset-top) + 112px)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; align-items:center; width:min(420px,56vw); } .toast { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px 14px; font-weight:700; display:flex; align-items:center; gap:8px; animation:toastIn .25s; max-width:100%; box-shadow:0 4px 16px rgba(0,0,0,.4); } .toast .ic { color:var(--amber); flex:none; } .toast.alert .ic { color:#ff5a4a; } @keyframes toastIn { from { opacity:0; transform:translateY(-8px); } }
#capts { position:absolute; left:14px; bottom:max(150px,calc(env(safe-area-inset-bottom) + 140px)); display:flex; flex-direction:column; gap:5px; align-items:flex-start; direction:rtl; } .capt { background:rgba(0,0,0,.7); color:#e6e0ef; padding:3px 10px; border-radius:6px; font-size:.84rem; animation:capIn .2s; } @keyframes capIn { from { opacity:0; transform:translateX(-10px); } }
#subs { position:absolute; bottom:max(188px,calc(env(safe-area-inset-bottom) + 180px)); left:50%; transform:translateX(-50%); width:min(760px,92vw); text-align:center; } #subs .sub { display:inline-block; background:rgba(0,0,0,.78); border-radius:10px; padding:8px 16px; line-height:1.7; font-size:1.02rem; } #subs .sub b { color:var(--amber2); margin-inline-end:6px; }
#prompt { position:absolute; left:50%; bottom:max(128px,calc(env(safe-area-inset-bottom) + 118px)); transform:translateX(-50%); background:var(--panel); border:1px solid var(--amber); border-radius:14px; padding:8px 18px; display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; box-shadow:0 0 22px rgba(230,162,74,.25); overflow:hidden; } #prompt .key { background:var(--amber); color:#1a0e04; border-radius:8px; padding:1px 9px; font-weight:900; } #prompt .hold { position:absolute; left:0; bottom:0; height:4px; background:var(--amber); border-radius:4px; width:0; }
#breath { position:absolute; left:50%; bottom:max(176px,calc(env(safe-area-inset-bottom) + 166px)); transform:translateX(-50%); width:min(300px,70vw); text-align:center; } #breath .track { height:12px; background:rgba(0,0,0,.7); border:1px solid #3a3a50; border-radius:8px; overflow:hidden; margin-top:6px; } #breath .track i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#3a7ae0,#9ad0ff); } #breath.hold .track i { background:linear-gradient(90deg,#e0a030,#ffd070); } #breath.gasp b { color:#ff5a4a; } #breath b { font-size:.95rem; text-shadow:0 0 6px #000; }
/* the bottom: what is working now, then the four items */
#effects { position:absolute; left:50%; bottom:max(96px,calc(env(safe-area-inset-bottom) + 90px)); transform:translateX(-50%); display:flex; gap:6px; } .fxp { position:relative; display:flex; align-items:center; gap:5px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:2px 10px 4px; font-size:.78rem; font-weight:800; overflow:hidden; } .fxp .ic { width:15px; height:15px; color:var(--amber2); } .fxp b { color:var(--amber2); } .fxp i { position:absolute; left:0; bottom:0; height:2px; background:var(--amber); }
#hotbar { position:absolute; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; gap:8px; }
.hb { width:68px; height:72px; border-radius:14px; background:var(--panel); border:2px solid var(--line); display:grid; place-items:center; position:relative; cursor:pointer; color:var(--amber2); box-shadow:0 4px 14px rgba(0,0,0,.45); transition:transform .1s, border-color .1s; } .hb:active { transform:scale(.94); border-color:var(--amber); }
.hb.empty { opacity:.4; } .hb .ic { width:28px; height:28px; margin-top:-6px; } .hb i { position:absolute; top:3px; inset-inline-start:7px; font-style:normal; font-size:.72rem; font-weight:900; color:var(--muted); } .hb b { position:absolute; top:3px; inset-inline-end:7px; font-size:.82rem; } .hb small { position:absolute; bottom:4px; left:0; right:0; text-align:center; font-size:.62rem; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 3px; } .hb.zero .ic { opacity:.3; } .hb.zero b { color:#ff6a5a; }
#crosshair { position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 4px #000; }
/* touch: the stick on the left, the buttons in a fan on the right (above the hot-bar) */
.touch { position:absolute; inset:0; } #hzLook { position:absolute; top:0; bottom:0; inset-inline-start:42%; inset-inline-end:0; } #hzJoy { position:absolute; left:22px; bottom:96px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.2); display:grid; place-items:center; } #hzJoy i { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.28); }
.tb { position:absolute; width:56px; height:56px; border-radius:50%; background:rgba(20,16,26,.7); border:2px solid rgba(255,255,255,.25); color:#fff; display:grid; place-items:center; } .tb.on { background:rgba(230,162,74,.55); } .tb .ic { width:26px; height:26px; }
.tb.use { right:18px; bottom:104px; width:80px; height:80px; background:rgba(230,162,74,.45); border-color:rgba(255,226,138,.7); } .tb.use .ic { width:34px; height:34px; } .tb.run { right:108px; bottom:96px; } .tb.brt { right:174px; bottom:128px; } .tb.crc { right:22px; bottom:196px; } .tb.lit { right:92px; bottom:176px; } .tb.vw { right:160px; bottom:210px; width:44px; height:44px; } .tb.vw .ic { width:22px; height:22px; }
@media (max-width:760px) {
  #hud .colR { max-width:calc(100vw - 196px); } #status { width:min(158px,44vw); padding:6px 8px 7px; gap:5px; } #status .stat.noise { display:none; } .srow0 { gap:6px; } .keys .ic { width:16px; height:16px; } .hp > .ic { width:18px; height:18px; } .hpbar { height:16px; }
  #obj { padding:6px 10px; gap:8px; } #obj b { font-size:.84rem; } #obj small { font-size:.68rem; } #obj .ic { width:22px; height:22px; } #mapBox { width:96px; height:96px; }
  #toasts { top:max(150px,calc(env(safe-area-inset-top) + 142px)); width:78vw; } #alertBox { top:max(58px,calc(env(safe-area-inset-top) + 50px)); transform:translateX(-50%) scale(.8); }
  #hotbar { gap:5px; bottom:max(6px,env(safe-area-inset-bottom)); } .hb { width:58px; height:62px; } .hb .ic { width:24px; height:24px; } .hb small { font-size:.56rem; }
  #effects { bottom:max(76px,calc(env(safe-area-inset-bottom) + 72px)); } #capts { bottom:max(250px,calc(env(safe-area-inset-bottom) + 240px)); } #subs { bottom:auto; top:max(190px,calc(env(safe-area-inset-top) + 182px)); width:94vw; } #subs .sub { font-size:.95rem; padding:6px 12px; }
  #prompt { bottom:max(236px,calc(env(safe-area-inset-bottom) + 226px)); } #breath { bottom:max(292px,calc(env(safe-area-inset-bottom) + 282px)); }
  .tabs { grid-template-columns:1fr; } .panel { padding:14px; }
}

/* messages in the middle of the screen */
.card { position:absolute; inset:0; z-index:40; display:grid; place-items:center; pointer-events:none; text-align:center; animation:cardIn 3.4s forwards; } .card .a { color:var(--amber2); letter-spacing:3px; font-weight:800; font-size:1.1rem; } .card h1 { margin:6px 0; font-size:clamp(40px,9vw,92px); font-weight:900; text-shadow:0 0 30px rgba(196,32,44,.9); } .card p { margin:0; color:var(--muted); font-size:1.2rem; } @keyframes cardIn { 0% { opacity:0; transform:scale(1.15); } 12% { opacity:1; transform:none; } 80% { opacity:1; } 100% { opacity:0; } }
.found { position:absolute; left:50%; top:30%; transform:translateX(-50%); z-index:41; background:var(--panel); border:2px solid var(--cyan); border-radius:18px; padding:16px 26px; text-align:center; animation:foundIn 4s forwards; box-shadow:0 0 50px rgba(63,224,255,.3); pointer-events:none; } .found .ic { width:54px; height:54px; color:var(--cyan); } .found h3 { margin:6px 0 2px; } .found p { margin:0; color:var(--muted); } @keyframes foundIn { 0% { opacity:0; transform:translate(-50%,16px) scale(.9); } 10% { opacity:1; transform:translateX(-50%); } 85% { opacity:1; } 100% { opacity:0; } }
.note { position:absolute; inset:0; z-index:45; display:grid; place-items:center; background:rgba(0,0,0,.6); } .paper { width:min(460px,90vw); background:#d8c9a2; color:#2a1e10; border-radius:6px; padding:26px 28px; line-height:2; box-shadow:0 20px 60px #000; transform:rotate(-1deg); background-image:radial-gradient(rgba(120,90,40,.15) 1px,transparent 1px); background-size:7px 7px; } .paper h3 { margin:0 0 8px; font-size:1.3rem; } .paper small { color:#7a5a30; }
.memory { background:linear-gradient(180deg,rgba(255,240,250,.92),rgba(255,226,240,.92)); color:#4a2a44; border-radius:20px; padding:24px 32px; width:min(560px,90vw); text-align:center; box-shadow:0 0 80px rgba(255,200,240,.7); line-height:2; font-size:1.15rem; } .memory h3 { margin:0 0 6px; color:#a04a80; }
.caught { background:#000; z-index:70; color:#fff; text-align:center; } .caught h2 { font-size:clamp(28px,6vw,54px); color:var(--red); margin:0 0 10px; text-shadow:0 0 20px rgba(196,32,44,.8); } .caught p { font-size:1.3rem; max-width:640px; line-height:1.9; }
.credits { overflow:hidden; } .credits .roll { animation:roll 24s linear forwards; text-align:center; line-height:2.4; font-size:1.3rem; } .credits .roll b { display:block; color:var(--amber2); font-size:1rem; margin-top:18px; } @keyframes roll { from { transform:translateY(60vh); } to { transform:translateY(-120%); } }
.rewards { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:14px 0; } .reward { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 20px; font-weight:900; font-size:1.2rem; display:flex; align-items:center; gap:8px; }
.range { display:flex; align-items:center; gap:12px; margin:10px 0; } .range label { width:140px; font-weight:700; } .range input[type=range] { flex:1; accent-color:var(--amber); }
.seg { display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .seg button { background:none; border:0; color:var(--text); padding:.5em 1.1em; cursor:pointer; font-weight:800; } .seg button.on { background:var(--amber); color:#1a0e04; }

@media (max-height:640px) { .tlogo { font-size:clamp(44px,12vh,88px); } .tsub { margin:2px 0; font-size:clamp(15px,3.6vh,22px); } .tmini { margin:0 0 10px; font-size:.85rem; }
  .menu { display:grid; grid-template-columns:1fr 1fr; width:min(640px,94vw); gap:8px; } .menu .btn { font-size:1rem; padding:.6em .8em; } .menu .btn.big, .menu .btn:last-child { grid-column:1/-1; } #title { padding-top:52px; } }
/* the buttons at the bottom of a tall panel stay in reach while the list scrolls */
.panel.tall > .row:last-child { position:sticky; bottom:0; z-index:3; padding:22px 0 2px; margin-bottom:-6px; background:linear-gradient(rgba(12,10,16,0), #0c0a10 32%); flex-wrap:wrap; gap:8px; }
@media (max-width:760px) {
  .shopHead { flex-wrap:wrap; } .shopHead img { width:64px; height:64px; } .shopHead .bubble { flex:1 1 150px; min-width:0; } .shopHead .chip { margin-inline-start:auto; }
}
}

.hpbig { display:flex; align-items:center; gap:12px; justify-content:center; margin-top:18px; width:min(420px,86vw); } .hpbig > .ic { width:34px; height:34px; color:#ff4a5a; fill:currentColor; } .hpbig .hpbar { height:26px; border-radius:13px; } .hpbig .hpbar b { font-size:1rem; } .hpbig em { font-style:normal; color:#ff5a6a; font-weight:900; font-size:1.5rem; min-width:56px; }
.dcard .hpbar { height:14px; } .dcard .hpbar b { font-size:.66rem; }
.shopItem.ping { animation:itemPing .45s; } @keyframes itemPing { 30% { transform:scale(1.04); border-color:var(--amber); box-shadow:0 0 18px rgba(230,162,74,.35); } }

/* ================= the lobby ================= */
#hud.lobby > *:not(.touch):not(#prompt):not(#crosshair):not(#toasts):not(#subs) { display:none !important; }
 #hud.lobby #toasts { top:max(84px,calc(env(safe-area-inset-top) + 76px)); }
#lobbyHud { position:absolute; inset:0; z-index:19; pointer-events:none; }
#lobbyHud button, #lobbyHud #chat, #lobbyHud #lbEmotes { pointer-events:auto; }
#lbTags, #lbLabels { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.lbTop { position:absolute; top:max(10px,env(safe-area-inset-top)); left:12px; right:12px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; direction:ltr; } .lbTop > * { direction:rtl; }
.lbCard { display:flex; align-items:center; gap:10px; background:rgba(10,8,14,.72); border:1px solid var(--line); border-radius:14px; padding:6px 14px 6px 8px; backdrop-filter:blur(5px); box-shadow:0 6px 24px rgba(0,0,0,.45); }
.lbCard img { width:44px; height:44px; border-radius:50%; border:2px solid var(--amber); background:#2a2118; } .lbCard b { display:block; line-height:1.3; } .lbCard small { color:var(--muted); display:flex; align-items:center; gap:5px; } .lbCard small .ic { width:14px; height:14px; }
.lbTitle { text-align:center; background:rgba(10,8,14,.6); border:1px solid var(--line); border-radius:14px; padding:6px 20px; backdrop-filter:blur(5px); } .lbTitle b { display:block; font-size:1.15rem; color:var(--amber2); } .lbTitle small { color:var(--muted); display:flex; align-items:center; gap:5px; justify-content:center; } .lbTitle small .ic { width:14px; height:14px; }
#lbMenu { padding:10px 13px; cursor:pointer; color:#fff; background:rgba(10,8,14,.72); }
#lbHint { position:absolute; left:50%; top:max(78px,calc(env(safe-area-inset-top) + 70px)); transform:translateX(-50%); animation:hintFade 22s forwards; background:rgba(10,8,14,.62); border:1px solid var(--line); border-radius:999px; padding:4px 16px; font-size:.84rem; color:var(--muted); white-space:nowrap; } #lbHint b { color:var(--amber2); }
.slabel { position:absolute; left:0; top:0; display:flex; align-items:center; gap:6px; background:rgba(10,8,14,.78); border:1px solid rgba(255,226,138,.5); border-radius:999px; padding:3px 12px; font-weight:800; font-size:.86rem; white-space:nowrap; will-change:transform; box-shadow:0 0 14px rgba(230,162,74,.25); }
.slabel .ic { width:16px; height:16px; color:var(--amber2); } .slabel.big { font-size:1.2rem; padding:5px 20px; border-color:#9fe8ff; box-shadow:0 0 24px rgba(63,224,255,.45); } .slabel.big .ic { width:20px; height:20px; color:#9fe8ff; } .slabel.small { font-size:.78rem; padding:2px 10px; }
.ntag { position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:3px; will-change:transform; }
.ntag .nm { font-weight:800; font-size:.85rem; text-shadow:0 0 3px #000, 0 1px 2px #000; white-space:nowrap; } .ntag .nm .ic.crown { width:.95em; height:.95em; }
.ntag .bubble { background:#fff; color:#111; border-radius:12px; padding:5px 10px; font-size:.86rem; font-weight:700; max-width:220px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.3); position:relative; word-wrap:break-word; }
.ntag .bubble::after { content:""; position:absolute; bottom:-6px; left:50%; margin-left:-6px; border:6px solid transparent; border-bottom:0; border-top-color:#fff; } .ntag .bubble[hidden] { display:none; }
#lobbyHud #chat { position:absolute; left:12px; bottom:max(12px,env(safe-area-inset-bottom)); width:min(330px,46vw); font-size:.9rem; }
#chat .chat-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; } #chat .chat-toggle { display:inline-flex; align-items:center; gap:6px; background:rgba(18,20,26,.8); border:1px solid rgba(255,255,255,.12); color:var(--text); border-radius:10px; padding:.3em .7em; font-weight:800; cursor:pointer; } #chat .chat-toggle .ic { width:17px; height:17px; }
#chat .chat-badge { background:#e5484d; color:#fff; border-radius:999px; padding:0 6px; font-size:.75rem; } #chat .chat-state { display:inline-flex; align-items:center; gap:5px; font-size:.75rem; color:var(--muted); background:rgba(18,20,26,.6); border-radius:8px; padding:2px 7px; } #chat .chat-state.on { color:#6ee7b7; }
#chat .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#22c55e; } #chat .dot.off { background:#9ca3af; } #chat .dot.wait { background:#fbbf24; }
#chat .chat-body { background:rgba(10,10,14,.5); border-radius:12px; padding:6px; } #chat:hover .chat-body, #chat.typing .chat-body { background:rgba(10,10,14,.78); } #chat.closed .chat-body { display:none; }
#chat .chat-log { max-height:150px; overflow-y:auto; padding:2px 4px; line-height:1.6; text-shadow:0 1px 2px #000; scrollbar-width:thin; overscroll-behavior:contain; } #chat .chat-line { word-wrap:break-word; margin:1px 0; } #chat .chat-line.sys { color:#fde68a; font-size:.82rem; } #chat .chat-line.me span { color:#fff; }
#chat .chat-form { display:flex; gap:6px; margin-top:6px; } #chat .chat-input { flex:1; min-width:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:10px; padding:.5em .7em; font-size:.92rem; font-family:inherit; } #chat .chat-input:focus { outline:none; border-color:#6ee7b7; background:rgba(0,0,0,.55); } #chat .chat-input:disabled { opacity:.55; }
#chat .chat-send { background:#1f9a56; border:0; color:#fff; border-radius:10px; padding:0 .8em; cursor:pointer; } #chat .chat-send .ic { width:18px; height:18px; }
#lbEmotes { position:absolute; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); display:flex; gap:6px; }
#lbEmotes button { position:relative; width:62px; height:58px; border-radius:14px; background:rgba(10,8,14,.72); border:2px solid var(--line); color:var(--amber2); display:grid; place-items:center; cursor:pointer; padding:0; font-family:inherit; backdrop-filter:blur(4px); transition:transform .1s, border-color .1s; } #lbEmotes button:active { transform:scale(.93); border-color:var(--amber); }
#lbEmotes .ic { width:24px; height:24px; margin-top:-8px; } #lbEmotes i { position:absolute; top:2px; inset-inline-start:6px; font-style:normal; font-size:.68rem; font-weight:900; color:var(--muted); } #lbEmotes span { position:absolute; bottom:3px; left:0; right:0; text-align:center; font-size:.62rem; font-weight:700; color:var(--muted); }
.tripBox { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:10px 0; } .tripBox h4 { margin:0 0 8px; color:var(--amber2); } .tripGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .tripGrid .tripBox { margin:0; }
.tripBox .cards { grid-template-columns:repeat(3,1fr); } .tripBox .dcard { padding:10px; } .tripBox .dcard h3 { font-size:1.05rem; margin:2px 0; } .slots.mini .slot { width:60px; height:62px; } .slots.mini .slot small { font-size:.56rem; }
.hrow { display:flex; gap:10px; align-items:center; background:var(--card); border-radius:10px; padding:6px 12px; margin:4px 0; } .hrow b { width:24px; color:var(--amber2); } .hrow span { flex:1; font-weight:800; } .hrow em { font-style:normal; color:var(--cyan); font-size:.9rem; }
@media (max-width:760px) {
  .lbTitle { display:none; } .lbCard { padding:4px 10px 4px 6px; } .lbCard img { width:36px; height:36px; }
  #lbHint { display:none; } #lobbyHud #chat { left:12px; bottom:auto; top:max(66px,calc(env(safe-area-inset-top) + 58px)); width:min(300px,72vw); }
  #lbEmotes { right:auto; left:50%; transform:translateX(-50%); gap:5px; bottom:max(8px,env(safe-area-inset-bottom)); } #lbEmotes button { width:48px; height:46px; } #lbEmotes span, #lbEmotes i { display:none; } #lbEmotes .ic { margin-top:0; width:22px; height:22px; }
  .tripGrid { grid-template-columns:1fr; } .tripBox .cards { grid-template-columns:1fr; }
}
@keyframes hintFade { 0%,80% { opacity:1; } 100% { opacity:0; } }
#ldTip { max-width:min(460px,86vw); margin:14px auto 0; color:var(--muted); font-size:.92rem; line-height:1.8; min-height:3.2em; }
.lbSteps { position:absolute; top:max(76px,calc(env(safe-area-inset-top) + 68px)); left:12px; display:flex; flex-direction:column; gap:4px; background:rgba(10,8,14,.62); border:1px solid var(--line); border-radius:12px; padding:7px 10px; backdrop-filter:blur(4px); }
.lbStep { display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:800; color:var(--muted); direction:rtl; } .lbStep b { width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:.72rem; } .lbStep .ic { width:15px; height:15px; } .lbStep .ic:last-child { color:#6ee7b7; opacity:0; margin-inline-start:auto; }
.lbStep.done { color:#fff; } .lbStep.done b { background:#1f9a56; } .lbStep.done .ic:last-child { opacity:1; }
@media (max-width:760px) { .lbSteps { display:none; } }

/* ===== stage 7: the flashlight row and the items can be clicked, the cursor tip, the touch buttons with a jump ===== */
#hud .stat.battery, #hud .hb { pointer-events:auto; cursor:pointer; }
#stBattery.on i { box-shadow:0 0 8px #ffe27a; } #stBattery.on .ic { color:#ffe27a; filter:drop-shadow(0 0 4px #ffb020); } #stStamina.auto .ic { color:#8bf0a8; filter:drop-shadow(0 0 4px #27b96a); }
#cursorHint { position:absolute; top:max(78px,calc(env(safe-area-inset-top) + 70px)); left:50%; transform:translateX(-50%); background:rgba(10,8,14,.78); border:1px solid var(--amber); border-radius:999px; padding:5px 16px; font-size:.86rem; font-weight:700; white-space:nowrap; pointer-events:none; display:flex; align-items:center; gap:7px; max-width:94vw; overflow:hidden; text-overflow:ellipsis; }
#cursorHint[hidden] { display:none; } #cursorHint .ic { width:16px; height:16px; color:var(--amber2); } #cursorHint b { color:var(--amber2); } #cursorHint[data-s=free] { border-color:#9fe8ff; } #cursorHint[data-s=free] .ic { color:#9fe8ff; }
.tb.use { right:18px; bottom:104px; } .tb.jmp { right:108px; bottom:100px; width:64px; height:64px; background:rgba(0,180,110,.4); border-color:rgba(120,255,190,.6); } .tb.jmp .ic { width:30px; height:30px; }
.tb.brt { right:108px; bottom:100px; width:64px; height:64px; } .tb.run { right:20px; bottom:196px; width:54px; height:54px; } .tb.crc { right:84px; bottom:186px; width:54px; height:54px; } .tb.lit { right:148px; bottom:172px; width:54px; height:54px; }
.tb.vw { right:206px; bottom:150px; width:42px; height:42px; } .tb.active { background:rgba(230,162,74,.6); border-color:var(--amber2); box-shadow:0 0 14px rgba(230,162,74,.5); }
#hud.hiding .tb.jmp, #hud:not(.hiding) .tb.brt { display:none; }
#hud.lobby .tb:not(.use):not(.vw):not(.jmp):not(.run) { display:none; } #hud.lobby.hiding .tb.jmp { display:grid; }

/* ===== stage 7: the settings screen (tabs, readable numbers, key sheet) ===== */
.stabs { display:flex; gap:6px; margin:6px 0 12px; border-bottom:1px solid var(--line); padding-bottom:10px; position:sticky; top:-22px; z-index:4; background:var(--panel); padding-top:6px; }
.stabs button { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:var(--card); border:1px solid var(--line); color:var(--muted); padding:.6em .4em; border-radius:12px; font-weight:800; font-size:.98rem; cursor:pointer; }
.stabs button.on { background:var(--amber); color:#1a0e04; border-color:var(--amber); }
.stabs svg { width:20px; height:20px; }
#sPage .range { align-items:center; padding:9px 10px; border-radius:12px; background:rgba(255,255,255,.035); margin:8px 0; flex-wrap:wrap; }
#sPage .range label { width:190px; display:flex; flex-direction:column; gap:2px; font-size:1rem; }
#sPage .range label small { color:var(--muted); font-weight:500; font-size:.76rem; line-height:1.5; }
#sPage .range output { min-width:58px; text-align:center; background:#000; border:1px solid var(--line); border-radius:9px; padding:3px 8px; font-weight:900; color:var(--amber2); font-variant-numeric:tabular-nums; }
#sPage .range input[type=range] { min-width:120px; height:28px; cursor:pointer; }
#sPage select { flex:1; background:var(--card); color:#fff; border:1px solid var(--line); border-radius:10px; padding:9px; min-width:150px; }
#sPage .seg { flex-wrap:wrap; }
.keys { display:grid; grid-template-columns:repeat(2,1fr); gap:6px 14px; margin:14px 0 4px; }
.keys > div { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.035); border-radius:10px; padding:7px 10px; font-size:.86rem; }
.keys kbd { flex:0 0 auto; min-width:46px; text-align:center; background:#000; border:1px solid #6b5a3a; border-bottom-width:3px; border-radius:7px; padding:3px 8px; font:800 .8rem/1.3 inherit; color:var(--amber2); white-space:nowrap; }
.keys span { color:var(--text); line-height:1.5; }
#fpsBox { position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:45; background:rgba(0,0,0,.6); color:#9f9; font:700 .74rem/1 monospace; padding:3px 8px; border-radius:8px; pointer-events:none; }
@media (max-width:640px) {
  .stabs span { display:none; } .stabs button { padding:.7em 0; }
  #sPage .range label { width:100%; } #sPage .range input[type=range] { flex:1 1 60%; }
  .keys { grid-template-columns:1fr; }
}

/* ===== stage 7: chapter stars ===== */
.stars { display:flex; justify-content:center; gap:10px; margin:6px 0 4px; }
.stars span { width:62px; height:62px; display:grid; place-items:center; color:#3a3340; opacity:0; transform:scale(.3) rotate(-30deg); animation:starIn .45s cubic-bezier(.2,1.6,.4,1) forwards; }
.stars span:nth-child(2) { width:76px; height:76px; margin-top:-10px; }
.stars span .ic { width:100%; height:100%; fill:currentColor; stroke:#14101a; stroke-width:1; }
.stars span.on { color:#ffc93a; filter:drop-shadow(0 0 10px rgba(255,190,40,.65)); }
@keyframes starIn { to { opacity:1; transform:scale(1) rotate(0); } }
.starBest { color:#ffd76a; font-weight:900; display:flex; align-items:center; justify-content:center; gap:6px; margin:2px 0 6px; } .starBest .ic { width:18px; height:18px; }
.starList { list-style:none; padding:0; margin:6px auto 10px; max-width:430px; text-align:start; display:grid; gap:5px; }
.starList li { display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); background:rgba(255,255,255,.035); border-radius:9px; padding:6px 10px; }
.starList li .ic { width:16px; height:16px; flex:0 0 auto; color:#7a6f84; }
.starList li.ok { color:var(--text); } .starList li.ok .ic { color:#5fe08a; }
.cstars { display:flex; gap:2px; margin:2px 0 4px; } .cstars i { width:17px; height:17px; color:#3a3340; display:inline-grid; } .cstars i .ic { width:100%; height:100%; fill:currentColor; stroke:none; } .cstars i.on { color:#ffc93a; }

/* the pebble (G): the same shape as an item of the hot-bar, at its side; a dark curtain covers it while you wait */
#stoneBox { position:absolute; left:calc(50% + 162px); bottom:max(12px,env(safe-area-inset-bottom)); width:60px; overflow:hidden; color:#d8cdb8; }
#stoneBox[hidden] { display:none; }
#stoneBox u { position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(8,6,12,.62); pointer-events:none; transition:height .12s linear; }
#stoneBox.wait { border-color:var(--line); } #stoneBox:not(.wait) { border-color:rgba(255,226,138,.55); }
#hud.lobby #stoneBox, #hud.hiding #stoneBox { display:none; }
@media (max-width:760px) { #stoneBox { left:calc(50% + 131px); bottom:max(6px,env(safe-area-inset-bottom)); width:52px; } }

/* the three key pieces in the status card stay in one row (the key sheet of the settings is also called ".keys") */
#keysBox { display:inline-flex; gap:4px; margin:0; }

/* ===== 0.8.1: phones =====
   A phone standing up: a few buttons and boxes that sat on each other are moved apart. */
@media (max-width:760px) and (min-height:521px) {
  .tb.vw { right:154px; bottom:234px; }
  /* the eye of ماتركس goes under your bars on the left (in the middle it lay on the map) */
  #alertBox { left:91px; top:max(118px,calc(env(safe-area-inset-top) + 110px)); }
  #hud .colR { align-items:flex-start; }
  #toasts { top:max(196px,calc(env(safe-area-inset-top) + 188px)); left:12px; transform:none; width:calc(100vw - 132px); align-items:flex-start; }
  #hud.lobby #toasts { top:max(112px,calc(env(safe-area-inset-top) + 104px)); left:50%; transform:translateX(-50%); width:78vw; align-items:center; }
  #subs { top:auto; bottom:max(350px,calc(env(safe-area-inset-bottom) + 340px)); left:12px; transform:none; width:calc(100vw - 132px); text-align:start; }
  #effects { bottom:max(66px,calc(env(safe-area-inset-bottom) + 62px)); } .fxp { padding:0 9px 2px; font-size:.72rem; }
  #prompt { bottom:max(280px,calc(env(safe-area-inset-bottom) + 270px)); width:max-content; max-width:94vw; } #breath { bottom:max(328px,calc(env(safe-area-inset-bottom) + 318px)); }
  #capts { bottom:max(300px,calc(env(safe-area-inset-bottom) + 290px)); }
}

/* A phone lying on its side: the screen is wide but very short (275 to 430 points, less when the browser
   keeps its bars). Everything gets smaller and takes its own corner, so that nothing lies on anything:
     top left      your blood and bars, with the little map beside them (lobby: your card, the chat under it)
     top middle    the eye of ماتركس, then the short messages
     top right     the objective (lobby: the menu)
     bottom left   the stick
     bottom middle the items and the pebble (lobby: the emotes), and above them the prompt and the spoken words
     bottom right  the buttons: camera and flashlight at the bottom, hand and jump over them, run and crouch on top */
@media (max-height:520px) and (min-aspect-ratio:1/1) {
  #app { --st:env(safe-area-inset-top, 0px); --sb:env(safe-area-inset-bottom, 0px); --sl:env(safe-area-inset-left, 0px); --sr:env(safe-area-inset-right, 0px); --sw:clamp(128px, 19vw, 150px); }
  #hud .top, .lbTop { top:max(6px,var(--st)); left:max(10px,var(--sl)); right:max(10px,var(--sr)); gap:6px; }

  /* ---- the game ---- */
  #hud .colL, #hud .colR { gap:5px; } #hud .colR { max-width:min(300px,36vw); }
  #status { width:var(--sw); padding:5px 7px 6px; gap:4px; border-radius:12px; } #status .stat.noise { display:none; }
  .srow0 { gap:6px; } .srow0 .chip.btn { padding:3px 7px; } .srow0 .chip.btn .ic { width:15px; height:15px; } #keysBox { gap:2px; } #keysBox .ic { width:15px; height:15px; } .coinz { font-size:.84rem; gap:3px; } .coinz .ic { width:15px; height:15px; }
  .hp { gap:5px; } .hp > .ic { width:16px; height:16px; } .hpbar { height:14px; } .hpbar b { font-size:.68rem; } .stat { gap:5px; } .stat .ic { width:13px; height:13px; } .stat .track { height:6px; }
  #obj { padding:3px 10px; gap:7px; border-radius:10px; } #obj b { font-size:.8rem; line-height:1.3; } #obj small { font-size:.64rem; } #obj .ic { width:18px; height:18px; }
  #mapBox { position:absolute; top:0; left:calc(var(--sw) + 8px); width:clamp(60px, 9.5vw, 74px); height:clamp(60px, 9.5vw, 74px); } #mapPlace { font-size:.6rem; padding:0 6px; bottom:-8px; }
  #compassBox { position:absolute; top:calc(clamp(60px, 9.5vw, 74px) + 12px); left:calc(var(--sw) + 8px); margin:0; padding:0 7px 2px; } #compassBox svg { width:28px; height:28px; } #compassBox b { font-size:.68rem; margin-top:-3px; }
  #alertBox { top:max(4px,var(--st)); transform:translateX(-50%) scale(.72); transform-origin:top center; }
  #toasts { top:calc(max(4px,var(--st)) + 42px); left:calc(var(--sw) + clamp(60px, 9.5vw, 74px) + max(10px,var(--sl)) + 18px); right:calc(min(300px,36vw) + max(10px,var(--sr)) + 10px); width:auto; transform:none; gap:4px; }
  #hud.lobby #toasts { top:calc(max(4px,var(--st)) + 42px); left:50%; right:auto; transform:translateX(-50%); width:min(300px,40vw); } .toast { padding:3px 10px; font-size:.78rem; border-radius:9px; gap:6px; } #toasts .toast:nth-last-child(n+3) { display:none; }
  #hotbar { gap:4px; bottom:max(6px,var(--sb)); } .hb { width:48px; height:50px; border-radius:11px; } .hb .ic { width:21px; height:21px; margin-top:-4px; } .hb i { font-size:.6rem; top:1px; inset-inline-start:5px; } .hb b { font-size:.7rem; top:1px; inset-inline-end:5px; } .hb small { font-size:.5rem; bottom:2px; }
  #stoneBox { left:calc(50% + 106px); bottom:max(6px,var(--sb)); width:46px; }
  #effects { bottom:calc(max(6px,var(--sb)) + 54px); gap:4px; } .fxp { font-size:.68rem; padding:0 8px 2px; gap:4px; } .fxp .ic { width:12px; height:12px; }
  #prompt { bottom:calc(max(6px,var(--sb)) + 78px); padding:4px 13px; font-size:.86rem; border-radius:11px; gap:7px; width:max-content; max-width:calc(100vw - 300px); }
  #subs { top:auto; bottom:calc(max(6px,var(--sb)) + 116px); width:min(500px,52vw); } #subs .sub { font-size:.82rem; padding:4px 11px; line-height:1.5; }
  #breath { bottom:calc(max(6px,var(--sb)) + 116px); width:min(250px,40vw); } #breath b { font-size:.8rem; } #breath .track { height:9px; margin-top:4px; }
  #capts { left:max(14px,var(--sl)); bottom:calc(max(14px,var(--sb)) + 106px); gap:3px; } .capt { font-size:.72rem; padding:2px 8px; }

  /* ---- the stick and the buttons ---- */
  #hzJoy { left:max(18px,calc(var(--sl) + 4px)); bottom:max(14px,var(--sb)); width:104px; height:104px; } #hzJoy i { width:44px; height:44px; }
  /* two straight columns (the middles of the buttons are in line) and three rows with the same gap */
  .tb.use { right:max(12px,var(--sr)); bottom:calc(max(8px,var(--sb)) + 54px); width:64px; height:64px; } .tb.use .ic { width:28px; height:28px; }
  .tb.jmp, .tb.brt { right:calc(max(12px,var(--sr)) + 74px); bottom:calc(max(8px,var(--sb)) + 59px); width:54px; height:54px; } .tb.jmp .ic { width:25px; height:25px; }
  .tb.run { right:calc(max(12px,var(--sr)) + 10px); bottom:calc(max(8px,var(--sb)) + 126px); width:44px; height:44px; }
  .tb.crc { right:calc(max(12px,var(--sr)) + 79px); bottom:calc(max(8px,var(--sb)) + 126px); width:44px; height:44px; }
  .tb.vw { right:calc(max(12px,var(--sr)) + 9px); bottom:max(8px,var(--sb)); width:46px; height:46px; }
  .tb.lit { right:calc(max(12px,var(--sr)) + 78px); bottom:max(8px,var(--sb)); width:46px; height:46px; }
  .tb .ic { width:21px; height:21px; }

  /* ---- the lobby ---- */
  .lbSteps, #lbHint { display:none; }
  .lbCard { padding:3px 10px 3px 5px; gap:7px; border-radius:12px; } .lbCard img { width:32px; height:32px; } .lbCard b { font-size:.84rem; line-height:1.2; } .lbCard small { font-size:.68rem; }
  .lbTitle { display:block; padding:3px 14px; border-radius:12px; } .lbTitle b { display:inline; font-size:.9rem; } .lbTitle small { display:inline-flex; font-size:.7rem; margin-inline-start:8px; }
  #lbMenu { padding:6px 9px; }
  #lobbyHud #chat { top:calc(max(6px,var(--st)) + 46px); bottom:auto; left:max(10px,var(--sl)); width:min(290px,42vw); font-size:.8rem; } #chat .chat-head { justify-content:flex-end; margin-bottom:3px; } #chat .chat-toggle { padding:.2em .6em; } #chat .chat-log { max-height:58px; }
  #lobbyHud #chat:not(.closed) { z-index:3; } #lobbyHud #chat:not(.closed) .chat-body { background:rgba(10,10,14,.9); }
  #lbEmotes { right:auto; left:50%; transform:translateX(-50%); gap:4px; bottom:max(6px,var(--sb)); } #lbEmotes button { width:46px; height:44px; border-radius:11px; } #lbEmotes span, #lbEmotes i { display:none; } #lbEmotes .ic { margin-top:0; width:21px; height:21px; }
  .slabel { font-size:.72rem; padding:2px 9px; gap:4px; } .slabel .ic { width:13px; height:13px; } .slabel.big { font-size:.92rem; padding:3px 14px; } .slabel.big .ic { width:16px; height:16px; } .slabel.small { font-size:.66rem; padding:1px 8px; }
  .ntag .nm { font-size:.74rem; } .ntag .bubble { font-size:.74rem; padding:3px 8px; max-width:170px; }

  /* ---- the title and the menus: the name small at the top, the four buttons in one row ---- */
  .screen { padding:8px max(12px,var(--sl)); } .panel { padding:10px 14px; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); border-radius:14px; }
  .panel h2 { font-size:1.05rem; margin:0 0 2px; } .panel .sub { font-size:.76rem; margin:0 0 6px; line-height:1.5; }
  .panel.tall > .row:last-child { padding:12px 0 0; margin-bottom:-2px; } .panel .btn.big { font-size:.98rem; padding:.5em 1.3em; } .panel .btn { font-size:.9rem; }
  .tripBox { padding:8px 10px; margin:6px 0; } .tripBox h4 { margin:0 0 5px; font-size:.86rem; } .stabs { top:-10px; margin:4px 0 8px; padding-bottom:6px; } .stabs button { padding:.4em .3em; font-size:.84rem; }
  #title { padding-top:36px; } .tinfo { top:max(6px,var(--st)); inset-inline:max(10px,var(--sl)); } .tinfo .chip { font-size:.76rem; padding:2px 10px; }
  .tlogo { font-size:clamp(32px,17vh,66px); } .tsub { font-size:.88rem; margin:0; } #title .tmini { margin:2px 0 6px; font-size:.72rem; }
  #title .menu { grid-template-columns:1.35fr 1.25fr 1fr 1fr; width:min(800px,96vw); gap:6px; } #title .menu .btn { font-size:.84rem; padding:.62em .4em; justify-content:center; grid-column:auto; }
}

/* ===== 0.8.2: touch =====
   The look pad is the whole screen and lies UNDER everything else of the interface. (It used to cover only one
   side, the wrong one on a right-to-left page, and it lay on top of the pause button, the items and the lobby
   buttons there, so a tap on them turned the view instead.) */
#hzLook { top:0; bottom:0; left:0; right:0; inset-inline:0; z-index:-1; }
#lobbyHud { z-index:21; }
/* a very narrow phone lying down: the items a little smaller, so the pebble does not touch the flashlight button */
@media (max-height:520px) and (min-aspect-ratio:1/1) and (max-width:640px) { .hb { width:44px; } #stoneBox { left:calc(50% + 98px); width:42px; } }

/* ===== 0.8.3: a page that behaves like an app =====
   dark all the way (a browser paints what is around the page with the colours of a dark page), no rubber-band
   scrolling, no magnifier or menu when a finger rests on the screen */
:root { color-scheme:dark; }
html, body { overscroll-behavior:none; -webkit-touch-callout:none; }
/* (the big name of the game is drawn in a tall font: its letters reach above their own line and lay over the top row) */
.tinfo { z-index:2; } .tinfo .chip.btn { cursor:pointer; color:#fff; } .tinfo .chip.btn .ic { color:var(--amber2); }
.steps { margin:6px 0 4px; padding-inline-start:1.4em; line-height:2; font-size:1rem; } .steps b { color:var(--amber2); } .steps .ic { width:1.1em; height:1.1em; }
@media (max-height:520px) and (min-aspect-ratio:1/1) { .steps { line-height:1.6; font-size:.86rem; margin:2px 0; } }