:root {
  --ink: #f4f1e8;
  --muted: #a3acc9;
  --panel: #161d38;
  --panel2: #212a4c;
  --line: #2f3b68;
  --gold: #f5c542;
  --gold-d: #b98a16;
  --green: #3ddc84;
  --red: #ff6161;
  --wind: #9fe7ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0d1226;
  color: var(--ink);
  font-family: Galmuri11, monospace;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }

#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}

.hidden { display: none !important; }
.display { font-family: Galmuri11, monospace; font-weight: 400; }

/* ---------- 공통 ---------- */
.topbar {
  position: absolute;
  top: calc(var(--st) + 12px);
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 25; /* 패널 위 — 음소거 버튼은 어느 화면에서나 눌린다 */
}

.coin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  background: rgba(8, 12, 28, .55);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.ci {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 35% 30%, #fff1a8, #f0b429 60%, #c98a12);
  box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .25);
}

.btn {
  pointer-events: auto;
  appearance: none;
  border: 0;
  border-radius: 14px;
  min-height: 52px;
  padding: 0 22px;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  color: #2a1d02;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--gold-d);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-d); }
.btn.sub { background: var(--panel2); color: var(--ink); box-shadow: 0 4px 0 #0c1129; }
.btn.sub:active:not(:disabled) { box-shadow: 0 1px 0 #0c1129; }
.btn:disabled { filter: grayscale(.85); opacity: .45; cursor: default; }
.btn.block { display: flex; width: 100%; }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn.big { min-height: 62px; font-size: 21px; }
.btn.glow { animation: glow 1.2s ease-in-out infinite; }

.link {
  pointer-events: auto;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  padding: 10px;
  cursor: pointer;
}

.row { display: flex; gap: 10px; }
.row > .btn { flex: 1; }
.stack > * + * { margin-top: 10px; }

/* ---------- 패널 ---------- */
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 8, 20, .6);
  pointer-events: auto;
  z-index: 20;
  animation: fade .2s ease-out;
}

.card {
  width: 100%;
  max-width: 400px;
  max-height: calc(100% - 16px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px 18px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  animation: rise .25s ease-out;
}
.card.center { text-align: center; }
.card h2 { font-size: 22px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.eyebrow { font-size: 13px; color: var(--muted); font-weight: 700; }

.big-num { margin: 4px 0 6px; }
.big-num b { font-family: Galmuri11, monospace; font-weight: 400; font-size: 64px; line-height: 1; }
.big-num span { font-size: 20px; font-weight: 800; margin-left: 4px; color: var(--muted); }

.earn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(245, 197, 66, .12);
  color: var(--gold);
  font-weight: 900;
  font-size: 18px;
}

.note { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 16px; }
.note b { color: var(--ink); }

.badge-new {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: #2a1d02;
  font-weight: 900;
  font-size: 13px;
  animation: pulse 1s ease-in-out infinite;
}

.rs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px; }
.rs-stats div { background: var(--panel2); border-radius: 12px; padding: 10px 4px; }
.rs-stats span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.rs-stats b { font-size: 16px; }

.rs-rank { font-weight: 800; color: var(--wind); min-height: 22px; margin-bottom: 14px; }

.name-form { text-align: left; margin-bottom: 14px; }
.name-form label { display: block; font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.name-form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0e1430;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  padding: 0 12px;
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
}
.name-form input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.name-form .btn { flex: none; }

/* ---------- 강화 ---------- */
.up-preview { display: block; width: 100%; height: 96px; border-radius: 16px; background: radial-gradient(ellipse at center, #2a3766, #121833 75%); margin-bottom: 12px; }
.goal {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(159, 231, 255, .1);
  border: 1px solid rgba(159, 231, 255, .35);
  color: var(--wind);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}
.up-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.up-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--panel2); }
.up-row.flash { animation: flash .4s ease-out; }
.up-ico { width: 46px; height: 46px; border-radius: 12px; background: #0f1530; flex: none; }
.up-info { flex: 1; min-width: 0; }
.up-name { font-weight: 800; font-size: 16px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.up-name .lv { color: var(--gold); font-size: 14px; }
.up-name .tier { font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--muted); }
.up-name .done { font-size: 11px; color: var(--green); }
.up-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.up-stat { font-size: 13px; margin-top: 4px; line-height: 1.4; }
.up-stat b { color: var(--green); }
.up-buy { flex: none; min-width: 82px; min-height: 48px; padding: 0 10px; font-size: 15px; }

/* ---------- 랭킹 ---------- */
.rank-list { list-style: none; margin-bottom: 14px; }
.rank-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 15px;
}
.rank-list li:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.rank-list li.me { background: rgba(245, 197, 66, .14); outline: 1px solid rgba(245, 197, 66, .5); }
.rank-list .rk { width: 26px; text-align: center; font-weight: 900; color: var(--muted); }
.rank-list li:nth-child(1) .rk { color: #ffd54a; }
.rank-list li:nth-child(2) .rk { color: #d9e0ea; }
.rank-list li:nth-child(3) .rk { color: #e09a5b; }
.rank-list .nm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .nm em { font-style: normal; font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 4px; margin-left: 4px; vertical-align: 2px; }
.rank-list .ds { font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---------- 홈 ---------- */
.panel.home {
  background: linear-gradient(to bottom, rgba(5, 8, 20, 0) 45%, rgba(5, 8, 20, .75));
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--st) + 70px) 16px calc(var(--sb) + 20px);
}
.home-title { text-align: center; }
.home-title h1 {
  font-size: 58px;
  line-height: .95;
  color: #fff;
  text-shadow: 0 4px 0 #1b2a5c, 0 12px 30px rgba(0, 0, 0, .3);
}
.home-title p { margin-top: 12px; font-weight: 700; font-size: 15px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.home-menu { width: 100%; max-width: 400px; text-align: center; }
.home-menu > * + * { margin-top: 10px; }
.home-best { font-weight: 700; font-size: 15px; }
.home-best b { font-family: Galmuri11, monospace; font-weight: 400; font-size: 22px; color: var(--gold); }

/* ---------- 튜토리얼 HUD ---------- */
.tut-top {
  position: absolute;
  top: calc(var(--st) + 64px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tut-score { font-weight: 700; font-size: 14px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.tut-score b { font-family: Galmuri11, monospace; font-weight: 400; font-size: 30px; margin-left: 6px; vertical-align: -3px; }
.tut-darts { display: flex; gap: 6px; }
.tut-darts i { width: 8px; height: 24px; border-radius: 3px; background: var(--gold); box-shadow: 0 2px 0 var(--gold-d); }
.tut-darts i.off { opacity: .22; }

/* ---------- 비행 HUD ---------- */
.fl-top { position: absolute; top: calc(var(--st) + 52px); left: 0; right: 0; text-align: center; }
.fl-dist b { font-family: Galmuri11, monospace; font-weight: 400; font-size: 48px; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); font-variant-numeric: tabular-nums; }
.fl-dist span { font-weight: 800; font-size: 18px; margin-left: 2px; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.fl-sub { font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.fl-sub .ok { color: #8dffbe; }
.fl-sub .pw { color: #ffd54a; }

.fl-bottom {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(var(--sb) + 20px);
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.gauge { flex: 1; }
.gauge-lbl { font-size: 12px; font-weight: 800; margin-bottom: 6px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.gauge-bar { height: 16px; border-radius: 99px; background: rgba(8, 12, 28, .55); overflow: hidden; border: 2px solid rgba(255, 255, 255, .7); }
.gauge-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #c5f6ff, #5fd3f3); transform-origin: left center; }
.gauge-bar.low i { background: linear-gradient(90deg, #ffb3b3, #ff6161); }

.dash {
  pointer-events: auto;
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 0;
  font: inherit;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
  color: #3a2500;
  background: radial-gradient(circle at 40% 35%, #ffeaa3, #f5b81c 65%, #c4860b);
  box-shadow: 0 5px 0 #8d5f05, 0 0 0 4px rgba(255, 255, 255, .35);
  cursor: pointer;
}
.dash:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #8d5f05, 0 0 0 4px rgba(255, 255, 255, .35); }
.dash:disabled { filter: grayscale(1); opacity: .4; }

/* 돌진 충전 링 + 남은 횟수 (버튼이 꺼져 있어도 링은 또렷하게) */
.dash-wrap { position: relative; flex: none; --fill: 0; }
.dash-wrap::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(#9fe7ff calc(var(--fill) * 1%), rgba(8, 12, 28, .45) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  pointer-events: none;
}
.dash-n {
  position: absolute;
  top: -10px;
  right: -8px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  background: #ff5d5d;
  border: 2px solid #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  pointer-events: none;
}

/* 고도 · 음소거 · 구역 알림 */
.fl-alt { margin-top: 2px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.fl-alt b { color: #9fe7ff; font-variant-numeric: tabular-nums; }
.top-r { display: flex; align-items: center; gap: 8px; }
.mute {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 28, .55);
  color: #fff;
  cursor: pointer;
}
.mute .x { display: none; }
.mute.off .x { display: inline; }
.mute.off .wave { display: none; }
.mute.off { color: var(--muted); }
.coin.bump { animation: bump .25s ease-out; }
.zone {
  position: absolute;
  top: calc(var(--st) + 150px);
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(8, 12, 28, .7);
  border: 1px solid rgba(159, 231, 255, .5);
  font-weight: 900;
  font-size: 15px;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  z-index: 6;
}
.zone small { display: block; font-size: 11px; color: var(--gold); font-weight: 800; }
.zone.show { animation: zone 2.4s ease-out forwards; }

/* ---------- 힌트 / 토스트 / 대사 ---------- */
.hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sb) + 128px);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(8, 12, 28, .8);
  border: 1px solid rgba(255, 255, 255, .2);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  z-index: 6;
  animation: bob 1.6s ease-in-out infinite;
}

.toast {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: Galmuri11, monospace;
  font-size: 42px;
  color: #fff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  opacity: 0;
  z-index: 7;
}
.toast.show { animation: pop 1.1s ease-out forwards; }

.dialog {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px 16px calc(var(--sb) + 24px);
  pointer-events: auto;
  z-index: 30;
}
.dialog-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 18px 30px;
  border-radius: 18px;
  background: rgba(14, 20, 44, .93);
  border: 2px solid var(--wind);
  box-shadow: 0 0 30px rgba(95, 211, 243, .25);
}
.dialog-name {
  position: absolute;
  top: -14px;
  left: 16px;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--wind);
  color: #0d1a3a;
  font-weight: 900;
  font-size: 13px;
}
.dialog-text { font-size: 16px; line-height: 1.65; min-height: 3.3em; }
.dialog-next { position: absolute; right: 16px; bottom: 8px; font-size: 12px; color: var(--wind); animation: blink 1s infinite; }

/* ---------- 애니메이션 ---------- */
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
@keyframes bob { 50% { transform: translate(-50%, -4px); } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes glow { 50% { box-shadow: 0 4px 0 var(--gold-d), 0 0 0 6px rgba(245, 197, 66, .35); } }
@keyframes flash { from { background: rgba(61, 220, 132, .35); } }
@keyframes bump { 40% { transform: scale(1.15); } }
@keyframes zone {
  0% { opacity: 0; transform: translate(-50%, -10px); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}
@keyframes pop {
  0% { opacity: 0; transform: scale(.6); }
  15% { opacity: 1; transform: scale(1.1); }
  30% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px); }
}

@media (prefers-reduced-motion: reduce) {
  .hint, .badge-new, .btn.glow, .dialog-next { animation: none; }
}

/* =====================================================================
   픽셀 UI (v1·v2 공용) — UI 조각은 스프라이트 데이터에서 만든 CSS 변수(main.js UIKit):
     --ui-<조각>: ×2 이미지, --sl-<조각>: 9-slice 값, --bw-<조각>: 테두리 두께, --w/--h: 크기
   글자: Galmuri 다섯 크기만 (art2/SYSTEM.md §10). 팝업은 스크롤 없이 400×800 · 360×640 에 들어간다.
   ===================================================================== */
:root {
  --ink: #f5f8fc;
  --muted: #a5b2c7;
  --gold: #f0c040;
  --navy: #14152b;
  --wind: #a8f0ff;
  --green: #7ccf5a;
  --red: #ff7e56;
  --t-display: 30px Galmuri14, Galmuri11, monospace;
  --t-title: 24px Galmuri11, monospace;
  --t-btn: 20px Galmuri9, Galmuri11, monospace;
  --t-body: 12px Galmuri11, monospace;
  --t-small: 10px Galmuri9, Galmuri11, monospace;
  --pxo: 2px 0 0 #14152b, -2px 0 0 #14152b, 0 2px 0 #14152b, 0 -2px 0 #14152b, 2px 2px 0 #14152b, -2px -2px 0 #14152b, 2px -2px 0 #14152b, -2px 2px 0 #14152b;
}
html, body { font: var(--t-body); background: #14152b; }
#game { image-rendering: pixelated; image-rendering: crisp-edges; }
#ui img, #ui canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.display, .big-num b, .fl-dist b, .tut-score b, .home-best b, .toast { font: var(--t-display); }

/* 9-slice 공통 */
.btn, .card, .dialog-box, .dialog-name, .hint, .zone, .coach, .rank-list li, .name-form input, .gauge-bar, .coin, .mute, .up-row, .up-gear-cell, .earn, .badge-new, .goal, .rs-stats div {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-style: solid;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}

/* 버튼: 40px(큰) / 32px(작은) */
.btn {
  min-height: 40px;
  padding: 0 6px;
  background: none;
  border-image-source: var(--ui-btn);
  border-image-slice: var(--sl-btn) fill;
  border-width: var(--bw-btn);
  color: #14152b;
  font: var(--t-btn);
  letter-spacing: 0;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translateY(2px); border-image-source: var(--ui-btn-down); }
.btn.sub { color: #f5f8fc; border-image-source: var(--ui-sub); }
.btn.sub:active:not(:disabled) { border-image-source: var(--ui-sub-down); }
.btn:disabled { filter: grayscale(.9) brightness(.85); opacity: 1; color: #33395c; }
.btn.sub:disabled { color: #a5b2c7; }
.btn.small { min-height: 32px; padding: 0 4px; font: var(--t-body); }
.btn.big { min-height: 40px; }
.btn.glow { animation: none; }
.link { font: var(--t-small); color: #a5b2c7; }
.row > .btn { padding: 0 2px; }
.stack > * + * { margin-top: 8px; }

/* 상단: 코인 알약 · 음소거 */
.coin {
  background: none;
  border-image-source: var(--ui-pill);
  border-image-slice: var(--sl-pill) fill;
  border-width: var(--bw-pill);
  padding: 0 4px 0 2px;
  gap: 4px;
  font: var(--t-body);
  min-height: 28px;
}
.pill-coin .coin .ci { display: none; }
.coin.bump { animation: pxbump .2s steps(2) 1; }
.ci {
  width: 16px; height: 16px; border-radius: 0; box-shadow: none; flex: none;
  background: var(--ui-coin) 0 0 / 100% 100% no-repeat;
}
.mute {
  width: 36px; height: 36px; padding: 0; background: none;
  border-image-source: var(--ui-sub);
  border-image-slice: var(--sl-sub) fill;
  border-width: var(--bw-sub);
}
.mute svg { display: none; }
.mute::before { content: ""; display: block; width: 16px; height: 16px; margin: auto; background: var(--ui-snd-on) 0 0 / 100% 100% no-repeat; }
.mute.off::before { background-image: var(--ui-snd-off); }

/* 패널 */
.panel { background: rgba(20, 21, 43, .66); animation: none; padding: 14px; }
.panel:not(.home) { padding-top: calc(var(--st) + 56px); align-items: flex-start; }
.card {
  background: none;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--sl-panel) fill;
  border-width: var(--bw-panel);
  padding: 6px;
  max-height: none;
  overflow: visible;
  animation: none;
}
.card h2 { font: var(--t-title); }
.card-head { margin-bottom: 6px; }
.eyebrow { font: var(--t-small); color: #a5b2c7; }
.big-num { margin: 2px 0 4px; }
.big-num b { text-shadow: var(--pxo); }
.big-num span { font: var(--t-btn); }
.earn, .badge-new, .goal {
  background: none;
  border-image-source: var(--ui-row);
  border-image-slice: var(--sl-row) fill;
  border-width: var(--bw-row);
  padding: 0 6px; margin: 4px 0 8px;
  font: var(--t-btn); color: #f0c040;
}
.badge-new { font: var(--t-small); color: #fff0a6; margin-bottom: 6px; animation: pxblink 1s steps(2) infinite; }
.goal { font: var(--t-body); color: #a8f0ff; margin: 0 0 6px; }
.note { font: var(--t-body); line-height: 1.5; margin-bottom: 10px; }
.rs-stats { gap: 6px; margin: 4px 0; }
.rs-stats div {
  background: none; padding: 0;
  border-image-source: var(--ui-row);
  border-image-slice: var(--sl-row) fill;
  border-width: var(--bw-row);
}
.rs-stats span { font: var(--t-small); margin-bottom: 2px; }
.rs-stats b { font: var(--t-body); }
.rs-rank { font: var(--t-body); color: #a8f0ff; min-height: 16px; margin-bottom: 6px; }

/* 입력 */
.name-form { margin-bottom: 8px; }
.name-form label { font: var(--t-small); margin-bottom: 4px; }
.name-form input {
  background: none; height: 32px; padding: 0 4px;
  border-image-source: var(--ui-input);
  border-image-slice: var(--sl-input) fill;
  border-width: var(--bw-input);
  font: var(--t-body); color: #f5f8fc;
}
.name-form input:focus { outline: 2px solid #f0c040; outline-offset: 0; }

/* 강화: 파츠 줄 44px + 장비 2칸 */
.up-preview { display: block; width: 100%; height: 64px; margin-bottom: 6px; background: #1f2342; outline: 2px solid #14152b; border-radius: 0; }
.up-list { gap: 4px; margin-bottom: 6px; }
.up-row {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px;
  background: none;
  border-image-source: var(--ui-row);
  border-image-slice: var(--sl-row) fill;
  border-width: var(--bw-row);
}
.up-row.flash { animation: pxflash .3s steps(3) 1; }
.up-row.morph { animation: pxmorph .6s steps(6) 1; }
.up-ico { width: 40px; height: 40px; background: #14152b; outline: 2px solid #33395c; border-radius: 0; flex: none; }
.up-ico.small { width: 32px; height: 32px; }
.up-info { flex: 1; min-width: 0; line-height: 1.25; }
.up-name { font: var(--t-body); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-name .lv { color: #f0c040; font: var(--t-body); }
.up-name .tier { color: #a8f0ff; font: var(--t-body); background: none; padding: 0; }
.up-name .done { font: var(--t-small); color: #7ccf5a; margin-left: 4px; }
.up-stat { font: var(--t-small); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-stat b { color: #7ccf5a; font-weight: 400; }
.up-next { font: var(--t-small); color: #a487f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-desc { display: none; }
.up-buy { flex: none; min-width: 84px; min-height: 32px; padding: 0 2px; font: var(--t-body); gap: 2px; }
.up-buy .ci { width: 16px; height: 16px; }
.up-gear { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.up-gear-cell {
  display: flex; flex-direction: column; gap: 4px; padding: 0 2px;
  border-image-source: var(--ui-row);
  border-image-slice: var(--sl-row) fill;
  border-width: var(--bw-row);
}
.up-gear-cell.flash { animation: pxflash .3s steps(3) 1; }
.up-gear-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.up-gear-top > div { min-width: 0; line-height: 1.25; }
.up-gear-cell .up-buy { min-width: 0; width: 100%; }

/* 랭킹: 26px 줄 */
.rank-list { margin-bottom: 6px; }
.rank-list li {
  min-height: 26px; padding: 0 4px; margin-bottom: 2px; gap: 8px;
  background: none !important; outline: none !important;
  border-image-source: var(--ui-row);
  border-image-slice: var(--sl-row) fill;
  border-width: var(--bw-row);
  font: var(--t-body);
}
.rank-list li.me { border-image-source: var(--ui-row-me); }
.rank-list .rk, .rank-list .ds { font: var(--t-body); }
.rank-list .nm em { border-radius: 0; font: var(--t-small); }

/* 홈 */
.panel.home { background: linear-gradient(to bottom, rgba(20, 21, 43, 0) 72%, rgba(20, 21, 43, .5) 72%, rgba(20, 21, 43, .5) 78%, rgba(20, 21, 43, .8) 78%); }
.home-title h1 { font-size: 0; line-height: 0; text-shadow: none; }
.home-title h1 canvas { display: block; margin: 0 auto; }
.home-title p { font: var(--t-body); text-shadow: var(--pxo); margin-top: 12px; }
.home-best { font: var(--t-body); text-shadow: var(--pxo); }
.home-best b { font: var(--t-title); color: #f0c040; }

/* 다트판 HUD */
.tut-score { font: var(--t-body); text-shadow: var(--pxo); }
.tut-score b { vertical-align: -6px; }
.tut-darts i { width: 8px; height: 24px; border-radius: 0; background: #f0c040; box-shadow: 0 2px 0 #8a5b28, 2px 0 0 #14152b, -2px 0 0 #14152b, 0 -2px 0 #14152b; }

/* 비행 HUD */
.fl-top { top: calc(var(--st) + 48px); }
.fl-dist b { text-shadow: var(--pxo); }
.fl-dist span { font: var(--t-btn); text-shadow: var(--pxo); }
.fl-sub, .fl-alt { font: var(--t-small); text-shadow: var(--pxo); color: #d3dce8; }
.fl-sub .pw { color: #f0c040; }
.fl-alt b { color: #a8f0ff; font-weight: 400; }
.gauge-lbl { font: var(--t-small); text-shadow: var(--pxo); margin-bottom: 4px; }
.gauge-bar {
  height: 20px; background: none;
  border-image-source: var(--ui-gauge);
  border-image-slice: var(--sl-gauge) fill;
  border-width: var(--bw-gauge);
}
.gauge-bar i { background: var(--ui-fill) 0 0 / var(--w-fill) 100% repeat-x; transition: none; }
.gauge-bar.low i { filter: hue-rotate(160deg); animation: pxblink .5s steps(2) infinite; }

/* 폭풍 돌진: 둥근 버튼 + 충전 링(프레임 0..8 = --ring) */
.dash {
  width: var(--dash-size, 68px); height: var(--dash-size, 68px); border-radius: 0; border: 0; box-shadow: none !important;
  background: var(--ui-dash) 0 0 / 100% 100% no-repeat;
  font-size: 0; color: transparent; padding: 0;
}
.dash:active:not(:disabled) { transform: none; background-image: var(--ui-dash-down); }
.dash:disabled { filter: grayscale(1) brightness(.7); opacity: 1; }
.dash-wrap { --ring: 0; }
.dash-wrap::before {
  inset: calc((var(--dash-size, 68px) - var(--ring-size, 80px)) / 2); border-radius: 0; -webkit-mask: none; mask: none;
  background: var(--ui-ring) calc(var(--ring) * var(--ring-size, 80px) * -1) 0 / calc(var(--ring-size, 80px) * var(--n-ring)) var(--ring-h, 80px) no-repeat;
  image-rendering: pixelated;
}
.dash-n {
  top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 0; border: 0;
  background: #d1443a; color: #f5f8fc; font: var(--t-body); line-height: 22px;
  box-shadow: 2px 0 0 #14152b, -2px 0 0 #14152b, 0 2px 0 #14152b, 0 -2px 0 #14152b !important;
}

/* 힌트 · 구역 알림 · 코치 · 큰 글자 */
.hint, .zone, .coach {
  background: none;
  border-image-source: var(--ui-toast);
  border-image-slice: var(--sl-toast) fill;
  border-width: var(--bw-toast);
  padding: 2px 6px; font: var(--t-body); line-height: 1.5; animation: none;
}
.zone { padding: 0 6px; top: calc(var(--st) + 128px); }
.zone small { font: var(--t-small); color: #f0c040; }
.zone.show { animation: pxzone 2.4s steps(1) forwards; }
/* 코치: 화면 위쪽 가운데, 반투명, HUD 숫자·돌진 버튼과 겹치지 않게 (ui_coach 조각이 오면 그것) */
.coach {
  border-image: none; border-style: none; border-width: 0;
  padding: var(--bw-coach, var(--bw-toast));
  position: absolute; left: 50%; top: calc(var(--st) + 30%); transform: translateX(-50%);
  max-width: calc(100% - 96px); width: max-content; text-align: center;
  z-index: 6; pointer-events: none;
}
/* 판만 반투명, 글자는 또렷하게 */
.coach::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-style: solid; border-image-repeat: stretch; image-rendering: pixelated;
  border-image-source: var(--ui-coach, var(--ui-toast));
  border-image-slice: var(--sl-coach, var(--sl-toast)) fill;
  border-width: var(--bw-coach, var(--bw-toast));
  opacity: .65;
}
.toast { text-shadow: var(--pxo), 0 4px 0 #14152b; }
.toast.show { animation: pxpop 1.1s steps(1) forwards; }

/* 대화창 + 이름표 */
.dialog { padding: 14px 14px calc(var(--sb) + 18px); }
.dialog-box {
  background: none; padding: 6px 4px 14px;
  border-image-source: var(--ui-dialog);
  border-image-slice: var(--sl-dialog) fill;
  border-width: var(--bw-dialog);
}
.dialog-name {
  background: none; padding: 0 4px; top: -22px; left: 6px;
  border-image-source: var(--ui-tag);
  border-image-slice: var(--sl-tag) fill;
  border-width: var(--bw-tag);
  font: var(--t-body); color: #14152b;
}
.dialog-text { font: var(--t-body); line-height: 1.7; min-height: 3.4em; }
.dialog-next { font: var(--t-small); animation: pxblink 1s steps(2) infinite; }

/* 좁은 화면 */
@media (max-height: 680px) {
  .panel:not(.home) { padding-top: calc(var(--st) + 48px); }
  .up-preview { height: 48px; }
}

/* 계단식 애니메이션 */
@keyframes pxbump { 50% { transform: translateY(-2px); } }
@keyframes pxblink { 50% { opacity: .35; } }
@keyframes pxflash { 33% { background: rgba(124, 207, 90, .4); } }
@keyframes pxmorph { 0%, 33%, 66% { background: rgba(240, 192, 64, .55); } 16%, 50%, 83% { background: rgba(168, 240, 255, .4); } }
@keyframes pxzone {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  6% { opacity: 1; transform: translate(-50%, -4px); }
  12%, 82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}
@keyframes pxpop {
  0% { opacity: 1; transform: scale(1.33); }
  8% { transform: scale(1); }
  80% { opacity: 1; transform: translateY(0); }
  90% { opacity: .5; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-new, .dialog-next, .gauge-bar.low i { animation: none; }
}

/* ---------- v2 마감: 새 UI 조각 (UIKit.PIECES) ---------- */
.art2 .btn:disabled { filter: none; border-image-source: var(--ui-btn-off); color: #a5b2c7; }
.art2 .btn.sub:disabled { color: #a5b2c7; }
.art2 .link {
  background: none; padding: 0 4px; min-height: 24px;
  border-style: solid; border-image-source: var(--ui-ghost); border-image-slice: var(--sl-ghost) fill; border-width: var(--bw-ghost);
}
/* 코인 알약: 정확히 28px (ui_pill 14px ×2), 안쪽 한 줄 16px */
.art2 .coin { height: 28px; min-height: 28px; padding-top: 0; padding-bottom: 0; line-height: 16px; box-sizing: border-box; }
/* 소리 버튼: 둥근 버튼 조각 + 8px 아이콘(×2) */
.art2 .mute { border-image: none; border: 0; width: var(--w-round, 36px); height: var(--h-round, 36px); background: var(--ui-round) 0 0 / 100% 100% no-repeat; }
.art2 .mute:active { background-image: var(--ui-round-down); }
.art2 .mute::before { width: 16px; height: 16px; }
/* 이름 입력: 초점 조각 */
.art2 .name-form input:focus { outline: none; border-image-source: var(--ui-input-focus); }
/* 다트판 남은 다트: 핍 */
.art2 .tut-darts i { width: var(--w-pip, 14px); height: var(--h-pip, 24px); background: var(--ui-pip) 0 0 / 100% 100% no-repeat; box-shadow: none; }
.art2 .tut-darts i.off { opacity: 1; background-image: var(--ui-pip-empty); }
/* 숨결 게이지 낮음: 전용 채움 조각 */
.art2 .gauge-bar.low i { filter: none; background-image: var(--ui-fill-low); background-size: var(--w-fill-low) 100%; }
/* 돌진: 충전됨(3프레임 반짝) · 못 씀 */
.art2 .dash:not(:disabled) {
  background: var(--ui-dash-chg) 0 0 / calc(var(--dash-size, 72px) * var(--n-dash-chg, 1)) 100% no-repeat;
  animation: pxdashchg .45s steps(var(--n-dash-chg, 1)) infinite;
}
.art2 .dash:active:not(:disabled) { animation: none; background: var(--ui-dash-down) 0 0 / 100% 100% no-repeat; }
.art2 .dash:disabled { filter: none; background: var(--ui-dash-off) 0 0 / 100% 100% no-repeat; }
@keyframes pxdashchg { to { background-position: calc(var(--dash-size, 72px) * var(--n-dash-chg, 1) * -1) 0; } }
/* 돌진 횟수 배지: 9-slice */
.art2 .dash-n {
  background: none; box-shadow: none !important; min-width: 24px; height: 24px; line-height: 12px; padding: 0;
  border-style: solid; border-image-source: var(--ui-badge); border-image-slice: var(--sl-badge) fill; border-width: var(--bw-badge);
  box-sizing: border-box; text-align: center;
}
@media (prefers-reduced-motion: reduce) { .art2 .dash:not(:disabled) { animation: none; } }

/* ---------- 다트 하트(HUD) ---------- */
.gauge-lbl { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; }
.hearts { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.hearts i {
  position: relative; display: block; flex: none;
  width: var(--w-heart, 18px); height: var(--h-heart, 16px);
  background: var(--ui-heart) 0 0 / 100% 100% no-repeat;
}
.hearts i.off { background-image: var(--ui-heart-empty); }
/* 깨짐: 12×9 그림(×2)을 하트 상자 2px 왼쪽에 한 번 재생 */
.hearts i.brk { background-image: none; }
.hearts i.brk::after {
  content: ""; position: absolute; left: -2px; top: -1px;
  width: 24px; height: 18px;
  background: var(--ui-heart-break, var(--ui-heart-empty)) 0 0 / calc(24px * var(--n-heart-break, 1)) 100% no-repeat;
  animation: pxheartbrk .25s steps(var(--n-heart-break, 1)) 1 forwards;
}
@keyframes pxheartbrk { to { background-position: calc(-24px * var(--n-heart-break, 1)) 0; } }
/* 하트가 8개 넘으면 라벨 위 한 줄 */
.gauge-lbl:has(.hearts.many) { flex-direction: column-reverse; align-items: flex-start; }

/* ---------- 장비 3칸: 아이콘 24 · 이름/Lv 두 줄 · 효과 · 버튼 ---------- */
.up-gear { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.up-gear-cell {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 4px; padding: 4px; align-items: center; min-width: 0;
}
.up-gear-cell .up-ico.small { width: 24px; height: 24px; }
.up-gear-nm { min-width: 0; line-height: 1.2; }
.up-gear-nm .up-name, .up-gear-nm .lv { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-gear-cell .up-stat { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-gear-cell .up-buy { grid-column: 1 / -1; min-width: 0; width: 100%; }
.up-gear-nm .lv { color: #f0c040; font: var(--t-small); }

/* ---------- 모바일 글자 깨짐 방지 ----------
   픽셀 글꼴은 그리드(Galmuri9=10px, 11=12px, 14=15px)의 정수배에서만 또렷하다.
   - 10·12px 글자는 획이 1px → 2px 8방향 외곽(--pxo)이 획을 덮어 뭉개진다. 1px 외곽으로.
   - 큰 버튼 21px → 20px(Galmuri9 ×2).
   - 강화 능력치 줄은 자르지 않고 두 줄로 넘긴다. */
:root { --pxo1: 1px 0 0 #14152b, -1px 0 0 #14152b, 0 1px 0 #14152b, 0 -1px 0 #14152b, 1px 1px 0 #14152b, -1px -1px 0 #14152b, 1px -1px 0 #14152b, -1px 1px 0 #14152b; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.home-title p, .home-best, .tut-score, .fl-sub, .fl-alt, .gauge-lbl { text-shadow: var(--pxo1); }
.home-best b, .tut-score b { text-shadow: var(--pxo); }
.btn.big, .art2 .btn.big { font: var(--t-btn); }
.up-stat, .up-gear-cell .up-stat { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- 자석 남은 시간 ----------
   아래 줄(숨결 게이지 · 스킬 버튼)의 흐름에서 빼서 게이지 왼쪽 위에 띄운다 — 줄에 끼면 게이지가 줄어든다 */
.magnet-t {
  position: absolute; left: 0; bottom: calc(100% + 8px);
  padding: 4px 8px; border: 2px solid #14152b; background: rgba(20, 21, 43, .82);
  font: var(--t-body); color: #f5f8fc; text-shadow: var(--pxo1); white-space: nowrap; pointer-events: none;
}
.magnet-t::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: linear-gradient(90deg, #ff5a6a 50%, #46c8e8 50%); box-shadow: 0 0 0 1px #14152b; vertical-align: 0; }

/* ---------- 결과: 금화 · 보석 나란히, 배율·이벤트 한 줄 ---------- */
.rs-earns { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-earns .earn { margin-left: 0; margin-right: 0; }
.earn-gem { color: #a8f0ff; }
.rs-note { font: var(--t-small); color: #a5b2c7; text-shadow: var(--pxo1); margin: -4px 0 8px; line-height: 1.4; }