/* POINT RESCUE AAA — UI / HUD styles.  All sizes scale with --u (1 unit = 1px at 1280x720). */
:root {
  --u: min(0.078125vw, 0.13888889vh);
  --yellow: #fff561;
  --amber: #ffc53d;
  --amber-deep: #ff9d00;
  --red: #ff3b30;
  --ink: #06080c;
  --panel: rgba(8, 12, 18, 0.72);
  --panel-edge: rgba(255, 213, 90, 0.35);
  --font-hud: 'Russo One', 'Arial Black', sans-serif;
  --font-logo: 'Black Ops One', 'Russo One', sans-serif;
  --font-ui: 'Rajdhani', 'Helvetica Neue', sans-serif;
  --font-num: 'Teko', 'Russo One', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { color: #fff; font-family: var(--font-ui); user-select: none; -webkit-user-select: none; }
#stage { position: fixed; inset: 0; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
body.retro #gl { image-rendering: pixelated; }
.hidden { display: none !important; }

/* ---------- crosshair ---------- */
#crosshair {
  position: absolute; left: 0; top: 0; width: calc(var(--u) * 64); height: calc(var(--u) * 64);
  margin: calc(var(--u) * -32) 0 0 calc(var(--u) * -32);
  pointer-events: none; z-index: 60; will-change: transform;
  background: url('../../assets/ui/crosshair.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(0,0,0,.9));
  transition: scale .06s ease-out;
}
#crosshair.kick { scale: 1.28; transition: none; }
#crosshair.menu { background-image: url('../../assets/ui/cursor.svg'); width: calc(var(--u)*40); height: calc(var(--u)*40); margin: calc(var(--u) * -6) 0 0 calc(var(--u) * -6); }
#crosshair.off { background: none; }
body.cursor-visible, body.cursor-visible * { cursor: auto; }
/* the crosshair is the OS cursor: the system draws it, so it never lags behind the mouse, whatever the
   frame rate (a DOM crosshair moves only when the next frame is presented) */
#crosshair { display: none !important; }
body.ingame, body.ingame * { cursor: url('../../assets/ui/crosshair_cursor.png') 32 32, crosshair !important; }
body.ingame, body.ingame * { cursor: -webkit-image-set(url('../../assets/ui/crosshair_cursor.png') 1x, url('../../assets/ui/crosshair_cursor@2x.png') 2x) 32 32, crosshair !important; }
body.ingame.nocursor, body.ingame.nocursor * { cursor: none !important; }

#sinden { position: absolute; inset: 0; border: calc(var(--u) * 22) solid #fff; pointer-events: none; z-index: 70; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; mix-blend-mode: screen; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 30; font-family: var(--font-hud); }
.hud-btn { pointer-events: auto; }
#pauseBtn {
  position: absolute; left: calc(var(--u) * 28); top: calc(var(--u) * 22);
  width: calc(var(--u) * 58); height: calc(var(--u) * 58);
  background: linear-gradient(160deg, rgba(40,48,60,.85), rgba(10,14,20,.85));
  border: calc(var(--u) * 2) solid rgba(255, 230, 120, .55); border-radius: calc(var(--u) * 10);
  display: flex; gap: calc(var(--u) * 9); align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 calc(var(--u)*4) calc(var(--u)*14) rgba(0,0,0,.5), inset 0 0 calc(var(--u)*10) rgba(255,210,80,.12);
}
#pauseBtn i { display: block; width: calc(var(--u) * 10); height: calc(var(--u) * 28); background: var(--yellow); border-radius: calc(var(--u) * 2); box-shadow: 0 0 calc(var(--u)*8) rgba(255,230,90,.7); }
#pauseBtn:hover { border-color: var(--yellow); }

#hearts { position: absolute; top: calc(var(--u) * 24); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * 8); }
.heart { width: calc(var(--u) * 46); height: calc(var(--u) * 42); background: url('../../assets/ui/heart.svg') center / contain no-repeat; filter: drop-shadow(0 calc(var(--u)*3) calc(var(--u)*4) rgba(0,0,0,.6)); transition: opacity .2s; }
.heart.empty { background-image: url('../../assets/ui/heart_empty.svg'); opacity: .75; }
.heart.pop { animation: heartpop .45s ease-out; }
.heart.lost { animation: heartlost .6s ease-out; }
@keyframes heartpop { 0% { transform: scale(1.6); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes heartlost { 0% { transform: scale(1.5) rotate(-8deg); filter: brightness(3); } 100% { transform: scale(1); } }

#scoreBox { position: absolute; right: calc(var(--u) * 34); top: calc(var(--u) * 16); text-align: right; }
#scoreLabel { font-family: var(--font-ui); font-weight: 700; letter-spacing: calc(var(--u) * 5); font-size: calc(var(--u) * 16); color: rgba(255,255,255,.75); text-shadow: 0 0 calc(var(--u)*6) #000; }
#score { font-family: var(--font-num); font-weight: 600; font-size: calc(var(--u) * 64); line-height: .85; color: var(--yellow);
  text-shadow: 0 calc(var(--u)*2) 0 #7a5a00, 0 0 calc(var(--u)*18) rgba(255,190,40,.55), 0 calc(var(--u)*4) calc(var(--u)*10) rgba(0,0,0,.8);
  font-variant-numeric: tabular-nums; }
#score.bump { animation: bump .25s ease-out; }
@keyframes bump { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
#multiRow { font-family: var(--font-num); font-weight: 600; color: #fff; font-size: calc(var(--u) * 52); line-height: .9; margin-top: calc(var(--u) * 2);
  text-shadow: 0 0 calc(var(--u)*14) rgba(255,160,20,.7), 0 calc(var(--u)*3) calc(var(--u)*6) rgba(0,0,0,.8); }
#multiX { font-size: .7em; margin-right: calc(var(--u) * 4); color: var(--amber); }
#multiRow.hot { color: var(--amber); }
#multiRow.max { color: #ff6a3d; animation: pulse .5s infinite alternate; }
#multiRow.up { animation: multiup .22s ease-out; }
@keyframes multiup { 0% { transform: scale(1.35) skewX(-8deg); } 100% { transform: scale(1); } }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.6); } }
#chain { display: flex; justify-content: flex-end; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 6); }
#chain i { display: block; width: calc(var(--u) * 14); height: calc(var(--u) * 6); background: rgba(255,255,255,.18); transform: skewX(-20deg); }
#chain i.on { background: var(--amber); box-shadow: 0 0 calc(var(--u)*6) var(--amber-deep); }

#ammoBox { position: absolute; left: calc(var(--u) * 30); bottom: calc(var(--u) * 26); }
/* V2: the player's bombs (G / middle button) */
#bombBox { position: absolute; left: calc(var(--u) * 30); bottom: calc(var(--u) * 160); display: flex; align-items: center; gap: calc(var(--u) * 8); }
#bombs { display: flex; gap: calc(var(--u) * 6); }
.bomb { width: calc(var(--u) * 26); height: calc(var(--u) * 30); border-radius: 48% 48% 44% 44%; position: relative;
  background: radial-gradient(circle at 35% 35%, #7d8f4a, #3d4a24 55%, #1e2612); box-shadow: 0 calc(var(--u)*3) calc(var(--u)*4) rgba(0,0,0,.7); }
.bomb::before { content: ''; position: absolute; left: 34%; top: calc(var(--u) * -6); width: 32%; height: calc(var(--u) * 8); background: #a8acb0; border-radius: calc(var(--u) * 2); }
.bomb::after { content: ''; position: absolute; left: 44%; top: calc(var(--u) * -9); width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: #40ff50; box-shadow: 0 0 calc(var(--u)*6) #40ff50; }
.bomb.spent { opacity: .18; filter: grayscale(1); }
.bomb.spent::after { display: none; }
.bombKey { font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 15); color: rgba(255,255,255,.75); border: calc(var(--u)*2) solid rgba(255,255,255,.5);
  border-radius: calc(var(--u) * 4); padding: 0 calc(var(--u) * 6); text-shadow: 0 0 calc(var(--u)*4) #000; }
#ammo { display: flex; align-items: flex-end; height: calc(var(--u) * 92); }
.bullet { width: calc(var(--u) * 26); height: calc(var(--u) * 88); margin-right: calc(var(--u) * -3); background: url('../../assets/ui/bullet.svg') bottom / contain no-repeat; filter: drop-shadow(calc(var(--u)*2) calc(var(--u)*3) calc(var(--u)*3) rgba(0,0,0,.7)); }
.bullet.shell { background-image: url('../../assets/ui/shell.svg'); width: calc(var(--u) * 30); height: calc(var(--u) * 80); margin-right: calc(var(--u) * 1); }
.bullet.smg { width: calc(var(--u) * 15); height: calc(var(--u) * 64); margin-right: calc(var(--u) * -1); }
.bullet.spent { opacity: .16; filter: grayscale(1); }
.bullet.fire { animation: fire .18s ease-out; }
@keyframes fire { 0% { transform: translateY(calc(var(--u)*-18)) rotate(25deg); opacity: 1; } 100% { transform: none; } }
#weaponName { font-family: var(--font-ui); font-weight: 700; letter-spacing: calc(var(--u) * 4); font-size: calc(var(--u) * 16); color: rgba(255,255,255,.8); margin-top: calc(var(--u) * 4); text-shadow: 0 0 calc(var(--u)*6) #000; }
#weaponName.special { color: var(--amber); }
#reloadBar { width: calc(var(--u) * 150); height: calc(var(--u) * 8); background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); margin-bottom: calc(var(--u) * 8); opacity: 0; transition: opacity .1s; transform: skewX(-20deg); }
#reloadBar.on { opacity: 1; }
#reloadFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--amber-deep), var(--yellow)); box-shadow: 0 0 calc(var(--u)*8) var(--amber); }

#bossBar { position: absolute; right: calc(var(--u) * 34); bottom: calc(var(--u) * 34); display: flex; align-items: center; gap: calc(var(--u) * 14); }
#bossLabel { font-family: var(--font-logo); font-size: calc(var(--u) * 30); color: #fff; text-shadow: 0 0 calc(var(--u)*10) rgba(255,60,40,.8), 0 calc(var(--u)*2) calc(var(--u)*4) #000; letter-spacing: calc(var(--u)*2); }
#bossTrack { position: relative; width: calc(var(--u) * 340); height: calc(var(--u) * 34); background: rgba(10,10,10,.7); border: calc(var(--u) * 2) solid rgba(255,255,255,.8); transform: skewX(-16deg); overflow: hidden; box-shadow: 0 0 calc(var(--u)*16) rgba(255,40,20,.4); }
#bossFill { position: absolute; inset: 0; width: 100%; background: linear-gradient(180deg, #ff6b4a, #d8190b 60%, #8e0a02); transition: width .15s; }
#bossFill.hit { filter: brightness(2); }
#bossPct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-size: calc(var(--u) * 30); transform: skewX(16deg); text-shadow: 0 calc(var(--u)*2) calc(var(--u)*3) #000; }

#reloadPrompt { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-family: var(--font-logo); font-size: calc(var(--u) * 58); color: var(--red);
  text-shadow: 0 0 calc(var(--u)*18) rgba(255,40,20,.9), 0 calc(var(--u)*4) calc(var(--u)*6) #000; animation: blink .25s steps(2) infinite; letter-spacing: calc(var(--u)*4); }
@keyframes blink { 50% { opacity: .25; } }

#banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-family: var(--font-logo); font-size: calc(var(--u) * 64); color: #fff; letter-spacing: calc(var(--u) * 6);
  text-shadow: 0 0 calc(var(--u)*24) rgba(255,190,50,.8), 0 calc(var(--u)*4) calc(var(--u)*8) #000; }
#banner .sub { display: block; font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 22); letter-spacing: calc(var(--u) * 10); color: var(--amber); margin-top: calc(var(--u) * 6); }
#banner.show { animation: bannerIn .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes bannerIn { 0% { transform: scale(2.2); opacity: 0; filter: blur(8px); } 100% { transform: none; opacity: 1; filter: none; } }

#popups { position: absolute; inset: 0; }
.popup { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-num); font-size: calc(var(--u) * 34); font-weight: 600; color: var(--yellow); white-space: nowrap;
  text-shadow: 0 0 calc(var(--u)*8) rgba(255,170,0,.8), 0 calc(var(--u)*2) calc(var(--u)*3) #000; animation: popup 1s ease-out forwards; }
.popup.good { color: #7dff9b; text-shadow: 0 0 calc(var(--u)*10) rgba(40,255,120,.7), 0 calc(var(--u)*2) calc(var(--u)*3) #000; }
.popup.bad { color: #ff5a4f; text-shadow: 0 0 calc(var(--u)*10) rgba(255,40,40,.7), 0 calc(var(--u)*2) calc(var(--u)*3) #000; }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }

#headshot { position: absolute; transform: translate(-50%, -150%); font-family: var(--font-logo); font-size: calc(var(--u) * 40); color: #fff;
  text-shadow: 0 0 calc(var(--u)*14) rgba(255,60,30,1), 0 calc(var(--u)*3) calc(var(--u)*4) #000; white-space: nowrap; }
#headshot.show { animation: scaleOnShow .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes scaleOnShow { 0% { scale: .2; } 100% { scale: 1; } }
#hostageCross { position: absolute; width: calc(var(--u) * 96); height: calc(var(--u) * 96); transform: translate(-50%, -50%); background: url('../../assets/ui/cross.svg') center / contain no-repeat; filter: drop-shadow(0 0 calc(var(--u)*10) rgba(255,0,0,.9)); }

.dmg { position: absolute; opacity: 0; transition: opacity 0s; }
.dmg.on { opacity: 1; transition: opacity 1s linear .1s; }
.dmg.fade { opacity: 0; transition: opacity 1s linear .1s; }
#dmgFront { inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(200, 0, 0, .55) 100%); }
#dmgBack { left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(0deg, rgba(220,0,0,.5), transparent); }
#dmgLeft { left: 0; top: 0; bottom: 0; width: 14%; background: linear-gradient(90deg, rgba(220,0,0,.5), transparent); }
#dmgRight { right: 0; top: 0; bottom: 0; width: 14%; background: linear-gradient(270deg, rgba(220,0,0,.5), transparent); }
#lowHealth { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(140, 0, 0, .45) 100%); opacity: 0; }
#lowHealth.on { animation: heartbeat 1s infinite; }
@keyframes heartbeat { 0%, 100% { opacity: .2; } 15% { opacity: .9; } 30% { opacity: .35; } 45% { opacity: .75; } }
/* ---------- AAA edition: cover, hit markers, streak callouts, hints ---------- */
#coverShade { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: radial-gradient(ellipse at 50% 38%, transparent 40%, rgba(0,4,10,.62) 100%); }
#hud.in-cover #coverShade { opacity: 1; }
#coverTag { position: absolute; left: 50%; bottom: calc(var(--u) * 34); transform: translateX(-50%) translateY(calc(var(--u) * 10)); opacity: 0; transition: opacity .12s, transform .12s;
  font-family: var(--font-ui); font-weight: 700; letter-spacing: calc(var(--u) * 8); font-size: calc(var(--u) * 22); color: #a8e6ff;
  text-shadow: 0 0 calc(var(--u)*12) rgba(60,180,255,.85), 0 calc(var(--u)*2) calc(var(--u)*4) #000; display: flex; align-items: center; gap: calc(var(--u) * 10); }
#coverTag::before { content: ''; width: calc(var(--u) * 18); height: calc(var(--u) * 22); background: #a8e6ff; box-shadow: 0 0 calc(var(--u)*10) #3cb4ff;
  clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
#hud.in-cover #coverTag { opacity: 1; transform: translateX(-50%); }
#hitmarker { position: absolute; left: 0; top: 0; width: calc(var(--u) * 38); height: calc(var(--u) * 38); margin: calc(var(--u) * -19) 0 0 calc(var(--u) * -19); opacity: 0; pointer-events: none; z-index: 58;
  background: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 37%); mask: radial-gradient(circle, transparent 36%, #000 37%);
  filter: drop-shadow(0 0 calc(var(--u)*2) rgba(0,0,0,.9)); }
#hitmarker.kill { background: linear-gradient(45deg, transparent 43%, #ff3b30 43%, #ff3b30 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #ff3b30 43%, #ff3b30 57%, transparent 57%);
  filter: drop-shadow(0 0 calc(var(--u)*6) rgba(255,40,20,.9)); }
#hitmarker.show { animation: hitmark .2s ease-out; }
@keyframes hitmark { 0% { opacity: 1; transform: scale(1.4); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
#callouts { position: absolute; left: 0; right: 0; top: 19%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); pointer-events: none; }
.callout { font-family: var(--font-logo); font-size: calc(var(--u) * 52); letter-spacing: calc(var(--u) * 4); color: var(--yellow); white-space: nowrap; transform: skewX(-8deg);
  text-shadow: 0 0 calc(var(--u)*18) rgba(255,150,0,.9), 0 calc(var(--u)*4) calc(var(--u)*6) #000; animation: calloutIn 1.4s ease-out forwards; text-align: center; }
.callout .pts { display: block; font-family: var(--font-num); font-size: calc(var(--u) * 34); color: #fff; letter-spacing: calc(var(--u) * 2); margin-top: calc(var(--u) * -4); }
.callout.clear { color: #7dff9b; font-size: calc(var(--u) * 64); text-shadow: 0 0 calc(var(--u)*22) rgba(40,255,120,.8), 0 calc(var(--u)*4) calc(var(--u)*6) #000; }
@keyframes calloutIn { 0% { opacity: 0; transform: scale(2.3) skewX(-8deg); filter: blur(6px); } 12% { opacity: 1; transform: scale(1) skewX(-8deg); filter: none; }
  78% { opacity: 1; transform: scale(1) skewX(-8deg); } 100% { opacity: 0; transform: translateY(calc(var(--u) * -24)) skewX(-8deg); } }
#hint { position: absolute; left: 50%; bottom: calc(var(--u) * 132); transform: translateX(-50%); padding: calc(var(--u) * 12) calc(var(--u) * 28);
  background: rgba(6,10,16,.78); border: 1px solid var(--panel-edge); font-family: var(--font-ui); font-weight: 700; letter-spacing: calc(var(--u) * 4);
  font-size: calc(var(--u) * 24); color: #fff; white-space: nowrap; box-shadow: 0 calc(var(--u)*8) calc(var(--u)*24) rgba(0,0,0,.5); }
#hint b { color: var(--yellow); }
#hint.show { animation: hintIn .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes hintIn { 0% { opacity: 0; transform: translateX(-50%) translateY(calc(var(--u) * 20)); } 100% { opacity: 1; transform: translateX(-50%); } }

#touchReload { position: absolute; right: calc(var(--u) * 30); bottom: calc(var(--u) * 110); padding: calc(var(--u)*12) calc(var(--u)*20); background: var(--panel); border: 2px solid var(--amber); font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u)*22); }

#letterbox .lb { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 35; transition: height .8s cubic-bezier(.4,0,.2,1); pointer-events: none; }
#letterbox .top { top: 0; } #letterbox .bottom { bottom: 0; }
#letterbox.on .lb { height: 10.5%; }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.panel-screen { background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.78)); backdrop-filter: blur(3px) saturate(.8); }
.logo { display: flex; flex-direction: column; line-height: .9; }
.logo .l1 { font-family: var(--font-logo); font-size: calc(var(--u) * 92); color: #fff; letter-spacing: calc(var(--u) * 2);
  background: linear-gradient(180deg, #fff 0%, #ffe9a8 45%, #ffb21e 55%, #ff7a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(var(--u)*4) 0 #3b1d00) drop-shadow(0 0 calc(var(--u)*24) rgba(255,140,0,.45)); }
.logo .l2 { font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 30); letter-spacing: calc(var(--u) * 26); color: #fff; margin-top: calc(var(--u) * 6); padding-left: calc(var(--u) * 8); text-shadow: 0 0 calc(var(--u)*10) rgba(0,0,0,.9); }
.logo.small .l1 { font-size: calc(var(--u) * 64); }
.logo.small .l2 { font-size: calc(var(--u) * 20); letter-spacing: calc(var(--u) * 18); }

#screen-loading { background: radial-gradient(ellipse at 50% 40%, #1b2330, #05070a 70%); z-index: 90; }
#loadBar { width: calc(var(--u) * 460); height: calc(var(--u) * 6); background: rgba(255,255,255,.12); margin-top: calc(var(--u) * 50); transform: skewX(-20deg); overflow: hidden; }
#loadFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--amber-deep), var(--yellow)); box-shadow: 0 0 calc(var(--u)*12) var(--amber); transition: width .2s; }
#loadText { margin-top: calc(var(--u) * 14); font-weight: 700; letter-spacing: calc(var(--u) * 6); font-size: calc(var(--u) * 16); color: rgba(255,255,255,.7); }
#loadTip { margin-top: calc(var(--u) * 40); max-width: calc(var(--u) * 700); text-align: center; font-size: calc(var(--u) * 20); font-weight: 500; color: rgba(255,230,160,.8); min-height: 2em; }

#screen-splash { background: #000; cursor: pointer; z-index: 80; }
.splash-inner { max-width: calc(var(--u) * 820); text-align: center; animation: fadein 1.2s ease; }
.splash-kicker { font-weight: 700; letter-spacing: calc(var(--u) * 10); color: var(--amber); font-size: calc(var(--u) * 18); }
.splash-title { font-family: var(--font-logo); font-size: calc(var(--u) * 84); margin: calc(var(--u) * 10) 0 calc(var(--u) * 26); }
.splash-inner p { font-size: calc(var(--u) * 21); line-height: 1.45; color: rgba(255,255,255,.85); font-weight: 500; }
.dim { color: rgba(255,255,255,.55) !important; }
.press { margin-top: calc(var(--u) * 40); font-weight: 700; letter-spacing: calc(var(--u) * 8); font-size: calc(var(--u) * 20); color: var(--yellow); animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

#screen-menu { align-items: flex-start; justify-content: flex-start; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.15) 85%); }
.menu-left { position: absolute; left: calc(var(--u) * 70); top: calc(var(--u) * 54); }
.menu-left .logo .l1 { font-size: calc(var(--u) * 70); }
.menu-left .logo .l2 { font-size: calc(var(--u) * 22); letter-spacing: calc(var(--u) * 20); }
.menu-buttons { margin-top: calc(var(--u) * 26); display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.menu-buttons .tbtn { font-size: calc(var(--u) * 32); padding: calc(var(--u) * 3) calc(var(--u) * 10); }
/* V2: chapters as a compact 2-column grid of cards to the right of the buttons */
/* V2: the ΠΙΣΤΕΣ panel — the ready venues, three columns of cards with the venue's name and the variant buttons */
#pisteMenu { position: absolute; left: calc(var(--u) * 370); top: calc(var(--u) * 84); display: grid; grid-template-columns: repeat(3, calc(var(--u) * 272)); gap: calc(var(--u) * 6);
  max-height: calc(var(--u) * 604); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--amber) transparent;
  padding: calc(var(--u) * 12); background: rgba(6, 10, 16, .8); border: 1px solid var(--panel-edge); box-shadow: 0 calc(var(--u)*10) calc(var(--u)*30) rgba(0,0,0,.5); }
#pisteMenu .lvl-head { grid-column: 1 / -1; font-weight: 700; letter-spacing: calc(var(--u) * 4); font-size: calc(var(--u) * 13); color: var(--amber); padding: 0 calc(var(--u) * 4) calc(var(--u) * 2); }
.pst-card { pointer-events: auto; position: relative; display: grid; grid-template-columns: calc(var(--u) * 36) 1fr auto; grid-template-rows: auto auto auto; align-items: center;
  padding: calc(var(--u) * 5) calc(var(--u) * 8); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background .08s, border-color .08s; }
.pst-card:hover { background: rgba(255,197,61,.16); border-color: var(--yellow); }
.pst-card b { grid-row: 1 / 4; font-family: var(--font-logo); font-weight: 400; font-size: calc(var(--u) * 26); color: var(--yellow); }
.pst-card span { grid-column: 2 / 4; font-family: var(--font-hud); font-size: calc(var(--u) * 15); letter-spacing: calc(var(--u) * 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pst-card small { grid-column: 2 / 4; font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 11); color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pst-card i { font-style: normal; font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 10); letter-spacing: calc(var(--u) * 1); color: rgba(255,255,255,.5); }
.pst-var { grid-column: 3; grid-row: 3; display: flex; gap: calc(var(--u) * 4); }
.pst-var button { pointer-events: auto; font-family: var(--font-hud); font-size: calc(var(--u) * 13); min-width: calc(var(--u) * 24); padding: 0 calc(var(--u) * 6); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25); color: #fff; cursor: pointer; }
.pst-var button:hover { background: var(--yellow); color: #111; }

/* V2: 40 chapters — four columns of compact cards, the list scrolls */
#levelMenu { position: absolute; left: calc(var(--u) * 370); top: calc(var(--u) * 96); display: grid; grid-template-columns: repeat(4, calc(var(--u) * 205)); gap: calc(var(--u) * 6);
  max-height: calc(var(--u) * 590); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--amber) transparent;
  padding: calc(var(--u) * 12); background: rgba(6, 10, 16, .78); border: 1px solid var(--panel-edge); box-shadow: 0 calc(var(--u)*10) calc(var(--u)*30) rgba(0,0,0,.5); }
#levelMenu .lvl-card { padding: calc(var(--u) * 5) calc(var(--u) * 8); grid-template-columns: calc(var(--u) * 34) 1fr; }
#levelMenu .lvl-card b { font-size: calc(var(--u) * 26); }
#levelMenu .lvl-card span { font-size: calc(var(--u) * 15); overflow: hidden; text-overflow: ellipsis; }
#levelMenu .lvl-card i { font-size: calc(var(--u) * 11); }
#levelMenu .lvl-head { grid-column: 1 / -1; font-weight: 700; letter-spacing: calc(var(--u) * 6); font-size: calc(var(--u) * 14); color: var(--amber); padding: 0 calc(var(--u) * 4) calc(var(--u) * 2); }
.lvl-card { pointer-events: auto; position: relative; display: grid; grid-template-columns: calc(var(--u) * 38) 1fr; grid-template-rows: auto auto; align-items: center; text-align: left;
  padding: calc(var(--u) * 8) calc(var(--u) * 10); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background .08s, border-color .08s, transform .08s; }
.lvl-card b { grid-row: 1 / 3; font-family: var(--font-logo); font-weight: 400; font-size: calc(var(--u) * 34); color: var(--yellow); }
.lvl-card span { font-family: var(--font-hud); font-size: calc(var(--u) * 19); letter-spacing: calc(var(--u) * 1); white-space: nowrap; }
.lvl-card i { font-style: normal; font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 13); letter-spacing: calc(var(--u) * 2); color: rgba(255,255,255,.5); }
.lvl-card em { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 6); font-style: normal; font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 11); letter-spacing: calc(var(--u) * 2); color: #111; background: var(--amber); padding: 0 calc(var(--u) * 5); }
.lvl-card:hover { background: rgba(255,197,61,.16); border-color: var(--yellow); transform: translateY(calc(var(--u) * -2)); }
.menu-foot { position: absolute; bottom: calc(var(--u) * 20); left: calc(var(--u) * 70); font-weight: 700; letter-spacing: calc(var(--u) * 6); font-size: calc(var(--u) * 14); color: rgba(255,255,255,.55); }
.steam-link { position: absolute; right: calc(var(--u) * 40); bottom: calc(var(--u) * 22); text-decoration: none; }

.tbtn { pointer-events: auto; background: none; border: none; color: #fff; font-family: var(--font-hud); font-size: calc(var(--u) * 40); letter-spacing: calc(var(--u) * 3);
  padding: calc(var(--u) * 4) calc(var(--u) * 10); cursor: pointer; text-shadow: 0 calc(var(--u)*3) calc(var(--u)*6) rgba(0,0,0,.9); position: relative; transition: color .08s, transform .08s; outline: none; }
.tbtn.small { font-size: calc(var(--u) * 24); }
.tbtn:hover, .tbtn:focus-visible, .tbtn.focus { color: var(--yellow); transform: translateX(calc(var(--u) * 8)); }
.tbtn:hover::before, .tbtn.focus::before { content: ''; position: absolute; left: calc(var(--u) * -18); top: 50%; width: calc(var(--u) * 10); height: calc(var(--u) * 10); background: var(--yellow); transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 calc(var(--u)*10) var(--amber); }

.panel { background: var(--panel); border: 1px solid var(--panel-edge); padding: calc(var(--u) * 34) calc(var(--u) * 50); min-width: calc(var(--u) * 560);
  box-shadow: 0 calc(var(--u)*20) calc(var(--u)*60) rgba(0,0,0,.6), inset 0 0 calc(var(--u)*40) rgba(255,190,60,.05);
  clip-path: polygon(0 calc(var(--u)*18), calc(var(--u)*18) 0, 100% 0, 100% calc(100% - calc(var(--u)*18)), calc(100% - calc(var(--u)*18)) 100%, 0 100%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); }
.panel.narrow { min-width: calc(var(--u) * 420); }
.panel.wide { min-width: calc(var(--u) * 760); }
.panel.scroll { max-height: 86vh; overflow: auto; }
.panel-title { font-family: var(--font-logo); font-size: calc(var(--u) * 48); letter-spacing: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 14);
  background: linear-gradient(180deg, #fff, #ffcf5a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tabs { display: flex; gap: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 12); }
/* V2: 40 chapters in the high-score tabs: they wrap, smaller */
#scoreTabs { flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 10); max-height: calc(var(--u) * 150); overflow-y: auto; }
#scoreTabs .tbtn { font-size: calc(var(--u) * 15); letter-spacing: calc(var(--u) * 1); }
.tab { font-size: calc(var(--u) * 24); opacity: .6; }
.tab.active { opacity: 1; color: var(--yellow); border-bottom: 2px solid var(--yellow); }
.tab-body { width: 100%; }
.setrow { display: flex; justify-content: space-between; align-items: center; width: 100%; font-weight: 700; font-size: calc(var(--u) * 22); letter-spacing: calc(var(--u) * 3); border-bottom: 1px solid rgba(255,255,255,.08); padding: calc(var(--u) * 2) 0; }
.setrow .tbtn { font-size: calc(var(--u) * 26); min-width: calc(var(--u) * 150); text-align: right; }
.tbtn.back { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 30); }

.dead-title { font-family: var(--font-logo); font-size: calc(var(--u) * 110); color: #ff2a1f; text-shadow: 0 0 calc(var(--u)*30) rgba(255,0,0,.8), 0 calc(var(--u)*6) calc(var(--u)*10) #000; margin-bottom: calc(var(--u) * 30); animation: bannerIn .7s ease-out; }
#screen-dead { background: radial-gradient(ellipse at center, rgba(60,0,0,.35), rgba(20,0,0,.85)); }

.stats-grid { display: flex; gap: calc(var(--u) * 40); align-items: center; }
#statsList { min-width: calc(var(--u) * 420); }
.stat { display: flex; justify-content: space-between; font-size: calc(var(--u) * 24); font-weight: 700; letter-spacing: calc(var(--u) * 3); padding: calc(var(--u) * 3) 0; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 0; animation: statIn .3s ease-out forwards; }
.stat b { font-family: var(--font-num); font-weight: 600; font-size: calc(var(--u) * 34); line-height: .9; color: var(--yellow); }
.stat.total b { font-size: calc(var(--u) * 46); }
@keyframes statIn { from { opacity: 0; transform: translateX(calc(var(--u) * -20)); } to { opacity: 1; transform: none; } }
#rankBox { text-align: center; min-width: calc(var(--u) * 220); }
.rank-label { font-weight: 700; letter-spacing: calc(var(--u) * 10); font-size: calc(var(--u) * 20); color: rgba(255,255,255,.7); }
#rank { font-family: var(--font-logo); font-size: calc(var(--u) * 190); line-height: 1; color: var(--yellow); text-shadow: 0 0 calc(var(--u)*40) rgba(255,170,0,.8), 0 calc(var(--u)*8) 0 #6b3f00; opacity: 0; }
#rank.show { animation: rankIn .6s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes rankIn { 0% { opacity: 0; transform: scale(3) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
.credits p { font-size: calc(var(--u) * 19); line-height: 1.5; color: rgba(255,255,255,.85); max-width: calc(var(--u) * 720); }
.credits b { color: var(--yellow); }

#screen-quit, #screen-credits { background: #000; z-index: 85; }
.quit-msg { font-family: var(--font-logo); font-size: calc(var(--u) * 56); text-align: center; }
.quit-msg span { font-family: var(--font-ui); font-size: calc(var(--u) * 22); color: rgba(255,255,255,.6); }
.roll { text-align: center; animation: fadein 2s ease; }
.roll .logo { align-items: center; margin-bottom: calc(var(--u) * 40); }
.roll p { font-size: calc(var(--u) * 24); font-weight: 700; letter-spacing: calc(var(--u) * 4); }
.roll p.big { font-family: var(--font-logo); font-size: calc(var(--u) * 54); color: var(--yellow); }

#fps { position: absolute; right: calc(var(--u) * 8); bottom: calc(var(--u) * 6); z-index: 95; font: 12px/1.2 monospace; color: #9f9; background: rgba(0,0,0,.5); padding: 2px 6px; pointer-events: none; }
#fatal { position: absolute; inset: 0; z-index: 99; background: rgba(40,0,0,.95); color: #fff; font: 14px/1.5 monospace; padding: 30px; white-space: pre-wrap; overflow: auto; }

/* ---------- V2: threats, laser glare, difficulty, route callouts ---------- */
#diffTag { margin-top: calc(var(--u) * 6); font-family: var(--font-ui); font-weight: 700; letter-spacing: calc(var(--u) * 5); font-size: calc(var(--u) * 13); color: rgba(255,255,255,.55); text-shadow: 0 0 calc(var(--u)*6) #000; }
#warnTag { position: absolute; left: 50%; top: calc(var(--u) * 96); transform: translateX(-50%); padding: calc(var(--u) * 6) calc(var(--u) * 22);
  font-family: var(--font-logo); font-size: calc(var(--u) * 30); letter-spacing: calc(var(--u) * 4); color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, rgba(160,0,0,0), rgba(190,10,10,.78) 18%, rgba(190,10,10,.78) 82%, rgba(160,0,0,0));
  text-shadow: 0 0 calc(var(--u)*10) rgba(255,60,40,.9), 0 calc(var(--u)*2) calc(var(--u)*3) #000; }
#warnTag.show { animation: warnIn .9s ease-out; }
/* V2: a hostage hit by mistake */
#warnTag.hostage { font-size: calc(var(--u) * 46); letter-spacing: calc(var(--u) * 10); top: calc(var(--u) * 150);
  background: linear-gradient(90deg, rgba(200,0,0,0), rgba(225,16,16,.9) 16%, rgba(225,16,16,.9) 84%, rgba(200,0,0,0)); }
#warnTag.hostage.show { animation: hostageWarn 1.8s ease-out; }
@keyframes hostageWarn { 0% { opacity: 0; transform: translateX(-50%) scale(1.8); } 8% { opacity: 1; transform: translateX(-50%) scale(1); }
  18% { opacity: .15; } 28% { opacity: 1; } 38% { opacity: .15; } 48%, 100% { opacity: 1; } }
@keyframes warnIn { 0% { opacity: 0; transform: translateX(-50%) scale(1.6); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 30%, 50% { opacity: 1; } 40% { opacity: .35; } 100% { opacity: 1; } }
#sniperGlare { position: absolute; left: 0; top: 0; width: calc(var(--u) * 260); height: calc(var(--u) * 260); margin: calc(var(--u) * -130) 0 0 calc(var(--u) * -130); opacity: 0; pointer-events: none; z-index: 29;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,70,50,.95) 5%, rgba(255,20,10,.45) 16%, rgba(255,0,0,.12) 38%, rgba(255,0,0,0) 62%);
  mix-blend-mode: screen; }
#sniperGlare::after { content: ''; position: absolute; left: 50%; top: 50%; width: 220%; height: calc(var(--u) * 3); transform: translate(-50%, -50%);
  background: linear-gradient(90deg, rgba(255,40,20,0), rgba(255,80,60,.8) 50%, rgba(255,40,20,0)); }
#lockVignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 0, 0, .38) 100%); }
#lockVignette.on { animation: lockPulse .2s steps(2) infinite; }
@keyframes lockPulse { 0% { opacity: .9; } 100% { opacity: .25; } }
.callout.route { color: #8fe9ff; font-size: calc(var(--u) * 58); text-shadow: 0 0 calc(var(--u)*22) rgba(40,200,255,.85), 0 calc(var(--u)*4) calc(var(--u)*6) #000; }

/* ---------- V2: level select, difficulty, high scores ---------- */
.diff-cards { display: flex; gap: calc(var(--u) * 18); margin: calc(var(--u) * 6) 0 calc(var(--u) * 4); }
.diff-card { pointer-events: auto; width: calc(var(--u) * 220); padding: calc(var(--u) * 22) calc(var(--u) * 16); background: rgba(10,14,20,.8); border: 2px solid rgba(255,213,90,.25); color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10); font-family: var(--font-ui); transition: transform .08s, border-color .08s, background .08s;
  clip-path: polygon(0 calc(var(--u)*14), calc(var(--u)*14) 0, 100% 0, 100% calc(100% - calc(var(--u)*14)), calc(100% - calc(var(--u)*14)) 100%, 0 100%); }
.diff-card b { font-family: var(--font-logo); font-size: calc(var(--u) * 40); letter-spacing: calc(var(--u) * 3); font-weight: 400; }
.diff-card span { font-weight: 600; font-size: calc(var(--u) * 17); color: rgba(255,255,255,.75); text-align: center; line-height: 1.3; min-height: 2.6em; }
.diff-card i { font-style: normal; font-weight: 700; letter-spacing: calc(var(--u) * 4); font-size: calc(var(--u) * 15); color: var(--amber); }
.diff-card:hover, .diff-card.sel { border-color: var(--yellow); background: rgba(40,30,8,.85); transform: translateY(calc(var(--u) * -4)); }
.diff-card[data-diff="easy"] b { color: #7dff9b; }
.diff-card[data-diff="normal"] b { color: var(--yellow); }
.diff-card[data-diff="hard"] b { color: #ff5a4f; }
#statsBest { margin-top: calc(var(--u) * 10); font-weight: 700; letter-spacing: calc(var(--u) * 4); font-size: calc(var(--u) * 16); color: rgba(255,255,255,.65); }
#hsEntry { margin-top: calc(var(--u) * 10); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); }
.hs-new { font-family: var(--font-logo); font-size: calc(var(--u) * 34); color: var(--yellow); letter-spacing: calc(var(--u) * 3); text-shadow: 0 0 calc(var(--u)*18) rgba(255,170,0,.8); animation: pulse .5s infinite alternate; }
.hs-row { display: flex; align-items: center; gap: calc(var(--u) * 14); font-weight: 700; letter-spacing: calc(var(--u) * 4); font-size: calc(var(--u) * 18); }
#hsName { width: calc(var(--u) * 120); font-family: var(--font-logo); font-size: calc(var(--u) * 40); text-align: center; letter-spacing: calc(var(--u) * 8); text-transform: uppercase;
  background: rgba(0,0,0,.5); color: var(--yellow); border: 2px solid var(--amber); outline: none; padding: calc(var(--u) * 2) 0; pointer-events: auto; cursor: text; }
#scoreTabs { flex-wrap: wrap; justify-content: center; }
#scoreTabs .tab { font-size: calc(var(--u) * 18); }
#scoreTable { width: 100%; min-width: calc(var(--u) * 640); }
.hs-line { display: grid; grid-template-columns: calc(var(--u) * 50) calc(var(--u) * 110) 1fr calc(var(--u) * 70) calc(var(--u) * 110) calc(var(--u) * 110); align-items: center;
  font-weight: 700; font-size: calc(var(--u) * 21); letter-spacing: calc(var(--u) * 2); padding: calc(var(--u) * 3) calc(var(--u) * 8); border-bottom: 1px solid rgba(255,255,255,.07); }
.hs-line .n { color: rgba(255,255,255,.5); }
.hs-line .nm { font-family: var(--font-logo); font-weight: 400; letter-spacing: calc(var(--u) * 5); }
.hs-line .sc { font-family: var(--font-num); font-weight: 600; font-size: calc(var(--u) * 30); color: var(--yellow); text-align: right; padding-right: calc(var(--u) * 20); }
.hs-line .rk { font-family: var(--font-logo); font-weight: 400; color: #fff; text-align: center; }
.hs-line .df { font-size: calc(var(--u) * 14); letter-spacing: calc(var(--u) * 3); text-align: center; }
.hs-line .df.easy { color: #7dff9b; } .hs-line .df.normal { color: var(--yellow); } .hs-line .df.hard { color: #ff5a4f; }
.hs-line .dt { font-size: calc(var(--u) * 14); color: rgba(255,255,255,.45); text-align: right; }
.hs-line.cpu { opacity: .55; }
.hs-line.me { background: linear-gradient(90deg, rgba(255,197,61,.28), rgba(255,197,61,.05)); animation: pulse .6s infinite alternate; }
.hs-head { font-size: calc(var(--u) * 13); letter-spacing: calc(var(--u) * 4); color: rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.2); }
.hs-head .sc { font-family: var(--font-ui); font-size: calc(var(--u) * 13); color: rgba(255,255,255,.45); }

/* V2: the editor's stop preview (index.html?preview=…): the scene only */
body.preview #hud, body.preview #crosshair, body.preview #letterbox, body.preview #fps { display: none !important; }

/* ---------- V2: the editions (ΕΚΔΟΣΗ), gamepad focus, phones, VR ---------- */
.plat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 16); margin: calc(var(--u) * 8) 0; }
.plat-card { pointer-events: auto; padding: calc(var(--u) * 20) calc(var(--u) * 14); background: rgba(10,14,20,.8); border: 2px solid rgba(255,213,90,.25); color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); font-family: var(--font-ui); text-align: center; transition: transform .08s, border-color .08s, background .08s;
  clip-path: polygon(0 calc(var(--u)*14), calc(var(--u)*14) 0, 100% 0, 100% calc(100% - calc(var(--u)*14)), calc(100% - calc(var(--u)*14)) 100%, 0 100%); }
.plat-card .pi { font-size: calc(var(--u) * 54); line-height: 1; }
.plat-card b { font-family: var(--font-logo); font-size: calc(var(--u) * 26); letter-spacing: calc(var(--u) * 2); font-weight: 400; color: var(--yellow); }
.plat-card span { font-weight: 600; font-size: calc(var(--u) * 15); color: rgba(255,255,255,.78); line-height: 1.3; }
.plat-card i { font-style: normal; font-weight: 700; letter-spacing: calc(var(--u) * 2); font-size: calc(var(--u) * 13); color: var(--amber); min-height: 1.2em; }
.plat-card:hover, .plat-card.sel, .plat-card.gp-focus { border-color: var(--yellow); background: rgba(40,30,8,.85); transform: translateY(calc(var(--u) * -4)); }
.plat-card:disabled { opacity: .45; cursor: default; transform: none; }
.plat-card:disabled i { color: var(--red); }
.plat-note { font-size: calc(var(--u) * 15); color: rgba(255,255,255,.7); text-align: center; max-width: calc(var(--u) * 900); line-height: 1.4; }
.gp-focus { outline: calc(var(--u) * 3) solid var(--yellow); outline-offset: calc(var(--u) * 3); }
.overlay { position: absolute; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 14);
  background: rgba(3,5,8,.88); text-align: center; font-family: var(--font-ui); }
.overlay b { font-family: var(--font-logo); font-size: calc(var(--u) * 40); color: var(--yellow); letter-spacing: calc(var(--u) * 2); font-weight: 400; }
.overlay p { font-size: calc(var(--u) * 18); color: rgba(255,255,255,.8); line-height: 1.45; margin: 0; }
.tbtn.big { font-size: calc(var(--u) * 42); }
/* console: the crosshair is drawn by the page (the pad moves it), no OS cursor */
body.plat-console.ingame #crosshair, body.pad-active.ingame #crosshair { display: block !important; }
body.plat-console.ingame, body.plat-console.ingame *, body.pad-active.ingame, body.pad-active.ingame * { cursor: none !important; }
/* touch editions (tablet, phone): the COVER button always there, the bomb is tapped, landscape only; the phone's
   buttons bigger */
body.touch-ed #touchReload { display: block !important; font-size: calc(var(--u)*26); padding: calc(var(--u)*14) calc(var(--u)*24); }
body.plat-mobile #touchReload { font-size: calc(var(--u)*32); padding: calc(var(--u)*20) calc(var(--u)*30); }
body.touch-ed #bombBox { pointer-events: auto; cursor: pointer; }
body.plat-mobile #pauseBtn { transform: scale(1.35); transform-origin: top left; }
#rotateHint { display: none; }
@media (orientation: portrait) { body.touch-ed #rotateHint { display: flex; } }
/* console on a TV: the HUD and the screens keep off the edges (overscan) */
body.plat-console #hud, body.plat-console .screen { inset: 4vh 4vw; }
#rotateHint .rot, #swipeUp .swipe-hand { font-size: calc(var(--u) * 110); color: var(--amber); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(calc(var(--u) * -28)); } }
/* iPhone Safari: a page a little taller than the screen, so a swipe up makes Safari hide its bars */
html:has(body.ios-swipe), body.ios-swipe { overflow-y: auto; height: auto; }
body.ios-swipe { min-height: calc(100vh + 120px); }
#swipeUp { touch-action: pan-y; background: rgba(3,5,8,.7); }
body.in-xr #hud, body.in-xr #crosshair { display: none !important; }
@media (max-width: 900px) { .plat-cards { grid-template-columns: repeat(2, 1fr); } }