:root {
  --bg: #0d1020;
  --panel: #1a1f33;
  --panel-hi: #242a43;
  --text: #f2f4fa;
  --muted: #9aa3b8;
  --border: #2e3552;
  --good: #4fd17a;
  --bad: #ff7a6b;
  --warn: #ffd25e;
  --hint: #e8d48a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; background: var(--bg); }
body { margin: 0; height: 100%; color: var(--text); overflow: hidden; user-select: none; -webkit-user-select: none;
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2;
  background: radial-gradient(ellipse at 50% -10%, #1f2950 0%, transparent 60%),
              radial-gradient(ellipse at 50% 110%, #1d1538 0%, transparent 55%); }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(rgba(13, 16, 32, 0.55), rgba(13, 16, 32, 0.75)), url(img/bg.webp) center / cover no-repeat; }
body.bg-ready::after { opacity: 0.6; }

#app { height: 100vh; height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column;
  padding: 10px 12px; gap: 8px; }

.top { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: 0.2px; white-space: nowrap; }
.logo { width: 22px; height: 22px; flex: none; }
.chip { margin-left: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px;
  font-size: 13px; color: #dfe2e8; white-space: nowrap; }

.msg { text-align: center; min-height: 20px; font-size: 14px; color: var(--muted); transition: color 0.2s; }
.msg.good { color: var(--good); font-weight: 700; }
.msg.bad { color: var(--bad); }
.msg.warn { color: var(--warn); font-weight: 600; }
.msg.hint { color: var(--hint); }

.board { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.frame { padding: 6px; border-radius: 16px; background: linear-gradient(160deg, #262d4a, #151a2c);
  border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.frame.won { animation: won 1.3s ease; border-color: rgba(79, 209, 122, 0.7);
  box-shadow: 0 0 0 2px rgba(79, 209, 122, 0.35), 0 0 40px rgba(79, 209, 122, 0.22); }
canvas { display: block; border-radius: 10px; touch-action: none; cursor: pointer; }
.frame.won canvas, .frame.over canvas { cursor: default; }

.stats { display: flex; justify-content: center; gap: 16px; font-size: 13px; color: var(--muted); }
.stats b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

.bar { display: flex; gap: 8px; }
.bar button { flex: 1; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text);
  font: 600 14px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; transition: background 0.15s, opacity 0.15s; }
.bar button:hover:not(:disabled) { background: var(--panel-hi); }
.bar button:disabled { opacity: 0.4; cursor: default; }
.bar button.confirm { border-color: var(--bad); color: var(--bad); }

@media (max-width: 380px) {
  .title { font-size: 17px; }
  .stats { gap: 10px; }
}

@keyframes won { 0% { transform: scale(1); } 30% { transform: scale(1.025); } 100% { transform: scale(1); } }