:root {
  --bg: #0a0e1d;
  --panel: #10162c;
  --panel-2: #0d1224;
  --line: #2a3354;
  --line-dim: #1c2440;
  --gold: #ffd34d;
  --text: #e8ecff;
  --dim: #8e97c0;
  --hp: #58d858;
  --mp: #5ab0ff;
  --violet: #b98cff;
  --warn: #ff7a59;
  --orange: #f15a24;
  --pix: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: "NeoDunggeunmo", "DungGeunMo", "Galmuri11", monospace;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.55;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1px 1px at 12% 18%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 6%, #8e97c0 50%, transparent 51%),
    radial-gradient(2px 2px at 67% 28%, #ffd34d66 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 12%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 64%, #8e97c0 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 74%, #cfd8ff 50%, transparent 51%),
    radial-gradient(2px 2px at 91% 58%, #cfd8ff66 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 88%, #8e97c0 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 92%, #cfd8ff 50%, transparent 51%),
    var(--bg);
  background-size: 900px 900px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(4, 7, 18, .15) 2px 4px),
    radial-gradient(ellipse at center, transparent 58%, rgba(3, 5, 14, .56) 100%);
}

button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.sky-depth {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.shooting-star {
  position: absolute;
  width: 96px;
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #cfd8ff);
  transform: rotate(-28deg);
  animation: meteor 11s steps(14) infinite;
}
.shooting-star-a { top: 16%; left: 72%; }
.shooting-star-b { top: 34%; left: 18%; animation-delay: 6.5s; }

@keyframes meteor {
  0%, 72% { opacity: 0; translate: 0 0; }
  74% { opacity: 1; }
  80% { opacity: 0; translate: -190px 110px; }
  100% { opacity: 0; }
}

.blink { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

.pix-frame {
  background: var(--panel);
  border: 3px solid var(--line);
  clip-path: polygon(
    0 var(--pix), var(--pix) var(--pix), var(--pix) 0,
    calc(100% - var(--pix)) 0, calc(100% - var(--pix)) var(--pix), 100% var(--pix),
    100% calc(100% - var(--pix)), calc(100% - var(--pix)) calc(100% - var(--pix)),
    calc(100% - var(--pix)) 100%, var(--pix) 100%, var(--pix) calc(100% - var(--pix)),
    0 calc(100% - var(--pix))
  );
  filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .42));
}

.hud {
  position: relative;
  z-index: 20;
  border-bottom: 3px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 19, 38, .98), rgba(10, 14, 29, .94));
  padding: 18px 0 16px;
}

.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; }
.brand { min-width: 260px; color: inherit; text-decoration: none; }
.brand-title {
  display: block;
  color: var(--gold);
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.05;
  text-shadow: 3px 3px 0 #5a3c00, 6px 6px 0 rgba(0, 0, 0, .45);
}
.brand-sub { display: block; margin-top: 6px; color: var(--dim); font-size: 12px; }
.hud-stats { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; gap: 8px; }
.hud-chip { min-width: 96px; padding: 7px 11px; color: var(--dim); background: var(--panel-2); border: 2px solid var(--line-dim); font-size: 11px; }
.hud-chip b { display: block; margin-top: 1px; color: var(--text); font-size: 15px; }
.hud-chip .gold { color: var(--gold); }

.pix-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
  text-decoration: none;
  transition: color .12s steps(2), border-color .12s steps(2), translate .12s steps(2);
}
.pix-btn:hover, .pix-btn:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }
.pix-btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 rgba(0, 0, 0, .5); }
.pix-btn.primary { color: #0a0e1d; background: var(--gold); border-color: #b8902a; }
.pix-btn.primary:hover, .pix-btn.primary:focus-visible { color: #0a0e1d; filter: brightness(1.12); }
.hud-link { min-height: auto; padding: 8px 10px; font-size: 11px; }

.hero {
  position: relative;
  min-height: calc(100svh - 103px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 3px solid var(--line-dim);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 74% 24%, rgba(90, 176, 255, .08), transparent 23rem),
    linear-gradient(180deg, rgba(10, 14, 29, .05), rgba(10, 14, 29, .75));
}

.hero-mountains {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 34%;
  opacity: .54;
  background: #111832;
  clip-path: polygon(0 100%, 0 62%, 8% 40%, 16% 67%, 28% 18%, 39% 70%, 50% 38%, 61% 74%, 73% 10%, 84% 58%, 92% 31%, 100% 61%, 100% 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(440px, 1.06fr);
  align-items: center;
  gap: clamp(32px, 6vw, 86px);
  padding: 46px 0 52px;
}

.hero-copy { position: relative; z-index: 2; animation: boot-in .55s steps(7) both; }
@keyframes boot-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.kicker { color: var(--gold); font-size: 11px; letter-spacing: .16em; }
.hero h1 { margin-top: 15px; color: var(--gold); font-size: clamp(38px, 6vw, 66px); line-height: .98; text-shadow: 4px 4px 0 #5a3c00, 8px 8px 0 rgba(0, 0, 0, .45); }
.hero h1 span { display: block; margin-bottom: 9px; color: var(--text); font-size: .39em; line-height: 1.2; text-shadow: 3px 3px 0 #151c38; }
.hero-lead { max-width: 620px; margin-top: 22px; color: #b8c0e2; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.8; }

.role-section { margin-top: 32px; }
.role-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.role-head h2 { font-size: 16px; }
.role-head h2::before { content: "▶ "; color: var(--gold); }
.role-head p { color: var(--dim); font-size: 11px; }
.role-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.role-option {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 9px;
  color: var(--dim);
  text-align: left;
  background: rgba(13, 18, 36, .88);
  border: 2px solid var(--line-dim);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .34);
}
.role-option:hover, .role-option:focus-visible { color: var(--text); border-color: var(--line); outline: none; }
.role-option.is-selected { color: var(--text); border-color: var(--gold); background: rgba(255, 211, 77, .08); }
.role-mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; color: #08101f; font-size: 19px; text-shadow: none; }
.role-mark.scout { background: var(--mp); }
.role-mark.analyst { background: var(--violet); }
.role-mark.runner { background: var(--hp); }
.role-option b, .role-option small { display: block; font-weight: 400; }
.role-option b { color: inherit; font-size: 12px; white-space: nowrap; }
.role-option small { margin-top: 3px; color: var(--dim); font-size: 9px; line-height: 1.25; }

.hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.start-btn { min-width: 196px; min-height: 52px; font-size: 15px; }
.hero-note { color: var(--dim); font-size: 10px; }

.hero-art {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0b1027;
  border: 4px solid var(--line);
  clip-path: polygon(0 12px, 12px 12px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 12px), 0 calc(100% - 12px));
  filter: drop-shadow(9px 9px 0 rgba(0, 0, 0, .5));
  animation: art-in .7s .14s steps(8) both;
}
@keyframes art-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
.hero-art svg { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.art-caption { position: absolute; right: 14px; bottom: 13px; padding: 7px 10px; color: var(--dim); background: rgba(10, 14, 29, .9); border: 2px solid var(--line); font-size: 10px; }
.live-dot { width: 7px; height: 7px; display: inline-block; margin-right: 5px; background: var(--hp); box-shadow: 0 0 8px var(--hp); animation: blink 1.4s steps(1) infinite; }
.signal-light { animation: signal 1.25s steps(2) infinite; }
.radio-wave { animation: radio 1.8s steps(5) infinite; transform-origin: 560px 222px; }
.flame-a { animation: flame .5s steps(2) infinite; transform-origin: center bottom; }
.flame-b { animation: flame .42s .12s steps(2) infinite reverse; transform-origin: center bottom; }
.hero-pixel { animation: hero-bob 1.1s steps(2) infinite; }
@keyframes signal { 50% { opacity: .28; } }
@keyframes radio { 50% { opacity: .25; } }
@keyframes flame { 50% { transform: scaleY(.75) translateY(7px); } }
@keyframes hero-bob { 50% { transform: translateY(-5px); } }

.game-screen { min-height: calc(100svh - 103px); padding: 34px 0 54px; background: linear-gradient(180deg, rgba(16, 22, 44, .72), rgba(10, 14, 29, .96)); }
.game-screen.is-entering { animation: game-enter .42s steps(6) both; }
@keyframes game-enter { from { opacity: 0; } to { opacity: 1; } }
.game-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 18px; }
.game-toolbar h2 { margin-top: 5px; font-size: clamp(21px, 3vw, 30px); }
.game-toolbar h2::before { content: "▶ "; color: var(--gold); }
.stage-progress { display: flex; align-items: center; gap: 6px; }
.progress-node { width: 12px; height: 12px; background: var(--panel-2); border: 2px solid var(--line); }
.progress-node.done { background: var(--hp); border-color: #2b7d35; }
.progress-node.current { background: var(--gold); border-color: #b8902a; animation: blink 1.2s steps(1) infinite; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; align-items: start; gap: 16px; }
.canvas-frame { --pix: 10px; overflow: hidden; padding: 0; background: #090d1b; }
.canvas-status { min-height: 46px; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 14px; color: var(--dim); background: var(--panel-2); border-bottom: 2px solid var(--line); font-size: 11px; }
.canvas-status span:nth-child(2) { color: var(--gold); }
#gameCanvas { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; background: #0a0e1d; image-rendering: pixelated; outline: none; touch-action: none; }
#gameCanvas:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }

.mission-panel { position: sticky; top: 16px; padding: 19px; }
.mission-id { color: var(--gold); font-size: 10px; letter-spacing: .14em; }
.mission-panel h3 { margin-top: 7px; font-size: 18px; line-height: 1.35; }
.mission-panel > p { margin-top: 10px; color: var(--dim); font-size: 12px; line-height: 1.7; }
.control-guide { display: grid; gap: 6px; margin-top: 15px; }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dim); font-size: 10px; }
.control-row kbd { min-width: 58px; padding: 4px 6px; color: var(--text); text-align: center; background: #080c18; border: 2px solid var(--line-dim); box-shadow: 2px 2px 0 rgba(0, 0, 0, .4); font: inherit; }
.mission-message { min-height: 64px; margin-top: 16px; padding: 10px; color: var(--text); background: rgba(255, 211, 77, .06); border-left: 3px solid var(--gold); font-size: 11px; line-height: 1.65; }

.skill-meter { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--line-dim); }
.skill-meter > div { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 7px; color: var(--dim); font-size: 10px; }
.skill-meter i { height: 9px; overflow: hidden; background: #060a18; border: 1px solid var(--line-dim); }
.skill-meter b { width: 0; height: 100%; display: block; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, #b8902a 6px 8px); transition: width .45s steps(10); }
.skill-meter em { color: var(--text); font-style: normal; text-align: right; }
.panel-actions { display: grid; gap: 7px; margin-top: 17px; }
.panel-actions .pix-btn { width: 100%; font-size: 11px; }
.key-hint { text-align: center; font-size: 8px !important; }

.touch-pad { display: none; grid-template-columns: 1fr 112px; gap: 10px; padding: 12px; background: var(--panel-2); border-top: 2px solid var(--line); }
.touch-arrows { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 42px); gap: 5px; justify-content: center; }
.touch-arrows button, .touch-action { color: var(--text); background: #111832; border: 2px solid var(--line); box-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.touch-arrows button:active, .touch-action:active { color: var(--gold); border-color: var(--gold); translate: 1px 1px; }
.touch-arrows [data-control="up"] { grid-column: 2; }
.touch-arrows [data-control="left"] { grid-column: 1; }
.touch-arrows [data-control="down"] { grid-column: 2; }
.touch-arrows [data-control="right"] { grid-column: 3; }
.touch-action { min-height: 89px; color: #0a0e1d; background: var(--gold); border-color: #b8902a; font-size: 13px; }

.footer { display: flex; justify-content: space-between; gap: 18px; padding: 18px max(20px, calc((100% - 1140px) / 2)); color: #5d668d; background: #070a15; border-top: 2px solid var(--line-dim); font-size: 9px; }

@media (max-width: 980px) {
  .hud-row { align-items: flex-start; }
  .hud-stats .hud-chip { display: none; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 42px; }
  .hero-copy { max-width: 760px; }
  .hero-art { max-width: 760px; margin: 0 auto; }
  .game-layout { grid-template-columns: 1fr; }
  .mission-panel { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); gap: 0 20px; }
  .mission-panel .mission-id, .mission-panel h3, .mission-panel > p, .mission-message { grid-column: 1; }
  .control-guide, .skill-meter, .panel-actions, .key-hint { grid-column: 2; }
  .control-guide { grid-row: 1 / span 3; align-self: end; }
  .skill-meter { grid-row: 4; }
  .panel-actions { grid-row: 5; }
}

@media (max-width: 720px) {
  .wrap { width: min(100% - 24px, 1180px); }
  .hud { padding: 14px 0 12px; }
  .hud-row { align-items: center; }
  .brand { min-width: 0; }
  .brand-title { font-size: clamp(18px, 6vw, 25px); }
  .brand-sub { font-size: 9px; }
  .hud-link { padding: 7px 8px; font-size: 9px; }
  .hero-grid { gap: 32px; padding: 34px 0 42px; }
  .hero h1 { font-size: clamp(36px, 14vw, 56px); }
  .hero h1 span { font-size: .37em; }
  .hero-lead { line-height: 1.7; }
  .role-head { display: block; }
  .role-head p { margin-top: 5px; }
  .role-list { grid-template-columns: 1fr; }
  .role-option { padding: 10px; }
  .role-option small { font-size: 10px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .start-btn { width: 100%; }
  .hero-art { border-width: 3px; }
  .art-caption { right: 8px; bottom: 8px; font-size: 8px; }
  .game-screen { padding-top: 24px; }
  .game-toolbar { align-items: flex-start; }
  .game-toolbar .kicker { font-size: 8px; }
  .stage-progress { margin-top: 7px; }
  .canvas-status { padding: 8px 10px; font-size: 8px; }
  .touch-pad { display: grid; }
  .mission-panel { display: block; padding: 16px; }
  .control-guide { display: none; }
  .footer { display: block; text-align: center; line-height: 1.8; }
  .footer span { display: block; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 42px; }
  .hero-art svg { min-height: 300px; object-fit: cover; object-position: center; }
  .game-toolbar h2 { font-size: 19px; }
  .progress-node { width: 9px; height: 9px; }
  .touch-pad { grid-template-columns: 1fr 92px; }
  .touch-action { min-height: 89px; }
}

@media (pointer: coarse) { .touch-pad { display: grid; } }

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