:root {
  color-scheme: dark;
  --bg: #080b12;
  --panel: #0e1420;
  --panel-2: #131b2a;
  --line: rgba(166, 187, 220, 0.16);
  --text: #eff6ff;
  --muted: #91a0b8;
  --acid: #c9ff3d;
  --cyan: #3de8ff;
  --danger: #ff486d;
  --violet: #a877ff;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #03050a;
}

body {
  display: grid;
  place-items: center;
  color: var(--text);
}

html:lang(ko) body,
html:lang(ko) button { font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", Inter, ui-sans-serif, system-ui, sans-serif; }

button { font: inherit; }

#game-shell {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  border: 1px solid rgba(201, 255, 61, 0.16);
  box-shadow: var(--shadow);
}

#game-shell:has(#campaign-screen.is-active),
#game-shell:has(#briefing-screen.is-active) {
  width: 100vw;
  height: 100dvh;
  aspect-ratio: auto;
}

html:fullscreen::backdrop { background: #03050a; }

#fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

.language-btn {
  position: absolute;
  z-index: 145;
  top: 1.6%;
  right: 1.7%;
  min-width: 78px;
  min-height: 34px;
  padding: .55em .8em;
  color: var(--text);
  border: 1px solid rgba(61,232,255,.36);
  background: rgba(8,11,18,.88);
  box-shadow: 0 8px 26px rgba(0,0,0,.32);
  font-size: clamp(10px,.68vw,12px);
  font-weight: 850;
  letter-spacing: .06em;
  cursor: pointer;
  transition: opacity .16s ease, color .16s ease, border-color .16s ease;
}
.language-btn:hover,
.language-btn:focus-visible { color: var(--acid); border-color: var(--acid); outline: 2px solid rgba(201,255,61,.18); }
#game-shell:has(#campaign-screen.is-active) > #language-btn,
#game-shell:has(#briefing-screen.is-active) > #language-btn { display: none; }
.campaign-header,
.briefing-topline { position: relative; }
.campaign-header > .screen-language-btn { top: -52px; right: 0; }
.briefing-topline > .screen-language-btn { top: -62px; right: 0; }
.campaign-screen.is-scrolled .screen-language-btn,
.briefing-screen.is-scrolled .screen-language-btn { opacity: 0; pointer-events: none; }
#game-shell:has(#game-screen.is-active) .language-btn { top: auto; right: 1.6%; bottom: 1.25%; }
#game-shell:is(.is-paused,.is-decoding,.is-puzzling) > #language-btn { display: none; }

.screen {
  position: absolute;
  inset: 0;
  display: none;
}

.screen.is-active { display: flex; }

#start-screen,
#end-screen {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 7%;
}

.start-grid {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgba(61, 232, 255, 0.18);
  transform: rotate(45deg);
  background: linear-gradient(rgba(61,232,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(61,232,255,.05) 1px, transparent 1px);
  background-size: 7% 7%;
  mask-image: radial-gradient(circle, #000 10%, transparent 68%);
  animation: drift-grid 18s linear infinite;
}

@keyframes drift-grid { to { transform: rotate(45deg) translate(7%, 7%); } }

.eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65em;
  color: var(--cyan);
  font-size: clamp(8px, .75vw, 13px);
  font-weight: 800;
  letter-spacing: .24em;
}

.status-dot {
  width: .65em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
  animation: blink 1.4s steps(2) infinite;
}

@keyframes blink { 50% { opacity: .25; } }

h1 {
  position: relative;
  margin: .13em 0 .06em;
  font-size: clamp(54px, 10.5vw, 172px);
  font-weight: 950;
  line-height: .86;
  letter-spacing: -.085em;
  text-shadow: 0 0 60px rgba(61, 232, 255, .12);
}

h1 span { color: var(--acid); }
h1 i { color: var(--danger); font-style: normal; font-weight: 300; }

.tagline {
  position: relative;
  margin: 1.2em 0 2.2em;
  color: var(--muted);
  font-size: clamp(12px, 1.25vw, 21px);
  letter-spacing: .08em;
}

.primary-btn {
  position: relative;
  min-width: 15em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  padding: 1em 1.1em 1em 1.35em;
  border: 1px solid var(--acid);
  color: #080b12;
  background: var(--acid);
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(201, 255, 61, 0);
  transition: transform .16s ease, box-shadow .16s ease;
}

.primary-btn:hover,
.primary-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(201, 255, 61, .25);
  outline: none;
}

.primary-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

.secondary-btn,
.text-btn {
  min-width: 15em;
  padding: .9em 1.15em;
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  font-weight: 850;
  letter-spacing: .08em;
  cursor: pointer;
}
.secondary-btn { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; }
.text-btn { min-width: 0; color: var(--muted); border-color: transparent; background: transparent; }
.secondary-btn:hover,
.secondary-btn:focus-visible,
.text-btn:hover,
.text-btn:focus-visible { color: var(--acid); border-color: var(--acid); outline: none; }

.start-actions { position: relative; display: flex; gap: .8em; }
.start-save-summary {
  position: relative;
  margin-top: 1em;
  color: var(--muted);
  font: 800 clamp(8px, .68vw, 12px)/1.35 ui-monospace, monospace;
  letter-spacing: .08em;
}

kbd {
  padding: .2em .45em;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: .72em;
  font-family: inherit;
  font-weight: 800;
}

.start-meta {
  position: absolute;
  bottom: 4.4%;
  display: flex;
  gap: 3em;
  color: rgba(145, 160, 184, .7);
  font-size: clamp(9px, .68vw, 12px);
  font-weight: 800;
  letter-spacing: .16em;
}

.campaign-screen {
  flex-direction: column;
  padding: max(64px,3.2%) 4% 3.2%;
  overflow-y: auto;
  background:
    linear-gradient(90deg, rgba(61,232,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(61,232,255,.035) 1px, transparent 1px),
    #080b12;
  background-size: 4.5% 8%;
}
.campaign-header { display: flex; justify-content: space-between; align-items: end; padding-bottom: 1.5%; border-bottom: 1px solid var(--line); }
.campaign-header h2 { margin: .14em 0 0; font-size: clamp(28px, 4.6vw, 74px); line-height: .82; letter-spacing: -.055em; }
.campaign-header h2 span { color: var(--acid); }
.campaign-guide { max-width: 46em; margin: .8em 0 0; color: var(--muted); font: 700 clamp(9px,.68vw,12px)/1.5 ui-monospace,monospace; word-break: keep-all; }
.campaign-stats { display: grid; grid-template-columns: repeat(4, 1fr); min-width: 54%; border: 1px solid var(--line); }
.campaign-stats > div { padding: .9em 1em; border-right: 1px solid var(--line); }
.campaign-stats > div:last-child { border-right: 0; }
.campaign-stats small,
.briefing-grid small,
.operation-dossier > small { display: block; color: var(--muted); font: 850 clamp(10px, .68vw, 12px)/1 ui-monospace, monospace; letter-spacing: .12em; }
.campaign-stats strong { display: block; margin-top: .35em; font: 900 clamp(12px, 1.18vw, 20px)/1 ui-monospace, monospace; }
.campaign-body { min-height: 0; flex: 1; display: grid; grid-template-columns: 1fr 29%; gap: 2%; padding-top: 1.8%; }
.campaign-map {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: .72em;
  padding-right: .6em;
  overflow: auto;
  scrollbar-color: var(--acid) rgba(255,255,255,.04);
}
.operation-node {
  position: relative;
  min-height: 6.6em;
  padding: .9em;
  text-align: left;
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(13,19,30,.9);
  cursor: pointer;
}
.operation-node::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--node-accent, var(--cyan)); opacity: .72; }
.operation-node small { display: flex; justify-content: space-between; color: var(--muted); font: 800 clamp(10px, .68vw, 12px)/1 ui-monospace, monospace; }
.operation-node strong { display: block; margin: .55em 0 .35em; font-size: clamp(12px, 1vw, 17px); line-height: .95; }
.operation-node span { color: #8796ac; font: 750 clamp(10px, .68vw, 12px)/1.3 ui-monospace, monospace; }
.operation-node:not(:disabled):hover,
.operation-node:focus-visible,
.operation-node.is-selected { border-color: var(--node-accent, var(--cyan)); outline: 0; box-shadow: inset 0 0 0 1px var(--node-accent, var(--cyan)), 0 0 22px color-mix(in srgb, var(--node-accent, var(--cyan)) 18%, transparent); }
.operation-node:focus-visible { outline: 2px solid var(--text); outline-offset: -5px; }
.operation-node.is-complete::after { content: attr(data-status); position: absolute; right: .75em; bottom: .7em; color: var(--acid); font: 900 clamp(6px, .52vw, 9px)/1 ui-monospace, monospace; }
.operation-node:disabled { opacity: .64; cursor: not-allowed; filter: grayscale(.72); }
.operation-dossier { min-height: 0; padding: 8%; overflow-y: auto; border: 1px solid var(--line); background: rgba(5,8,14,.93); display: flex; flex-direction: column; scrollbar-color: var(--acid) rgba(255,255,255,.04); }
.operation-dossier h3 { margin: .35em 0 .45em; font-size: clamp(22px, 2.5vw, 42px); line-height: .88; letter-spacing: -.04em; }
.operation-dossier p { color: #a7b3c6; font-size: clamp(10px, .9vw, 15px); line-height: 1.55; }
.operation-dossier .act-premise,
.briefing-screen .act-premise { color: var(--cyan); font: 800 clamp(10px,.7vw,12px)/1.5 ui-monospace,monospace; }
.operation-dossier .act-premise { margin: 0 0 .45em; opacity: .82; }
.operation-dossier blockquote,
.briefing-screen blockquote { margin: .7em 0 1em; padding-left: 1em; color: var(--muted); border-left: 2px solid var(--cyan); font-size: clamp(8px,.68vw,12px); font-style: italic; line-height: 1.5; }
.briefing-screen blockquote { position: relative; max-width: min(68%, 760px); text-align: left; }
.dossier-meta { display: grid; gap: .7em; margin: auto 0 1.3em; color: var(--muted); font: 800 clamp(10px, .68vw, 12px)/1.4 ui-monospace, monospace; }
.dossier-actions { position: sticky; bottom: -1px; z-index: 3; margin-top: auto; padding-top: .8em; border-top: 1px solid var(--line); background: #05080e; }
.operation-dossier .primary-btn {
  width: 100%;
  min-width: 0;
  gap: .8em;
  padding-inline: 1em;
}
.operation-dossier .primary-btn > span {
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(12px,1vw,16px);
  line-height: 1.2;
  letter-spacing: .025em;
}
.operation-dossier .primary-btn kbd { flex: 0 0 auto; }
.operation-dossier .text-btn { align-self: flex-start; margin-top: .7em; padding-left: 0; }

.briefing-screen {
  align-items: flex-start;
  justify-content: flex-start;
  padding: clamp(28px,4vh,44px) clamp(36px,5vw,72px);
  overflow-y: auto;
  text-align: left;
  background: radial-gradient(circle at 32% 42%, rgba(61,232,255,.08), transparent 48%), #080b12;
  scrollbar-color: var(--acid) rgba(255,255,255,.04);
}
.briefing-shell {
  width: min(1120px,100%);
  margin: clamp(52px,6vh,68px) auto 0;
  display: grid;
  gap: clamp(14px,2vh,20px);
}
.briefing-header { min-width: 0; display: grid; row-gap: 8px; }
.briefing-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding-right: clamp(92px,8vw,118px);
}
.briefing-progress {
  display: flex;
  align-items: baseline;
  gap: .75em;
  flex: 0 0 auto;
  padding: .58em .78em;
  color: var(--acid);
  border: 1px solid rgba(201,255,61,.25);
  background: rgba(201,255,61,.045);
  font-family: ui-monospace, monospace;
}
.briefing-progress small { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.briefing-index,
.briefing-progress strong { font-size: clamp(11px,.78vw,13px); line-height: 1; letter-spacing: .06em; }
.briefing-header h2 {
  max-width: 100%;
  margin: 0;
  color: var(--acid);
  font-size: clamp(48px,5.15vw,74px);
  line-height: .94;
  letter-spacing: -.055em;
  overflow-wrap: break-word;
}
.briefing-screen .act-premise { max-width: 76em; margin: 0; }
.briefing-act-label,
.briefing-act-context { display: block; word-break: keep-all; overflow-wrap: break-word; }
.briefing-act-label { color: var(--cyan); font: 900 clamp(10px,.72vw,12px)/1.35 ui-monospace,monospace; letter-spacing: .08em; }
.briefing-act-context { margin-top: 6px; color: #93a3ba; font: 650 clamp(12px,.9vw,14px)/1.55 ui-sans-serif,system-ui,sans-serif; }

#briefing-title:focus-visible {
  outline: 0;
  text-shadow: 0 0 22px rgba(201,255,61,.28);
}
.briefing-content {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(390px,.82fr);
  gap: clamp(22px,3vw,34px);
  align-items: start;
}
.briefing-story { min-width: 0; padding: .4em clamp(20px,2.4vw,32px) .4em 0; border-right: 1px solid var(--line); }
.briefing-copy {
  margin: 0;
  color: #c1ccdc;
  font-size: clamp(15px,1.08vw,17px);
  line-height: 1.72;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.briefing-copy [data-briefing-sentence] { display: block; }
.briefing-copy [data-briefing-sentence] + [data-briefing-sentence] { margin-top: .18em; }
.briefing-screen blockquote {
  max-width: none;
  margin: 1em 0;
  padding-left: 1em;
  color: #8393aa;
  text-align: left;
  font-size: clamp(12px,.86vw,14px);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.briefing-field-note {
  padding: .85em 1em;
  border: 1px solid rgba(61,232,255,.25);
  border-left: 3px solid var(--cyan);
  background: rgba(61,232,255,.05);
}
.briefing-field-note small,
.briefing-grid small { display: block; color: var(--muted); font: 850 clamp(10px,.7vw,11px)/1 ui-monospace,monospace; letter-spacing: .1em; }
.briefing-field-note strong { display: block; margin-top: .48em; color: var(--text); font-size: clamp(13px,.96vw,15px); line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.briefing-data { min-width: 0; border: 1px solid var(--line); background: rgba(7,11,18,.72); }
.briefing-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); }
.briefing-grid > div { min-width: 0; padding: 1em 1.1em; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.briefing-grid > div:last-child { border-right: 0; }
.briefing-grid strong { display: block; margin-top: .48em; font-size: clamp(13px,.96vw,15px); line-height: 1.25; overflow-wrap: anywhere; }
.briefing-threats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.briefing-threats span { min-width: 0; padding: .85em 1em; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.briefing-threats span:nth-child(even) { border-right: 0; }
.briefing-threats span:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.briefing-threats small,
.briefing-threats strong { display: block; }
.briefing-threats small { color: var(--muted); font: 850 clamp(10px,.7vw,11px)/1.2 ui-monospace,monospace; letter-spacing: .08em; word-break: keep-all; }
.briefing-threats strong { margin-top: .42em; font-size: clamp(13px,.92vw,15px); line-height: 1.25; word-break: keep-all; overflow-wrap: break-word; }
.briefing-modifiers { display: grid; gap: .7em; padding: .9em 1em 1em; color: var(--cyan); border-top: 1px solid var(--line); }
.briefing-modifiers > strong { font: 900 clamp(9px,.64vw,10px)/1.2 ui-monospace,monospace; letter-spacing: .08em; }
.briefing-modifier-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: .55em; }
.briefing-modifier-list span { min-width: 0; padding: .72em .8em; text-align: left; border: 1px solid rgba(61,232,255,.26); background: rgba(61,232,255,.045); }
.briefing-modifier-list b,
.briefing-modifier-list i { display: block; }
.briefing-modifier-list b { color: var(--text); font-size: clamp(11px,.78vw,13px); }
.briefing-modifier-list i { margin-top: .35em; color: var(--muted); font: 650 clamp(10px,.7vw,12px)/1.45 ui-monospace,monospace; font-style: normal; word-break: keep-all; overflow-wrap: break-word; }
.briefing-actions { display: flex; align-items: center; gap: .8em; }
.briefing-actions .primary-btn { gap: .8em; }
.briefing-actions .primary-btn > span { white-space: nowrap; word-break: keep-all; line-height: 1.2; }

.pause-overlay { position: absolute; inset: 0; z-index: 180; display: grid; place-items: center; background: rgba(2,4,8,.8); backdrop-filter: blur(12px); }
.pause-overlay[hidden] { display: none; }
.pause-card { width: min(54%, 680px); padding: 3%; border: 1px solid var(--acid); background: #0a0e16; box-shadow: 0 24px 90px rgba(0,0,0,.65); }
.pause-topline { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.pause-card h2 { margin: .3em 0; font-size: clamp(38px, 5vw, 78px); line-height: .85; }
.pause-card p { margin-bottom: 1.5em; color: var(--muted); }
.pause-context { display: grid; grid-template-columns: repeat(2,1fr); margin: -.25em 0 1em; border: 1px solid var(--line); }
.pause-context span { padding: .7em .8em; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pause-context span:nth-child(even) { border-right: 0; }
.pause-context span:last-child { border-bottom: 0; }
.pause-context .pause-objective { grid-column: 1 / -1; border-right: 0; }
.pause-context small,
.pause-context strong { display: block; }
.pause-context small { color: var(--muted); font: 800 clamp(9px,.62vw,11px)/1 ui-monospace,monospace; letter-spacing: .1em; }
.pause-context strong { margin-top: .35em; font-size: clamp(11px,.84vw,14px); line-height: 1.35; }
.pause-card .pause-controls { margin: 0 0 .7em; font: 750 clamp(9px,.62vw,11px)/1.55 ui-monospace,monospace; }
.pause-card button { width: 100%; margin-top: .55em; }
.pause-topline .overlay-language-btn { width: auto; min-width: 88px; flex: 0 0 auto; margin-top: 0; }

.puzzle-overlay {
  position: absolute;
  inset: 0;
  z-index: 170;
  display: grid;
  place-items: center;
  padding: 2.7%;
  background: rgba(2,4,8,.86);
  backdrop-filter: blur(10px) saturate(.7);
}
.puzzle-overlay[hidden] { display: none; }
.puzzle-card {
  width: min(92%, 1180px);
  height: 92%;
  max-height: 760px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--acid);
  background:
    linear-gradient(90deg, rgba(61,232,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(61,232,255,.025) 1px, transparent 1px),
    #0a0f18;
  background-size: 34px 34px;
  box-shadow: 0 30px 110px rgba(0,0,0,.78), inset 0 0 90px rgba(61,232,255,.025);
}
.puzzle-card.is-solved { border-color: var(--acid); box-shadow: 0 30px 110px rgba(0,0,0,.78), 0 0 44px rgba(201,255,61,.18), inset 0 0 90px rgba(201,255,61,.035); }
.puzzle-card.is-error { border-color: rgba(255,72,109,.72); }
.puzzle-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5em;
  padding: clamp(16px,2vw,28px) clamp(18px,2.4vw,34px) 14px;
  border-bottom: 1px solid var(--line);
}
.overlay-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.overlay-language-btn {
  min-height: 40px;
  padding: .58em .8em;
  color: var(--cyan);
  border: 1px solid rgba(61,232,255,.38);
  background: rgba(8,11,18,.72);
  font: 850 clamp(10px,.68vw,12px)/1 ui-monospace,monospace;
  cursor: pointer;
}
.overlay-language-btn:hover,
.overlay-language-btn:focus-visible { color: var(--acid); border-color: var(--acid); outline: 2px solid rgba(201,255,61,.18); }
.puzzle-header h2 { margin: .18em 0 0; font-size: clamp(28px,3.1vw,48px); line-height: .95; letter-spacing: -.04em; }
.puzzle-layout { min-height: 0; display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.65fr); flex: 1; }
.puzzle-brief { min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding: clamp(16px,2vw,28px); border-right: 1px solid var(--line); }
.puzzle-brief-scroll { min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-gutter: stable; scrollbar-color: var(--acid) rgba(255,255,255,.04); }
.puzzle-brief section { padding: 13px 14px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.puzzle-brief small,
.puzzle-workspace-label,
.puzzle-preview > small { display: block; margin-bottom: .55em; color: var(--cyan); font: 850 clamp(10px,.68vw,12px)/1.1 ui-monospace,monospace; letter-spacing: .12em; }
.puzzle-brief strong { display: block; color: var(--text); font-size: clamp(15px,1.05vw,18px); line-height: 1.4; word-break: keep-all; }
.puzzle-brief p { margin: .7em 0 0; color: var(--muted); font-size: clamp(12px,.8vw,14px); line-height: 1.55; word-break: keep-all; }
#puzzle-clues { display: grid; gap: .55em; margin: 0; padding: 0; list-style: none; }
#puzzle-clues li { position: relative; padding-left: 1.35em; color: #cbd6e5; font-size: clamp(12px,.78vw,14px); line-height: 1.45; word-break: keep-all; }
#puzzle-clues li::before { content: "◆"; position: absolute; left: 0; top: .05em; color: var(--acid); font-size: .72em; }
.puzzle-hint-panel { flex: 0 0 auto; }
.puzzle-hint-panel .secondary-btn { min-width: 0; width: 100%; min-height: 46px; padding: .72em .85em; justify-content: center; }
#puzzle-hint-text:empty,
#puzzle-hint-text[data-empty="true"] { display: none; }
.puzzle-stats { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3,1fr); margin-top: auto; border: 1px solid var(--line); background: #0a0f18; }
.puzzle-stats span { padding: 10px 12px; border-right: 1px solid var(--line); }
.puzzle-stats span:last-child { border-right: 0; }
.puzzle-stats b { display: block; margin-top: .2em; color: var(--acid); font: 900 17px/1 ui-monospace,monospace; }
.puzzle-workspace { min-height: 0; display: flex; flex-direction: column; overflow: auto; padding: clamp(16px,2vw,28px); }
.puzzle-board { min-height: clamp(190px,32vh,300px); display: grid; place-items: center; flex: 1; overflow: auto; padding: 12px; border: 1px solid rgba(61,232,255,.24); background: rgba(4,8,14,.74); }
.puzzle-preview { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
#puzzle-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.puzzle-check { display: flex; align-items: center; gap: .55em; padding: .6em .7em; color: #f1b4c0; border: 1px solid rgba(255,72,109,.24); background: rgba(255,72,109,.04); font-size: clamp(11px,.72vw,13px); line-height: 1.35; }
.puzzle-check::before { content: "×"; color: var(--danger); font: 950 1.1em/1 ui-monospace,monospace; }
.puzzle-check.is-pass { color: #dff7a7; border-color: rgba(201,255,61,.28); background: rgba(201,255,61,.04); }
.puzzle-check.is-pass::before { content: "✓"; color: var(--acid); }
.puzzle-check.is-optional:not(.is-pass) { color: #ffe29a; border-color: rgba(255,204,76,.3); background: rgba(255,204,76,.045); }
.puzzle-check.is-optional:not(.is-pass)::before { content: "◇"; color: #ffcc4c; }
#puzzle-feedback { margin: .75em 0 0; color: var(--muted); font-size: clamp(11px,.72vw,13px); line-height: 1.4; }
#puzzle-feedback.is-error { color: #ff9aad; }
#puzzle-feedback.is-solved { color: var(--acid); }
.puzzle-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 13px clamp(18px,2.4vw,34px); border-top: 1px solid var(--line); background: rgba(4,8,14,.92); }
.puzzle-actions .primary-btn { min-width: 190px; padding: .85em 1em; }

.network-puzzle { position: relative; width: min(100%,680px); min-height: clamp(250px,32vh,330px); }
.network-device { position: absolute; width: 112px; min-height: 58px; transform: translate(-50%,-50%); display: grid; place-items: center; padding: 8px; color: var(--text); text-align: center; border: 1px solid var(--cyan); background: #0e1724; box-shadow: 0 0 22px rgba(61,232,255,.08); font-size: 12px; font-weight: 850; line-height: 1.2; }
.network-device.is-source { color: #071014; border-color: var(--acid); background: var(--acid); }
.network-device.is-forbidden { border-color: var(--danger); }
.network-device small { display: block; margin-top: .35em; color: #8595aa; font: 800 9px/1 ui-monospace,monospace; }
.network-device.is-powered:not(.is-source) { border-color: var(--acid); box-shadow: 0 0 22px rgba(201,255,61,.22); }
.network-device.is-powered:not(.is-source) small { color: var(--acid); }
.network-link { position: absolute; height: 48px; transform-origin: left center; display: flex; align-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.network-link::before { content: ""; display: block; width: 100%; height: 3px; border-top: 2px dashed #526077; }
.network-link::after { content: "×"; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%,-50%); display: grid; place-items: center; color: #9aa9bd; border: 1px solid #526077; border-radius: 50%; background: #080d15; font: 900 16px/1 ui-monospace,monospace; }
.network-link.is-active::before { border-top-style: solid; border-color: var(--acid); box-shadow: 0 0 8px rgba(201,255,61,.55); }
.network-link[data-direction="BOTH"].is-active::after { content: "↔"; color: #071014; border-color: var(--acid); background: var(--acid); }
.network-link[data-direction="FORWARD"].is-active::after { content: "→"; color: #071014; border-color: var(--acid); background: var(--acid); }
.network-link[data-direction="REVERSE"].is-active::before { border-color: var(--violet); box-shadow: 0 0 8px rgba(168,119,255,.62); }
.network-link[data-direction="REVERSE"].is-active::after { content: "←"; color: #071014; border-color: var(--violet); background: var(--violet); }
.network-link:focus-visible::after { outline: 3px solid var(--cyan); outline-offset: 2px; }

.route-puzzle { --route-size: 4; width: auto; height: clamp(190px,30vh,330px); max-width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--route-size),1fr); gap: 6px; }
.route-tile { position: relative; min-width: 0; padding: 0; color: var(--cyan); border: 1px solid #2b3b50; background: #0d1622; cursor: pointer; transform: rotate(calc(var(--rotation,0) * 90deg)); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.route-tile::before,
.route-tile::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; box-shadow: 0 0 8px rgba(61,232,255,.3); }
.route-tile::before { width: 52%; height: 8px; transform: translate(0,-50%); transform-origin: left center; }
.route-tile::after { width: 8px; height: 52%; transform: translate(-50%,-100%); transform-origin: center bottom; }
.route-tile[data-shape="straight"]::after { height: 100%; transform: translate(-50%,-50%); }
.route-tile[data-shape="straight"]::before { display: none; }
.route-tile[data-shape="terminal"]::before { display: none; }
.route-tile[data-shape="terminal"]::after { height: 52%; transform: translate(-50%,-100%); }
.route-extra-port { position: absolute; left: 50%; top: 50%; width: 8px; height: 52%; transform: translate(-50%,0); transform-origin: center top; background: currentColor; box-shadow: 0 0 8px rgba(61,232,255,.3); }
.route-tile[data-shape="cross"]::before { width: 100%; transform: translate(-50%,-50%); }
.route-tile[data-shape="cross"]::after { height: 100%; transform: translate(-50%,-50%); }
.route-tile[data-shape="block"] { border-color: rgba(82,96,119,.18); background: repeating-linear-gradient(135deg,#080d14 0 6px,#0b111b 6px 12px); cursor: default; }
.route-tile[data-shape="block"]::before,
.route-tile[data-shape="block"]::after { display: none; }
.route-tile.is-powered { color: var(--acid); border-color: var(--acid); background: rgba(201,255,61,.07); }
.route-tile.is-relay { box-shadow: inset 0 0 0 2px rgba(168,119,255,.24); }
.route-tile.is-leaking { color: var(--danger); border-color: var(--danger); background: rgba(255,72,109,.1); animation: route-leak .6s steps(2) infinite; }
.route-tile.is-leaking::before,
.route-tile.is-leaking::after,
.route-tile.is-leaking .route-extra-port { box-shadow: 0 0 12px rgba(255,72,109,.8); }
@keyframes route-leak { 50% { filter: brightness(1.35); } }
.route-tile.is-entry::marker,
.route-tile.is-exit::marker { content: ""; }
.route-tile span { position: absolute; inset: 4px; z-index: 2; transform: rotate(calc(var(--rotation,0) * -90deg)); display: flex; align-items: flex-end; justify-content: flex-start; color: var(--text); font: 900 9px/1 ui-monospace,monospace; pointer-events: none; }
.route-tile:focus-visible { outline: 3px solid var(--acid); outline-offset: 1px; }

.stack-puzzle { width: min(100%,560px); display: grid; gap: 5px; }
.stack-layer { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; min-height: 46px; padding: 4px 8px; color: var(--text); border: 1px solid #314157; background: linear-gradient(90deg,rgba(61,232,255,.08),rgba(255,255,255,.018)); }
.stack-layer > b { color: var(--cyan); font: 900 14px/1 ui-monospace,monospace; }
.stack-layer > span { min-width: 0; }
.stack-layer strong,
.stack-layer small { display: block; }
.stack-layer strong { font-size: 13px; line-height: 1.2; }
.stack-layer small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.3; word-break: keep-all; }
.stack-layer div { display: flex; gap: 5px; }
.stack-layer button { width: 42px; height: 40px; padding: 0; color: var(--text); border: 1px solid var(--line); background: #101927; cursor: pointer; }
.stack-layer button:hover,
.stack-layer button:focus-visible { color: #071014; border-color: var(--acid); background: var(--acid); outline: 0; }

.decode-overlay { position: absolute; inset: 0; z-index: 150; display: grid; place-items: center; padding: 4%; background: rgba(2,4,8,.78); backdrop-filter: blur(7px) saturate(.65); }
.decode-overlay[hidden] { display: none; }
.decode-card { width: min(70%, 820px); padding: clamp(24px,3.2vw,48px); color: var(--text); border: 1px solid var(--cyan); background: linear-gradient(145deg, #0a0e16, #0d1420); box-shadow: 0 26px 100px rgba(0,0,0,.7), inset 0 0 60px rgba(61,232,255,.025); }
.decode-card header { display: flex; align-items: center; justify-content: space-between; gap: 1em; color: var(--muted); font: 900 clamp(9px,.62vw,11px)/1 ui-monospace,monospace; letter-spacing: .12em; }
.decode-meta { display: flex; align-items: center; gap: .8em; }
.decode-close { min-height: 40px; display: inline-flex; align-items: center; padding: .6em .75em; color: var(--muted); border: 1px solid var(--line); background: transparent; font: 800 clamp(9px,.62vw,11px)/1 ui-monospace,monospace; cursor: pointer; }
.decode-close:hover,
.decode-close:focus-visible { color: var(--acid); border-color: var(--acid); outline: 0; }
.decode-card h2 { margin: .32em 0 .2em; font-size: clamp(34px,5vw,76px); line-height: .85; letter-spacing: -.06em; }
.decode-card > p { max-width: 62ch; min-height: 2.8em; margin: 0 0 1.1em; color: #c6d0de; line-height: 1.5; }
.decode-card pre { margin: 0 0 1.15em; padding: 1em 1.2em; overflow: auto; color: var(--acid); border-left: 3px solid var(--acid); background: #05080d; font: 800 clamp(10px,1vw,16px)/1.45 ui-monospace,monospace; }
.decode-options { display: grid; gap: .65em; }
.decode-option { min-height: 42px; display: grid; grid-template-columns: 2.6em 1fr; align-items: center; padding: .9em 1em; color: #dce5f0; text-align: left; border: 1px solid var(--line); background: rgba(255,255,255,.025); font: 800 clamp(11px,.82vw,14px)/1.25 ui-monospace,monospace; cursor: pointer; }
.decode-option b { color: var(--cyan); }
.decode-option:hover,
.decode-option:focus-visible { border-color: var(--cyan); outline: 0; background: rgba(61,232,255,.08); transform: translateX(4px); }
.decode-option.is-confirm { color: #071014; border-color: var(--acid); background: var(--acid); }
.decode-option.is-confirm b { color: #071014; }
.decode-option.is-rejected,
.decode-option:disabled { color: #69768a; border-color: rgba(255,72,109,.32); background: rgba(255,72,109,.04); text-decoration: line-through; cursor: not-allowed; transform: none; }
.decode-card.is-error { animation: decode-error .28s steps(2); border-color: var(--danger); }
.decode-card.is-error .decode-footer { color: var(--danger); }
@keyframes decode-error { 33% { transform: translateX(-8px); } 66% { transform: translateX(8px); } }
.decode-footer { display: flex; justify-content: space-between; gap: 1em; margin-top: 1.2em; color: var(--muted); font: 800 clamp(9px,.62vw,11px)/1.35 ui-monospace,monospace; }

#game-screen { flex-direction: column; }

.hud {
  height: 12%;
  display: grid;
  grid-template-columns: .58fr 1.22fr 1.2fr 1.28fr;
  align-items: center;
  padding: 0 2.3%;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 18, .82);
  backdrop-filter: blur(14px);
}

.hud-brand { font-size: clamp(11px,.9vw,15px); font-weight: 950; letter-spacing: -.05em; }
.hud-brand span { color: var(--danger); font-weight: 400; }

.mission-strip {
  justify-self: stretch;
  display: flex;
  align-items: center;
  gap: 1em;
}

.mission-progress {
  min-width: 5.7em;
  padding-right: 1em;
  border-right: 1px solid var(--line);
}

.mission-progress > span {
  display: block;
  margin-top: .2em;
  color: var(--acid);
  font-size: clamp(14px, 1.25vw, 21px);
  font-weight: 950;
  white-space: nowrap;
}

.mission-strip small,
.objective-card small,
.score-card small {
  display: block;
  color: var(--muted);
  font-size: clamp(9px, .62vw, 11px);
  font-weight: 800;
  letter-spacing: .11em;
}

.mission-target { min-width: 0; }
.mission-strip strong { display: block; max-width: 13em; margin-top: .3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(10px, .82vw, 14px); letter-spacing: .06em; }

.stage-rail {
  --stage-dot: clamp(20px,1.7vw,24px);
  justify-self: stretch;
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: center;
}
.stage-rail span {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: var(--stage-dot) minmax(1.2em,auto);
  justify-items: center;
  align-items: center;
  align-self: center;
  gap: 4px;
  color: #526078;
}
.stage-rail span:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--stage-dot) / 2);
  left: calc(50% + var(--stage-dot) / 2 + 6px);
  right: calc(-50% + var(--stage-dot) / 2 + 6px);
  height: 1px;
  transform: translateY(-50%);
  background: var(--line);
}
.stage-rail span.is-complete::after { background: rgba(201,255,61,.42); }
.stage-rail b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--stage-dot);
  height: var(--stage-dot);
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--bg);
  font: 900 clamp(9px,.62vw,11px)/1 ui-monospace,monospace;
}
.stage-rail i {
  width: calc(100% - 8px);
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  font: 800 clamp(9px,.62vw,11px)/1.2 ui-monospace,monospace;
  font-style: normal;
  white-space: nowrap;
}
.stage-rail span.is-complete { color: var(--acid); }
.stage-rail span.is-current { color: var(--cyan); }
.stage-rail span.is-current b { color: #071014; background: var(--cyan); box-shadow: 0 0 18px rgba(61,232,255,.3); }

.hud-actions { justify-self: end; display: flex; gap: .45em; }
.icon-btn {
  min-height: 32px;
  padding: .65em .75em;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-size: clamp(9px, .62vw, 11px);
  font-weight: 800;
  cursor: pointer;
}
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn:not(:disabled):hover,
.icon-btn:not(:disabled):focus-visible { color: var(--cyan); border-color: var(--cyan); outline: 0; background: rgba(61,232,255,.08); }

#playfield {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 1.7% 2.3% 4.9%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(8, 11, 18, .52);
}

#site-frame,
#guard-layer { position: absolute; inset: 4% 18% 4% 4%; overflow: hidden; }
#guard-layer { z-index: 25; pointer-events: none; }

.target-site {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #111722;
  background: #e9edf0;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  animation: site-enter .38s cubic-bezier(.16,.84,.32,1) both;
}
.target-site .address strong,
.target-site .news-kicker { color: var(--op-accent, var(--cyan)); }
.target-site .site-page h2 { text-decoration-color: var(--op-secondary, var(--cyan)); }
.target-site.act-2 .site-page { background-image: linear-gradient(135deg, transparent 0 62%, color-mix(in srgb, var(--op-accent) 14%, transparent) 62%); }
.target-site.act-3 .site-page::after { content: "CIVIC AUDIT"; position: absolute; right: 3%; top: 5%; padding: .55em .7em; color: #111722; border: 1px solid currentColor; font: 900 clamp(5px,.48vw,9px)/1 ui-monospace,monospace; letter-spacing: .12em; opacity: .42; }
html[lang="ko"] .target-site.act-3 .site-page::after { content: "공공 감사"; }
.target-site.act-4 { filter: saturate(.88) contrast(1.03); }
.target-site.act-4 .archive-card:nth-child(even) { transform: translateY(3%); }
.target-site.act-5 .site-page { background-image: repeating-linear-gradient(0deg, transparent 0 17px, color-mix(in srgb, var(--op-secondary) 7%, transparent) 18px); }
.target-site.act-6 { box-shadow: inset 0 0 0 2px var(--op-accent), 0 18px 55px rgba(0,0,0,.42); }
.target-site.act-6 .site-page { background-image: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--op-secondary) 15%, transparent), transparent 48%); }
.target-site[class*="modifier-"] .site-lock::before { content: "MOD//"; margin-right: .45em; color: var(--op-secondary, var(--cyan)); }
html[lang="ko"] .target-site[class*="modifier-"] .site-lock::before { content: "변형//"; }
.modifier-infinite-scroll .feed-card { animation: modifier-breathe 1.8s ease-in-out infinite alternate; }
.modifier-stacked-paywall .paywall { box-shadow: 8px 8px 0 rgba(17,23,34,.25), 16px 16px 0 rgba(17,23,34,.12), 0 18px 40px rgba(17,23,34,.45); }
.modifier-price-flicker .feed-card:nth-child(even) { animation: modifier-flicker 1.15s steps(2) infinite; }
.modifier-auto-add .dom-panel.sponsored::before { content: "+ AUTO"; position: absolute; right: 5%; top: 8%; font: 950 clamp(5px,.5vw,9px)/1 ui-monospace,monospace; }
html[lang="ko"] .modifier-auto-add .dom-panel.sponsored::before { content: "+ 자동"; }
.modifier-moving-checkout .admin-node { animation: modifier-nudge 1.4s ease-in-out infinite alternate; }
.modifier-vanishing-results .feed-card:nth-child(3n) { animation: modifier-vanish 2.4s steps(3) infinite; }
.modifier-map-shift .data-shard:nth-of-type(odd) { animation: modifier-shift 1.8s ease-in-out infinite alternate; }
.modifier-priority-queue .feed-card:first-child { flex-grow: 1.8; }
.modifier-disabled-controls .dom-panel.account { opacity: .42; }
.modifier-audit-pulse .site-chrome { animation: modifier-audit 1.2s steps(2) infinite; }
.modifier-stale-cache .feed-card::after { content: "STALE"; color: var(--danger); font: 950 clamp(5px,.45vw,8px)/1 ui-monospace,monospace; }
.modifier-form-reset .dom-panel.privacy::after { content: "RESET?"; position: absolute; right: 5%; bottom: 8%; color: var(--danger); font: 950 clamp(5px,.45vw,8px)/1 ui-monospace,monospace; }
html[lang="ko"] .modifier-stale-cache .feed-card::after { content: "갱신 필요"; }
html[lang="ko"] .modifier-form-reset .dom-panel.privacy::after { content: "초기화?"; }
.modifier-countdown-orders .feed-card i { color: #c62646; opacity: 1; }
.modifier-rating-decay .archive-card:nth-child(even) { filter: grayscale(1); opacity: .58; }
.modifier-biased-sort .feed-card:last-child { order: -1; }
.modifier-mirror-profile .feed-card:nth-child(odd) { box-shadow: inset 0 0 0 3px rgba(255,255,255,.36); }
.modifier-risk-tide .site-page { animation: modifier-breathe 2.2s ease-in-out infinite alternate; }
.modifier-locked-reasons .archive-card strong::after { content: " · REDACTED"; color: var(--danger); }
html[lang="ko"] .modifier-locked-reasons .archive-card strong::after { content: " · 가려짐"; }
.modifier-fragmented-timeline .feed-card:nth-child(even) { transform: translateY(-7%); }
.modifier-checksum-decay .archive-card:nth-child(3n) { opacity: .36; }
.modifier-probability-shift .feed-card strong { animation: modifier-flicker 1.6s steps(2) infinite; }
.modifier-future-echo .archive-card { box-shadow: 5px 5px 0 color-mix(in srgb, var(--op-secondary) 15%, transparent); }
.modifier-vanishing-districts .archive-card:nth-child(2) { opacity: .18; }
.modifier-assembly-line .consent-wall { background-image: repeating-linear-gradient(90deg, transparent 0 11%, rgba(255,255,255,.08) 11% 12%); }
.modifier-trace-relays .laser-beam { box-shadow: 0 0 7px #fff, 0 0 18px var(--danger), 0 0 38px var(--danger); }
.modifier-fortress-collapse { animation-duration: .7s; }
#playfield:has(.modifier-twin-guards) .cookie-guard.is-secondary { --guard-color: #a877ff; }
#playfield:has(.modifier-adaptive-guards) .cookie-guard { animation: modifier-guard .5s ease-in-out infinite alternate; }
@keyframes modifier-breathe { to { filter: saturate(1.14) contrast(1.05); } }
@keyframes modifier-flicker { 50% { filter: brightness(.72); } }
@keyframes modifier-nudge { to { transform: translateX(-10%); } }
@keyframes modifier-vanish { 50% { opacity: .28; } }
@keyframes modifier-shift { to { transform: translate(5px,-3px); } }
@keyframes modifier-audit { 50% { box-shadow: inset 0 -2px 0 var(--op-accent); } }
@keyframes modifier-guard { to { filter: drop-shadow(0 0 20px rgba(255,72,109,.85)); } }
@keyframes site-enter { from { opacity: 0; transform: translateY(2%) scale(.99); filter: blur(4px); } }

.site-chrome {
  height: 8.5%;
  display: flex;
  align-items: center;
  gap: 1.2%;
  padding: 0 1.4%;
  color: #8994a2;
  background: #151b24;
  border-bottom: 1px solid #293241;
  font-size: clamp(6px, .58vw, 10px);
  font-weight: 800;
  letter-spacing: .06em;
}

.traffic-lights { display: flex; gap: .35em; }
.traffic-lights i { width: .62em; aspect-ratio: 1; border-radius: 50%; background: #3b4554; }
.traffic-lights i:first-child { background: var(--danger); }
.traffic-lights i:nth-child(2) { background: #f5c84c; }
.traffic-lights i:last-child { background: var(--acid); }

.address {
  flex: 1;
  padding: .55em 1em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid #303949;
  border-radius: 3px;
  background: #0d121a;
}
.address strong { color: var(--cyan); }
.site-lock { color: var(--acid); }

.site-page { position: relative; height: 91.5%; overflow: hidden; padding: 3.6% 4.5%; }
.news-kicker { color: #536170; font: 800 clamp(6px, .54vw, 10px)/1 ui-monospace, monospace; letter-spacing: .14em; }
.site-page h2 { margin: .25em 0 .12em; font-size: clamp(24px, 3.5vw, 58px); line-height: .88; letter-spacing: -.06em; }
.news-deck { margin: 0; color: #667281; font-size: clamp(7px, .68vw, 12px); line-height: 1.45; }

.consent-wall {
  position: absolute;
  left: 0;
  right: 0;
  top: 48%;
  height: 25%;
  display: flex;
  justify-content: space-between;
  border: 2px solid #111722;
  background: #111722;
  box-shadow: 0 16px 32px rgba(17,23,34,.16);
}

.dom-panel {
  width: 33.333%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2.2%;
  color: #111722;
  text-align: left;
  border: 0;
  border-right: 2px solid #111722;
  background: #dce2e7;
}
.dom-panel:last-child { border-right: 0; }
.dom-panel small { color: #697687; font: 800 clamp(6px, .58vw, 10px)/1 ui-monospace, monospace; }
.dom-panel strong { margin: .32em 0; font-size: clamp(10px, 1.2vw, 20px); letter-spacing: -.03em; }
.dom-panel span { color: #697687; font: 700 clamp(7px, .55vw, 10px)/1 ui-monospace, monospace; }
.dom-panel.sponsored { color: #0b1213; background: var(--op-accent, var(--acid)); cursor: pointer; }
.dom-panel.sponsored small,
.dom-panel.sponsored span { color: #34420d; }

.is-locked {
  cursor: not-allowed !important;
  filter: grayscale(.75) contrast(.82);
  opacity: .58;
}
.is-locked::after {
  content: "EVIDENCE LOCK";
  position: absolute;
  inset: auto 4% 6% auto;
  padding: .45em .6em;
  color: #eff6ff;
  background: #111722;
  font: 900 clamp(5px,.46vw,8px)/1 ui-monospace,monospace;
  letter-spacing: .08em;
}
html[lang="ko"] .is-locked::after { content: "단서 필요"; }

.data-shard {
  position: absolute;
  z-index: 24;
  width: clamp(58px, 9.6%, 116px);
  min-height: clamp(36px, 6.5%, 62px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: .65em .75em;
  color: #eff6ff;
  text-align: left;
  border: 1px solid var(--op-accent, var(--cyan));
  background: #111722;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--op-accent, var(--cyan)) 12%, transparent), 0 0 18px color-mix(in srgb, var(--op-accent, var(--cyan)) 25%, transparent);
  cursor: pointer;
  animation: shard-float 1.25s ease-in-out infinite alternate;
}
.data-shard i { position: absolute; right: .6em; top: .45em; color: var(--op-accent, var(--cyan)); font-style: normal; }
.data-shard strong { font: 900 clamp(8px,.58vw,10px)/1 ui-monospace,monospace; letter-spacing: .04em; }
.data-shard span { margin-top: .35em; color: var(--op-secondary, #9ba7b7); font: 700 clamp(7px,.48vw,8px)/1 ui-monospace,monospace; }
.data-shard:nth-of-type(even) { animation-delay: -.6s; }
@keyframes shard-float { to { transform: translate(-50%, calc(-50% - 4px)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-accent, var(--cyan)) 14%, transparent), 0 0 26px color-mix(in srgb, var(--op-accent, var(--cyan)) 35%, transparent); } }

.hackable { transition: filter .18s ease, box-shadow .18s ease, transform .18s ease; }
.hackable.is-near,
.hackable:hover,
.hackable:focus-visible {
  z-index: 4;
  outline: 3px solid var(--cyan);
  outline-offset: -3px;
  filter: saturate(1.15) brightness(1.05);
  box-shadow: 0 0 0 5px rgba(61,232,255,.16), 0 0 32px rgba(61,232,255,.24);
}

.next-node {
  position: absolute;
  top: 13%;
  right: 5%;
  padding: 1.1em 1.3em;
  color: #eff6ff;
  border: 0;
  background: #111722;
  font: 900 clamp(7px, .7vw, 12px)/1 ui-monospace, monospace;
  cursor: pointer;
}
.next-node span { color: var(--acid); }

.dom-caption {
  position: absolute;
  left: 4.5%;
  bottom: 4%;
  color: #8a95a3;
  font: 700 clamp(5px, .48vw, 9px)/1 ui-monospace, monospace;
  letter-spacing: .1em;
}

.feed-page { background: linear-gradient(135deg, #edf0f3 0 72%, #d9dfe5 72%); }
.feed-heading { position: absolute; left: 4.5%; top: 6%; z-index: 2; }
.feed-heading h2 { margin-top: .22em; }
.feed-layout {
  position: absolute;
  left: 0;
  right: 0;
  top: 48%;
  height: 25%;
  display: flex;
  flex-direction: row;
  border: 2px solid #111722;
  background: #111722;
  box-shadow: 0 16px 34px rgba(17,23,34,.18);
  transition: width .45s cubic-bezier(.16,.84,.32,1), height .45s cubic-bezier(.16,.84,.32,1);
  cursor: pointer;
}
.feed-layout.is-column {
  right: auto;
  width: 27%;
  height: 55%;
  top: 29%;
  flex-direction: column;
  cursor: default;
}
.feed-layout.is-reverse { flex-direction: row-reverse; }
.feed-layout.is-column.is-reverse { flex-direction: column-reverse; }
.feed-layout.is-column.patched-act-2 { left: 1%; top: 34%; width: 48%; height: 50%; display: grid; grid-template-columns: repeat(2, 1fr); }
.feed-layout.is-column.patched-act-2 .feed-card { width: auto; border-right: 1px solid #111722; }
.feed-layout.is-column.patched-act-3 { left: 27%; top: 27%; width: 34%; height: 57%; }
.feed-layout.is-column.patched-act-4 { left: 1%; top: 35%; width: 50%; height: 49%; flex-flow: row wrap; }
.feed-layout.is-column.patched-act-4 .feed-card { width: 50%; flex: 1 1 33%; border-right: 1px solid #111722; }
.feed-layout.is-column.patched-act-5 { left: 10%; top: 25%; width: 24%; height: 59%; }
.feed-layout.is-column.patched-act-6 { left: 1%; top: 36%; width: 62%; height: 48%; display: grid; grid-template-columns: repeat(3, 1fr); }
.feed-layout.is-column.patched-act-6 .feed-card { width: auto; border-right: 1px solid #111722; }
.feed-card {
  flex: 1 1 33.333%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.2%;
  overflow: hidden;
  color: #10151f;
  border-right: 2px solid #111722;
  background: var(--card-color, var(--cyan));
}
.feed-card:last-child { border-right: 0; }
.feed-layout.is-column .feed-card { width: 100%; min-height: 0; border-right: 0; border-bottom: 2px solid #111722; }
.feed-layout.is-column .feed-card:last-child { border-bottom: 0; }
.feed-card.card-violet { background: #b79bff; }
.feed-card.card-acid { background: var(--acid); }
.feed-card small,
.feed-card i { font: 800 clamp(7px, .52vw, 10px)/1 ui-monospace, monospace; font-style: normal; opacity: .68; }
.feed-card strong { margin: .28em 0; font-size: clamp(9px, 1.05vw, 18px); line-height: .92; }
.feed-layout.is-dense .feed-card { padding: 1.35%; }
.feed-layout.is-dense .feed-card strong { font-size: clamp(7px,.82vw,14px); }
.feed-layout.is-dense.is-column { width: 31%; height: 62%; top: 22%; }
.admin-node {
  position: absolute;
  top: 12%;
  right: 5%;
  min-width: 9.5em;
  padding: 1.35em 1.55em;
  color: #eff6ff;
  border: 0;
  background: #111722;
  font: 900 clamp(7px, .7vw, 12px)/1 ui-monospace, monospace;
  cursor: pointer;
}
.admin-node span { color: var(--acid); }
.admin-node:not([hidden]) { animation: admin-pulse 1s steps(2) infinite; }
@keyframes admin-pulse { 50% { box-shadow: 0 0 0 5px rgba(201,255,61,.22), 0 0 28px rgba(201,255,61,.26); } }
.flow-hint {
  position: absolute;
  right: 4%;
  bottom: 5%;
  display: flex;
  align-items: center;
  gap: .9em;
  color: #657180;
  font: 800 clamp(5px, .5vw, 9px)/1 ui-monospace, monospace;
}
.flow-hint b { padding: .7em; color: #061215; background: var(--op-accent, var(--cyan)); }

.cookie-guard {
  position: absolute;
  z-index: 36;
  width: clamp(34px, 3.8%, 58px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  --guard-color: #6ee7ff;
  color: var(--guard-color);
  pointer-events: none;
  filter: drop-shadow(0 0 13px color-mix(in srgb,var(--guard-color) 52%,transparent));
  transition: filter .16s ease;
}
.cookie-guard[data-mode="suspicious"] { --guard-color: #ffd44f; }
.cookie-guard[data-mode="investigate"] { --guard-color: #ff9f43; }
.cookie-guard[data-mode="chase"] { --guard-color: #ff486d; filter: drop-shadow(0 0 20px rgba(255,72,109,.88)); }
.cookie-guard[data-mode="returning"] { --guard-color: #a877ff; }
.cookie-guard.is-secondary { filter: drop-shadow(0 0 13px rgba(168,119,255,.72)); }
.cookie-guard::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: var(--guard-cone-width, 220px);
  height: var(--guard-cone-height, 250px);
  transform-origin: left center;
  transform: rotate(var(--guard-angle, 0rad)) translateY(-50%);
  clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%);
  opacity: .72;
  background: linear-gradient(90deg, color-mix(in srgb,var(--guard-color) 38%,transparent), color-mix(in srgb,var(--guard-color) 7%,transparent) 72%, transparent);
  border-right: 1px dashed color-mix(in srgb,var(--guard-color) 55%,transparent);
}
.cookie-guard .watcher-body {
  position: absolute;
  inset: 0;
  display: block;
  border: 2px solid #eefbff;
  border-radius: 42% 58% 48% 52%;
  background:
    radial-gradient(circle at 62% 43%, #071014 0 10%, #fff 11% 16%, var(--guard-color) 17% 33%, transparent 34%),
    conic-gradient(from 20deg, #152335, #070c13 28%, #26364a 52%, #080d15 78%, #152335);
  box-shadow: inset 0 0 0 4px color-mix(in srgb,var(--guard-color) 22%,transparent), 0 0 0 2px #09101a;
  animation: watcher-hover .85s ease-in-out infinite alternate;
}
.cookie-guard .watcher-body::before,
.cookie-guard .watcher-body::after { content: ""; position: absolute; top: 50%; width: 36%; height: 16%; transform: translateY(-50%); border: 1px solid var(--guard-color); background: #07101a; }
.cookie-guard .watcher-body::before { right: 88%; clip-path: polygon(0 50%,100% 0,100% 100%); }
.cookie-guard .watcher-body::after { left: 88%; clip-path: polygon(0 0,100% 50%,0 100%); }
.cookie-guard .watcher-body > b { position: absolute; left: 45%; top: 43%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 9px #fff; }
.cookie-guard .watcher-body > em { position: absolute; inset: -17%; border: 1px dashed color-mix(in srgb,var(--guard-color) 65%,transparent); border-radius: 50%; animation: watcher-spin 4s linear infinite; }
.cookie-guard strong {
  position: absolute;
  left: 50%;
  top: 116%;
  min-width: 112px;
  transform: translateX(-50%);
  display: grid;
  gap: 3px;
  color: var(--guard-color);
  text-align: center;
  font: 950 clamp(9px, .58vw, 11px)/1 ui-monospace, monospace;
  letter-spacing: .04em;
}
.cookie-guard strong small { color: #fff; font-size: clamp(9px,.56vw,11px); letter-spacing: .1em; }
.guard-awareness { position: absolute; left: 50%; top: -34%; width: 118%; height: 5px; transform: translateX(-50%); overflow: hidden; border: 1px solid color-mix(in srgb,var(--guard-color) 52%,transparent); background: rgba(4,8,14,.86); }
.guard-awareness i { display: block; width: var(--awareness,0%); height: 100%; background: var(--guard-color); box-shadow: 0 0 10px var(--guard-color); transition: width .08s linear; }
.guard-route-marker { position: absolute; z-index: 30; width: 25px; height: 25px; transform: translate(-50%,-50%); display: grid; place-items: center; color: #91a0b8; border: 1px dashed rgba(145,160,184,.55); border-radius: 50%; background: rgba(5,9,15,.75); pointer-events: none; }
.guard-route-marker b { font: 900 9px/1 ui-monospace,monospace; }
.guard-route-marker i { position: absolute; top: 112%; color: #8290a4; font: 800 8px/1 ui-monospace,monospace; font-style: normal; white-space: nowrap; }
.guard-route-marker.is-next { color: var(--acid); border-color: var(--acid); box-shadow: 0 0 14px rgba(201,255,61,.35); }
.guard-route-marker.is-next-secondary { color: var(--violet); border-color: var(--violet); box-shadow: 0 0 14px rgba(168,119,255,.38); }
.guard-route-marker.is-next.is-next-secondary { color: #fff; border-color: #fff; }
.guard-route-segment { position: absolute; z-index: 27; height: 1px; transform-origin: left center; border-top: 1px dashed rgba(145,160,184,.34); pointer-events: none; }
.guard-forecast-cone {
  position: absolute;
  z-index: 28;
  transform: translateY(-50%) rotate(var(--forecast-angle,0rad));
  transform-origin: left center;
  clip-path: polygon(0 48%,100% 0,100% 100%,0 52%);
  border-right: 1px dashed rgba(201,255,61,.5);
  background: linear-gradient(90deg,rgba(201,255,61,.13),rgba(201,255,61,.025) 75%,transparent);
  opacity: .62;
  pointer-events: none;
}
.guard-forecast-cone i { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: var(--acid); font: 850 8px/1 ui-monospace,monospace; font-style: normal; white-space: nowrap; }
.guard-forecast-cone.is-secondary {
  color: rgba(168,119,255,.32);
  border-color: rgba(168,119,255,.5);
  background: linear-gradient(90deg,rgba(168,119,255,.15),rgba(168,119,255,.025) 75%,transparent);
}
.guard-forecast-cone.is-secondary i { color: var(--violet); }
.guard-memory-marker { position: absolute; z-index: 34; width: 30px; height: 30px; transform: translate(-50%,-50%); display: grid; place-items: center; color: var(--danger); border: 1px dashed currentColor; border-radius: 50%; background: rgba(8,11,18,.72); pointer-events: none; animation: memory-pulse .8s ease-in-out infinite alternate; }
.guard-memory-marker b { font: 900 16px/1 ui-monospace,monospace; }
.guard-memory-marker i { position: absolute; top: 115%; color: currentColor; font: 850 8px/1 ui-monospace,monospace; font-style: normal; white-space: nowrap; }
.signal-decoy { position: absolute; z-index: 35; width: 42px; height: 42px; transform: translate(-50%,-50%); display: grid; place-items: center; color: var(--violet); pointer-events: none; }
.signal-decoy i { position: absolute; inset: 0; border: 2px solid currentColor; border-radius: 50%; animation: decoy-pulse .75s ease-out infinite; }
.signal-decoy b { padding: .35em .5em; color: #fff; background: #101522; font: 900 8px/1 ui-monospace,monospace; white-space: nowrap; }
@keyframes watcher-hover { to { transform: translateY(-3px) rotate(2deg); } }
@keyframes watcher-spin { to { transform: rotate(360deg); } }
@keyframes decoy-pulse { to { transform: scale(2.1); opacity: 0; } }
@keyframes memory-pulse { to { box-shadow: 0 0 18px rgba(255,72,109,.5); transform: translate(-50%,-50%) scale(1.08); } }

.admin-page { background: #dfe4e8; }
.archive-grid {
  position: absolute;
  inset: 7% 4.5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.4%;
  transition: all .35s ease;
}
.archive-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: 7%;
  color: #87919d;
  border: 1px solid #c4cbd2;
  background: rgba(255,255,255,.38);
}
.archive-card small,
.archive-card i { font: 800 clamp(5px, .46vw, 8px)/1 ui-monospace, monospace; font-style: normal; }
.archive-card strong { margin: .35em 0; font-size: clamp(8px, .9vw, 15px); }
.paywall {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 49%;
  height: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 2px solid #fff;
  background: #111722;
  box-shadow: 0 18px 40px rgba(17,23,34,.45);
  cursor: pointer;
  transition: transform .5s cubic-bezier(.16,.84,.32,1), opacity .5s ease, filter .5s ease;
}
.paywall small,
.paywall span { color: #9ba7b7; font: 800 clamp(5px, .5vw, 9px)/1 ui-monospace, monospace; }
.paywall strong { margin: .18em 0; font-size: clamp(16px, 2vw, 34px); line-height: .82; }
.paywall.is-sunk { z-index: 0; opacity: .07; transform: translateY(4%) scale(.82); filter: blur(1px); box-shadow: none; pointer-events: none; }
.security-frame {
  position: absolute;
  z-index: 12;
  left: 39%;
  top: 31%;
  width: 14%;
  height: 12%;
  overflow: visible;
  color: #fff;
  border: 2px solid var(--violet);
  background: #151b24;
  cursor: pointer;
}
.security-frame.is-clipped { overflow: hidden; cursor: default; }
.security-frame small { position: absolute; inset: 10%; z-index: 2; font: 800 clamp(4px, .4vw, 8px)/1 ui-monospace, monospace; }
.laser-beam {
  position: absolute;
  left: -300%;
  top: 62%;
  width: 700%;
  height: 8%;
  min-height: 4px;
  background: #fff;
  box-shadow: 0 0 5px #fff, 0 0 12px var(--danger), 0 0 25px var(--danger);
}
.laser-beam i { position: absolute; inset: -250% 0; background: rgba(255,72,109,.16); }
.root-node {
  position: absolute;
  z-index: 15;
  top: 10%;
  right: 7%;
  width: 18%;
  height: 23%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #061014;
  border: 3px solid #10151f;
  background: var(--op-accent, var(--acid));
  box-shadow: 10px 10px 0 #10151f;
  cursor: default;
}
.root-node.hackable { cursor: pointer; }
.root-node i { font: 950 clamp(12px, 1.5vw, 25px)/1 ui-monospace, monospace; font-style: normal; }
.root-node strong { margin: .3em 0; font: 950 clamp(9px, 1.1vw, 18px)/1 ui-monospace, monospace; }
.root-node span { font: 800 clamp(4px, .42vw, 8px)/1 ui-monospace, monospace; opacity: .6; }
.escape-node {
  position: absolute;
  z-index: 20;
  left: 5%;
  bottom: 7%;
  padding: 1.1em 1.4em;
  color: #061014;
  border: 2px solid #061014;
  background: var(--acid);
  font: 950 clamp(7px, .7vw, 12px)/1 ui-monospace, monospace;
  cursor: pointer;
  animation: escape-pulse .7s ease-in-out infinite alternate;
}
.escape-node span { margin-right: .6em; }
@keyframes escape-pulse { to { box-shadow: 0 0 28px rgba(201,255,61,.62); transform: translateX(-4px); } }
.admin-label { position: absolute; right: 4%; bottom: 4%; color: #8994a1; font: 800 clamp(5px, .48vw, 9px)/1 ui-monospace, monospace; }
.danger-label { color: var(--danger); }
.admin-site.is-collapsing { animation: unstable-page .16s steps(2) infinite; }
.admin-site.is-collapsing .archive-grid { grid-template-columns: repeat(2, 1fr); }
@keyframes unstable-page { 50% { transform: translateX(1px); filter: contrast(1.05) hue-rotate(4deg); } }

#patch-rig {
  position: absolute;
  top: 3%;
  right: 2%;
  width: 15%;
  padding: 1%;
  border: 1px solid var(--line);
  background: rgba(8, 11, 18, .88);
}

.rig-label { color: var(--muted); font-size: clamp(9px, .62vw, 11px); font-weight: 900; letter-spacing: .12em; }

#patch-list { margin-top: .8em; }
.rig-empty { color: #66738a; font: 800 clamp(8px, .58vw, 10px)/1 ui-monospace, monospace; }
.patch-token {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-top: .55em;
  padding: .65em;
  color: var(--cyan);
  border: 1px solid currentColor;
  background: rgba(61,232,255,.05);
}
.patch-token.depth { color: #ffcf4a; }
.patch-token.clip { color: var(--violet); }
.patch-token b { font: 900 clamp(8px, .72vw, 13px)/1 ui-monospace, monospace; }
.patch-token i { font: 800 clamp(8px, .58vw, 10px)/1 ui-monospace, monospace; font-style: normal; letter-spacing: .08em; }
.intel-readout { display: flex; justify-content: space-between; margin-top: .8em; padding: .75em .7em; color: var(--muted); border: 1px solid rgba(201,255,61,.32); background: rgba(201,255,61,.05); font: 900 clamp(9px,.62vw,11px)/1 ui-monospace,monospace; }
.intel-readout strong { color: var(--acid); }
.trace-readout { margin-top: 1em; padding-top: .8em; border-top: 1px solid var(--line); }
.trace-readout > div { display: flex; justify-content: space-between; color: var(--muted); font: 800 clamp(8px, .58vw, 10px)/1 ui-monospace, monospace; }
.trace-readout strong { color: var(--danger); }
.trace-readout > i { display: block; height: 3px; margin-top: .5em; overflow: hidden; background: rgba(255,72,109,.14); }
.trace-readout > i b { display: block; height: 100%; background: var(--danger); box-shadow: 0 0 8px var(--danger); transition: width .1s linear; }

#game-shell.is-paused .target-site *,
#game-shell.is-paused .cookie-guard,
#game-shell.is-paused #player,
#game-shell.is-decoding .target-site *,
#game-shell.is-decoding .cookie-guard,
#game-shell.is-decoding #player { animation-play-state: paused !important; }

#player {
  position: absolute;
  left: 8%;
  top: 75%;
  width: 2.15%;
  aspect-ratio: 1;
  z-index: 50;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid var(--acid);
  background: #071014;
  box-shadow: 0 0 0 3px rgba(201,255,61,.13), 0 0 18px rgba(201,255,61,.62);
}

#player::before {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
}

#player span { position: absolute; inset: 11%; border: 1px solid rgba(61,232,255,.72); }

#escape-hud {
  --escape-progress: 100%;
  position: absolute;
  z-index: 44;
  top: 31%;
  right: 2%;
  width: 15%;
  padding: 1.05%;
  color: #fff;
  border: 1px solid var(--danger);
  background: rgba(18, 6, 13, .94);
  box-shadow: 0 0 34px rgba(255,72,109,.2);
  animation: escape-hud-pulse .48s steps(2) infinite;
}
#escape-hud[hidden] { display: none; }
#patch-rig.is-suppressed { opacity: 0; pointer-events: none; }
#escape-hud small { display: block; color: var(--danger); font: 900 clamp(8px, .6vw, 11px)/1 ui-monospace, monospace; letter-spacing: .14em; }
#escape-hud strong { display: block; margin: .12em 0; font: 950 clamp(34px, 4vw, 64px)/.9 ui-monospace, monospace; }
#escape-hud i { display: block; height: 5px; overflow: hidden; background: rgba(255,72,109,.15); }
#escape-hud b { display: block; width: var(--escape-progress); height: 100%; background: var(--danger); box-shadow: 0 0 12px var(--danger); }
@keyframes escape-hud-pulse { 50% { border-color: #fff; } }

#interaction-prompt {
  position: absolute;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .45em .55em;
  opacity: 0;
  color: #071014;
  white-space: nowrap;
  border: 1px solid #071014;
  background: var(--acid);
  transform: translate(-50%, 8px) scale(.9);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  font: 900 clamp(9px, .64vw, 11px)/1 ui-monospace, monospace;
}
#interaction-prompt.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
#interaction-prompt.is-exfil { transform: translate(-50%, -58px) scale(.9); }
#interaction-prompt.is-exfil.is-visible { transform: translate(-50%, -62px) scale(1); }
#interaction-prompt kbd { padding: .12em .35em; }

.movement-tutorial {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(8px,1vw,15px);
  padding: clamp(8px,.85vw,12px) clamp(10px,1.15vw,16px);
  opacity: 0;
  visibility: hidden;
  color: var(--text);
  background:
    linear-gradient(135deg,rgba(61,232,255,.08),transparent 58%),
    rgba(6,10,17,.96);
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  pointer-events: none;
}
.movement-tutorial::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34%;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(61,232,255,.58);
}
.movement-tutorial.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.movement-tutorial__copy { min-width: 0; }
.movement-tutorial__copy small,
.movement-tutorial__copy strong,
.movement-tutorial__copy span { display: block; }
.movement-tutorial__copy small {
  color: var(--cyan);
  font: 900 clamp(8px,.56vw,10px)/1 ui-monospace,monospace;
  letter-spacing: .16em;
}
.movement-tutorial__copy strong {
  margin-top: .42em;
  font-size: clamp(12px,.9vw,15px);
  line-height: 1.15;
  word-break: keep-all;
}
.movement-tutorial__copy span {
  margin-top: .35em;
  color: var(--muted);
  font-size: clamp(9px,.65vw,11px);
  line-height: 1.35;
  word-break: keep-all;
}
.movement-tutorial__keys {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px,.65vw,10px);
}
.movement-tutorial__keys > i {
  color: #728198;
  font: 900 clamp(7px,.48vw,9px)/1 ui-monospace,monospace;
  font-style: normal;
}
.movement-key-cluster {
  display: grid;
  grid-template-columns: repeat(3,clamp(18px,1.45vw,24px));
  gap: clamp(2px,.24vw,4px);
}
.movement-key-cluster .movement-key-up {
  grid-column: 2;
  animation: movement-key-pulse 1.5s ease-in-out infinite;
}
.movement-key-cluster > span {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: inherit;
}
.movement-key-cluster kbd {
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  color: #dff7ff;
  border: 1px solid rgba(166,187,220,.55);
  border-bottom-width: 3px;
  border-radius: 4px;
  background: #111a28;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  font: 900 clamp(9px,.7vw,12px)/1 ui-monospace,monospace;
}
@keyframes movement-key-pulse {
  0%,100% { color: #dff7ff; border-color: rgba(166,187,220,.55); transform: translateY(0); }
  50% { color: #071014; border-color: var(--acid); background: var(--acid); transform: translateY(2px); }
}
#game-shell:is(.is-paused,.is-decoding,.is-puzzling) .movement-tutorial {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}

.objective-card {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  transform: translateX(-50%);
  min-width: 34%;
  padding: .75% 1.2%;
  text-align: center;
  border: 1px solid var(--line);
  background: rgba(8, 11, 18, .92);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.objective-card:has(.movement-tutorial.is-visible) {
  min-height: clamp(58px,5.4vw,72px);
  border-color: rgba(61,232,255,.52);
  border-left: 3px solid var(--acid);
  box-shadow: 0 14px 38px rgba(0,0,0,.36), 0 0 20px rgba(61,232,255,.07);
}
.objective-content {
  opacity: 1;
  visibility: visible;
  transition: opacity .16s ease, visibility 0s linear 0s;
}
.objective-card:has(.movement-tutorial.is-visible) .objective-content {
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 641px) {
  .objective-card:has(.movement-tutorial.is-visible) { width: min(44%,520px); }
}

.objective-content > strong { display: block; max-width: 68ch; margin: .25em auto 0; font-size: clamp(11px, .84vw, 15px); line-height: 1.35; word-break: keep-all; text-wrap: pretty; }
#game-shell.is-watcher-alert .objective-card { border-color: var(--danger); background: rgba(34,7,16,.94); box-shadow: 0 0 24px rgba(255,72,109,.28); }
#game-shell.is-watcher-alert .objective-card small { color: #ff9aad; }

#end-screen h2 {
  margin: .22em 0;
  font-size: clamp(48px, 8vw, 130px);
  line-height: .82;
  letter-spacing: -.06em;
}

#end-screen h2 span { color: var(--acid); }
#end-summary { color: var(--muted); }
.eyebrow.success { color: var(--acid); }
.end-operation { color: var(--cyan); font: 900 clamp(7px, .62vw, 11px)/1 ui-monospace, monospace; letter-spacing: .16em; }

.result-verdict { display: flex; align-items: center; gap: 1em; width: min(55%,720px); margin: 1em 0 .1em; padding: .7em 1em; text-align: left; border: 1px solid rgba(201,255,61,.35); background: rgba(201,255,61,.045); }
.result-verdict > strong { min-width: 1.1em; color: var(--acid); font-size: clamp(30px,3.5vw,58px); line-height: 1; }
.result-verdict span,
.result-verdict b,
.result-verdict i { display: block; }
.result-verdict b { color: var(--text); font: 900 clamp(9px,.64vw,12px)/1 ui-monospace,monospace; letter-spacing: .1em; }
.result-verdict i { margin-top: .4em; color: var(--muted); font-size: clamp(10px,.74vw,13px); line-height: 1.35; font-style: normal; }

.score-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(55%, 720px);
  margin: .65em 0 1.2em;
  border: 1px solid var(--line);
}

.score-card > div { padding: 1.1em; border-right: 1px solid var(--line); }
.score-card > div:last-child { border-right: 0; }
.score-card strong { display: block; margin-top: .15em; font-size: clamp(20px, 2.2vw, 38px); white-space: nowrap; }
.end-actions { display: flex; flex-direction: column; align-items: center; gap: .4em; }
.end-actions .primary-btn,
.end-actions .secondary-btn { width: 17em; }

#toast-layer { position: absolute; top: 12%; left: 50%; z-index: 100; transform: translateX(-50%); pointer-events: none; }

.toast {
  min-width: 17em;
  margin-bottom: .45em;
  padding: .8em 1.1em;
  color: #071013;
  text-align: center;
  border-left: 5px solid var(--cyan);
  background: var(--acid);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  animation: toast-life 2.55s cubic-bezier(.2,.8,.2,1) both;
}
.toast strong,
.toast span { display: block; }
.toast strong { font-size: clamp(11px, .78vw, 14px); letter-spacing: .08em; }
.toast span { margin-top: .3em; font: 800 clamp(9px, .64vw, 11px)/1.35 ui-monospace, monospace; opacity: .72; }

@keyframes toast-life {
  0% { opacity: 0; transform: translateY(-16px) scale(.96); }
  10%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-9px) scale(.98); }
}
@keyframes toast-life-compact {
  0% { opacity: 0; }
  10%, 84% { opacity: 1; }
  100% { opacity: 0; }
}

#scanlines {
  position: absolute;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,.25) 4px);
  mix-blend-mode: multiply;
  transition: opacity .2s ease;
}
#game-shell.is-traced #scanlines {
  opacity: .58;
  background:
    radial-gradient(circle at center, transparent 35%, rgba(255,72,109,.32) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,.25) 4px);
  animation: trace-pulse .35s steps(2) infinite;
}
#game-shell.is-decoding #scanlines,
#game-shell.is-paused #scanlines { opacity: .08; animation: none; }
@keyframes trace-pulse { 50% { filter: saturate(1.5) contrast(1.08); } }

.end-glow {
  position: absolute;
  pointer-events: none;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,255,61,.16), transparent 65%);
  filter: blur(20px);
}

@media (max-aspect-ratio: 4/3) {
  #game-shell:has(#start-screen.is-active),
  #game-shell:has(#end-screen.is-active) {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
  }
  #start-screen,
  #end-screen { min-height: 100%; overflow-y: auto; }
  .start-meta { gap: 1.2em; }
}

@media (max-width: 1100px) {
  .campaign-header { padding-right: 88px; }
  .operation-dossier #dossier-briefing,
  .operation-dossier #dossier-lore,
  .operation-dossier #dossier-optional { display: none; }
  .campaign-body { grid-template-columns: minmax(0,3fr) minmax(260px,2fr); gap: 1.2%; }
  .operation-dossier { padding: 5%; }
  .operation-dossier .primary-btn { gap: .65em; }
}

@media (max-width: 640px) {
  #game-shell:has(#campaign-screen.is-active),
  #game-shell:has(#briefing-screen.is-active) { min-height: 100dvh; height: 100dvh; }
  #campaign-screen { padding: 62px 16px 24px; }
  #campaign-screen.is-active { display: block; }
  .campaign-screen .campaign-header { display: grid; gap: 16px; padding: 0 0 16px; }
  .campaign-header h2 { font-size: clamp(34px,11vw,48px); }
  .campaign-guide { max-width: none; font-size: 11px; }
  .campaign-screen .campaign-stats { min-width: 0; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .campaign-stats > div:nth-child(2) { border-right: 0; }
  .campaign-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .campaign-screen .campaign-body { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(300px,48vh) auto; gap: 14px; padding-top: 16px; }
  .campaign-screen .campaign-map { grid-template-columns: repeat(2,minmax(150px,1fr)); gap: 9px; padding-right: 4px; }
  .operation-node { min-height: 104px; padding: 12px; }
  .operation-node strong { font-size: 14px; line-height: 1.05; }
  .operation-node span { font-size: 11px; }
  .campaign-screen .operation-dossier { min-height: 330px; padding: 20px; overflow: visible; }
  .operation-dossier h3 { font-size: 30px; }
  .operation-dossier .primary-btn > span { font-size: 14px; }
  .operation-dossier .primary-btn kbd { display: inline-block; }
  #briefing-screen { padding: 62px 20px 0; }
  .briefing-topline { padding-right: 0; }
  .briefing-progress { margin-left: auto; }
  .briefing-actions { justify-content: stretch; }
  .briefing-actions .primary-btn { min-width: 0; flex: 1; }
}

@media (max-width: 900px), (max-height: 650px) {
  #game-shell:is(.is-puzzling,.is-decoding,.is-paused) {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
  }
  .start-meta { width: 90%; justify-content: center; flex-wrap: wrap; gap: .6em 1.2em; }
  .campaign-screen { padding: 54px 2.5% 2.2%; }
  .campaign-header { align-items: flex-start; }
  .campaign-header > .screen-language-btn { top: -44px; }
  .campaign-header h2 { font-size: clamp(24px,4vw,44px); }
  .campaign-guide { max-width: 31ch; margin-top: .55em; font-size: 9px; }
  .campaign-stats { min-width: 62%; }
  .campaign-stats > div { padding: .65em .55em; }
  .campaign-stats small { font-size: 9px; }
  .campaign-stats strong { font-size: 12px; }
  .campaign-body { grid-template-columns: minmax(0,3fr) minmax(260px,2fr); gap: 1.2%; padding-top: 1.2%; }
  .campaign-map { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .operation-node { min-height: 6.9em; }
  .operation-dossier { padding: 5%; overflow-y: auto; scrollbar-gutter: stable; scrollbar-color: var(--acid) rgba(255,255,255,.04); }
  .operation-dossier #dossier-briefing,
  .operation-dossier #dossier-lore,
  .operation-dossier #dossier-optional { display: none; }
  .operation-dossier h3 { font-size: clamp(18px,2.2vw,30px); }
  .operation-dossier p { font-size: 11px; }
  .dossier-meta { margin-top: .5em; gap: .45em; }
  .briefing-screen {
    justify-content: flex-start;
    padding: 44px 22px 0;
    overflow-y: auto;
    scroll-padding-bottom: 76px;
    scrollbar-gutter: stable;
  }
  .briefing-shell { width: 100%; min-height: 0; margin: 0; gap: 12px; padding-bottom: 8px; }
  .briefing-topline { padding-right: 78px; }
  .briefing-topline > .screen-language-btn { top: -36px; }
  .briefing-progress { padding: .5em .65em; }
  .briefing-progress small { font-size: 8px; }
  .briefing-header h2 { font-size: clamp(36px,6.4vw,50px); line-height: .96; }
  .briefing-act-context { font-size: 11px; }
  .briefing-content { grid-template-columns: 1fr; gap: 12px; }
  .briefing-story { padding: 0; border-right: 0; }
  .briefing-copy { font-size: 13px; line-height: 1.62; }
  .briefing-screen blockquote { margin: .65em 0; font-size: 11px; }
  .briefing-field-note { padding: .72em .85em; }
  .briefing-field-note strong { font-size: 12px; }
  .briefing-grid > div,
  .briefing-threats span { padding: .72em .85em; }
  .briefing-grid strong,
  .briefing-threats strong { font-size: 12px; }
  .briefing-modifiers { padding: .75em .85em .85em; }
  .briefing-modifier-list b { font-size: 11px; }
  .briefing-modifier-list i { font-size: 10px; }
  .briefing-actions {
    position: static;
    justify-content: center;
    gap: .75em;
    padding: 0 0 12px;
    background: none;
  }
  .briefing-actions .primary-btn { gap: .75em; }
  .briefing-actions .primary-btn > span { white-space: nowrap; word-break: keep-all; }
  .hud { grid-template-columns: .48fr 1.18fr 1.15fr 1.34fr; padding-inline: 1.8%; }
  .hud-brand { font-size: 11px; }
  .mission-progress { min-width: 5.1em; }
  .mission-progress > span { font-size: 14px; }
  .stage-rail { --stage-dot: 20px; width: 100%; min-width: 0; }
  .stage-rail i,
  .stage-rail span.is-current i { display: block; font-size: 9px; }
  .hud-actions { gap: .3em; }
  .icon-btn { min-height: 32px; padding: .55em .6em; font-size: 9px; }
  .movement-tutorial { gap: 8px; padding: 8px 10px; }
  .decode-card { width: min(86%,760px); padding: 20px; }
  .decode-card h2 { font-size: clamp(32px,6vw,46px); }
  .decode-card > p { margin-bottom: .8em; font-size: 12px; }
  .decode-card pre { margin-bottom: .85em; }
  .decode-footer { font-size: 9px; }
  .pause-card { width: min(78%,650px); padding: 18px; }
  .pause-card h2 { margin: .2em 0; font-size: clamp(30px,4.5vw,52px); }
  .pause-card > p { margin: .65em 0 .9em; }
  .pause-context { margin-bottom: .7em; }
  .pause-card .pause-controls { margin-bottom: .35em; }
  .pause-card button { margin-top: .4em; padding-block: .78em; }
  .result-verdict,
  .score-card { width: min(82%,720px); }
  #end-screen { justify-content: flex-start; padding: 3% 5%; overflow-y: auto; }
  #end-screen h2 { margin: .12em 0; font-size: clamp(42px,7vw,72px); }
  #end-summary { margin: .45em 0; }
  .result-verdict { margin: .45em 0 .1em; }
  .score-card { margin: .45em 0 .7em; }
  .end-actions { width: min(82%,720px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding-bottom: 1.2em; }
  .end-actions .primary-btn,
  .end-actions .secondary-btn { width: auto; min-width: 0; }
  .end-actions .text-btn { grid-column: 1 / -1; }
  .language-btn { top: 1.1%; right: 1.1%; min-width: 68px; min-height: 30px; padding: .4em .6em; }
  .puzzle-overlay { padding: 1.4%; }
  .puzzle-card { width: 96%; height: 96%; max-height: 96%; }
  .puzzle-header { padding: 12px 15px 9px; }
  .puzzle-header h2 { font-size: clamp(22px,3.7vw,34px); }
  .puzzle-layout { grid-template-columns: minmax(210px,.68fr) minmax(0,1.4fr); }
  .puzzle-brief { gap: 7px; padding: 10px; }
  .puzzle-brief-scroll { gap: 7px; }
  .puzzle-brief section { padding: 8px 9px; }
  .puzzle-brief p { margin-top: .4em; font-size: 11px; line-height: 1.35; }
  #puzzle-clues { gap: .32em; }
  #puzzle-clues li { font-size: 11px; line-height: 1.3; }
  .puzzle-workspace { padding: 10px; }
  .puzzle-board { min-height: 180px; padding: 7px; }
  .puzzle-preview { margin-top: 7px; padding: 8px 9px; }
  .puzzle-stats span { padding: 8px 9px; }
  .puzzle-actions { padding: 8px 15px; }
  .network-puzzle { min-height: 210px; transform: scale(.86); }
  .network-device { width: 88px; min-height: 46px; font-size: 10px; }
  .route-puzzle { width: auto; height: clamp(230px,42vh,300px); gap: 4px; }
  .stack-puzzle { gap: 5px; }
  .stack-layer { min-height: 42px; padding: 5px 8px; }
}

@media (min-width: 641px) and (max-width: 900px) and (max-height: 650px) {
  .briefing-shell { gap: 10px; }
  .briefing-header h2 { font-size: clamp(34px,5vw,44px); }
  .briefing-content { grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); gap: 14px; }
  .briefing-story { padding: 0 14px 0 0; border-right: 1px solid var(--line); }
  .briefing-copy { font-size: 12px; line-height: 1.52; }
  .briefing-screen blockquote { margin: .5em 0; }
  .briefing-field-note { padding: .6em .75em; }
  .briefing-grid > div,
  .briefing-threats span { padding: .58em .7em; }
  .briefing-modifiers { padding: .58em .7em .7em; }
  .briefing-modifier-list { grid-template-columns: 1fr; }
  .briefing-modifier-list span { padding: .55em .65em; }
}

@media (max-height: 420px) and (orientation: landscape) {
  .pause-overlay,
  .decode-overlay {
    place-items: start center;
    padding: 10px;
    overflow-y: auto;
    scrollbar-color: var(--acid) rgba(255,255,255,.04);
  }
  .pause-card,
  .decode-card {
    width: min(94%,760px);
    margin: auto;
    padding: 14px;
  }
  .pause-card h2,
  .decode-card h2 { font-size: 30px; }
  .pause-card > p,
  .decode-card > p { min-height: 0; margin: .45em 0 .65em; font-size: 11px; }
  .pause-context { margin-bottom: .5em; }
  .pause-context span { padding: .5em .6em; }
  .pause-card .pause-controls { margin-bottom: .25em; }
  .pause-card button { margin-top: .3em; padding-block: .65em; }
  .decode-card pre { margin-bottom: .65em; padding: .65em .8em; }
  .decode-options { gap: .4em; }
  .decode-option { min-height: 38px; padding: .65em .75em; }
  .decode-footer { margin-top: .65em; }
}

@media (max-aspect-ratio: 1/1) and (max-width: 640px) {
  #campaign-screen { padding-top: 10px; }
  .campaign-screen .campaign-header { gap: 10px; }
  .campaign-header > .screen-language-btn { position: static; grid-row: 1; justify-self: end; }
  .campaign-header > div:first-child { grid-row: 2; }
  .campaign-header > .campaign-stats { grid-row: 3; }
  #game-shell:has(#game-screen.is-active) {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
  }
  .hud {
    height: 154px;
    grid-template-columns: minmax(88px,.44fr) minmax(0,1.56fr);
    grid-template-rows: 42px 42px 48px;
    gap: 4px 12px;
    padding: 8px 12px;
  }
  .hud-brand { grid-column: 1; grid-row: 1; font-size: 12px; }
  .mission-strip { grid-column: 2; grid-row: 1; gap: 8px; }
  .mission-progress { min-width: 66px; padding-right: 8px; }
  .mission-progress > span { font-size: 15px; }
  .mission-strip small { font-size: 9px; }
  .mission-strip strong { max-width: 18em; font-size: 11px; }
  .stage-rail { grid-column: 1 / -1; grid-row: 2; }
  .stage-rail span,
  .stage-rail span.is-current { grid-template-columns: minmax(0,1fr); justify-content: stretch; }
  .stage-rail i,
  .stage-rail span.is-current i { display: block; font-size: 9px; }
  .hud-actions { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; gap: 6px; }
  .icon-btn { flex: 1; min-height: 38px; padding: 6px 7px; font-size: 9px; }
  #playfield { min-height: 0; }
  #site-frame,
  #guard-layer { inset: 3% 4% 35% 4%; }
  #patch-rig {
    top: auto;
    right: 24%;
    bottom: 2.5%;
    left: 4%;
    width: auto;
    min-height: 0;
    max-height: 26%;
    z-index: 62;
    padding: 8px;
    overflow: hidden;
  }
  #patch-rig .rig-label { display: none; }
  #patch-rig #patch-list { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; margin-top: 0; }
  #patch-rig .patch-token { min-width: 0; margin-top: 0; padding: 6px 8px; }
  #patch-rig .intel-readout { min-width: 82px; margin-top: 0; padding: 7px; }
  #patch-rig .trace-readout { grid-column: 1 / -1; margin-top: 0; padding-top: 6px; }
  #game-shell:has(#game-screen.is-active) .language-btn {
    top: auto;
    right: 4%;
    bottom: 2.5%;
    min-width: 17%;
    min-height: 38px;
  }
  .objective-card:has(.movement-tutorial.is-visible) { min-height: 48px; }
  .movement-tutorial { gap: 6px; padding: 5px 8px; }
  .movement-key-cluster { grid-template-columns: repeat(3,clamp(15px,3.5vw,18px)); gap: 2px; }
  .movement-tutorial__keys { gap: 5px; }
  .movement-tutorial__copy span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .objective-card { bottom: 19.5%; z-index: 63; width: 88%; padding: 8px 12px; }
  .objective-content > strong { font-size: 11px; }
  #toast-layer { top: auto; bottom: 19%; width: 88%; }
  .toast { min-width: 0; max-width: none; padding: .35em .7em; animation-name: toast-life-compact; }
  .cookie-guard strong { top: auto; bottom: 150%; width: 96px; min-width: 0; }
  .puzzle-overlay { overflow: hidden; padding: 10px; align-items: start; }
  .puzzle-card { width: 100%; height: calc(100dvh - 20px); max-height: none; min-height: 0; }
  .puzzle-header { flex-wrap: wrap; }
  .overlay-header-actions { width: 100%; justify-content: space-between; }
  .puzzle-layout { grid-template-columns: 1fr; grid-template-rows: max-content max-content; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; scrollbar-color: var(--acid) rgba(255,255,255,.04); }
  .puzzle-brief { min-height: max-content; display: flex; flex: none; overflow: visible; border-right: 0; }
  .puzzle-brief-scroll { overflow: visible; }
  .puzzle-stats { position: static; box-shadow: none; }
  .puzzle-workspace { min-height: 520px; overflow: visible; }
  .puzzle-actions { position: static; flex: 0 0 auto; z-index: 3; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .puzzle-actions .primary-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; }
  .network-puzzle { transform: none; }
}

@media (max-width: 360px) {
  #start-screen {
    justify-content: flex-start;
    padding: 76px 16px 28px;
    overflow-x: hidden;
  }
  #start-screen .eyebrow { text-align: left; letter-spacing: .16em; }
  #start-screen h1 { margin-top: .2em; font-size: clamp(40px,14vw,48px); line-height: .9; }
  #start-screen .tagline { max-width: 25ch; margin: 1em 0 1.35em; font-size: 12px; line-height: 1.5; }
  .start-actions { width: 100%; flex-direction: column; }
  .start-actions .primary-btn,
  .start-actions .secondary-btn { width: 100%; min-width: 0; }
  .start-save-summary { font-size: 9px; }
  .start-meta { position: static; width: 100%; margin-top: 24px; justify-content: center; gap: .5em 1em; line-height: 1.5; }
  .overlay-header-actions { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 5px; }
  .overlay-language-btn { min-height: 36px; padding: .5em .65em; }
  .puzzle-header { flex-wrap: wrap; gap: .7em; }
  .puzzle-header h2 { font-size: 21px; }
  .decode-card header { flex-wrap: wrap; gap: 8px; }
  .decode-card header > .eyebrow { flex: 1 1 100%; }
  .decode-meta { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 5px; }
  .decode-meta #decode-index { align-self: center; line-height: 1.35; }
}

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