:root {
  --ink: #1a1c2c;
  --plum: #5d275d;
  --red: #b13e53;
  --orange: #ef7d57;
  --yellow: #ffcd75;
  --lime: #a7f070;
  --green: #38b764;
  --teal: #257179;
  --navy: #29366f;
  --blue: #3b5dc9;
  --sky: #41a6f6;
  --cyan: #73eff7;
  --white: #f4f4f4;
  --mist: #94b0c2;
  --slate: #566c86;
  --dusk: #333c57;
  --font: 'Galmuri11', 'Galmuri9', 'Apple SD Gothic Neo', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  image-rendering: pixelated;
  overflow-x: hidden;
}
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font-family: inherit; }

.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; }

/* ---------- 공통 픽셀 UI ---------- */
.panel {
  background: var(--dusk);
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--slate), 6px 6px 0 #0008;
  padding: 18px;
}
.px-btn {
  background: var(--orange);
  color: var(--ink);
  border: 0;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset -3px -3px 0 #0005, inset 3px 3px 0 #fff6, 0 0 0 3px var(--ink);
  margin: 3px;
}
.px-btn:hover { filter: brightness(1.1); }
.px-btn:active { box-shadow: inset 3px 3px 0 #0005, 0 0 0 3px var(--ink); transform: translateY(1px); }
.px-btn:disabled { background: var(--slate); color: var(--dusk); cursor: not-allowed; }
.px-btn.big { font-size: 18px; padding: 12px 22px; }
.px-btn.sm { padding: 6px 9px; font-size: 13px; }
.px-btn.ghost { background: var(--mist); }
.px-btn.wide { width: calc(100% - 6px); }
.px-btn.go { background: var(--lime); }
.px-input {
  background: var(--ink);
  color: var(--white);
  border: 0;
  box-shadow: inset 0 0 0 3px var(--slate);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  min-width: 0;
}
.px-input:focus { outline: none; box-shadow: inset 0 0 0 3px var(--yellow); }
.px-input.short { width: 64px; }
kbd { background: var(--ink); padding: 1px 5px; border: 2px solid var(--slate); font-family: inherit; font-size: 12px; }

/* ---------- 타이틀 ---------- */
.title-wrap { text-align: center; padding: 16px; }
#title-canvas { width: min(640px, 92vw); height: auto; border: 4px solid var(--ink); }
.logo { font-size: clamp(36px, 9vw, 64px); margin: 16px 0 4px; color: var(--yellow); text-shadow: 4px 4px 0 var(--red), 8px 8px 0 var(--ink); letter-spacing: 2px; }
.logo small { display: block; font-size: 16px; color: var(--cyan); text-shadow: 2px 2px 0 var(--ink); letter-spacing: 6px; margin-top: 6px; }
.blink { animation: blink 1s steps(2) infinite; color: var(--mist); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 설정 ---------- */
#screen-setup { padding: 16px; background: var(--ink); }
.setup-grid { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; gap: 16px; width: 100%; max-width: 1280px; margin: 0 auto; }
.form h2 { margin: 0 0 12px; color: var(--yellow); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.row.col { flex-direction: column; align-items: stretch; }
.row > label { color: var(--cyan); min-width: 60px; }
.row em { color: var(--mist); font-style: normal; font-size: 12px; }
.addr { display: flex; gap: 4px; align-items: center; }
.addr .px-input { flex: 1; }
.seg { display: flex; }
.seg button, .modes button, .moods button {
  background: var(--ink); color: var(--mist); border: 0; box-shadow: inset 0 0 0 2px var(--slate);
  padding: 7px 10px; cursor: pointer; font-size: 13px;
}
.seg button.on, .modes button.on, .moods button.on { background: var(--blue); color: var(--white); box-shadow: inset 0 0 0 2px var(--cyan); }
.modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.modes button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; }
.modes b { font-size: 14px; font-weight: normal; }
.modes span { font-size: 10px; opacity: .8; }
.moods { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.moods button { text-align: left; font-size: 12px; line-height: 1.4; }
.moods button[data-v="intense"].on { background: var(--orange); color: var(--ink); }
.moods button[data-v="fastest"].on { background: var(--red); animation: shake .25s infinite; }
@keyframes shake { 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
#stage-face { width: 32px; height: 40px; }
.seg[hidden] { display: none; }
.results { list-style: none; margin: 4px 0 0; padding: 0; max-height: 150px; overflow-y: auto; }
.results li { padding: 6px 8px; cursor: pointer; border-bottom: 2px solid var(--ink); background: #1a1c2c99; font-size: 13px; }
.results li small { display: block; color: var(--mist); font-size: 11px; }
.results li:hover { background: var(--navy); }
.chosen { font-size: 12px; color: var(--lime); min-height: 1em; }
.clock { color: var(--yellow); font-size: 18px; }
.chk { font-size: 12px; color: var(--mist); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.api-status { font-size: 11px; color: var(--mist); margin-bottom: 8px; line-height: 1.6; }
.api-status b { color: var(--lime); font-weight: normal; }
.api-status i { color: var(--orange); font-style: normal; }

.mapbox { position: relative; padding: 0; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; }
#map { flex: 1; min-height: 360px; background: var(--navy); }
.leaflet-tile-pane { filter: saturate(1.3) contrast(1.05); }
.leaflet-tile { image-rendering: pixelated; }
.leaflet-container { font-family: var(--font); }
.map-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 500; background: var(--yellow); color: var(--ink); padding: 6px 12px; box-shadow: 0 0 0 3px var(--ink); display: none; }
.map-hint.show { display: block; }
.route-info { padding: 12px 16px; background: var(--dusk); border-top: 4px solid var(--ink); }
.route-info ol { margin: 0 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.7; }
.route-info ol li::marker { color: var(--yellow); }
.route-sum { color: var(--yellow); margin-bottom: 8px; font-size: 13px; }
.pin { width: 28px !important; height: 28px !important; image-rendering: pixelated; }

/* ---------- 게임 ---------- */
#screen-game { align-items: center; justify-content: center; background: #0d0e17; }
.game-wrap { width: min(1100px, 100vw); padding: 8px; }
.hud { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--ink); padding: 8px 12px; border: 3px solid var(--slate); }
.hud-clock { font-size: 26px; color: var(--yellow); }
.hud-leg { font-size: 12px; color: var(--cyan); }
.hud-bars { display: flex; flex-direction: column; gap: 4px; }
.bar { display: grid; grid-template-columns: 60px 1fr 64px; gap: 8px; align-items: center; font-size: 12px; }
.bar b { font-weight: normal; text-align: right; }
.bar[hidden] { display: none; }
.gauge { height: 12px; background: var(--dusk); box-shadow: 0 0 0 2px var(--slate); position: relative; }
.gauge i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--green); transition: width .2s steps(4); }
.gauge.prog i { background: var(--sky); }
.gauge i.low { background: var(--red); }
.money { font-size: 16px; color: var(--lime); text-align: right; }
.hud-score { font-size: 13px; color: var(--yellow); text-align: right; }
.hud-inv { font-size: 12px; text-align: right; min-height: 1em; }
.gauge.mood i { background: var(--orange); }
.missions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--yellow); padding: 6px 8px 0; }
.missions span { color: var(--mist); }
.missions span.done { color: var(--lime); }
.collection { font-size: 12px; color: var(--mist); margin-bottom: 10px; line-height: 1.8; }
.collection b { color: var(--yellow); font-weight: normal; }
.collection .got { color: var(--lime); }
.card-preview { display: block; width: 100%; max-width: 320px; margin: 12px auto 0; border: 3px solid var(--ink); }
.hud-weather { font-size: 11px; color: var(--cyan); text-align: right; }
.weather-now { font-size: 12px; color: var(--cyan); }
select.px-input { cursor: pointer; }
.mood-tag { font-size: 10px; color: var(--orange); text-align: right; max-width: 180px; }
.stage { position: relative; border: 3px solid var(--slate); border-top: 0; }
#game-canvas { display: block; width: 100%; height: auto; background: #000; }
#minimap { position: absolute; right: 8px; top: 8px; width: 22%; aspect-ratio: 4/3; border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--slate); z-index: 5; }
#minimap .leaflet-control-container { display: none; }
.banner { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); background: var(--ink); color: var(--yellow); padding: 8px 16px; font-size: clamp(14px, 2.4vw, 22px); box-shadow: 0 0 0 3px var(--yellow); opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; z-index: 6; }
.banner.show { opacity: 1; }
.dialog { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: #0006; z-index: 10; padding: 2%; }
.dialog[hidden] { display: none; }
.dlg-box { display: flex; gap: 14px; width: 100%; background: var(--ink); border: 4px solid var(--white); box-shadow: 0 0 0 4px var(--ink); padding: 12px; }
#dlg-portrait { width: clamp(64px, 12vw, 120px); height: clamp(64px, 12vw, 120px); image-rendering: pixelated; background: var(--dusk); border: 3px solid var(--slate); flex: none; }
.dlg-body { flex: 1; min-width: 0; }
.dlg-name { color: var(--yellow); margin-bottom: 6px; }
.dlg-text { font-size: clamp(13px, 1.8vw, 16px); line-height: 1.6; min-height: 3em; white-space: pre-line; }
.dlg-text .fx { color: var(--cyan); font-size: 13px; }
.dlg-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dlg-choices .px-btn { font-size: 13px; text-align: left; }
.dlg-choices .px-btn small { opacity: .75; }
.qte { width: 100%; cursor: pointer; user-select: none; touch-action: manipulation; }
.qte-label { color: var(--yellow); margin-bottom: 6px; animation: blink .5s steps(2) infinite; }
.qte.win .qte-label { color: var(--lime); animation: none; }
.qte.lose .qte-label { color: var(--red); animation: none; }
.qte-bar { position: relative; height: 22px; background: var(--dusk); box-shadow: 0 0 0 3px var(--slate); }
.qte-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--orange); }
.qte-zone { position: absolute; top: 0; bottom: 0; background: var(--green); }
.qte-marker { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: var(--white); box-shadow: 0 0 0 2px var(--ink); }
.qte-time { font-size: 11px; color: var(--mist); margin-top: 4px; text-align: right; }
.controls { display: flex; gap: 18px; justify-content: center; font-size: 12px; color: var(--mist); padding: 8px; flex-wrap: wrap; }

/* ---------- 결과 ---------- */
#screen-end { align-items: center; justify-content: center; padding: 16px; background: linear-gradient(var(--ink), var(--navy)); }
.end-wrap { text-align: center; max-width: 560px; width: 100%; }
#end-canvas { width: 100%; max-width: 480px; height: auto; border: 4px solid var(--ink); }
#end-title { color: var(--yellow); font-size: 26px; margin: 12px 0 6px; }
#end-desc { color: var(--white); line-height: 1.6; white-space: pre-line; }
#end-stats { list-style: none; padding: 0; text-align: left; display: inline-block; margin: 8px 0 14px; line-height: 1.8; }
#end-stats li b { color: var(--cyan); font-weight: normal; display: inline-block; min-width: 110px; }
.end-btns { display: flex; justify-content: center; flex-wrap: wrap; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px); background: var(--yellow); color: var(--ink); padding: 10px 18px; box-shadow: 0 0 0 3px var(--ink); transition: transform .25s; z-index: 9999; }
.toast.show { transform: translateX(-50%) translateY(0); }

@media (max-width: 860px) {
  .setup-grid { grid-template-columns: 1fr; }
  .mapbox { min-height: 420px; }
  .modes { grid-template-columns: repeat(3, 1fr); }
  .moods { grid-template-columns: 1fr; }
  #minimap { width: 28%; }
  .hud { grid-template-columns: auto 1fr; }
  .hud-r { grid-column: 1 / -1; display: flex; justify-content: space-between; }
}
.collection .hint { color: var(--slate); }

/* =========================================================
   첫 화면: 지하철 전광판 테마 (LED 노란 글씨 · 블록 막대)
   ========================================================= */
:root { --board: #10121c; --board-2: #181b29; --led: #ffcd75; --led-dim: #6b5a3a; --rail: #2a2f45; }
.board { background: var(--board); background-image: linear-gradient(var(--rail) 1px, transparent 1px); background-size: 100% 28px; color: var(--white); font-family: var(--font); }
.landing { flex-direction: column; align-items: center; display: none; }
.landing.active { display: flex; }
.land { width: 100%; max-width: 820px; padding: 22px 16px 120px; }

.sign { display: flex; align-items: stretch; border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--slate), 6px 6px 0 #0008; background: var(--board-2); margin-bottom: 16px; }
.sign .line-badge { background: var(--green); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px; padding: 0 14px; min-width: 64px; }
.sign .sign-body { padding: 12px 16px; flex: 1; }
.sign .meta { font-size: 11px; color: var(--mist); letter-spacing: 1px; }
.headline { font-family: var(--font); font-weight: normal; font-size: clamp(30px, 7vw, 54px); color: var(--led); text-shadow: 0 0 8px rgba(255,205,117,.45), 3px 3px 0 var(--ink); margin: 4px 0 2px; letter-spacing: 2px; }
.headline em { font-style: normal; color: var(--orange); }
.lead { font-size: 13px; line-height: 1.8; color: var(--mist); margin: 0 0 16px; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.kpis div { background: var(--board-2); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--rail); padding: 10px 12px; }
.kpis b { display: block; font-weight: normal; font-size: 22px; color: var(--led); text-shadow: 0 0 6px rgba(255,205,117,.35); font-variant-numeric: tabular-nums; }
.kpis span { font-size: 11px; color: var(--mist); }
.live-now { font-size: 12px; margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--white); }
.live-tag { background: var(--red); color: var(--white); padding: 2px 6px; font-size: 10px; animation: blink 1s steps(2) infinite; }
.live-now .ticker { color: var(--cyan); }

.block { margin-bottom: 26px; }
.block h3 { font-family: var(--font); font-weight: normal; font-size: 16px; color: var(--ink); background: var(--led); display: inline-block; padding: 4px 10px; margin: 0 0 6px; }
.block .sub { color: var(--mist); font-size: 11px; margin: 0 0 10px; }
.panel-board { background: var(--board-2); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--rail); padding: 12px 14px; }
.empty { color: var(--slate); font-size: 12px; }

/* 어디서 어디로 */
.flow-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
#kmap { width: 100%; height: auto; background: #0b0d16; border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--rail); image-rendering: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: var(--mist); margin-bottom: 10px; }
.legend i { display: inline-block; width: 14px; height: 6px; vertical-align: middle; margin-right: 4px; }
.departures { width: 100%; border-collapse: collapse; font-size: 12px; }
.departures th { text-align: left; color: var(--slate); font-weight: normal; font-size: 10px; padding: 0 4px 6px; border-bottom: 2px solid var(--rail); }
.departures td { padding: 7px 4px; border-bottom: 1px dashed var(--rail); color: var(--led); white-space: nowrap; }
.departures td.mode { color: var(--ink); }
.departures td.mode span { padding: 1px 5px; }
.departures td.num { text-align: right; color: var(--white); }

/* LED 블록 막대 */
.bar-row { display: grid; grid-template-columns: 84px 1fr 92px; gap: 10px; align-items: center; font-size: 12px; padding: 4px 0; }
.bar-row .track { height: 12px; background: repeating-linear-gradient(90deg, var(--rail) 0 6px, transparent 6px 8px); }
.bar-row .fill { height: 100%; background: repeating-linear-gradient(90deg, var(--fill, var(--green)) 0 6px, transparent 6px 8px); }
.bar-row b { font-weight: normal; text-align: right; color: var(--led); }
.block.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hist, .hours { height: 140px; padding: 12px 10px 26px; position: relative; display: flex; align-items: flex-end; gap: 4px; }
.hist .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.hist .col i { width: 100%; min-height: 3px; background: repeating-linear-gradient(0deg, var(--sky) 0 5px, transparent 5px 7px); }
.hist .col span { position: absolute; bottom: -18px; font-size: 10px; color: var(--mist); white-space: nowrap; }
.hist .col b { font-weight: normal; font-size: 10px; color: var(--led); margin-bottom: 2px; }
.hours { gap: 2px; }
.hours i { flex: 1; display: block; min-height: 3px; background: repeating-linear-gradient(0deg, var(--orange) 0 5px, transparent 5px 7px); }
.hours i.zero { background: var(--rail); }
.hours .lbl { position: absolute; bottom: 6px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: var(--mist); }

/* 남겨진 퇴근길: 승차권 모양 */
.feed { display: flex; flex-direction: column; gap: 10px; }
.ticket { background: var(--white); color: var(--ink); position: relative; padding: 12px 16px 12px 22px; border-left: 6px dashed var(--board); }
.ticket .who { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--slate); margin-bottom: 6px; }
.ticket .who b { font-weight: normal; font-size: 14px; color: var(--ink); margin-right: 6px; }
.ticket .route { font-size: 15px; color: var(--navy); margin-bottom: 6px; }
.ticket .story { font-size: 12px; line-height: 1.8; margin: 0 0 6px; color: var(--dusk); }
.ticket .quote { font-size: 13px; margin: 4px 0 8px; color: var(--plum); }
.ticket .ending { font-size: 11px; color: var(--red); margin-bottom: 4px; }
.clap { font: inherit; font-size: 11px; background: var(--led); color: var(--ink); border: 0; box-shadow: 0 0 0 2px var(--ink); padding: 3px 9px; cursor: pointer; }
.clap.on { background: var(--lime); }
#title-canvas { display: block; width: 100%; height: 150px; object-fit: cover; border: 3px solid var(--ink); margin: 6px 0 14px; }
.foot { font-size: 10px; color: var(--slate); line-height: 1.7; }
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 12px 16px 20px; background: linear-gradient(transparent, var(--board) 50%); pointer-events: none; z-index: 20; }
.cta { pointer-events: auto; font: 20px var(--font); background: var(--led); color: var(--ink); border: 0; padding: 14px 40px; cursor: pointer; box-shadow: inset -4px -4px 0 #0004, inset 4px 4px 0 #fff8, 0 0 0 4px var(--ink), 0 8px 0 4px #0006; }
.cta:active { transform: translateY(3px); }
@media (max-width: 760px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .flow-wrap, .block.two { grid-template-columns: 1fr; }
}

/* ---------- 결과: 퇴근길 이야기 (픽셀) ---------- */
.life { border-top: 3px dashed var(--slate); border-bottom: 3px dashed var(--slate); margin: 14px 0; padding: 12px 0; text-align: left; }
.life-head { font-size: 12px; color: var(--mist); margin: 0 0 6px; }
.life-head b { font-weight: normal; font-size: 15px; color: var(--yellow); margin-right: 6px; }
.life-story { font-size: 13px; line-height: 1.9; margin: 0 0 10px; color: var(--white); }
.share-life { display: flex; gap: 6px; }
.share-life[hidden] { display: none; }
.share-life .px-input { flex: 1; }
.share-note { font-size: 11px; color: var(--mist); margin: 6px 0 0; }

.ticket-btns { display: flex; justify-content: space-between; align-items: center; }
.report { font: inherit; font-size: 10px; background: none; border: 0; color: var(--slate); cursor: pointer; }
.report:hover { color: var(--red); }

.foot a, .addr-note a { color: var(--cyan); }
.addr-note { font-size: 11px; color: var(--mist); line-height: 1.6; margin: -4px 0 10px; }

/* ---------- 광고 ---------- */
.ad-frame { position: relative; min-height: 90px; margin: 14px auto 0; max-width: 728px; }
.ad-frame[hidden] { display: none; }
.ad-board .ad-frame { border: 3px solid var(--ink); box-shadow: inset 0 0 0 3px var(--rail); background: var(--board-2); padding: 10px; }
.ad-tag { position: absolute; top: 2px; right: 4px; font-size: 9px; color: var(--mist); background: var(--ink); padding: 0 4px; z-index: 1; }
.ad-placeholder { border: 2px dashed var(--slate); color: var(--slate); text-align: center; padding: 28px 10px; font-size: 12px; line-height: 1.7; }
.fake-ad { position: fixed; inset: 0; background: #000c; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.fake-ad > div { background: var(--white); color: var(--ink); padding: 26px 34px; text-align: center; box-shadow: 0 0 0 4px var(--ink); }
.fake-ad span { display: block; font-size: 34px; color: var(--red); margin: 8px 0; }
.fake-ad button { font: inherit; font-size: 11px; background: none; border: 0; color: var(--slate); cursor: pointer; text-decoration: underline; }

/* ---------- 공유 ---------- */
.share-main { background: var(--lime); }
.tell-friend { text-align: center; margin: 0 0 14px; }
.share-sheet { position: fixed; inset: 0; background: #000b; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.share-sheet[hidden] { display: none; }
.share-box { width: 100%; max-width: 460px; background: var(--dusk); border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px var(--slate); padding: 18px; margin-bottom: 10vh; }
.share-box h3 { margin: 0 0 10px; color: var(--yellow); font-weight: normal; }
.share-preview { white-space: pre-line; background: var(--ink); color: var(--white); font-size: 12px; line-height: 1.7; padding: 10px 12px; margin: 0 0 12px; }
.share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.share-btns .px-btn[hidden] { display: none; }
.px-btn.kakao { background: #fee500; color: #191919; }
.share-close { display: block; margin: 12px auto 0; font: inherit; font-size: 12px; background: none; border: 0; color: var(--mist); cursor: pointer; }

/* ---------- 휴대폰 맞춤 ---------- */
#game-canvas { touch-action: none; user-select: none; -webkit-user-select: none; }
.quit { font: inherit; font-size: 13px; background: var(--dusk); color: var(--mist); border: 0; box-shadow: 0 0 0 2px var(--slate); width: 26px; height: 26px; cursor: pointer; margin-bottom: 4px; }
.quit:hover { color: var(--white); }
.back-board { font: inherit; font-size: 12px; background: none; border: 0; color: var(--cyan); cursor: pointer; padding: 0; margin: 0 0 8px; }
.touch-pad { display: none; gap: 8px; padding: 10px 0 4px; }
.touch-pad .pad { flex: 1; font: 18px var(--font); padding: 18px 0; border: 0; background: var(--dusk); color: var(--white); box-shadow: inset 0 0 0 3px var(--slate); touch-action: none; user-select: none; -webkit-user-select: none; }
.touch-pad .pad:active { background: var(--slate); }
.touch-pad .pad.jump { background: var(--orange); color: var(--ink); box-shadow: inset -3px -3px 0 #0004, inset 3px 3px 0 #fff6; }
.touch-pad .pad.dash { background: var(--red); flex: .7; }
.touch-pad .pad[hidden] { display: none; }
@media (pointer: coarse) {
  .touch-pad { display: flex; }
  .controls { display: none; }
}
@media (max-width: 600px) {
  #screen-game { align-items: flex-start; }
  .game-wrap { padding: 4px; }
  .hud { gap: 8px; padding: 6px 8px; }
  .hud-clock { font-size: 20px; }
  .bar { grid-template-columns: 52px 1fr 54px; font-size: 11px; }
  #minimap { width: 24%; top: 4px; right: 4px; border-width: 2px; opacity: .9; }
  .headline { word-break: keep-all; }
  .sign .line-badge { min-width: 40px; padding: 0 8px; font-size: 18px; }
  .mapbox { min-height: 340px; }
  #map { min-height: 260px; }
}
/* 휴대폰 세로: 게임 화면보다 대화창이 커서 위로 넘치므로 화면 아래쪽에 고정 (그동안 버튼은 쓸 일이 없음) */
@media (max-width: 600px) {
  .dialog { position: fixed; inset: auto 0 0 0; background: none; padding: 8px; z-index: 50; }
  .dlg-box { box-shadow: 0 0 0 4px var(--ink), 0 -6px 20px #000a; }
  #dlg-portrait { width: 56px; height: 56px; }
  .dlg-choices .px-btn { font-size: 14px; padding: 10px 12px; }
}
/* 지도 위 픽셀 아이콘(캐릭터·집)도 흐려지지 않게 */
.leaflet-marker-icon, #dlg-portrait, #stage-face, .card-preview { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- 형제 서비스 바로가기 (그 뭐더라) ---------- */
.promo { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 12px 14px; text-decoration: none; color: var(--white);
  background: var(--board-2, #181b29); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--cyan); }
.promo:hover { box-shadow: inset 0 0 0 2px var(--yellow); }
.promo-icon { font-size: 28px; flex: none; }
.promo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo-text b { font-weight: normal; color: var(--yellow); font-size: 14px; }
.promo-text small { color: var(--mist); font-size: 11px; line-height: 1.5; }
.promo-go { flex: none; background: var(--cyan); color: var(--ink); padding: 6px 10px; font-size: 12px; }
#screen-end .promo { margin: 14px 0 0; text-align: left; }
@media (max-width: 600px) { .promo-go { display: none; } .promo-icon { font-size: 22px; } }

/* ---------- 바로 해보기 · 일시정지 ---------- */
.px-btn.quick { margin: 0 0 14px; background: var(--green); color: var(--ink); }
.px-btn.quick small { display: block; font-size: 11px; opacity: .8; }
#btn-pause { margin-left: 4px; }
.pause-cover { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; background: rgba(13,14,23,.72); color: var(--yellow); font: inherit; cursor: pointer; }
.pause-cover[hidden] { display: none; }
.pause-cover b { font-weight: normal; font-size: clamp(22px, 5vw, 40px); text-shadow: 3px 3px 0 var(--ink); }
.pause-cover span { color: var(--mist); font-size: 13px; }
.route-sum .best { display: block; color: var(--cyan); }