:root {
  --bg: #070a14;
  --bg2: #0d1424;
  --panel: #111a2e;
  --line: rgba(90,150,220,0.18);
  --cyan: #49d6ff;
  --txt: #e8eefc;
  --dim: #8a97b4;
  --gold: #ffd23f;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background:
    radial-gradient(120% 80% at 50% -10%, #16213e 0%, var(--bg) 60%);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", system-ui, sans-serif;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
}
body { display: flex; flex-direction: column; height: 100dvh; }

/* 상단바 */
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(10,14,26,0.7); backdrop-filter: blur(8px);
}
#topbar .back { color: var(--dim); text-decoration: none; font-size: 14px; font-weight: 600; }
#topbar .brand { font-weight: 800; letter-spacing: -0.02em; font-size: 16px; display: flex; align-items: center; gap: 5px; }
#topbar .brand .ic { font-size: 18px; }
#topbar .spacer { flex: 1; }
#topbar .stat {
  font-size: 12px; font-weight: 700; color: var(--cyan);
  background: rgba(73,214,255,0.1); border: 1px solid rgba(73,214,255,0.25);
  padding: 4px 9px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
#helpBtn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,0.05); color: var(--txt); font-size: 15px; font-weight: 700; cursor: pointer;
}

/* 본문 */
#app { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }

#statusbar {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px;
}
#statusbar .spacer { flex: 1; }
.grid-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.glabel { font-size: 12px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.pips { display: flex; gap: 3px; }
.pip { width: 11px; height: 16px; border-radius: 3px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); }
.pip.on { background: linear-gradient(180deg,#7fe3ff,#2aa8ff); border-color: #7fe3ff; box-shadow: 0 0 6px rgba(73,214,255,0.6); }
.gnum { font-size: 12px; font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums; }
#statusbar .stat { font-size: 13px; font-weight: 800; color: var(--gold); padding: 3px 8px; border-radius: 8px; background: rgba(255,210,63,0.1); font-variant-numeric: tabular-nums; }
#statusbar .score { color: #fff; background: rgba(255,255,255,0.07); }

/* 보드 */
#boardWrap {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
}
#board {
  border-radius: 16px;
  background: linear-gradient(180deg,#0c1322,#070a14);
  border: 1px solid var(--line);
  box-shadow: 0 16px 50px rgba(0,0,0,0.5), inset 0 0 60px rgba(40,90,160,0.08);
  touch-action: none; max-width: 100%; max-height: 100%;
}

/* 패널 */
#panel { min-height: 88px; }
.phint { color: var(--dim); font-size: 13px; line-height: 1.5; text-align: center; padding: 14px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.pmech {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px;
}
.pico { font-size: 26px; }
.pinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pinfo b { font-size: 15px; font-weight: 800; }
.pinfo span { font-size: 12px; color: var(--dim); }
.pinfo .pwd { font-size: 11px; color: #6f7da0; line-height: 1.3; }
.php { font-size: 14px; font-weight: 800; color: #ff8a96; white-space: nowrap; }
.pbtns { display: flex; gap: 8px; }
.pbtns button {
  flex: 1; padding: 13px 8px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.05); color: var(--txt); font-size: 14px; font-weight: 700; cursor: pointer;
}
.pbtns button.act { background: rgba(255,210,90,0.18); border-color: rgba(255,210,90,0.5); color: var(--gold); }
.pbtns button.end { background: linear-gradient(180deg,#2aa8ff,#1d7fe0); border-color: #49d6ff; color: #fff; }
.pbtns button:active { transform: scale(0.97); }

/* 오버레이 */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(4,6,14,0.78); backdrop-filter: blur(6px);
}
.overlay[hidden] { display: none; }
.sheet {
  width: 100%; max-width: 400px; max-height: 90vh; overflow: auto;
  background: linear-gradient(180deg,#121a2e,#0c1220);
  border: 1px solid rgba(90,150,220,0.3); border-radius: 20px; padding: 22px 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.sheet h2 { margin: 0 0 2px; font-size: 23px; font-weight: 900; letter-spacing: -0.02em; }
.sheet .subt { margin: 0 0 12px; color: var(--cyan); font-weight: 700; font-size: 14px; }
.sheet .sub { margin: 2px 0 12px; color: var(--dim); font-size: 13px; }
.rules p { font-size: 13px; line-height: 1.55; color: #c7d0e6; margin: 0 0 9px; }
.rules b { color: #fff; }
.rules .rd { color: #ff7a8c; font-weight: 700; }
.rules .rsm { color: var(--dim); font-size: 12px; margin-top: 4px; }
.cores { text-align: center; font-size: 13px; color: var(--dim); margin: 6px 0 12px; }
.cores b { color: var(--gold); }
.shop { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.up {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; padding: 11px 13px; border-radius: 13px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--txt); position: relative;
}
.up .ut { font-size: 14px; font-weight: 800; }
.up .ud { font-size: 12px; color: var(--dim); }
.up .uc { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 800; color: var(--gold); }
.up:disabled { opacity: 0.4; cursor: default; }
.up.bought { border-color: rgba(91,224,138,0.5); }
.up.bought .uc { color: #5be08a; }
.goscore { text-align: center; margin: 8px 0; }
.goscore span { display: block; font-size: 12px; color: var(--dim); }
.goscore b { font-size: 38px; font-weight: 900; color: var(--gold); }
.primary {
  width: 100%; padding: 14px; border-radius: 14px; border: none;
  background: linear-gradient(180deg,#2aa8ff,#1d7fe0); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
}
.primary:active { transform: scale(0.98); }

@media (min-width: 620px) {
  #topbar .brand { font-size: 18px; }
}