:root {
  --bg: #07111f;
  --panel: rgba(9, 26, 48, 0.92);
  --line: rgba(118, 200, 255, 0.22);
  --cyan: #3fe0ff;
  --gold: #f3c560;
  --pink: #ff4fcb;
  --red: #ff5656;
  --text: #eaf4ff;
  --muted: #8ea8c8;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, Pretendard, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; background: radial-gradient(circle at top, #102640 0%, #07111f 55%, #03060e 100%); color:var(--text); }
body { min-height:100vh; overflow:hidden; }
button { font: inherit; color: inherit; }
.game-shell { width:100%; max-width:430px; height:100vh; margin:0 auto; position:relative; overflow:hidden; background: linear-gradient(180deg, rgba(13,28,48,.98), rgba(3,8,18,.98)); border-left:1px solid rgba(255,255,255,.05); border-right:1px solid rgba(255,255,255,.05); }
.top-hud { padding: calc(12px + var(--safe-top)) 14px 8px; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.sprite-frame, .panel-card, .hero-panel, .deduction-layout, .cctv-panel, .draw-result, .bottom-nav { background: linear-gradient(180deg, rgba(15,35,63,.96), rgba(8,17,30,.96)); border:1px solid var(--line); border-radius:20px; box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 18px 45px rgba(0,0,0,.35); }
.profile-wrap { display:flex; align-items:center; gap:8px; padding:8px 12px; min-width:92px; }
.avatar, .portrait { width:38px; height:38px; border-radius:14px; background: linear-gradient(180deg, #173253, #0a1422); }
.silhouette::after { content:''; display:block; width:100%; height:100%; background: radial-gradient(circle at 50% 33%, rgba(255,255,255,.25) 0 18%, transparent 19%), radial-gradient(circle at 50% 80%, rgba(255,255,255,.18) 0 28%, transparent 29%); }
.hero-name { font-weight:700; }
.tiny-label { font-size:11px; color:var(--muted); }
.resource-bar { display:flex; gap:8px; padding:8px 10px; justify-content:space-between; }
.resource-item { display:flex; align-items:center; gap:4px; font-weight:700; font-size:13px; }
.sprite-icon, .sprite-icon-button::before { width:22px; height:22px; display:inline-block; background-size:contain; background-repeat:no-repeat; background-position:center; }
.hud-actions { display:flex; gap:8px; }
.hud-circle { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background: linear-gradient(180deg, rgba(17,35,59,.95), rgba(8,18,31,.95)); }
.sprite-icon-button { position:relative; }
.sprite-icon-button::before { content:''; margin:auto; }
.game-main { height: calc(100vh - 152px - var(--safe-bottom)); overflow:auto; padding: 6px 14px 110px; }
.screen { display:none; }
.screen.active { display:block; }
.screen-title { margin: 6px 2px 14px; font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.hero-panel { padding:18px; border-radius:24px; min-height:178px; display:flex; flex-direction:column; justify-content:space-between; background:
 linear-gradient(180deg, rgba(12,28,51,.86), rgba(6,13,24,.95)),
 radial-gradient(circle at 80% 18%, rgba(255,79,203,.26), transparent 28%),
 radial-gradient(circle at 22% 10%, rgba(63,224,255,.18), transparent 24%);
}
.hero-copy h2 { margin:6px 0 8px; font-size:28px; line-height:1.1; }
.hero-copy p { margin:0; color:#bfd4ef; line-height:1.45; }
.hero-actions { display:flex; gap:10px; margin-top:16px; }
.game-button { min-height:54px; border-radius:18px; border:0; padding:0 18px; font-weight:800; letter-spacing:.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.25); }
.game-button.primary { background: linear-gradient(180deg, #4ef1ff, #169ad7); color:#07111f; }
.game-button.secondary { background: linear-gradient(180deg, #f2cd71, #a86e10); }
.game-button.ghost { background: linear-gradient(180deg, #203551, #0b1728); color:var(--text); }
.home-grid, .mission-layout { display:grid; gap:12px; margin-top:12px; }
.home-grid { grid-template-columns:1fr; }
.panel-card { padding:14px; border-radius:22px; }
.panel-card.tall { min-height: 220px; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-weight:700; }
.text-link { background:none; border:0; color:var(--cyan); }
.chest-row { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.chest-row.big { grid-template-columns:1fr; }
.chest-card { border-radius:22px; padding:14px; background: linear-gradient(180deg, rgba(14,30,52,.95), rgba(7,14,24,.95)); border:1px solid var(--line); }
.chest-card img { width:100%; aspect-ratio:1/1; object-fit:contain; }
.chest-card h4 { margin:8px 0 4px; }
.chest-card p { margin:0 0 10px; color:var(--muted); font-size:13px; }
.event-timers, .notice-list, .probability-summary { display:grid; gap:10px; }
.notice-item, .event-item, .package-card, .chapter-card { padding:12px; border-radius:18px; background: linear-gradient(180deg, rgba(15,30,50,.92), rgba(7,14,24,.95)); border:1px solid var(--line); }
.package-list, .chapter-list { display:grid; gap:12px; }
.chapter-card { display:grid; gap:10px; }
.mission-layout { grid-template-columns:1fr; }
.mission-card { padding:16px; min-height:132px; }
.large-card { min-height:220px; }
.mission-title { color:var(--cyan); font-weight:800; }
.mission-actions, .investigation-actions, .deduction-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.investigation-scene { position:relative; min-height:360px; border-radius:26px; overflow:hidden; }
.scene-bg { position:absolute; inset:0; background:
 linear-gradient(180deg, rgba(5,12,22,.4), rgba(1,4,10,.8)),
 radial-gradient(circle at 50% 0%, rgba(63,224,255,.18), transparent 34%),
 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1200"><rect width="100%" height="100%" fill="%23070e18"/><rect x="50" y="120" width="700" height="320" rx="20" fill="%23161f2f"/><rect x="130" y="50" width="180" height="90" fill="%23f3f5f9" opacity=".06"/><rect x="440" y="90" width="240" height="130" fill="%23f3f5f9" opacity=".08"/><rect x="100" y="490" width="600" height="180" fill="%230b0f19"/><rect x="0" y="680" width="800" height="520" fill="%2303070e"/></svg>') center/cover;
}
.hotspot { position:absolute; width:44px; height:44px; border-radius:50%; border:2px solid rgba(63,224,255,.9); background:rgba(63,224,255,.12); box-shadow:0 0 18px rgba(63,224,255,.55); }
.clue-toast { position:absolute; left:12px; right:12px; bottom:12px; padding:14px; background:rgba(4,12,20,.85); border-radius:16px; border:1px solid var(--line); }
.cctv-panel { padding:14px; }
.cctv-placeholder { min-height:380px; border-radius:22px; background: linear-gradient(180deg, rgba(3,10,18,.95), rgba(7,20,37,.92)); position:relative; overflow:hidden; display:flex; align-items:flex-end; }
.cctv-lines { position:absolute; inset:0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px); opacity:.5; }
.cctv-message { position:relative; margin:16px; padding:16px; line-height:1.5; border-radius:18px; background:rgba(6,13,23,.88); border:1px solid var(--line); color:#d4e7ff; }
.deduction-layout { padding:14px; }
.node-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-bottom:10px; }
.node-chip { min-height:46px; border-radius:16px; border:1px solid var(--line); background: linear-gradient(180deg, rgba(15,31,54,.96), rgba(8,17,29,.96)); }
#deductionCanvas { width:100%; border-radius:18px; background: linear-gradient(180deg, rgba(8,17,29,.8), rgba(3,8,16,.95)); border:1px solid var(--line); }
.draw-result-content { min-height:100px; display:flex; align-items:center; justify-content:center; text-align:center; color:#d0e2fb; }
.bottom-nav { position:absolute; left:10px; right:10px; bottom: calc(10px + var(--safe-bottom)); height:72px; display:grid; grid-template-columns:repeat(5,1fr); padding:8px; gap:8px; }
.nav-btn { border:0; border-radius:18px; background:transparent; color:#9ab4d4; font-weight:700; }
.nav-btn.active { background: linear-gradient(180deg, rgba(63,224,255,.24), rgba(63,224,255,.08)); color:#fff; }
.loading-screen { position:absolute; inset:0; background: linear-gradient(180deg, rgba(4,8,15,.98), rgba(4,8,15,.94)); display:none; z-index:50; padding:20px; }
.loading-screen.active { display:flex; align-items:center; justify-content:center; }
.loading-card { width:100%; padding:22px; border-radius:28px; background: linear-gradient(180deg, rgba(13,26,46,.96), rgba(5,10,18,.98)); border:1px solid var(--line); }
.logo-mark { width:64px; height:64px; border-radius:20px; background: radial-gradient(circle, rgba(63,224,255,.95), rgba(255,79,203,.72)); box-shadow:0 0 32px rgba(63,224,255,.36); }
.loader-bar { margin:14px 0; height:10px; border-radius:999px; overflow:hidden; background:#13243b; }
#loaderFill { height:100%; width:8%; background: linear-gradient(90deg, #4ef1ff, #ff58cd); }
.status-text, .help-text { color:#a5bedd; line-height:1.45; }
.loader-actions { display:grid; gap:10px; margin:18px 0 10px; }
.loader-button { min-height:52px; border-radius:18px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #4ef1ff, #149ad4); color:#02101b; font-weight:800; }
.loader-button.secondary { background: linear-gradient(180deg, #f2cd71, #a86f14); }
.loader-button.ghost { color:var(--text); background: linear-gradient(180deg, #203551, #0b1728); border:0; }
.help-text code { color:#fff; }
.modal { position:absolute; inset:0; background: rgba(0,0,0,.58); display:flex; align-items:center; justify-content:center; padding:16px; z-index:40; }
.modal-card { width:100%; padding:18px; border-radius:24px; background: linear-gradient(180deg, rgba(14,29,49,.98), rgba(7,14,24,.98)); border:1px solid var(--line); }
.reward-reveal { display:grid; justify-items:center; gap:10px; text-align:center; }
.reward-reveal img { width:120px; height:120px; object-fit:contain; }
@media (min-width: 431px) {
  body { display:flex; justify-content:center; }
}