/* 화면 틀: 폰 세로 한 줄. 위 = 게임 화면(객실·승강장), 아래 = 글상자·메뉴(시작·결과) 또는 기술 버튼(게임 중)
   픽셀 글꼴은 원래 크기의 정수배일 때만 또렷하다. --u(작은 글자), --U(글상자·메뉴) 한 칸의 크기를
   main.js가 기기 화면 배율에 맞춰 정한다 (Galmuri11 = 12칸, Galmuri9 = 10칸, Galmuri7 = 8칸) */
:root {
  --u: 1px;
  --U: 1px;
  --bg: #1b1f27;
  --dark: #11151c;
  --edge: #050608;
  --paper: #fbfaf5;
  --ink: #2a2d36;
  --ink-soft: #6b7280;
  --ink-shadow: #dcdad0;
  --frame: #2a2d36;
  --frame-in: #b9c6d6;
  --yellow: #ffd23f;
  --red: #e8473b;
  --blue: #4a9cf0;
  --line: #00a84d;
  --f11: "Galmuri11", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f9: "Galmuri9", "Galmuri11", sans-serif;
  --f7: "Galmuri7", "Galmuri9", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow-x: hidden; background: var(--bg); color: #eef2f6; -webkit-text-size-adjust: 100%; }
body { font: calc(var(--u) * 12)/1.5 var(--f11); word-break: keep-all; overflow-wrap: anywhere; overscroll-behavior: none; touch-action: manipulation; -webkit-font-smoothing: none; }
button, input { font: inherit; color: inherit; }

#app {
  position: relative; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 4 + env(safe-area-inset-top, 0px)) calc(var(--u) * 4) calc(var(--u) * 6 + env(safe-area-inset-bottom, 0px));
}
/* 시작·고르기·결과 화면은 창 높이에 딱 맞추고, 긴 메뉴는 메뉴 안에서만 스크롤한다 */
#app:not([data-mode="play"]) { height: 100vh; height: 100dvh; }

/* ---------- 테두리 있는 글상자 (안쪽에 옅은 선 한 줄, 모서리는 한 칸씩 깎는다) ---------- */
.box {
  --c: calc(var(--U) * 2);
  position: relative; margin: 0;
  background: var(--paper); color: var(--ink);
  border: calc(var(--U) * 2) solid var(--frame);
  box-shadow: inset 0 0 0 var(--U) var(--paper), inset 0 0 0 calc(var(--U) * 2) var(--frame-in);
  padding: calc(var(--U) * 5) calc(var(--U) * 8);
  font: calc(var(--U) * 12)/1.5 var(--f11);
  text-shadow: var(--U) var(--U) 0 var(--ink-shadow);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* ---------- 게임 화면 ---------- */
#stage-wrap { position: relative; align-self: center; --vig: 0; }
#stage { border: calc(var(--u) * 2) solid var(--edge); background: #0e131a; image-rendering: pixelated; }
#stage canvas { display: block; image-rendering: pixelated; }
/* 숨막힘이 높으면 화면 가장자리가 어두워진다 */
#stage-wrap::after { content: ""; position: absolute; inset: calc(var(--u) * 2); pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(8, 14, 32, 0.9) 100%); opacity: var(--vig); transition: opacity 0.2s; }
#banner { position: absolute; left: 0; right: 0; top: 38%; z-index: 3; margin: 0; text-align: center; color: var(--yellow); font: bold calc(var(--U) * 24)/1 var(--f11); text-shadow: calc(var(--U) * 2) calc(var(--U) * 2) 0 #000, calc(var(--U) * -1) calc(var(--U) * -1) 0 #000; pointer-events: none; }
#banner.pop { animation: banner 1.3s steps(12) forwards; }
@keyframes banner { 0% { transform: scale(2); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
#combo { position: absolute; right: calc(var(--u) * 8); top: calc(var(--u) * 40); z-index: 3; margin: 0; color: var(--yellow); font: bold calc(var(--u) * 12)/1 var(--f11); text-shadow: var(--u) var(--u) 0 #000, calc(var(--u) * -1) 0 0 #000; pointer-events: none; }

/* 게임 화면 아래쪽에 겹쳐 뜨는 해설 글상자. 다 나오면 오른쪽 아래에 ▼ */
.talk { position: absolute; left: calc(var(--U) * 4); right: calc(var(--U) * 4); bottom: calc(var(--U) * 4); z-index: 5; min-height: calc(var(--U) * 46); padding-right: calc(var(--U) * 16); }
.talk .txt { margin: 0; white-space: pre-line; }
.talk .next { position: absolute; right: calc(var(--U) * 7); bottom: calc(var(--U) * 6); width: calc(var(--U) * 7); height: calc(var(--U) * 4); background: var(--red); clip-path: polygon(0 0, 100% 0, 50% 100%); display: none; animation: bob 0.7s steps(2) infinite; }
.talk.ready:not(.nowait) .next { display: block; }
@keyframes bob { 50% { transform: translateY(calc(var(--U) * 2)); } }

/* ---------- 아래 패널: 시작 화면, 메뉴, 진단 카드, 결과 ---------- */
#panel {
  flex: 1 1 auto; min-height: calc(var(--U) * 120);
  display: flex; flex-direction: column; gap: calc(var(--U) * 4);
  padding: calc(var(--U) * 4); overflow-y: auto;
  background: repeating-linear-gradient(135deg, #232833 0 calc(var(--u) * 6), #272d39 calc(var(--u) * 6) calc(var(--u) * 12));
  border: calc(var(--u) * 2) solid var(--edge);
}
.press { flex: 1; display: grid; place-content: center; gap: calc(var(--U) * 12); text-align: center; min-height: calc(var(--U) * 100); cursor: pointer; }
.press .blink { margin: 0; color: #fff; font: calc(var(--U) * 12)/1 var(--f11); text-shadow: var(--U) var(--U) 0 #000; animation: blink 1s steps(2) infinite; }
.press .blink::before { content: "▶ "; color: var(--yellow); }
.hint { margin: auto; color: #8a95a3; font: calc(var(--u) * 10)/1 var(--f9); animation: blink 1.2s steps(2) infinite; }
.press .copy { margin: 0; color: #9aa6b4; font: calc(var(--u) * 10)/1.4 var(--f9); }

/* 출근길을 고르는 동안은 아래 칸을 넉넉히 잡는다 (짧은 폰 화면에서 진단 카드와 선택지가 같이 들어가게) */
#app[data-mode="setup"] #panel { min-height: calc(var(--U) * 200); }
/* 선택 메뉴: ▶ 커서가 붙은 줄을 누르면 바로 고른다 */
.menu { --cols: 1; flex: 0 1 auto; min-height: min(100%, calc(var(--U) * 60)); display: flex; flex-direction: column; gap: calc(var(--U) * 3); overflow: hidden; padding: calc(var(--U) * 4) calc(var(--U) * 5); }
.menu .opts { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 calc(var(--U) * 6); overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.opt { display: flex; align-items: center; gap: calc(var(--U) * 3); width: 100%; min-height: calc(var(--U) * 20); padding: calc(var(--U) * 2) calc(var(--U) * 2); background: none; border: 0; text-align: left; text-shadow: inherit; cursor: pointer; }
.opt .cur { flex: none; width: calc(var(--U) * 5); height: calc(var(--U) * 8); background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); visibility: hidden; }
.opt.on .cur { visibility: visible; animation: nudge 0.7s steps(2) infinite; }
.opt.on { background: #fff3c4; }
@keyframes nudge { 50% { transform: translateX(var(--U)); } }
.opt .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt small { margin-left: auto; padding-left: calc(var(--U) * 4); color: var(--ink-soft); font: calc(var(--U) * 10)/1 var(--f9); white-space: nowrap; }
.opt .badge, .badge { flex: none; display: inline-grid; place-items: center; width: calc(var(--U) * 14); height: calc(var(--U) * 14); border-radius: 50%; background: var(--line); color: #fff; font: calc(var(--U) * 8)/1 var(--f7); text-shadow: none; }
.menu .search { width: 100%; padding: calc(var(--U) * 3) calc(var(--U) * 4); background: #fff; color: var(--ink); border: var(--U) solid var(--frame-in); border-radius: 0; font: calc(var(--U) * 12)/1.2 var(--f11); text-shadow: none; outline: none; }
.menu .search:focus { border-color: var(--frame); }
.menu .note, .menu .empty { margin: 0; color: var(--ink-soft); font: calc(var(--u) * 10)/1.4 var(--f9); text-shadow: none; }
.back { align-self: flex-start; padding: calc(var(--U) * 2) calc(var(--U) * 8); font: calc(var(--U) * 10)/1.4 var(--f9); cursor: pointer; }

/* 진단 카드: 등급, 서울 출근길 중 순위, 역마다 출발 혼잡도 막대 */
.diag, .vcard { padding: calc(var(--u) * 5) calc(var(--u) * 7); font-size: calc(var(--u) * 12); border-width: calc(var(--u) * 2); box-shadow: inset 0 0 0 var(--u) var(--paper), inset 0 0 0 calc(var(--u) * 2) var(--frame-in); text-shadow: var(--u) var(--u) 0 var(--ink-shadow); --c: calc(var(--u) * 2); }
.diag { flex: none; display: grid; gap: calc(var(--u) * 4); }
.rt-head { display: flex; align-items: center; gap: calc(var(--u) * 4); min-width: 0; }
.rt-head .badge { width: calc(var(--u) * 14); height: calc(var(--u) * 14); font-size: calc(var(--u) * 8); }
.rt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-sub { margin-left: auto; color: var(--ink-soft); font: calc(var(--u) * 10)/1.2 var(--f9); white-space: nowrap; }
.dg-grade { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.grade { display: grid; place-items: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); color: #fff; font: bold calc(var(--u) * 24)/1 var(--f11); text-shadow: var(--u) var(--u) 0 #000; border: calc(var(--u) * 2) solid var(--frame); }
.g-S { background: #d83a3a; } .g-A { background: #e8792b; } .g-B { background: #d9a91c; } .g-C { background: #5a9a4a; } .g-D { background: #4a86c8; }
.dg-text { display: grid; }
.dg-text span { color: var(--ink-soft); font: calc(var(--u) * 10)/1.4 var(--f9); }
.dg-bars { position: relative; display: flex; align-items: flex-end; gap: var(--u); height: calc(var(--u) * 34); padding: 0 var(--u); background: #eef1f5; border-bottom: var(--u) solid var(--frame); }
.dg-bars i { flex: 1; min-width: var(--u); background: var(--line); }
.dg-bars i.worst { background: var(--red); }
.dg-bars .cap { position: absolute; left: 0; right: 0; height: 0; border-top: var(--u) dashed #9aa4b2; background: none; flex: none; }
.dg-ends { display: flex; justify-content: space-between; gap: calc(var(--u) * 4); color: var(--ink-soft); font: calc(var(--u) * 10)/1.2 var(--f9); }
.dg-ends span:nth-child(2) { color: var(--red); text-align: center; }
.dg-src { margin: 0; color: var(--ink-soft); font: calc(var(--u) * 8)/1.4 var(--f7); text-shadow: none; }
.info { flex: 1 1 auto; overflow-y: auto; font: calc(var(--u) * 12)/1.6 var(--f11); }
.info p { margin: 0 0 calc(var(--u) * 6); }

/* 결과 카드 (게임 화면 위) */
#card { position: absolute; inset: calc(var(--u) * 2); z-index: 4; display: grid; place-items: center; padding: calc(var(--u) * 4); background: rgba(8, 10, 14, 0.55); }
.vcard { width: 100%; max-height: 100%; overflow-y: auto; display: grid; gap: calc(var(--u) * 4); }
.vc-main { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.vc-me { width: calc(var(--u) * 32); height: calc(var(--u) * 48); image-rendering: pixelated; flex: none; }
.vc-title { display: grid; min-width: 0; }
.vc-title small { color: var(--ink-soft); font: calc(var(--u) * 10)/1.2 var(--f9); }
.vc-title b { color: #b8322a; }
.vc-score { font: bold calc(var(--u) * 24)/1.1 var(--f11); }
.vc-stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2) calc(var(--u) * 8); }
.vc-stats div { display: flex; justify-content: space-between; gap: calc(var(--u) * 4); border-bottom: var(--u) dotted #c7ced8; }
.vc-stats dt { color: var(--ink-soft); font: calc(var(--u) * 10)/1.6 var(--f9); white-space: nowrap; }
.vc-stats dd { margin: 0; white-space: nowrap; }
.vc-foot { margin: 0; color: var(--ink-soft); font: calc(var(--u) * 8)/1 var(--f7); text-align: right; text-shadow: none; }

/* ---------- 게임 중 위쪽: 노선·게이지 ---------- */
#hud { display: grid; gap: calc(var(--u) * 3); }
.route-bar, .gauge, .score { background: var(--dark); border: calc(var(--u) * 2) solid var(--edge); }
.route-bar { display: flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 2) calc(var(--u) * 4); min-width: 0; }
.route-bar .badge { width: calc(var(--u) * 14); height: calc(var(--u) * 14); font-size: calc(var(--u) * 8); }
.route { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.cong { color: #9aa6b4; font: calc(var(--u) * 10)/1 var(--f9); white-space: nowrap; }
.cong b { color: #fff; font: calc(var(--u) * 12)/1 var(--f11); }
.clock { color: var(--yellow); }
.view-btn { padding: calc(var(--u) * 1) calc(var(--u) * 4); background: #232833; border: var(--u) solid #3a4252; color: #c9d1db; font: calc(var(--u) * 10)/1.4 var(--f9); white-space: nowrap; cursor: pointer; }
.gauges { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: calc(var(--u) * 3); }
.gauge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 4); position: relative; }
.gauge .lbl { color: #c9d1db; font: calc(var(--u) * 10)/1 var(--f9); white-space: nowrap; }
.gauge .track { height: calc(var(--u) * 6); background: #2a303b; border: var(--u) solid var(--edge); }
.gauge .track i { display: block; height: 100%; width: 0; background: #ffb13d; transition: width 0.12s steps(3); }
.gauge b { font: calc(var(--u) * 10)/1 var(--f9); color: #fff; min-width: calc(var(--u) * 22); text-align: right; }
.gauge .film { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * -9); color: var(--yellow); font: calc(var(--u) * 8)/1 var(--f7); animation: blink 0.8s steps(2) infinite; }
.gauge .film b { font: inherit; min-width: 0; margin-left: var(--u); color: inherit; }
#report.hot .track i { background: var(--red); }
#report.full { animation: shake 0.3s steps(2) infinite; }
#breath .track i { background: var(--blue); }
#breath.hot .track { animation: shake 0.4s steps(2) infinite; }
.score { display: grid; justify-items: end; align-content: center; padding: 0 calc(var(--u) * 5); line-height: 1.1; }
.score span, .score small { color: #9aa6b4; font: calc(var(--u) * 8)/1.2 var(--f7); }
.score b { color: #fff; }

/* ---------- 게임 중 아래쪽: 글상자, 역 진행, 기술 버튼 ---------- */
/* 게임 중 아래쪽: 글상자는 화면 바로 밑, 역 진행과 버튼은 엄지가 닿는 맨 아래로 */
#play { flex: 1 0 auto; display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
#play #stations { margin-top: auto; }
.msg { min-height: calc(var(--U) * 18 * 2 + var(--U) * 14); padding-top: calc(var(--U) * 4); padding-bottom: calc(var(--U) * 4); }
#stations { list-style: none; margin: 0; padding: 0 calc(var(--u) * 2); min-height: calc(var(--u) * 26); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
#stations li { position: relative; display: grid; justify-items: center; gap: calc(var(--u) * 2); color: #8a95a3; font: calc(var(--u) * 10)/1.2 var(--f9); --p: 0; min-width: 0; }
#stations li span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stations li i { position: relative; z-index: 1; width: calc(var(--u) * 8); height: calc(var(--u) * 8); background: var(--bg); border: calc(var(--u) * 2) solid #3a4252; }
#stations li::before { content: ""; position: absolute; top: calc(var(--u) * 3); left: 50%; width: 100%; height: calc(var(--u) * 2); background: #3a4252; }
#stations li::after { content: ""; position: absolute; top: calc(var(--u) * 3); left: 50%; height: calc(var(--u) * 2); width: calc(100% * var(--p)); background: var(--line); }
#stations li.gap::before { background: repeating-linear-gradient(90deg, #3a4252 0 calc(var(--u) * 2), transparent calc(var(--u) * 2) calc(var(--u) * 4)); }
#stations li:last-child::before, #stations li:last-child::after { display: none; }
#stations li.done i, #stations li.here i { border-color: var(--line); background: var(--line); }
#stations li.here { color: #fff; }
#stations li.goal i { border-color: var(--yellow); }
#skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.skill {
  position: relative; display: grid; justify-items: center; align-content: center; gap: calc(var(--u) * 2);
  min-height: calc(var(--u) * 52); padding: calc(var(--u) * 4) calc(var(--u) * 2); overflow: hidden;
  background: var(--paper); color: var(--ink); border: calc(var(--u) * 2) solid var(--frame);
  box-shadow: inset 0 calc(var(--u) * -3) 0 #d5d9e0; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.skill:active { transform: translateY(var(--u)); box-shadow: inset 0 calc(var(--u) * -1) 0 #d5d9e0; }
.skill img { width: calc(var(--u) * 32); height: calc(var(--u) * 32); image-rendering: pixelated; }
.skill .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: calc(var(--u) * 10)/1.1 var(--f9); }
.skill kbd { position: absolute; top: calc(var(--u) * 1); left: calc(var(--u) * 3); color: #9aa3b0; font: calc(var(--u) * 8)/1 var(--f7); }
.skill .cd { position: absolute; inset: 0; background: rgba(20, 24, 32, 0.62); transform-origin: bottom; transform: scaleY(var(--cd, 0)); pointer-events: none; }
.skill.off { opacity: 0.45; }
.skill.locked { opacity: 0.55; }
.skill .lock { position: absolute; top: calc(var(--u) * 1); right: calc(var(--u) * 2); color: #9aa3b0; font: calc(var(--u) * 8)/1 var(--f7); }
@media (hover: hover) { .skill:hover { background: #fff6d6; } .opt:hover { background: #fff3c4; } }

@keyframes blink { 50% { opacity: 0.25; } }
@keyframes shake { 50% { transform: translateX(var(--u)); } }
@media (prefers-reduced-motion: reduce) { .talk .next, .opt.on .cur, .press .blink, #report.full, #breath.hot .track { animation: none; } }