/* THE GRID: SANGO — Operation Elerinko · Shevy Motions */
:root {
  --void: #02040a;
  --midnight: #071226;
  --navy: #0c1d3a;
  --charcoal: #141a24;
  --steel: #8796ae;
  --mist: #c5d2e6;
  --white: #eef4ff;
  --electric: #2f7bff;
  --cyan: #4fe3ff;
  --green: #3ddc97;
  --amber: #ffb547;
  --red: #ff4d5e;
  --purple: #b48cff;
  --glass: rgba(9, 18, 36, .62);
  --glass-hi: rgba(16, 30, 58, .78);
  --edge: rgba(130, 180, 255, .18);
  --edge-hi: rgba(79, 227, 255, .55);
  --display: "Michroma", "Eurostile", "Bank Gothic", system-ui, sans-serif;
  --ui: "Barlow Semi Condensed", "Barlow", "Segoe UI", Roboto, sans-serif;
  --cut: 10px;
  --ts: 1; /* text scale, set from settings */
  --tb: 1; /* touch button scale */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--void); color: var(--white); overflow: hidden; }
body {
  font-family: var(--ui);
  font-size: calc(17px * var(--ts));
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
input[type=text] { user-select: text; -webkit-user-select: text; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.hidden { display: none !important; }
svg.ic { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -.14em; }

/* ------------------------------------------------------------ layers */
#bg, #world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#bg { z-index: 0; transition: opacity 1.2s var(--ease); }
#app { position: fixed; inset: 0; z-index: 2; }
.screen {
  position: absolute; inset: 0; display: none;
  padding: calc(28px + var(--safe-t)) calc(36px + var(--safe-r)) calc(28px + var(--safe-b)) calc(36px + var(--safe-l));
}
.screen.on { display: block; animation: screenIn .55s var(--ease) both; }
.screen.out { display: block; animation: screenOut .35s var(--ease) both; pointer-events: none; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px) scale(.995); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes screenOut { to { opacity: 0; filter: blur(8px); transform: scale(1.01); } }

/* film grain + vignette for cinematic depth */
#fx-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,6,.55) 100%); }
#fx-grain { position: fixed; inset: -50%; z-index: 30; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ------------------------------------------------------------ glass + metal */
.glass {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 38%),
    var(--glass);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 50px rgba(0,0,0,.45);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.glass::before { /* machined edge highlight on the cut corner */
  content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: .7;
}
.lowfx .glass, .lowfx .hud-block { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8,16,32,.9); }

.h-display { font-family: var(--display); letter-spacing: .18em; font-weight: 400; }
.title { font-family: var(--display); font-size: calc(30px * var(--ts)); letter-spacing: .2em; margin: 0 0 4px; }
.sub { color: var(--steel); margin: 0 0 22px; max-width: 60ch; }
.mute { color: var(--steel); }
.tone-blue { --tone: var(--electric); } .tone-cyan { --tone: var(--cyan); } .tone-green { --tone: var(--green); }
.tone-amber { --tone: var(--amber); } .tone-red { --tone: var(--red); } .tone-purple { --tone: var(--purple); }

/* ------------------------------------------------------------ buttons */
.btn {
  --tone: var(--cyan);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 22px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: calc(15px * var(--ts));
  color: var(--white);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)), rgba(14,28,54,.7);
  border: 1px solid var(--edge);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .2s, border-color .2s, transform .15s, color .2s;
}
.btn:hover, .btn.focus, .btn:focus-visible { border-color: var(--tone); background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 28%, transparent), rgba(14,28,54,.75)); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.primary { background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 55%, #06204a), color-mix(in srgb, var(--tone) 18%, #0a1730)); border-color: var(--tone); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 38px; padding: 0 14px; font-size: calc(13px * var(--ts)); }
.btn[disabled], .btn.disabled { opacity: .38; pointer-events: none; }
.btn .key { font-family: var(--display); font-size: .7em; padding: 2px 6px; border: 1px solid var(--edge); color: var(--steel); letter-spacing: 0; }
.soon { font-size: .68em; letter-spacing: .12em; color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); padding: 1px 6px; margin-left: 8px; font-weight: 600; }
.back {
  position: absolute; top: calc(22px + var(--safe-t)); right: calc(30px + var(--safe-r)); z-index: 5;
}

/* ------------------------------------------------------------ logo */
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.logo .mark { width: 74px; height: 74px; color: var(--cyan); filter: drop-shadow(0 0 14px rgba(79,227,255,.45)); }
.logo .word { font-family: var(--display); font-size: calc(64px * var(--ts)); line-height: 1; letter-spacing: .28em; margin-right: -.28em;
  background: linear-gradient(180deg, #ffffff 10%, #a9c6ff 55%, #5d7fb8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 6px 24px rgba(47,123,255,.35)); }
.logo .place { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-size: calc(19px * var(--ts)); letter-spacing: .9em; color: var(--mist); }
.logo .place::before, .logo .place::after { content: ""; height: 1px; width: 46px; background: linear-gradient(90deg, transparent, var(--cyan)); }
.logo .place::after { transform: scaleX(-1); }
.logo .op { font-weight: 600; letter-spacing: .5em; font-size: calc(13px * var(--ts)); color: var(--cyan); margin-top: 6px; }
.logo.center { align-items: center; text-align: center; }
.sm-credit { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 10px; letter-spacing: .42em; color: var(--steel); opacity: .85; }
.sm-credit svg { width: 26px; height: 18px; }
.sm-corner { position: absolute; left: calc(36px + var(--safe-l)); bottom: calc(22px + var(--safe-b)); }

/* ------------------------------------------------------------ boot + intro */
#s-boot { display: none; place-items: center; background: #000; }
#s-boot.on { display: grid; }
.press { font-family: var(--display); letter-spacing: .5em; font-size: 12px; color: var(--steel); animation: breathe 2.4s ease-in-out infinite; text-align: center; }
@keyframes breathe { 50% { opacity: .35; } }
#s-intro { background: #000; display: none; place-items: center; }
#s-intro.on { display: grid; }
.radio { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(640px, 86vw); font-size: calc(16px * var(--ts)); color: var(--mist); }
.radio p { margin: 0 0 10px; opacity: 0; animation: radioIn .4s var(--ease) forwards; }
.radio p .who { color: var(--cyan); font-weight: 600; letter-spacing: .14em; margin-right: 10px; font-size: .85em; }
@keyframes radioIn { from { opacity: 0; transform: translateX(-6px); filter: blur(3px); } to { opacity: .92; transform: none; filter: none; } }
.presents { font-family: var(--display); letter-spacing: .6em; font-size: 12px; color: var(--steel); opacity: 0; }
.presents.show { animation: fadeHold 3.2s ease forwards; }
@keyframes fadeHold { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }
.intro-logo { opacity: 0; }
.intro-logo.show { opacity: 1; }
.intro-logo .mark path, .intro-logo .mark circle { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw 1.8s var(--ease) forwards; }
.intro-logo .word { animation: wordIn 2.2s var(--ease) .5s both; }
.intro-logo .place { animation: fadeUp 1s var(--ease) 1.4s both; }
.intro-logo .op { animation: fadeUp 1s var(--ease) 1.9s both; }
.intro-logo .tag { animation: fadeUp 1.2s var(--ease) 2.5s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wordIn { from { letter-spacing: .9em; opacity: 0; filter: blur(10px); } to { letter-spacing: .28em; opacity: 1; filter: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tag { font-style: italic; color: var(--mist); letter-spacing: .08em; margin-top: 22px; }
.skip { position: absolute; right: calc(30px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); font-size: 12px; letter-spacing: .3em; color: var(--steel); }

/* ------------------------------------------------------------ main menu */
#s-menu .menu-wrap { position: absolute; left: calc(min(8vw, 120px) + var(--safe-l)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 34px; }
.menu { display: flex; flex-direction: column; gap: 2px; min-width: 340px; margin-left: -22px; }
.menu-item {
  --tone: var(--cyan);
  position: relative; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 9px 18px 9px 22px; font-weight: 600; font-size: calc(21px * var(--ts)); letter-spacing: .2em;
  color: rgba(222,232,250,.66); transition: color .25s, transform .3s var(--ease), letter-spacing .3s var(--ease);
}
.menu-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--tone); box-shadow: 0 0 14px var(--tone); transform: translateY(-50%); transition: height .3s var(--ease); }
.menu-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 22%, transparent), transparent 70%); opacity: 0; transition: opacity .3s; z-index: -1; }
.menu-item:hover, .menu-item.focus, .menu-item:focus-visible { color: #fff; transform: translateX(10px); outline: none; }
.menu-item:hover::before, .menu-item.focus::before, .menu-item:focus-visible::before { height: 70%; }
.menu-item:hover::after, .menu-item.focus::after, .menu-item:focus-visible::after { opacity: 1; }
.menu-item .hint { font-size: .58em; letter-spacing: .14em; color: var(--steel); font-weight: 500; }
.menu-item[disabled] { opacity: .35; pointer-events: none; }
.menu-foot { position: absolute; right: calc(36px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); text-align: right; color: var(--steel); font-size: 14px; }
.menu-foot .tagline { font-style: italic; letter-spacing: .1em; color: var(--mist); margin-bottom: 8px; }
.agent-chip { position: absolute; top: calc(26px + var(--safe-t)); right: calc(36px + var(--safe-r)); display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; }
.avatar { --c: var(--cyan); width: 42px; height: 42px; display: grid; place-items: center; font-family: var(--display); font-size: 13px; color: #04101c; background: var(--c);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); flex: none; }
.avatar.lg { width: 76px; height: 76px; font-size: 22px; }
.xpbar { height: 4px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; margin-top: 6px; }
.xpbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--electric), var(--cyan)); box-shadow: 0 0 10px var(--cyan); }
.netbadge { font-size: 12px; letter-spacing: .14em; display: inline-flex; gap: 6px; align-items: center; }
.netbadge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.netbadge.off::before { background: var(--red); box-shadow: 0 0 8px var(--red); }

/* ------------------------------------------------------------ generic page */
.page { position: absolute; inset: calc(30px + var(--safe-t)) calc(36px + var(--safe-r)) calc(30px + var(--safe-b)) calc(36px + var(--safe-l)); display: flex; flex-direction: column; }
.page > header { margin-bottom: 18px; padding-right: 160px; }
.page .body { flex: 1; min-height: 0; overflow: auto; padding-right: 6px; touch-action: pan-y; }
.body::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 6px; } .body::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background: rgba(130,180,255,.25); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card { --tone: var(--cyan); padding: 18px 18px 16px; text-align: left; display: flex; flex-direction: column; gap: 8px; min-height: 150px; transition: transform .25s var(--ease), border-color .25s; }
.card:hover, .card.focus, .card:focus-visible { border-color: var(--tone); transform: translateY(-2px); }
.card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: calc(15px * var(--ts)); letter-spacing: .16em; display: flex; align-items: center; gap: 10px; }
.card p { margin: 0; color: var(--mist); font-size: .92em; }
.card .meta { margin-top: auto; font-size: .8em; color: var(--steel); letter-spacing: .1em; }
.card.locked { opacity: .5; }
.card .glyph { width: 30px; height: 30px; color: var(--tone); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle input { display: none; }
.toggle .sw { width: 44px; height: 22px; border: 1px solid var(--edge); position: relative; background: rgba(0,0,0,.3); transition: background .2s; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--steel); transition: transform .25s var(--ease), background .2s; }
.toggle input:checked + .sw { background: color-mix(in srgb, var(--cyan) 25%, transparent); border-color: var(--cyan); }
.toggle input:checked + .sw::after { transform: translateX(22px); background: var(--cyan); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .8em; letter-spacing: .14em; color: var(--steel); text-transform: uppercase; }
.input { height: 50px; padding: 0 16px; background: rgba(0,0,0,.35); border: 1px solid var(--edge); color: #fff; font-size: 1.05em; letter-spacing: .08em; }
.input:focus { border-color: var(--cyan); }
.code-input { font-family: var(--display); letter-spacing: .3em; text-transform: uppercase; font-size: 1.2em; width: 240px; text-align: center; }

/* tabs */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { padding: 10px 16px; font-weight: 600; letter-spacing: .14em; font-size: calc(13px * var(--ts)); color: var(--steel); border-bottom: 2px solid transparent; text-transform: uppercase; }
.tab.on, .tab:hover, .tab.focus { color: #fff; border-color: var(--cyan); }
.tab[disabled] { opacity: .45; pointer-events: none; }

/* settings */
.set-row { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(130,180,255,.08); }
.set-row .lbl { color: var(--mist); }
.set-row .lbl small { display: block; color: var(--steel); font-size: .8em; }
.seg { display: inline-flex; border: 1px solid var(--edge); }
.seg button { padding: 9px 16px; font-weight: 600; letter-spacing: .12em; font-size: calc(13px * var(--ts)); color: var(--steel); }
.seg button.on { background: color-mix(in srgb, var(--cyan) 22%, transparent); color: #fff; }
input[type=range] { -webkit-appearance: none; appearance: none; width: min(320px, 100%); height: 28px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--cyan) var(--p, 50%), rgba(255,255,255,.14) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 10px var(--cyan); }
input[type=range]::-moz-range-track { height: 3px; background: rgba(255,255,255,.14); }
input[type=range]::-moz-range-progress { height: 3px; background: var(--cyan); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; background: #fff; border: 0; transform: rotate(45deg); }
.bind { min-width: 120px; justify-content: space-between; }
.bind.listening { border-color: var(--amber); color: var(--amber); }

/* lobby */
.lobby { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 22px; flex: 1; min-height: 0; }
.roomcode { padding: 22px; }
.roomcode .code { font-family: var(--display); font-size: calc(40px * var(--ts)); letter-spacing: .14em; color: #fff; text-shadow: 0 0 22px rgba(79,227,255,.5); margin: 4px 0 10px; }
.slots { display: grid; gap: 10px; align-content: start; }
.slot { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 12px 16px; }
.slot .nm { font-weight: 600; font-size: 1.1em; letter-spacing: .06em; }
.slot .st { font-size: .8em; letter-spacing: .16em; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.slot .st.ready { color: var(--green); } .slot .st.wait { color: var(--amber); } .slot .st.off { color: var(--red); }
.slot .ping { font-size: .78em; color: var(--steel); min-width: 74px; text-align: right; }
.slot.empty { opacity: .45; border-style: dashed; }
.hostmark { font-size: .7em; color: var(--amber); letter-spacing: .16em; border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); padding: 1px 6px; margin-left: 8px; }
.lobby-chat { display: flex; flex-direction: column; min-height: 160px; max-height: 260px; padding: 12px; }
.chatlog { flex: 1; overflow: auto; font-size: .92em; display: flex; flex-direction: column; gap: 4px; touch-action: pan-y; }
.chatlog .who { font-weight: 600; margin-right: 6px; }
.chatlog .q { color: var(--cyan); }

/* leaderboard table */
.lb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lb th { text-align: left; font-size: .75em; letter-spacing: .16em; color: var(--steel); font-weight: 600; padding: 8px 10px; text-transform: uppercase; }
.lb td { padding: 12px 10px; border-top: 1px solid rgba(130,180,255,.08); }
.lb tr.me td { background: rgba(79,227,255,.08); }
.lb .rk { font-family: var(--display); color: var(--steel); width: 54px; }
.lb tr:nth-child(1) .rk { color: var(--amber); }
.empty-state { padding: 40px 10px; color: var(--steel); }

/* badges */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge { padding: 14px; text-align: center; font-size: .86em; }
.badge .g { width: 40px; height: 40px; margin: 0 auto 8px; display: grid; place-items: center; color: var(--amber); border: 1px solid currentColor; transform: rotate(45deg); }
.badge .g svg { transform: rotate(-45deg); width: 20px; height: 20px; }
.badge.off { opacity: .32; } .badge.off .g { color: var(--steel); }

/* ------------------------------------------------------------ loading */
#s-loading { background: radial-gradient(80% 70% at 50% 50%, #0b1a35 0%, #000 75%); }
.load-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 86vw); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.load-lattice { width: 120px; height: 120px; color: var(--cyan); }
.load-lattice path { stroke-dasharray: 8 6; animation: march 1.4s linear infinite; }
@keyframes march { to { stroke-dashoffset: -28; } }
.loadbar { width: 100%; height: 2px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.loadbar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: width .4s var(--ease); }
.load-tip { color: var(--steel); font-size: .92em; min-height: 2.8em; max-width: 46ch; }

/* ------------------------------------------------------------ briefing */
#s-briefing { background: radial-gradient(70% 60% at 70% 40%, rgba(47,123,255,.14), transparent 70%), rgba(0,2,8,.86); }
.brief { position: absolute; inset: calc(40px + var(--safe-t)) calc(48px + var(--safe-r)) calc(40px + var(--safe-b)) calc(48px + var(--safe-l)); display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.brief .code { color: var(--cyan); letter-spacing: .5em; font-weight: 600; font-size: .9em; }
.brief h1 { font-family: var(--display); font-weight: 400; font-size: calc(56px * var(--ts)); letter-spacing: .14em; margin: 10px 0 24px; line-height: 1.05; }
.brief .lines p { margin: 0 0 10px; font-size: calc(19px * var(--ts)); color: var(--mist); max-width: 46ch; min-height: 1.4em; }
.brief .lines p.warn { color: var(--purple); }
.brief .side { display: flex; flex-direction: column; gap: 14px; }
.brief .objs { padding: 18px 20px; }
.brief .objs ol { margin: 8px 0 0; padding-left: 22px; color: var(--mist); }
.brief .objs li { margin: 4px 0; }
.brief .team { padding: 14px 20px; display: flex; gap: 14px; flex-wrap: wrap; }
.brief .team .m { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.countdown { font-family: var(--display); font-size: calc(46px * var(--ts)); letter-spacing: .1em; color: #fff; }
.countdown small { display: block; font-family: var(--ui); font-size: 13px; letter-spacing: .3em; color: var(--steel); }
.scanline { position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(180deg, transparent, rgba(79,227,255,.06), transparent); animation: scan 5s linear infinite; pointer-events: none; }
@keyframes scan { to { top: 110%; } }

/* ------------------------------------------------------------ game + HUD */
#s-game { padding: 0; }
#s-game.on { animation: none; }
#world { z-index: 0; }
.cam-intro #world { animation: camBlur 2.6s var(--ease) both; }
@keyframes camBlur { from { filter: blur(14px) brightness(.4); } to { filter: none; } }
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; font-variant-numeric: tabular-nums; }
#hud > * { pointer-events: auto; }
.hud-block { --tone: var(--cyan); background: linear-gradient(180deg, rgba(10,20,40,.72), rgba(6,12,26,.6)); border: 1px solid var(--edge);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.hud-mission { position: absolute; left: calc(20px + var(--safe-l)); top: calc(18px + var(--safe-t)); width: min(380px, 42vw); padding: 12px 16px 14px; }
.hud-mission .m { font-size: .72em; letter-spacing: .3em; color: var(--steel); font-weight: 600; }
.hud-mission .obj { font-size: calc(19px * var(--ts)); font-weight: 600; margin-top: 4px; display: flex; gap: 10px; align-items: baseline; }
.hud-mission .obj .n { font-family: var(--display); font-size: .7em; color: var(--cyan); }
.hud-mission .dist { color: var(--cyan); font-size: .85em; margin-top: 2px; letter-spacing: .06em; }
.pips { display: flex; gap: 4px; margin-top: 10px; }
.pips i { flex: 1; height: 3px; background: rgba(255,255,255,.12); }
.pips i.done { background: var(--green); box-shadow: 0 0 6px var(--green); }
.pips i.active { background: var(--cyan); animation: breathe 1.6s infinite; }
.hud-timer { position: absolute; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); text-align: center; padding: 8px 26px 10px; min-width: 200px; }
.hud-timer .t { font-family: var(--display); font-size: calc(30px * var(--ts)); letter-spacing: .08em; line-height: 1.1; }
.hud-timer.warn .t { color: var(--amber); } .hud-timer.crit .t { color: var(--red); animation: breathe .9s infinite; }
.hud-timer .lbl { font-size: .66em; letter-spacing: .34em; color: var(--steel); }
.compass { position: relative; height: 22px; overflow: hidden; margin-top: 6px; mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.compass .strip { position: absolute; top: 0; left: 50%; height: 100%; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.compass .strip span { position: absolute; top: 3px; transform: translateX(-50%); color: var(--steel); }
.compass .strip span.cd { color: #fff; }
.compass .strip span.obj { color: var(--cyan); }
.compass::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 6px; background: var(--cyan); transform: translateX(-50%); }
.hud-mini { position: absolute; right: calc(20px + var(--safe-r)); top: calc(18px + var(--safe-t)); width: 196px; padding: 8px; }
.hud-mini canvas { display: block; width: 180px; height: 180px; border-radius: 50%; }
.hud-mini .mm-mode { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: .62em; letter-spacing: .3em; color: var(--steel); }
.hud-team { position: absolute; left: calc(20px + var(--safe-l)); top: calc(160px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; width: 230px; }
.tm { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; }
.tm .avatar { width: 30px; height: 30px; font-size: 10px; }
.tm .nm { font-weight: 600; font-size: .92em; line-height: 1.1; }
.tm .st { font-size: .7em; color: var(--steel); letter-spacing: .12em; }
.tm .d { font-size: .78em; color: var(--mist); }
.tm.off { opacity: .5; }
.hud-stats { position: absolute; left: calc(20px + var(--safe-l)); bottom: calc(20px + var(--safe-b)); display: flex; gap: 8px; }
.stat { padding: 8px 14px; min-width: 90px; }
.stat .v { font-family: var(--display); font-size: calc(17px * var(--ts)); }
.stat .l { font-size: .62em; letter-spacing: .26em; color: var(--steel); }
.stat.purple .v { color: var(--purple); }
.feed { position: absolute; left: calc(20px + var(--safe-l)); bottom: calc(92px + var(--safe-b)); width: min(380px, 50vw); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.feed div { font-size: .9em; padding: 4px 10px; background: rgba(4,10,22,.55); border-left: 2px solid var(--c, var(--cyan)); animation: feedIn .3s var(--ease), feedOut .6s ease 7s forwards; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-10px); } }
@keyframes feedOut { to { opacity: 0; } }
.prompt { position: absolute; left: 50%; bottom: calc(118px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.prompt .k { font-family: var(--display); font-size: .8em; min-width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); padding: 0 6px; }
.prompt .who { font-size: .72em; color: var(--steel); letter-spacing: .2em; display: block; }
.carry { position: absolute; right: calc(20px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); padding: 10px 16px; display: flex; align-items: center; gap: 12px; --tone: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.carry .bar { width: 120px; height: 4px; background: rgba(255,255,255,.12); position: relative; }
.carry .bar i { position: absolute; inset: 0 auto 0 0; background: var(--green); width: 0; }
.keyhints { position: absolute; right: calc(20px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); display: flex; gap: 14px; font-size: .74em; color: var(--steel); letter-spacing: .1em; }
.keyhints b { font-family: var(--display); font-weight: 400; color: var(--mist); border: 1px solid var(--edge); padding: 1px 5px; margin-right: 5px; font-size: .9em; }
.hud-min .hud-team, .hud-min .feed, .hud-min .keyhints, .hud-min .hud-stats { display: none; }
.hud-none .hud-block, .hud-none .feed, .hud-none .keyhints { display: none !important; }
.hud-none .prompt { display: flex !important; }

/* alerts (cinematic) */
#alerts { position: fixed; left: 0; right: 0; top: 22%; z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.alert { --tone: var(--electric); position: relative; text-align: center; padding: 14px 64px; min-width: min(520px, 90vw);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tone) 22%, rgba(2,6,16,.8)) 20%, color-mix(in srgb, var(--tone) 22%, rgba(2,6,16,.8)) 80%, transparent);
  animation: alertIn .6s var(--ease), alertOut .6s ease 3.6s forwards; }
.alert::before, .alert::after { content: ""; position: absolute; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--tone), transparent); }
.alert::before { top: 0; } .alert::after { bottom: 0; }
.alert .t { font-family: var(--display); letter-spacing: .4em; font-size: calc(18px * var(--ts)); color: #fff; display: inline-flex; align-items: center; gap: 12px; }
.alert .t svg { color: var(--tone); }
.alert .x { color: var(--mist); margin-top: 4px; }
@keyframes alertIn { from { opacity: 0; transform: scaleX(.6); filter: blur(8px); } }
@keyframes alertOut { to { opacity: 0; transform: translateY(-10px); } }
.flash { position: fixed; inset: 0; z-index: 35; pointer-events: none; background: radial-gradient(circle, transparent 40%, var(--tone)); opacity: 0; animation: flash 1.1s ease; }
@keyframes flash { 15% { opacity: .35; } 100% { opacity: 0; } }

/* toasts + subtitles + dialogue */
#toasts { position: fixed; right: calc(20px + var(--safe-r)); top: calc(250px + var(--safe-t)); z-index: 41; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { --tone: var(--cyan); max-width: 340px; padding: 10px 14px; border-left: 2px solid var(--tone); background: rgba(6,12,26,.86); font-size: .92em; animation: feedIn .3s var(--ease), feedOut .5s ease 4s forwards; }
.toast b { color: var(--tone); letter-spacing: .12em; font-size: .78em; display: block; }
#subtitle { position: fixed; left: 50%; bottom: calc(176px + var(--safe-b)); transform: translateX(-50%); z-index: 42; max-width: min(760px, 90vw); text-align: center; pointer-events: none; }
#subtitle div { display: inline-block; padding: 8px 16px; background: rgba(0,0,0,.66); font-size: calc(18px * var(--ts)); line-height: 1.35; }
#subtitle .sp { color: var(--cyan); font-weight: 600; letter-spacing: .12em; margin-right: 8px; font-size: .78em; }
.dialog { position: absolute; left: 50%; bottom: calc(110px + var(--safe-b)); transform: translateX(-50%); width: min(680px, 92vw); padding: 18px 22px; z-index: 6; --tone: var(--purple); }
.dialog .sp { font-size: .74em; letter-spacing: .26em; color: var(--tone); font-weight: 600; }
.dialog .ln { font-size: calc(19px * var(--ts)); margin-top: 6px; }
.dialog .row { margin-top: 12px; justify-content: flex-end; }

/* panels */
.panel { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%), rgba(4,9,20,.93) !important; position: absolute; inset: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); z-index: 8; display: flex; flex-direction: column; padding: 20px 24px; animation: panelIn .35s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: scale(.985); filter: blur(4px); } }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.panel > header h2 { font-family: var(--display); font-weight: 400; letter-spacing: .24em; font-size: calc(18px * var(--ts)); margin: 0; }
.panel .content { flex: 1; min-height: 0; overflow: auto; touch-action: pan-y; }
#mapcanvas { width: 100%; height: 100%; display: block; touch-action: none; }
.map-wrap { position: relative; flex: 1; min-height: 0; }
.map-legend { position: absolute; left: 12px; bottom: 12px; padding: 10px 14px; font-size: .82em; display: grid; gap: 4px; }
.map-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: middle; }

/* case board */
.case { display: grid; grid-template-columns: 280px 1fr 300px; gap: 16px; height: 100%; }
.case h4 { margin: 0 0 10px; font-size: .74em; letter-spacing: .26em; color: var(--steel); font-weight: 600; }
.objlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.objlist li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--mist); }
.objlist li.done { color: var(--green); } .objlist li.active { color: #fff; font-weight: 600; }
.objlist li small { grid-column: 2; color: var(--steel); font-weight: 400; font-size: .78em; }
.board { position: relative; min-height: 420px; background:
  linear-gradient(rgba(130,180,255,.05) 1px, transparent 1px) 0 0 / 32px 32px,
  linear-gradient(90deg, rgba(130,180,255,.05) 1px, transparent 1px) 0 0 / 32px 32px, rgba(0,0,0,.25);
  border: 1px solid var(--edge); overflow: hidden; }
.board svg.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.board svg.links line { stroke: var(--purple); stroke-width: 2; stroke-dasharray: 6 4; filter: drop-shadow(0 0 4px var(--purple)); }
.clue { --tone: var(--purple); position: absolute; width: 210px; padding: 10px 12px; background: rgba(12,16,34,.92); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); cursor: grab; font-size: .84em; touch-action: none; }
.clue.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--tone); }
.clue .ty { font-size: .72em; letter-spacing: .2em; color: var(--tone); display: flex; justify-content: space-between; gap: 6px; font-weight: 600; }
.clue .tt { font-weight: 600; margin: 3px 0; font-size: 1.05em; }
.clue .tx { color: var(--mist); line-height: 1.3; }
.clue .src { color: var(--steel); font-size: .8em; margin-top: 4px; }
.clue .trust { display: flex; gap: 4px; margin-top: 6px; }
.clue .trust button { font-size: .72em; padding: 2px 6px; border: 1px solid var(--edge); letter-spacing: .1em; color: var(--steel); }
.clue.trusted { --tone: var(--green); } .clue.doubt { --tone: var(--amber); opacity: .78; }
.clue.trusted .trust .t, .clue.doubt .trust .d { color: #fff; border-color: var(--tone); }
.deduce { padding: 14px; display: grid; gap: 8px; }
.deduce .opt { justify-content: flex-start; }
.deduce .opt.x { text-decoration: line-through; opacity: .5; }
.known { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; font-size: .9em; color: var(--mist); }
.known li::before { content: "✓ "; color: var(--green); }

/* inventory */
.inv { display: grid; grid-template-columns: 1fr 340px; gap: 18px; height: 100%; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; align-content: start; }
.item { --tone: var(--cyan); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: .82em; text-align: center; border: 1px solid var(--edge); background: rgba(255,255,255,.03); }
.item svg { width: 34px; height: 34px; color: var(--tone); }
.item.key { --tone: var(--amber); } .item.mission { --tone: var(--green); } .item.evidence { --tone: var(--purple); }
.item.sel, .item:hover, .item.focus { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.item-detail { padding: 18px; }
.item-detail svg.big { width: 64px; height: 64px; color: var(--cyan); }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: .9em; margin-top: 12px; }
.kv dt { color: var(--steel); letter-spacing: .1em; font-size: .85em; } .kv dd { margin: 0; }

/* comms */
.comms { display: grid; grid-template-columns: 1fr 320px; gap: 16px; height: 100%; }
.comms .chatlog { padding: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--edge); }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.quick .btn { justify-content: flex-start; font-size: calc(12px * var(--ts)); letter-spacing: .08em; }

/* pause */
.pause { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(0,3,10,.6); }
.pause .box { width: min(420px, 90vw); padding: 26px; display: flex; flex-direction: column; gap: 8px; }

/* modal */
#modal { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(0,2,8,.7); }
#modal.on { display: grid; animation: screenIn .3s var(--ease); }
#modal .box { width: min(480px, 92vw); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
#modal h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: .2em; font-size: calc(17px * var(--ts)); }

/* results */
#s-results { background: radial-gradient(70% 60% at 50% 30%, rgba(61,220,151,.12), transparent 70%), rgba(0,3,10,.88); }
#s-results.fail { background: radial-gradient(70% 60% at 50% 30%, rgba(255,77,94,.16), transparent 70%), rgba(6,0,4,.9); }
.res { position: absolute; inset: calc(34px + var(--safe-t)) calc(40px + var(--safe-r)) calc(30px + var(--safe-b)) calc(40px + var(--safe-l)); display: flex; flex-direction: column; align-items: center; overflow: auto; touch-action: pan-y; }
.res h1 { font-family: var(--display); font-weight: 400; letter-spacing: .3em; font-size: calc(46px * var(--ts)); margin: 6px 0 4px; text-align: center; animation: wordIn 1.6s var(--ease) both; }
.res .mt { color: var(--steel); letter-spacing: .5em; font-weight: 600; }
.stars { font-size: 34px; letter-spacing: .2em; margin: 16px 0; color: rgba(255,255,255,.18); }
.stars b { color: var(--amber); text-shadow: 0 0 18px rgba(255,181,71,.6); font-weight: 400; display: inline-block; animation: starIn .5s var(--ease) both; }
@keyframes starIn { from { transform: scale(2.2); opacity: 0; } }
.res-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; width: min(960px, 100%); }
.res-grid .stat { text-align: center; padding: 16px 10px; }
.res-grid .stat .v { font-size: calc(24px * var(--ts)); }
.contrib { width: min(960px, 100%); display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 18px; }
.contrib .c { display: flex; gap: 12px; align-items: center; padding: 12px; }
.contrib .r { color: var(--cyan); font-size: .82em; letter-spacing: .14em; font-weight: 600; }

/* touch controls */
#touch { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: none; opacity: var(--to, .85); }
.is-touch #touch { display: block; }
.joyzone { position: absolute; left: 0; bottom: 0; width: 45%; height: 55%; pointer-events: auto; touch-action: none; }
.touch-right .joyzone { left: auto; right: 0; }
.joy { position: absolute; width: calc(150px * var(--tb)); height: calc(150px * var(--tb)); border-radius: 50%; border: 1px solid rgba(130,180,255,.3); background: radial-gradient(circle, rgba(79,227,255,.08), rgba(0,0,0,.25)); transform: translate(-50%, -50%); left: calc(130px + var(--safe-l)); top: calc(100% - 140px - var(--safe-b)); }
.touch-right .joy { left: auto; right: calc(-20px + var(--safe-r)); }
.joy .knob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #dff8ff, #4fb9d8 60%, #1b5e79); box-shadow: 0 0 20px rgba(79,227,255,.5); }
.tbtns { position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); width: calc(250px * var(--tb)); height: calc(230px * var(--tb)); pointer-events: none; }
.touch-right .tbtns { right: auto; left: calc(18px + var(--safe-l)); }
.tb { position: absolute; pointer-events: auto; display: grid; place-items: center; text-align: center; width: calc(72px * var(--tb)); height: calc(72px * var(--tb)); border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(40,70,120,.75), rgba(6,14,30,.8)); border: 1px solid rgba(130,180,255,.35); font-size: calc(11px * var(--tb)); font-weight: 600; letter-spacing: .1em; color: var(--mist); touch-action: none; }
.tb svg { width: 40%; height: 40%; display: block; margin: 0 auto 2px; }
.tb.big { width: calc(96px * var(--tb)); height: calc(96px * var(--tb)); right: 0; bottom: 0; border-color: var(--cyan); color: #fff; box-shadow: 0 0 22px rgba(79,227,255,.25); }
.tb.down { background: rgba(79,227,255,.35); }
.tb.ready { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(79,227,255,0), 0 0 30px rgba(79,227,255,.6); } }
.tb.sprint { right: calc(108px * var(--tb)); bottom: calc(6px * var(--tb)); }
.tb.tinv { right: calc(4px * var(--tb)); bottom: calc(110px * var(--tb)); }
.tb.tcase { right: calc(96px * var(--tb)); bottom: calc(96px * var(--tb)); }
.tb.comm { right: calc(184px * var(--tb)); bottom: calc(40px * var(--tb)); width: calc(58px * var(--tb)); height: calc(58px * var(--tb)); }
.ttop { position: absolute; right: calc(230px + var(--safe-r)); top: calc(18px + var(--safe-t)); display: flex; gap: 8px; pointer-events: auto; }
.ttop .tb { position: static; width: calc(50px * var(--tb)); height: calc(50px * var(--tb)); border-radius: 0; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); font-size: 0; }
.ttop .tb svg { width: 46%; height: 46%; margin: 0; }
.is-touch .keyhints { display: none; }
.is-touch .prompt { bottom: calc(260px * var(--tb) + var(--safe-b)); }
.is-touch .carry { bottom: auto; top: calc(100px + var(--safe-t)); }

/* ------------------------------------------------------------ high contrast / motion */
.hc { --edge: rgba(200,225,255,.55); --steel: #c3d0e4; --glass: rgba(2,6,14,.94); }
.hc .menu-item { color: #fff; }
.hc #fx-grain { display: none; }
.rm *, .rm *::before, .rm *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
.rm #fx-grain { display: none; }
@media (prefers-reduced-motion: reduce) { #fx-grain { display: none; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .case { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .board { min-height: 380px; }
  .brief { grid-template-columns: 1fr; gap: 18px; align-content: center; }
  .brief h1 { font-size: calc(40px * var(--ts)); }
  .res-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .screen { padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); }
  .page { inset: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); }
  .page > header { padding-right: 0; margin-top: 48px; }
  .back { top: calc(14px + var(--safe-t)); right: calc(14px + var(--safe-r)); }
  .logo .word { font-size: calc(40px * var(--ts)); }
  .logo .place { font-size: 14px; }
  .logo .mark { width: 52px; height: 52px; }
  #s-menu .menu-wrap { left: calc(22px + var(--safe-l)); right: 22px; top: auto; bottom: calc(70px + var(--safe-b)); transform: none; gap: 20px; }
  .menu { min-width: 0; }
  .menu-item { font-size: calc(17px * var(--ts)); padding: 7px 12px 7px 16px; }
  .agent-chip { top: calc(14px + var(--safe-t)); right: calc(14px + var(--safe-r)); padding: 6px 10px 6px 6px; }
  .agent-chip .meta { display: none; }
  .menu-foot { display: none; }
  .lobby { grid-template-columns: 1fr; overflow: auto; }
  .set-row { grid-template-columns: 1fr; gap: 8px; }
  .inv, .comms { grid-template-columns: 1fr; }
  .hud-mission { width: calc(100vw - 170px - var(--safe-l) - var(--safe-r)); padding: 8px 12px 10px; left: calc(10px + var(--safe-l)); top: calc(10px + var(--safe-t)); }
  .hud-mission .obj { font-size: calc(15px * var(--ts)); }
  .hud-timer { top: auto; bottom: calc(10px + var(--safe-b)); left: 50%; min-width: 140px; padding: 4px 14px 6px; }
  .hud-timer .t { font-size: calc(22px * var(--ts)); }
  .is-touch .hud-timer { bottom: auto; top: calc(96px + var(--safe-t)); left: calc(10px + var(--safe-l)); transform: none; }
  .hud-mini { width: 140px; right: calc(10px + var(--safe-r)); top: calc(10px + var(--safe-t)); padding: 6px; }
  .hud-mini canvas { width: 128px; height: 128px; }
  .hud-team { display: none; }
  .hud-stats { display: none; }
  .ttop { right: calc(10px + var(--safe-r)); top: calc(160px + var(--safe-t)); flex-direction: column; }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .res h1 { font-size: calc(30px * var(--ts)); letter-spacing: .2em; }
  .brief { inset: calc(18px + var(--safe-t)) calc(18px + var(--safe-r)) calc(18px + var(--safe-b)) calc(18px + var(--safe-l)); overflow: auto; }
  .brief h1 { font-size: calc(30px * var(--ts)); }
  .brief .lines p { font-size: calc(16px * var(--ts)); }
  .panel { inset: calc(8px + var(--safe-t)) calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l)); padding: 14px; }
  .clue { width: 170px; }
  #alerts { top: 30%; }
  .alert { padding: 10px 24px; }
  .alert .t { font-size: 14px; letter-spacing: .26em; }
  #toasts { top: auto; bottom: calc(300px + var(--safe-b)); right: 10px; }
  #subtitle { bottom: calc(320px + var(--safe-b)); }
}
@media (min-width: 1800px) {
  body { font-size: calc(19px * var(--ts)); }
  .hud-mini canvas { width: 220px; height: 220px; }
  .hud-mini { width: 236px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #s-menu .menu-wrap { top: 50%; bottom: auto; transform: translateY(-50%); left: calc(24px + var(--safe-l)); flex-direction: row; align-items: center; gap: 40px; }
  .menu-item { padding: 4px 12px 4px 16px; font-size: calc(15px * var(--ts)); }
  .hud-team { display: none; }
  .is-touch .hud-timer { top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); }
  .hud-mission { width: 34vw; }
  .ttop { top: calc(10px + var(--safe-t)); right: calc(150px + var(--safe-r)); flex-direction: row; }
}

/* ------------------------------------------------------------ phone layouts (touch) */
@media (max-width: 760px) {
  .hud-mission .m { display: none; }
  .is-touch .hud-timer { top: calc(160px + var(--safe-t)); left: auto; right: calc(10px + var(--safe-r)); transform: none; min-width: 140px; }
  .ttop { top: calc(236px + var(--safe-t)); }
  .tbtns { transform: scale(.82); transform-origin: bottom right; }
  .touch-right .tbtns { transform-origin: bottom left; }
  .joy { width: 124px; height: 124px; left: calc(84px + var(--safe-l)); top: calc(100% - 110px - var(--safe-b)); }
  body:not(.in-game) #subtitle { bottom: auto; top: calc(64px + var(--safe-t)); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hud-mission { width: 32vw; padding: 6px 12px 8px; left: calc(10px + var(--safe-l)); top: calc(8px + var(--safe-t)); }
  .hud-mission .m, .hud-stats, .hud-team, .feed { display: none; }
  .hud-mission .obj { font-size: calc(14px * var(--ts)); }
  .hud-mission .dist { font-size: .74em; }
  .hud-timer, .is-touch .hud-timer { top: calc(6px + var(--safe-t)); left: 50%; right: auto; transform: translateX(-50%); min-width: 130px; padding: 2px 12px 4px; }
  .hud-timer .t { font-size: calc(19px * var(--ts)); }
  .hud-timer .lbl { font-size: .55em; }
  .hud-mini { width: 124px; right: calc(10px + var(--safe-r)); top: calc(8px + var(--safe-t)); padding: 5px; }
  .hud-mini canvas { width: 112px; height: 112px; }
  .ttop { flex-direction: row; top: calc(140px + var(--safe-t)); right: calc(10px + var(--safe-r)); }
  .ttop .tb { width: 42px; height: 42px; }
  .tbtns { transform: scale(.7); transform-origin: bottom right; }
  .touch-right .tbtns { transform-origin: bottom left; }
  .joy { width: 116px; height: 116px; left: calc(90px + var(--safe-l)); top: calc(100% - 84px - var(--safe-b)); }
  .is-touch .prompt { bottom: calc(14px + var(--safe-b)); }
  .prompt { padding: 6px 12px; font-size: .9em; }
  #subtitle { bottom: calc(64px + var(--safe-b)); }
  #toasts { top: calc(60px + var(--safe-t)); bottom: auto; }
  #alerts { top: 18%; }
}
.keyhints { background: rgba(4,10,22,.62); padding: 6px 12px; }

/* operation picker */
.mpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.mp { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 14px; border: 1px solid var(--edge); background: rgba(8,16,32,.6); transition: border-color .2s, background .2s; }
.mp .c { font-size: .7em; letter-spacing: .26em; color: var(--steel); font-weight: 600; }
.mp .t { font-family: var(--display); letter-spacing: .12em; font-size: .9em; display: flex; gap: 6px; align-items: center; }
.mp .s { font-size: .74em; color: var(--steel); }
.mp.on { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, rgba(8,16,32,.7)); }
.mp.on .c { color: var(--cyan); }
.mp:hover, .mp:focus-visible { border-color: var(--cyan); }
.mp[disabled] { opacity: .4; pointer-events: none; }

.panel-open #toasts { top: auto; bottom: calc(26px + var(--safe-b)); right: calc(30px + var(--safe-r)); }
.deduce .opt { text-transform: none; font-size: calc(14px * var(--ts)); letter-spacing: .03em; }