:root {
  color-scheme: dark;
  --ink: #101722;
  --panel: #18212d;
  --panel-2: #1e2936;
  --line: rgba(255, 255, 255, .09);
  --muted: #8f9aa8;
  --cream: #f3eee4;
  --orange: #f48120;
  --orange-2: #ffb047;
  --teal: #42d2ba;
  --blue: #4ebdf2;
  --purple: #9a83ff;
  --yellow: #f0c15b;
  --danger: #ff6b62;
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(71, 100, 127, .23), transparent 42%),
    linear-gradient(140deg, #0c131d, #101722 48%, #0a111a);
  color: var(--cream);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.topbar {
  height: 82px;
  padding: 0 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 17, 26, .76);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; gap: 13px; align-items: center; color: inherit; text-decoration: none; width: max-content; }
.brand strong { display: block; font-size: 17px; letter-spacing: .06em; }
.brand small { display: block; margin-top: 2px; color: var(--orange-2); font: 500 10px "DM Mono"; letter-spacing: .2em; }
.brand-mark { width: 48px; height: 35px; position: relative; display: block; }
.brand-mark i { position: absolute; bottom: 4px; height: 20px; border-radius: 20px 20px 4px 4px; background: var(--orange); }
.brand-mark i:nth-child(1) { width: 31px; left: 0; }
.brand-mark i:nth-child(2) { width: 29px; left: 16px; height: 29px; }
.brand-mark i:nth-child(3) { width: 22px; right: 0; height: 15px; background: var(--orange-2); }

.shift-status { display: flex; align-items: center; gap: 9px; color: #aeb8c4; font: 500 11px "DM Mono"; letter-spacing: .08em; }
.shift-status strong { color: #fff; }
.header-link { border: 0; padding: 4px 0; margin-left: 8px; color: #7f8d9e; background: none; font: 500 9px "DM Mono"; letter-spacing: .08em; cursor: pointer; }
.header-link:hover { color: var(--orange-2); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #5a6471; box-shadow: 0 0 0 4px rgba(90, 100, 113, .13); }
.status-dot.connected { background: var(--teal); box-shadow: 0 0 0 4px rgba(66, 210, 186, .14), 0 0 14px rgba(66, 210, 186, .7); }
.divider { height: 17px; width: 1px; background: var(--line); margin: 0 5px; }

.timer-shell { justify-self: end; display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; }
.timer-shell strong { grid-row: 1 / 3; grid-column: 2; font: 500 31px "DM Mono"; letter-spacing: -.06em; min-width: 88px; text-align: right; }
.timer-label, .timer-scale { font: 500 9px "DM Mono"; letter-spacing: .13em; text-align: right; }
.timer-label { color: #bec6d0; align-self: end; }
.timer-scale { color: var(--orange-2); align-self: start; }
.timer-shell.urgent strong { color: var(--danger); animation: timerPulse 1s infinite; }

.game-layout {
  min-height: calc(100vh - 122px);
  padding: 18px;
  display: grid;
  grid-template-columns: 270px minmax(620px, 1fr) 330px;
  gap: 14px;
  align-items: stretch;
}

.panel {
  background: linear-gradient(160deg, rgba(28, 39, 52, .98), rgba(20, 29, 40, .98));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
  min-height: 0;
}

.mission-panel { padding: 22px; display: flex; flex-direction: column; }
.eyebrow { color: var(--orange-2); font: 500 10px "DM Mono"; letter-spacing: .15em; }
.mission-panel h1 { margin: 15px 0 12px; font-size: 28px; line-height: 1.05; letter-spacing: -.04em; }
.mission-panel h1 em { display: block; color: var(--orange-2); font-style: normal; }
.mission-panel > p { margin: 0; color: #a9b4c1; font-size: 13px; line-height: 1.65; }

.mission-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 23px 0 18px; }
.mission-stats div { background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.mission-stats span, .progress-copy span, .crew-heading span { display: block; color: var(--muted); font: 500 9px "DM Mono"; letter-spacing: .12em; }
.mission-stats strong { display: block; margin-top: 5px; font: 500 20px "DM Mono"; }
.crew-profile { display: grid; gap: 5px; margin: -7px 0 17px; padding: 10px 11px; border: 1px solid rgba(244,129,32,.15); border-radius: 10px; background: rgba(244,129,32,.045); }
.crew-profile div { display: flex; justify-content: space-between; gap: 10px; }
.crew-profile span { color: var(--muted); font: 500 8px "DM Mono"; letter-spacing: .1em; }
.crew-profile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d7dee7; font-size: 9px; }

.progress-copy { display: flex; align-items: center; justify-content: space-between; }
.progress-copy strong { color: var(--teal); font: 500 12px "DM Mono"; }
.progress-track { height: 6px; border-radius: 6px; background: #0d141d; margin-top: 9px; overflow: hidden; }
.progress-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--teal)); transition: width .45s ease; }

.crew-heading { display: flex; justify-content: space-between; align-items: center; margin: 25px 0 10px; }
.crew-heading b { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.07); font: 500 10px "DM Mono"; }
.crew-list { display: flex; flex-direction: column; gap: 7px; height: 86px; overflow: auto; }
.crew-member { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.025); }
.crew-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #091018; font-weight: 800; font-size: 11px; }
.crew-member div { flex: 1; }
.crew-member strong { display: block; font-size: 11px; }
.crew-member small { color: var(--muted); font: 400 9px "DM Mono"; }
.empty-state { color: #687585; font-size: 11px; line-height: 1.4; }

.primary-action, .join-card button {
  border: 0;
  border-radius: 12px;
  padding: 14px 15px;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  color: #171008;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(244, 129, 32, .2);
}
.primary-action { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.primary-action kbd { background: rgba(0,0,0,.13); border: 0; border-radius: 5px; padding: 2px 7px; font: 500 14px "DM Mono"; }
.primary-action:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.5); }
.ghost-action { background: none; border: 0; color: #788697; margin-top: 9px; padding: 7px; font-size: 10px; cursor: pointer; }
.ghost-action:hover { color: #fff; }

.room-stage { padding: 18px; display: flex; flex-direction: column; min-width: 0; }
.stage-header, .platform-title { display: flex; align-items: flex-start; justify-content: space-between; }
.stage-header h2, .platform-title h2 { font-size: 18px; margin: 6px 0 0; }
.phase-badge { color: var(--yellow); background: rgba(240, 193, 91, .08); border: 1px solid rgba(240, 193, 91, .2); border-radius: 30px; padding: 7px 10px; font: 500 9px "DM Mono"; letter-spacing: .08em; }

.room {
  position: relative;
  flex: 1;
  min-height: 470px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(37, 46, 53, .18) 50%, transparent 50.4%),
    linear-gradient(0deg, transparent 49.6%, rgba(37, 46, 53, .15) 50%, transparent 50.4%),
    #cbbda6;
  background-size: 55px 55px;
  box-shadow: inset 0 0 90px rgba(52, 38, 24, .25);
}

.room::before, .room::after { content: ""; position: absolute; background: #4d4137; z-index: 1; }
.room::before { left: 0; right: 0; top: 0; height: 18px; box-shadow: 0 8px 18px rgba(0,0,0,.24); }
.room::after { top: 0; bottom: 0; right: 0; width: 18px; box-shadow: -8px 0 18px rgba(0,0,0,.2); }
.room-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.12), transparent 35%); z-index: 8; }

.window { position: absolute; top: 18px; left: 36%; width: 28%; height: 52px; background: linear-gradient(#7ac1d3, #cce6e8); border: 7px solid #66594d; border-top: 0; box-shadow: 0 8px 15px rgba(0,0,0,.2); display: flex; justify-content: space-around; overflow: hidden; }
.window::after { content: ""; position: absolute; left: 50%; height: 100%; border-left: 4px solid #66594d; }
.window span { position: absolute; right: 7px; top: 5px; font: 500 7px "DM Mono"; color: #345762; }
.window i { width: 5px; height: 22px; align-self: end; background: #7999a0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.wall-art { position: absolute; top: 32px; left: 9%; width: 15%; height: 63px; border: 6px solid #5a4c41; background: #ece3d4; display: grid; place-items: center; transform: skewY(-1deg); }
.wall-art i { position: absolute; width: 35px; height: 35px; border-radius: 50%; background: var(--orange); opacity: .85; }
.wall-art b { color: #fff; z-index: 1; font: 500 10px "DM Mono"; }

.bed { position: absolute; left: 30%; top: 23%; width: 38%; height: 42%; filter: drop-shadow(0 18px 15px rgba(46,35,27,.32)); }
.headboard { position: absolute; top: 0; left: 0; right: 0; height: 18%; border-radius: 7px 7px 0 0; background: #594a40; }
.mattress { position: absolute; inset: 13% 3% 2%; border-radius: 9px 9px 14px 14px; background: #e7e0d4; border: 4px solid #a89986; overflow: hidden; }
.mattress::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(120deg, #b6a48a, #ccbca5); }
.mattress i { position: absolute; z-index: 2; top: 8%; width: 38%; height: 26%; background: #f7f4ed; border-radius: 5px 5px 12px 12px; box-shadow: 0 3px 7px rgba(0,0,0,.12); }
.mattress i:first-child { left: 8%; transform: rotate(2deg); }
.mattress i:nth-child(2) { right: 8%; transform: rotate(-2deg); }
.mattress span { position: absolute; z-index: 2; left: 48%; top: 45%; width: 5%; height: 55%; background: rgba(255,255,255,.25); }
.bed-shadow { position: absolute; bottom: -4px; left: 8%; width: 84%; height: 12px; border-radius: 50%; background: rgba(0,0,0,.25); filter: blur(5px); }

.nightstand { position: absolute; top: 30%; width: 8%; height: 16%; background: #705842; border: 3px solid #46372d; border-radius: 4px; box-shadow: 0 9px 12px rgba(0,0,0,.22); }
.nightstand.left { left: 20%; } .nightstand.right { left: 70%; }
.nightstand span { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #f0c15b; left: 50%; top: 20%; transform: translateX(-50%); box-shadow: 0 0 20px #f0c15b; }

.desk { position: absolute; left: 3%; top: 22%; width: 17%; height: 26%; background: #66513d; border-radius: 4px; border: 4px solid #46372d; box-shadow: 0 13px 16px rgba(0,0,0,.22); }
.screen { position: absolute; left: 15%; top: 13%; width: 67%; height: 42%; background: #1c2d35; border: 5px solid #34383b; color: #79ddcd; font: 500 6px "DM Mono"; display: grid; place-items: center; }
.chair { position: absolute; left: 28%; bottom: -38%; width: 45%; height: 42%; border-radius: 50% 50% 15% 15%; background: #34414b; border: 4px solid #222c34; }

.bathroom { position: absolute; right: 2.7%; top: 4%; width: 22%; height: 42%; background: repeating-linear-gradient(45deg, #d8d8d2 0 18px, #c9cac5 18px 19px); border: 8px solid #70665c; box-shadow: inset 0 0 25px rgba(0,0,0,.1); }
.bath-label { position: absolute; left: 8px; top: 7px; color: #6e7474; font: 500 7px "DM Mono"; }
.shower { position: absolute; right: 7%; top: 8%; width: 42%; height: 55%; border: 3px solid rgba(80,112,120,.55); background: rgba(116,185,201,.2); }
.sink { position: absolute; left: 7%; bottom: 8%; width: 38%; height: 29%; border-radius: 45%; background: #f3f1e9; border: 5px solid #aaa79d; }
.sink::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: #9fb5b9; }
.towel { position: absolute; right: 8%; bottom: 9%; width: 36%; height: 12%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.15); }

.minibar { position: absolute; right: 5%; top: 49%; width: 14%; height: 22%; background: #594a3e; border: 4px solid #3d342d; border-radius: 4px; padding: 7px; }
.minibar span { color: #cbbba7; font: 500 6px "DM Mono"; }
.minibar i { display: inline-block; width: 12px; height: 19px; margin: 14px 2px 0; background: #79b8aa; border-radius: 5px 5px 2px 2px; }
.minibar i:nth-of-type(2) { background: #d8a74e; height: 16px; }
.minibar i:nth-of-type(3) { background: #b26c55; }

.rug { position: absolute; left: 25%; top: 68%; width: 50%; height: 24%; border-radius: 50%; background: repeating-radial-gradient(ellipse, #7d6855 0 9px, #a18b73 10px 18px); opacity: .53; transform: rotate(-2deg); }
.door { position: absolute; right: 3%; bottom: 0; width: 13%; height: 10%; background: #45392f; border: 5px solid #2f2924; color: #d5c4ad; font: 500 6px "DM Mono"; display: grid; place-items: center; }
.cart { position: absolute; left: 4%; bottom: 4%; width: 14%; height: 20%; border: 5px solid #37434a; border-radius: 6px; background: #85949b; }
.cart::before { content: ""; position: absolute; left: 12%; right: 12%; top: 25%; border-top: 5px solid #37434a; box-shadow: 0 22px #37434a; }
.cart i { position: absolute; bottom: -12px; width: 15px; height: 15px; border-radius: 50%; background: #20292e; }
.cart i:first-child { left: 8%; } .cart i:nth-child(2) { right: 8%; }
.cart span { position: absolute; left: 16%; top: -18%; width: 65%; height: 25%; background: #f1eee5; border-radius: 5px; }

.hotspot {
  --task-color: var(--orange);
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 9;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  background: var(--task-color);
  color: #15100a;
  display: grid;
  place-items: center;
  font: 800 12px "DM Mono";
  cursor: pointer;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--task-color) 22%, transparent), 0 8px 16px rgba(0,0,0,.25);
  transition: transform .18s ease, opacity .18s ease;
}
.hotspot:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.14); }
.hotspot::after { content: attr(data-label); position: absolute; left: 50%; top: 44px; transform: translateX(-50%); width: max-content; max-width: 135px; padding: 5px 8px; border-radius: 6px; color: #fff; background: rgba(13,20,29,.9); font: 600 9px "Manrope"; box-shadow: 0 5px 12px rgba(0,0,0,.2); }
.hotspot.locked { filter: grayscale(1); opacity: .45; cursor: not-allowed; }
.hotspot.complete { background: var(--teal); --task-color: var(--teal); }
.hotspot.working { animation: hotspotPulse .55s ease; }

.task-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 10px; }
.task-card { min-width: 0; padding: 8px; border-radius: 9px; background: rgba(255,255,255,.035); border: 1px solid var(--line); cursor: pointer; transition: background .2s, border-color .2s; }
.task-card:hover:not(.locked) { background: rgba(255,255,255,.065); border-color: rgba(244,129,32,.4); }
.task-card.locked { opacity: .42; cursor: not-allowed; }
.task-card.complete { border-color: rgba(66,210,186,.35); background: rgba(66,210,186,.06); }
.task-card span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; font-weight: 700; }
.task-card small { display: block; margin-top: 5px; color: var(--muted); font: 400 8px "DM Mono"; }
.task-progress { margin-top: 6px; height: 3px; background: #0d141d; border-radius: 3px; overflow: hidden; }
.task-progress i { display: block; height: 100%; background: var(--orange); transition: width .3s; }
.task-card.complete .task-progress i { background: var(--teal); }

.platform-panel { padding: 18px; display: flex; flex-direction: column; min-width: 0; }
.live-pill { color: var(--teal); border: 1px solid rgba(66,210,186,.25); background: rgba(66,210,186,.07); border-radius: 30px; padding: 6px 8px; font: 500 9px "DM Mono"; }
.live-pill i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-right: 4px; animation: timerPulse 1.2s infinite; }
.platform-intro { color: #8491a0; font-size: 11px; line-height: 1.5; margin: 11px 0 14px; }
.service-map { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.service-node { position: relative; min-width: 0; padding: 9px 8px 8px 30px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); transition: .25s ease; }
.service-node i { position: absolute; left: 10px; top: 12px; width: 9px; height: 9px; border-radius: 3px; background: #53606e; }
.service-node strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.service-node small { color: #667483; font: 400 7px "DM Mono"; }
.service-node.active { border-color: rgba(244,129,32,.65); background: rgba(244,129,32,.09); box-shadow: 0 0 18px rgba(244,129,32,.08); }
.service-node.active i { background: var(--orange-2); box-shadow: 0 0 10px var(--orange); }
.service-node.active small { color: #e7a665; }

.inspector-card { display: flex; gap: 10px; align-items: flex-start; margin-top: 13px; padding: 12px; border-radius: 11px; background: linear-gradient(120deg, rgba(154,131,255,.12), rgba(78,189,242,.06)); border: 1px solid rgba(154,131,255,.2); }
.inspector-avatar { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--purple); font: 500 10px "DM Mono"; box-shadow: 0 0 20px rgba(154,131,255,.3); }
.inspector-card span { color: #c6bafd; font: 500 8px "DM Mono"; letter-spacing: .1em; }
.inspector-card p { margin: 5px 0 0; color: #c3ccd6; font-size: 10px; line-height: 1.4; }

.event-heading { display: flex; align-items: center; gap: 9px; margin: 16px 0 8px; color: var(--muted); font: 500 8px "DM Mono"; letter-spacing: .13em; }
.event-heading i { flex: 1; height: 1px; background: var(--line); }
.event-feed { display: flex; flex-direction: column; gap: 7px; overflow: auto; height: 145px; padding-right: 3px; }
.event-item { position: relative; padding: 0 0 0 13px; }
.event-item::before { content: ""; position: absolute; left: 0; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: #657382; }
.event-item.success::before { background: var(--teal); }
.event-item.warning::before { background: var(--yellow); }
.event-item.ai::before { background: var(--purple); }
.event-item p { margin: 0; color: #aeb8c4; font-size: 9px; line-height: 1.35; }
.event-item small { color: #5f6c7a; font: 400 7px "DM Mono"; }

.footer-bar { min-height: 40px; padding: 0 24px; display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--line); color: #647180; font: 500 8px "DM Mono"; letter-spacing: .08em; }
.footer-bar strong { color: #aab5c2; font-size: 9px; }
.footer-bar i { height: 14px; width: 1px; background: var(--line); }
.footer-bar a { margin-left: auto; color: var(--orange-2); text-decoration: none; }

.join-overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(5,9,14,.83); backdrop-filter: blur(14px); transition: opacity .4s, visibility .4s; }
.join-overlay.hidden { opacity: 0; visibility: hidden; }
.join-card { position: relative; width: min(430px, 100%); border: 1px solid rgba(255,255,255,.13); border-radius: 22px; padding: 35px; background: linear-gradient(145deg, #1f2b39, #121a24); box-shadow: 0 35px 100px rgba(0,0,0,.5); overflow: hidden; }
.join-card::after { content: ""; position: absolute; right: -70px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: var(--orange); opacity: .08; }
.room-number { float: right; color: rgba(255,255,255,.06); font: 500 80px "DM Mono"; line-height: .8; letter-spacing: -.1em; }
.join-card h2 { clear: both; margin: 20px 0 10px; font-size: 32px; letter-spacing: -.04em; }
.join-card p { color: #9ca8b6; font-size: 13px; line-height: 1.6; }
.join-card label { display: block; margin: 22px 0 8px; color: var(--orange-2); font: 500 9px "DM Mono"; letter-spacing: .13em; }
.join-card input { width: 100%; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; padding: 13px; outline: none; background: rgba(255,255,255,.045); color: #fff; }
.join-card input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(244,129,32,.1); }
.turnstile-slot { min-height: 65px; margin-top: 12px; display: grid; place-items: center; border-radius: 9px; color: #687585; background: rgba(255,255,255,.025); font-size: 9px; }
.turnstile-slot.local { min-height: 34px; border: 1px dashed rgba(255,255,255,.09); }
.join-card button { width: 100%; display: flex; justify-content: space-between; margin-top: 12px; }
.join-card small { display: block; margin-top: 12px; color: #657383; text-align: center; font-size: 9px; }

.modal-overlay { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 20px; background: rgba(5,9,14,.78); backdrop-filter: blur(12px); transition: opacity .25s, visibility .25s; }
.modal-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.leaderboard-card { width: min(610px, 100%); max-height: min(720px, 90vh); overflow: auto; padding: 27px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: linear-gradient(145deg, #202c3a, #121a24); box-shadow: 0 35px 100px rgba(0,0,0,.5); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-heading h2 { margin: 7px 0 0; font-size: 25px; }
.modal-heading button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: #aab4c0; background: rgba(255,255,255,.04); font-size: 22px; cursor: pointer; }
.leaderboard-card > p { color: #8996a5; font-size: 12px; line-height: 1.5; }
.leaderboard-list { display: grid; gap: 7px; margin-top: 18px; }
.leader-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.leader-row.current { border-color: rgba(244,129,32,.45); background: rgba(244,129,32,.07); }
.leader-rank { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--orange-2); font: 500 11px "DM Mono"; }
.leader-name { min-width: 0; }
.leader-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.leader-name small { color: #778595; font: 400 8px "DM Mono"; }
.leader-stat { text-align: right; }
.leader-stat strong { display: block; font: 500 13px "DM Mono"; }
.leader-stat small { color: #778595; font: 400 7px "DM Mono"; }

.toast { position: fixed; z-index: 40; left: 50%; bottom: 24px; transform: translate(-50%, 30px); padding: 10px 15px; border-radius: 9px; background: #f4eee3; color: #17110c; font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transition: .25s; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes timerPulse { 50% { opacity: .55; } }
@keyframes hotspotPulse { 50% { transform: translate(-50%, -50%) scale(1.3); } }

@media (max-width: 1180px) {
  .game-layout { grid-template-columns: 230px minmax(550px, 1fr); }
  .platform-panel { grid-column: 1 / -1; }
  .service-map { grid-template-columns: repeat(4, 1fr); }
  .event-feed { height: 110px; }
}

@media (max-width: 820px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 14px; }
  .shift-status { display: none; }
  .game-layout { display: flex; flex-direction: column; padding: 10px; }
  .mission-panel { order: 2; }
  .room-stage { order: 1; padding: 12px; }
  .platform-panel { order: 3; }
  .room { min-height: 420px; }
  .task-strip { grid-template-columns: repeat(4, 1fr); }
  .footer-bar span:nth-of-type(n+2), .footer-bar i { display: none; }
}

@media (max-width: 520px) {
  .brand strong { font-size: 13px; }
  .brand-mark { transform: scale(.82); transform-origin: left; width: 40px; }
  .timer-label, .timer-scale { display: none; }
  .timer-shell { display: block; }
  .timer-shell strong { font-size: 24px; }
  .stage-header h2 { font-size: 15px; }
  .room { min-height: 350px; }
  .hotspot { width: 31px; height: 31px; font-size: 9px; }
  .hotspot::after { display: none; }
  .task-strip { grid-template-columns: repeat(2, 1fr); }
  .service-map { grid-template-columns: repeat(2, 1fr); }
  .join-card { padding: 25px; }
}