:root {
  --bg: #05061a; --bg2: #1e1b4b; --panel: #11122e; --panel2: #1c1d45; --line: rgba(165, 180, 252, 0.18);
  --text: #eef2ff; --dim: #a5b4d4; --accent: #facc15; --accent2: #fef08a; --bad: #f87171; --gold: #facc15;
  --r: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 50% 0%, var(--bg2) 0%, var(--bg) 60%, #050a07 100%);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
[hidden] { display: none !important; }

.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: rgba(250, 204, 21, 0.12); border: 1px solid rgba(250, 204, 21, 0.3); color: #fde68a;
  text-decoration: none; font-size: 0.85rem; font-weight: 700;
}
.back-btn:hover { background: rgba(250, 204, 21, 0.22); }
.total { margin-left: auto; font-weight: 800; display: flex; gap: 12px; }
.tools { display: flex; gap: 6px; }
.mini { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-weight: 800; }

/* ── 메뉴 ── */
.screen { flex: 1; overflow-y: auto; padding: 4px 16px 32px; }
.screen > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.logo { text-align: center; margin: 2px auto 12px; }
.logo-art { position: relative; width: 240px; height: 70px; margin: 6px auto 0; overflow: hidden; border-top: 3px solid #2563eb; border-bottom: 3px solid #2563eb; box-shadow: 0 0 14px rgba(96, 165, 250, 0.5), inset 0 0 14px rgba(96, 165, 250, 0.3); border-radius: 6px; }
.logo-art .dots { position: absolute; left: 0; right: 0; top: 31px; height: 6px; background: radial-gradient(circle, #fde68a 2.5px, transparent 3px) 0 0 / 22px 6px repeat-x; animation: eatdots 1.8s linear infinite; }
.logo-art .pac { position: absolute; top: 15px; left: 70px; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(from 120deg, transparent 0 60deg, #facc15 60deg 360deg); animation: chomp 0.3s ease-in-out infinite alternate; }
.logo-art .gh { position: absolute; top: 15px; left: 14px; width: 34px; height: 36px; border-radius: 17px 17px 4px 4px; background: #ef4444; box-shadow: 0 0 10px #ef4444; }
.logo-art .gh::before, .logo-art .gh::after { content: ''; position: absolute; top: 9px; width: 9px; height: 11px; border-radius: 50%; background: #fff; box-shadow: inset 3px 0 0 #1e3a8a; }
.logo-art .gh::before { left: 6px; } .logo-art .gh::after { right: 6px; }
@keyframes eatdots { from { background-position: 0 0; } to { background-position: -22px 0; } }
@keyframes chomp { from { background: conic-gradient(from 120deg, transparent 0 60deg, #facc15 60deg 360deg); } to { background: conic-gradient(from 90deg, transparent 0 4deg, #facc15 4deg 360deg); } }
h1 { margin: 6px 0 2px; font-size: 1.6rem; letter-spacing: -0.02em; }
h1 span { color: var(--accent); }
.tagline { margin: 0; color: var(--dim); font-size: 0.9rem; }

.tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.tab { padding: 9px 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab.on { background: var(--accent); color: #3a2a00; border-color: var(--accent); }
.dim { color: var(--dim); }
.small { font-size: 0.82rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.btn { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); font-weight: 800; }
.btn.go { background: var(--accent); color: #3a2a00; border-color: var(--accent); }
.btn.small { padding: 6px 10px; font-size: 0.85rem; }
.btn.wide { width: 100%; }
.continue {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--r); border: 1px solid rgba(250, 204, 21, 0.5); background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(250, 204, 21, 0.05));
}
.continue .ci { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #3a2a00; }
.continue b { display: block; } .continue small { color: var(--dim); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; margin: 8px 0; }
.kpis div { background: var(--panel2); border-radius: 12px; padding: 8px 2px; min-width: 0; }
.kpis b { display: block; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; } .kpis small { color: var(--dim); font-size: 0.72rem; }

.zone { margin-bottom: 14px; }
.zone.locked .zone-h { opacity: 0.6; }
.zone-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.zone-h .zi { font-size: 1.4rem; }
.zone-h b { font-size: 1rem; } .zone-h .zs { margin-left: auto; font-weight: 800; color: var(--accent2); font-size: 0.85rem; white-space: nowrap; }
.zone-d { margin: 0 0 6px; font-size: 0.78rem; color: var(--dim); }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stg { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.stg .sl { font-weight: 900; font-size: 1rem; }
.stg .sn { font-size: 0.68rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stg .ss { font-size: 0.75rem; letter-spacing: 1px; }
.stg.done { border-color: rgba(250, 204, 21, 0.45); }
.stg.boss { background: linear-gradient(160deg, rgba(250, 204, 21, 0.16), var(--panel)); }
.stg.boss .sl { font-size: 1.3rem; }
.stars i, .ss i { font-style: normal; color: rgba(255, 255, 255, 0.2); }
.stars i.on, .ss i.on { color: var(--gold); }
.stars.big { font-size: 2.2rem; letter-spacing: 6px; margin: 4px 0; }

.mode { display: flex; align-items: center; gap: 12px; }
.mode-ico { font-size: 2.2rem; }
.mode-b { flex: 1; min-width: 0; } .mode-b p { margin: 2px 0; }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.legend li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .legend li span { font-size: 1.3rem; }
.goal-big { font-size: 1.15rem; font-weight: 800; margin: 6px 0; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 4px; }
.cal span { aspect-ratio: 1; border-radius: 6px; background: var(--panel2); display: grid; place-items: center; font-size: 0.68rem; color: var(--dim); overflow: hidden; }
.cal .w { background: #4338ca; color: #fff; font-weight: 800; } .cal .t { outline: 2px solid var(--accent); }
.wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 0.66rem; color: var(--dim); text-align: center; margin-top: 10px; }
.opt { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 0.88rem; }
.opt input { width: 18px; height: 18px; accent-color: var(--accent); }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ach { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; padding: 8px; border-radius: 10px; background: var(--panel2); opacity: 0.45; }
.ach span { grid-row: span 2; font-size: 1.3rem; } .ach b { font-size: 0.82rem; } .ach small { font-size: 0.7rem; color: var(--dim); }
.ach.on { opacity: 1; outline: 1px solid rgba(250, 204, 21, 0.4); }

/* ── 판 ── */
#play { position: relative; flex: 1; overflow: hidden; touch-action: none; background: #02040c; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); pointer-events: none; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.h-score b { display: block; font-size: 2.3rem; font-weight: 900; line-height: 1; color: #fff; }
.h-score small { font-size: 0.72rem; color: #e2e8f0; }
.h-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.h-goal span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
.h-prog { position: relative; width: min(220px, 100%); height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.h-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #4ade80, #facc15); border-radius: 4px; }
.h-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-right: 44px; }
.h-time { font-size: 1.05rem; font-weight: 900; }
.h-time.over { color: #fca5a5; }
.h-coins { font-size: 1rem; font-weight: 800; color: #fde047; }
.pause { position: absolute; right: 10px; top: max(10px, env(safe-area-inset-top)); width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.4); pointer-events: auto; font-size: 0.95rem; }
.banner { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8); width: 92%; }
.banner b { display: block; font-size: clamp(1.4rem, 6vw, 2.4rem); font-weight: 900; }
.banner small { display: block; margin-top: 4px; font-size: 0.95rem; color: var(--accent2); }
.banner.show { animation: pop 0.35s ease-out; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.pad { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 54px); gap: 6px; }
.pad button { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.35); font-size: 1.3rem; font-weight: 900; touch-action: none; }
.pad button:active { background: rgba(250, 204, 21, 0.45); }
.pad [data-d="u"] { grid-column: 2; grid-row: 1; }
.pad [data-d="l"] { grid-column: 1; grid-row: 2; }
.pad [data-d="d"] { grid-column: 2; grid-row: 2; }
.pad [data-d="r"] { grid-column: 3; grid-row: 2; }
.tapgo { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); pointer-events: none; padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); font-weight: 800; animation: blink 1.2s ease-in-out infinite; white-space: nowrap; }
@keyframes blink { 50% { opacity: 0.4; } }

/* 먹보 옷 */
.friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.friend { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.friend .fe { font-size: 2.3rem; line-height: 1.1; }
.friend b { font-size: 0.82rem; }
.friend small { font-size: 0.7rem; color: var(--dim); text-align: center; }
.friend.no .fe { filter: grayscale(1) brightness(0.7); }
.friend.on { border-color: var(--accent); background: rgba(250, 204, 21, 0.14); }
.friend.can { border-color: rgba(250, 204, 21, 0.5); }
.deaths { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 0.85rem; }
.deaths span { padding: 3px 8px; border-radius: 999px; background: var(--panel2); }
.stg .st { font-size: 0.62rem; color: var(--dim); }

/* ── 창 ── */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; padding: 16px; z-index: 20; }
.modal-box { width: min(440px, 100%); max-height: 92vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 18px; text-align: center; }
.modal-box h2 { margin: 4px 0 6px; }
.modal-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.modal-btns.col { flex-direction: column; }
.win-ico { font-size: 2.6rem; }
.win-line { font-size: 1.2rem; margin: 6px 0; } .win-line b { font-size: 1.6rem; color: #fef9c3; }
.nb { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #3a2a00; font-size: 0.75rem; font-weight: 900; vertical-align: middle; }
.rules { text-align: left; margin: 8px auto; padding-left: 1.2em; font-size: 0.9rem; line-height: 1.6; }
.help { text-align: left; padding-left: 1.2em; line-height: 1.6; font-size: 0.9rem; }
.ach-new { margin-top: 10px; display: grid; gap: 6px; }
.ach-new div { padding: 8px; border-radius: 10px; background: rgba(250, 204, 21, 0.12); border: 1px solid rgba(250, 204, 21, 0.35); font-size: 0.85rem; }
.ach-new small { color: var(--dim); }
.err { text-align: left; font-family: monospace; font-size: 0.7rem; white-space: pre-wrap; background: #000; padding: 8px; border-radius: 8px; max-height: 160px; overflow: auto; }
.noscript { padding: 20px; text-align: center; }

@media (max-width: 420px) {
  .back-txt { display: none; }
  .stages { gap: 4px; }
  .h-score b { font-size: 1.9rem; }
  .tab { font-size: 0.74rem; }
}

/* 먹보 */
.h-lives { font-size: 0.95rem; letter-spacing: 1px; color: #fde047; }
.h-goal span + span { margin-left: 4px; }
.skin-dot { display: inline-block; width: 2.3rem; height: 2.3rem; border-radius: 50%; margin: 2px auto; clip-path: polygon(50% 50%, 100% 18%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 82%); }
.friend.no .skin-dot { filter: grayscale(1) brightness(0.6); }
.ghost-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ghost-list li { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; }
.ghost-list i { flex: none; width: 22px; height: 24px; border-radius: 11px 11px 3px 3px; display: inline-block; }
.flags { list-style: none; padding: 0; margin: 8px auto; display: inline-grid; gap: 4px; text-align: left; font-size: 0.9rem; }
.flags li.on { color: #fde68a; } .flags li { color: var(--dim); }
.cal .w, .cal .redo { font-size: 0.56rem; }
.stages { grid-template-columns: repeat(3, 1fr); }
/* 지난 14일 다시 하기 */
.cal button { aspect-ratio: 1; border-radius: 6px; background: var(--panel2); display: grid; place-items: center; font: inherit; font-size: 0.68rem; color: var(--dim); overflow: hidden; border: 0; padding: 0; min-width: 0; }
.cal button.past { cursor: pointer; box-shadow: inset 0 0 0 1.5px #a78bfa; color: var(--text); }
.cal button.past:hover, .cal button.past:focus-visible { box-shadow: inset 0 0 0 2.5px #8b5cf6; }
.cal .redo { background: #7c3aed; color: #fff; font-weight: 800; }
.cal button.past.w { color: #fff; }