:root {
  color-scheme: dark;
  --cyan: #54f4ff;
  --cyan-soft: #99f9ff;
  --deep: #020814;
  --panel: rgba(4, 19, 33, 0.78);
  --line: rgba(117, 231, 246, 0.22);
  --text: #dffbff;
  --muted: #a9cbd1;
  --danger: #ff526f;
  --gold: #ffd06a;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overflow: clip;
  background: #01060d;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  color: var(--text);
  user-select: none;
}

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

#app {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: #020a14;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
}

.low-power .scanlines { display: none; }
.low-power .screen,
.low-power .icon-btn { backdrop-filter: none; }
.low-power .primary-btn,
.low-power .briefing-card,
.low-power .pause-card,
.low-power .result-card { box-shadow: none; }
.low-power h1,
.low-power .timer,
.low-power .announcement strong { text-shadow: none; }
.low-power .hull-segment::after,
.low-power .sonar-fill,
.low-power .brand-mark { box-shadow: none; }
.low-power .sonar-wrap.ready .sonar-track,
.low-power .sonar-touch.ready { animation: none; }

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  z-index: 3;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(150,240,255,.08) 4px);
  mix-blend-mode: screen;
}

.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 35%, rgba(0, 2, 8, .54) 100%);
}

#flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: white;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.topbar {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(18px, env(safe-area-inset-top)) 26px 0;
  pointer-events: none;
}

.brand-mini {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 700 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .19em;
  color: rgba(211, 247, 250, .86);
}

.brand-mark {
  width: 14px;
  height: 14px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(84,244,255,.1), 0 0 12px rgba(84,244,255,.4);
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--cyan);
  border-radius: 50%;
  inset: 4px;
  margin: auto;
}

.top-actions { display: flex; gap: 8px; pointer-events: auto; }
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(129,224,236,.18);
  border-radius: 50%;
  background: rgba(3,16,28,.44);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: .2s ease;
}
.icon-btn:hover { border-color: rgba(84,244,255,.6); background: rgba(16,56,66,.48); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; fill: rgba(212,251,255,.78); }

.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 72px 6vw 38px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s;
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }

.title-screen {
  display: grid;
  grid-template-columns: clamp(58px, 7vw, 94px) minmax(0, 1fr);
  align-items: stretch;
  padding: 74px 5vw 34px 0;
  overflow: hidden;
}
.title-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(1,7,15,.18) 0 46%, rgba(1,7,15,.88) 100%),
    linear-gradient(90deg, rgba(1,7,15,.72), rgba(1,7,15,.08) 58%, rgba(1,7,15,.28));
}
.title-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 68px 4vw 30px clamp(58px, 7vw, 94px);
  border-top: 1px solid rgba(154,218,225,.16);
  border-bottom: 1px solid rgba(154,218,225,.12);
  pointer-events: none;
}

.title-rail {
  min-width: 0;
  border-right: 1px solid rgba(154,218,225,.22);
  color: rgba(207,235,239,.8);
  font: 600 15px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 0 4px;
}
.title-rail strong { color: var(--cyan-soft); font-size: 18px; letter-spacing: .08em; }
.title-rail span { margin-top: 20px; writing-mode: vertical-rl; }
.title-rail i { width: 1px; flex: 1; min-height: 40px; margin: 18px 0; background: rgba(154,218,225,.14); }
.title-rail small { writing-mode: vertical-rl; line-height: 1.7; }

.title-content {
  width: 100%;
  min-width: 0;
  padding-left: clamp(24px, 4vw, 68px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  animation: rise .75s cubic-bezier(.2,.8,.2,1) both;
}
.title-masthead {
  display: flex;
  justify-content: space-between;
  padding: 0 4px 13px;
  color: rgba(211,238,242,.82);
  font: 600 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
}
.title-lockup { align-self: end; position: relative; padding: 0 0 clamp(22px, 4vh, 42px); }
.title-sequence {
  position: absolute;
  left: 2px;
  top: -30px;
  color: rgba(208,237,241,.82);
  font: 600 16px/1 ui-monospace, monospace;
  letter-spacing: .18em;
}
.title-sequence strong { margin-left: 10px; color: var(--gold); font-size: 24px; letter-spacing: 0; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--cyan);
  font: 700 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.eyebrow span { display: inline-block; width: 32px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.title-screen h1 {
  margin: 0;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-weight: 800;
  line-height: .72;
  color: #e9fdff;
  text-transform: uppercase;
  white-space: nowrap;
}
.title-screen h1 span {
  display: block;
  margin-left: .08em;
  color: rgba(220,245,248,.88);
  font: 600 clamp(19px, 2.3vw, 32px)/1 ui-monospace, monospace;
  letter-spacing: .48em;
}
.title-screen h1 b {
  display: block;
  margin-top: 9px;
  font-size: clamp(68px, 11.8vw, 170px);
  letter-spacing: -.064em;
}
.title-screen .subtitle {
  position: absolute;
  right: 3px;
  bottom: 22px;
  margin: 0;
  color: rgba(218,244,247,.9);
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 700;
  letter-spacing: .5em;
}

.primary-btn {
  position: relative;
  width: min(330px, 100%);
  min-height: 66px;
  padding: 13px 18px 12px;
  border: 1px solid rgba(84,244,255,.66);
  border-radius: 3px;
  background: linear-gradient(110deg, rgba(27,151,163,.34), rgba(6,51,68,.56));
  box-shadow: inset 0 0 32px rgba(84,244,255,.06), 0 10px 45px rgba(0,0,0,.3);
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.primary-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(132,251,255,.15), transparent);
  transform: translateX(-110%);
  transition: transform .6s ease;
}
.primary-btn:hover { transform: translateY(-2px); border-color: var(--cyan-soft); box-shadow: inset 0 0 36px rgba(84,244,255,.13), 0 12px 45px rgba(0,0,0,.36), 0 0 22px rgba(84,244,255,.1); }
.primary-btn:hover::before { transform: translateX(110%); }
.primary-btn span { display: block; font-weight: 800; font-size: 16px; letter-spacing: .12em; }
.primary-btn small { display: block; margin-top: 6px; color: rgba(220,249,251,.88); font: 600 12px/1 ui-monospace, monospace; letter-spacing: .16em; }
.primary-btn.compact { width: 280px; min-height: 58px; }

kbd { min-width: 30px; padding: 6px 8px; border: 1px solid rgba(130,216,226,.32); border-radius: 3px; background: rgba(1,10,18,.48); color: rgba(222,250,252,.84); font: 600 12px/1 ui-monospace, monospace; text-align: center; }
.dispatch-strip {
  min-height: 126px;
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(210px, .62fr) minmax(220px, .74fr);
  gap: clamp(18px, 2.4vw, 36px);
  background: transparent;
}
.dispatch-objective { padding: 18px 0 15px 4px; border: 0; }
.dispatch-objective small { color: var(--gold); font: 600 16px/1 ui-monospace, monospace; letter-spacing: .12em; }
.dispatch-objective p { max-width: 500px; margin: 13px 0 0; color: rgba(224,244,247,.92); font-size: 18px; line-height: 1.45; }
.dispatch-objective b { color: #e9fdff; }
.dispatch-button.primary-btn {
  width: 100%;
  min-height: 88px;
  align-self: center;
  padding: 16px 22px;
  border: 0;
  border-radius: 2px;
  background: rgba(18,112,126,.72);
  box-shadow: none;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
}
.dispatch-button.primary-btn::before { display: none; }
.dispatch-button.primary-btn:hover { transform: none; background: rgba(23,139,153,.82); box-shadow: none; }
.dispatch-button.primary-btn small { grid-column: 1 / -1; margin: 0 0 9px; color: rgba(214,248,251,.94); font-size: 15px; }
.dispatch-button.primary-btn span { font-size: 23px; letter-spacing: .08em; }
.dispatch-button.primary-btn b { align-self: end; color: var(--cyan-soft); font: 600 16px/1 ui-monospace, monospace; letter-spacing: .06em; }
.record-line {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 15px 4px 15px 22px;
  color: rgba(205,233,237,.84);
  font: 600 15px/1 ui-monospace, monospace;
  letter-spacing: .14em;
}
.record-line span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.record-line strong { color: rgba(230,251,253,.94); font-size: 21px; letter-spacing: .04em; }
.title-footer {
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  padding: 15px 4px 0;
  color: rgba(202,229,233,.78);
  font: 600 14px/1 ui-monospace, monospace;
  letter-spacing: .12em;
}
.title-footer .risk-code { margin-left: auto; color: rgba(255,208,106,.72); }

.briefing-screen, .pause-screen, .gameover-screen { background: rgba(1,7,14,.76); backdrop-filter: blur(7px); }
.briefing-card, .pause-card, .result-card {
  width: min(820px, 92vw);
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(111,226,240,.17);
  background: linear-gradient(145deg, rgba(7,27,43,.94), rgba(2,12,23,.95));
  box-shadow: 0 30px 100px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.03);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.briefing-card::before, .result-card::before, .pause-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--cyan), transparent); opacity:.55; }
.briefing-card .eyebrow, .pause-card .eyebrow { justify-content: center; margin-bottom: 15px; }
.briefing-card h2, .pause-card h2, .result-card h2 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.04em; }
.briefing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 34px 0; text-align: left; }
.briefing-grid article { min-height: 152px; padding: 20px; border: 1px solid rgba(106,219,231,.13); background: rgba(7,34,48,.4); }
.briefing-grid b { display: block; float: right; color: rgba(84,244,255,.17); font: 800 28px/1 ui-monospace, monospace; }
.briefing-grid span { display:block; margin: 7px 0 17px; color: var(--cyan-soft); font-weight:800; font-size: 14px; }
.briefing-grid p { margin:0; color:rgba(222,243,246,.9); font-size:14px; line-height:1.65; }
.skip-label { display: block; margin-top: 16px; color: rgba(217,240,243,.86); font-size: 13px; cursor: pointer; }
.skip-label input { accent-color: var(--cyan); vertical-align: middle; margin-right: 5px; }
.briefing-icon { width: 74px; height: 74px; margin: 0 auto 20px; border:1px solid rgba(84,244,255,.3); border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 22px rgba(84,244,255,.07); }
.briefing-icon span { width:28px; height:15px; border:2px solid var(--cyan); border-radius: 50% 50% 45% 45%; position:relative; box-shadow:0 0 12px rgba(84,244,255,.4); }
.briefing-icon span::before,.briefing-icon span::after { content:""; position:absolute; width:12px; height:2px; top:5px; background:var(--cyan); }
.briefing-icon span::before { right:100%; transform:rotate(-25deg); transform-origin:right; }
.briefing-icon span::after { left:100%; transform:rotate(25deg); transform-origin:left; }

.pause-card { width:min(470px,90vw); }
.pause-card p { color:rgba(222,243,246,.88); margin:12px 0 28px; font-size:15px; }
.text-btn { display:block; margin:16px auto 0; padding:8px 15px; border:0; background:transparent; color:rgba(229,248,250,.9); font-size:14px; cursor:pointer; }
.text-btn:hover { color:var(--cyan-soft); }
.text-btn.danger:hover { color:var(--danger); }

.result-card { width: min(580px, 92vw); padding: 40px 50px; }
.result-status { color:var(--danger); font:700 12px/1 ui-monospace,monospace; letter-spacing:.26em; margin-bottom:10px; }
.result-card > p { color:rgba(222,243,246,.88); font-size:14px; }
.result-main { margin:28px 0 18px; padding:20px; border-top:1px solid rgba(122,220,232,.13); border-bottom:1px solid rgba(122,220,232,.13); position:relative; }
.result-main span { display:block; color:var(--muted); font:600 12px/1 ui-monospace,monospace; letter-spacing:.16em; }
.result-main strong { display:block; margin-top:8px; color:#efffff; font:700 50px/1 ui-monospace,monospace; letter-spacing:.06em; text-shadow:0 0 28px rgba(84,244,255,.2); }
.result-main em { position:absolute; top:16px; right:14px; padding:6px 8px; background:rgba(255,208,106,.1); border:1px solid rgba(255,208,106,.4); color:var(--gold); font:700 11px/1 ui-monospace,monospace; letter-spacing:.1em; font-style:normal; transform:rotate(4deg); }
.result-main em.hidden { display:none; }
.result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-bottom:24px; background:rgba(104,210,222,.09); }
.result-grid div { padding:14px; background:rgba(2,13,24,.92); }
.result-grid span { display:block; margin-bottom:7px; color:rgba(215,239,242,.86); font-size:12px; }
.result-grid b { color:rgba(232,253,255,.9); font:600 17px/1 ui-monospace,monospace; }

.hud { position:absolute; inset:0; z-index:6; pointer-events:none; opacity:1; transition:opacity .3s; }
.hud.hidden { opacity:0; }
.hud-left,.hud-right { position:absolute; top:72px; min-width:190px; }
.hud-left { left:28px; }
.hud-right { right:28px; text-align:right; }
.label,.score-label,.depth-row,.sector,.sonar-header { color:rgba(215,244,247,.9); font:700 13px/1 ui-monospace,monospace; letter-spacing:.09em; }
.hull { display:flex; gap:6px; margin:9px 0 12px; }
.hull-segment { width:43px; height:6px; border:1px solid rgba(94,224,239,.34); padding:1px; transform:skewX(-16deg); }
.hull-segment::after { content:""; display:block; width:100%; height:100%; background:var(--cyan); box-shadow:0 0 8px rgba(84,244,255,.6); transition:.3s; }
.hull-segment.lost::after { width:0; }
.hull-segment.lost { border-color:rgba(255,82,111,.23); }
.depth-row { display:flex; justify-content:space-between; color:rgba(199,229,233,.8); }
.depth-row strong { color:rgba(224,250,252,.86); font-size:13px; }
.speed-level { margin-top:10px; padding:7px 9px; border-left:2px solid rgba(84,244,255,.68); background:linear-gradient(90deg,rgba(28,135,151,.2),transparent); color:#8ff8ff; font:800 12px/1 ui-monospace,monospace; letter-spacing:.06em; text-shadow:0 0 10px rgba(84,244,255,.28); }
.speed-level.max { border-left-color:var(--gold); color:var(--gold); background:linear-gradient(90deg,rgba(255,190,72,.18),transparent); }
.score { margin-top:7px; color:#e4fdff; font:700 29px/1 ui-monospace,monospace; letter-spacing:.06em; }
.combo { margin-top:9px; color:var(--gold); font:700 13px/1 ui-monospace,monospace; letter-spacing:.06em; opacity:.82; }
.hud-center { position:absolute; top:70px; left:50%; transform:translateX(-50%); text-align:center; }
.timer { color:#efffff; font:600 28px/1 ui-monospace,monospace; letter-spacing:.06em; text-shadow:0 0 16px rgba(84,244,255,.18); }
.sector { margin-top:9px; font-size:12px; }
.sonar-wrap { position:absolute; left:50%; bottom:28px; width:min(340px,42vw); transform:translateX(-50%); }
.sonar-header { display:flex; justify-content:space-between; color:rgba(211,241,244,.88); }
.sonar-track { height:5px; margin-top:7px; padding:1px; border:1px solid rgba(111,225,238,.25); transform:skewX(-14deg); }
.sonar-fill { width:0%; height:100%; background:linear-gradient(90deg,#39aebb,var(--cyan-soft)); box-shadow:0 0 9px rgba(84,244,255,.55); transition:width .12s; }
.sonar-wrap.ready .sonar-track { animation:sonarReady 1s ease-in-out infinite; }
.sonar-hint { margin-top:8px; text-align:center; color:rgba(215,240,243,.86); font-size:12px; letter-spacing:.05em; }

.announcement { position:absolute; z-index:8; left:50%; top:44%; transform:translate(-50%,-50%) scale(.95); text-align:center; opacity:0; pointer-events:none; }
.announcement.show { animation:announce 3.2s ease both; }
.announcement small,.announcement span { display:block; color:rgba(152,234,242,.82); font:700 12px/1 ui-monospace,monospace; letter-spacing:.28em; }
.announcement strong { display:block; margin:11px 0 8px; color:#e9feff; font-size:32px; letter-spacing:.12em; text-shadow:0 0 20px rgba(84,244,255,.3); }
.toast { position:absolute; z-index:9; top:23%; left:50%; transform:translate(-50%,-5px); padding:10px 16px; border:1px solid rgba(84,244,255,.3); background:rgba(3,18,29,.84); color:rgba(229,253,255,.94); font:700 14px/1 ui-monospace,monospace; letter-spacing:.06em; opacity:0; transition:.25s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.gold { color:var(--gold); border-color:rgba(255,208,106,.3); }

.touch-controls { position:absolute; z-index:7; left:0; right:0; bottom:max(22px,env(safe-area-inset-bottom)); display:none; justify-content:space-between; align-items:flex-end; padding:0 28px; pointer-events:none; }
.joystick { width:116px; height:116px; border:1px solid rgba(126,229,239,.19); border-radius:50%; background:rgba(6,28,40,.22); pointer-events:auto; touch-action:none; position:relative; }
.joystick.engaged { border-color:rgba(126,229,239,.48); background:rgba(6,28,40,.48); box-shadow:0 0 34px rgba(84,244,255,.14); }
.joystick::before,.joystick::after { content:""; position:absolute; background:rgba(126,229,239,.1); }
.joystick::before { width:1px; height:72%; left:50%; top:14%; }
.joystick::after { height:1px; width:72%; top:50%; left:14%; }
.stick { position:absolute; width:48px; height:48px; left:33px; top:33px; border:1px solid rgba(125,236,247,.52); border-radius:50%; background:rgba(56,175,187,.18); box-shadow:0 0 25px rgba(84,244,255,.08); }
.sonar-touch { width:88px; height:88px; border:1px solid rgba(84,244,255,.42); border-radius:50%; background:radial-gradient(circle,rgba(55,172,184,.22),rgba(3,20,31,.48)); pointer-events:auto; touch-action:none; }
.sonar-touch span { color:rgba(226,253,255,.86); font:700 13px/1 ui-monospace,monospace; letter-spacing:.08em; }
.sonar-touch.ready { box-shadow:0 0 30px rgba(84,244,255,.25),inset 0 0 20px rgba(84,244,255,.12); animation:sonarReady 1s infinite; }

@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes sonarReady { 50% { filter:brightness(1.6); } }
@keyframes announce { 0% { opacity:0; transform:translate(-50%,-50%) scale(.96); } 18%,72% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-56%) scale(1.02); } }

@media (max-width: 820px) {
  .title-screen { grid-template-columns:52px minmax(0,1fr); padding:62px 16px 22px 0; }
  .title-screen::after { inset:58px 12px 20px 52px; }
  .title-content { padding-left:20px; }
  .title-masthead span:last-child { display:none; }
  .title-screen h1 b { font-size:clamp(58px,15vw,112px); }
  .dispatch-strip { grid-template-columns:minmax(0,1fr) 210px; }
  .record-line { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:30px; padding:11px 4px; }
  .record-line span { gap:10px; }
  .title-footer { gap:18px; }
  .briefing-grid { grid-template-columns:1fr; gap:7px; margin:22px 0; }
  .briefing-grid article { min-height:auto; padding:12px 16px; }
  .briefing-grid span { margin:2px 0 5px; }
  .briefing-grid p { line-height:1.45; }
  .briefing-icon { display:none; }
  .hud-left,.hud-right { top:58px; min-width:150px; }
  .hud-left { left:16px; }
  .hud-right { right:16px; }
  .hud-center { top:104px; }
  .hull-segment { width:32px; }
  .score { font-size:22px; }
  .timer { font-size:21px; }
}

@media (max-width: 480px) {
  .title-screen { grid-template-columns:38px minmax(0,1fr); padding:56px 12px 15px 0; }
  .title-screen::after { inset:52px 9px 14px 38px; }
  .title-content { padding-left:14px; }
  .title-rail { padding-top:5px; }
  .title-rail strong { font-size:15px; writing-mode:vertical-rl; white-space:nowrap; letter-spacing:0; }
  .title-rail span,.title-rail small { display:none; }
  .title-rail i { margin-bottom:0; }
  .title-masthead { padding-bottom:8px; font-size:14px; letter-spacing:.08em; }
  .title-lockup { align-self:center; padding-bottom:20px; }
  .title-sequence { top:-28px; font-size:14px; }
  .title-sequence strong { font-size:20px; }
  .title-screen h1 span { font-size:14px; letter-spacing:.4em; }
  .title-screen h1 b { margin-top:7px; font-size:clamp(43px,13vw,60px); letter-spacing:-.055em; }
  .title-screen .subtitle { position:static; margin-top:14px; font-size:16px; letter-spacing:.22em; }
  .dispatch-strip { grid-template-columns:1fr; min-height:0; }
  .dispatch-objective { display:none; }
  .dispatch-button.primary-btn { min-height:76px; padding:11px 14px; }
  .dispatch-button.primary-btn small { margin-bottom:7px; font-size:14px; }
  .dispatch-button.primary-btn span { font-size:20px; }
  .dispatch-button.primary-btn b { font-size:14px; }
  .record-line { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:10px 2px; }
  .record-line span { display:grid; gap:5px; justify-content:start; }
  .record-line strong { font-size:17px; }
  .title-footer { display:none; }
  .topbar { padding:max(10px,env(safe-area-inset-top)) 12px 0; }
  .brand-mini { gap:7px; font-size:14px; letter-spacing:.1em; }
  .brand-mark { width:10px; height:10px; }
  .brand-mark::after { width:2px; height:2px; inset:3px; }
  .top-actions { gap:5px; }
  .icon-btn { width:30px; height:30px; }
  .icon-btn svg { width:14px; height:14px; }
  .record-line { font-size:14px; }
  .briefing-card { width:94vw; padding:20px 18px; }
  .briefing-card h2 { font-size:23px; line-height:1.3; white-space:nowrap; }
  .briefing-grid { margin:15px 0; }
  .briefing-grid article { padding:9px 12px; }
  .briefing-grid b { font-size:20px; }
  .briefing-grid span { font-size:11px; }
  .briefing-grid p { font-size:11px; }
  .skip-label { margin-top:10px; font-size:10px; }
  .result-card { width:94vw; padding:24px 20px; }
  .result-card h2 { font-size:27px; }
  .result-card > p { font-size:11px; }
  .result-main { margin:18px 0 12px; padding:14px; }
  .result-main strong { font-size:34px; }
  .result-grid div { padding:10px; }
  .result-grid span { font-size:10px; }
  .result-grid b { font-size:14px; }
  .hud-left,.hud-right { top:48px; min-width:122px; }
  .hud-left { left:10px; }
  .hud-right { right:10px; }
  .label,.score-label,.depth-row,.sector,.sonar-header { font-size:9px; letter-spacing:.055em; }
  .hull { gap:3px; margin:6px 0 8px; }
  .hull-segment { width:25px; height:5px; padding:1px; }
  .depth-row strong { font-size:9px; }
  .speed-level { margin-top:6px; padding:5px 6px; font-size:9px; }
  .score { margin-top:5px; font-size:18px; }
  .combo { margin-top:6px; font-size:9px; }
  .hud-center { top:91px; }
  .timer { font-size:17px; }
  .sector { margin-top:5px; font-size:9px; white-space:nowrap; }
  .sonar-wrap { bottom:14px; width:34vw; }
  .sonar-track { height:4px; margin-top:5px; }
  .sonar-hint { margin-top:5px; font-size:9px; }
  .announcement small,.announcement span { font-size:9px; }
  .announcement strong { margin:8px 0 6px; font-size:23px; }
  .toast { top:20%; max-width:88vw; padding:8px 11px; font-size:11px; white-space:nowrap; }
}

@media (hover:none) and (pointer:coarse) {
  #app { touch-action:none; overscroll-behavior:none; }
  .touch-controls { display:flex; justify-content:flex-end; padding:0 clamp(14px,4vw,28px); }
  .joystick { display:none; }
  .stick { width:41.38%; height:41.38%; left:29.31%; top:29.31%; }
  .sonar-touch { width:clamp(66px,17vw,88px); height:clamp(66px,17vw,88px); }
  .sonar-touch span { font-size:clamp(9px,2.5vw,13px); }
  .sonar-wrap { bottom:18px; width:min(32vw,220px); }
  .controls-card { display:none; }
}

@media (max-height: 520px) and (max-width: 900px) {
  .topbar { padding-top:8px; }
  .screen { padding-top:42px; padding-bottom:16px; }
  .title-screen h1 b { font-size:48px; }
  .title-screen .subtitle { font-size:9px; }
  .dispatch-strip { min-height:62px; }
  .briefing-card { width:94vw; max-height:calc(100vh - 14px); padding:12px 18px; }
  .briefing-card .eyebrow { margin-bottom:6px; font-size:9px; }
  .briefing-card h2 { font-size:21px; }
  .briefing-grid { grid-template-columns:repeat(3,1fr); gap:6px; margin:10px 0; }
  .briefing-grid article { min-height:0; padding:8px 10px; }
  .briefing-grid b { font-size:17px; }
  .briefing-grid span { margin:1px 0 4px; font-size:10px; }
  .briefing-grid p { font-size:9px; line-height:1.3; }
  .briefing-card .primary-btn { min-height:42px; padding:7px 12px; }
  .briefing-card .primary-btn span { font-size:12px; }
  .briefing-card .primary-btn small { margin-top:3px; font-size:9px; }
  .skip-label { margin-top:5px; font-size:9px; }
  .hud-left,.hud-right { top:42px; transform:scale(.82); }
  .hud-left { transform-origin:top left; }
  .hud-right { transform-origin:top right; }
  .hud-center { top:43px; transform:translateX(-50%) scale(.82); transform-origin:top center; }
  .touch-controls { bottom:max(10px,env(safe-area-inset-bottom)); }
  .joystick { display:none; }
  .sonar-touch { width:62px; height:62px; }
  .sonar-wrap { bottom:10px; }
}

@media (max-height: 650px) and (min-width: 901px) {
  .title-screen { padding-top:54px; }
  .title-lockup { padding-bottom:16px; }
  .title-screen h1 b { font-size:clamp(56px,10vw,112px); }
  .dispatch-strip { min-height:82px; }
  .briefing-card { padding:22px 34px; }
  .briefing-grid { margin:18px 0; }
  .briefing-icon { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}