:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ink: #f4f7fb;
  --muted: #9aa8ba;
  --panel: #182231;
  --accent: #ffcf4a;
  --accent-strong: #f5ad25;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #0c121c; }

body {
  min-height: 100svh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -15%, rgba(73, 102, 134, .34), transparent 46%),
    linear-gradient(180deg, #111b29 0%, #080d14 100%);
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
}

button { font: inherit; }

.game-shell {
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topbar { display: flex; align-items: center; justify-content: space-between; }
.brand-block h1 { margin: 2px 0 0; font-size: clamp(20px, 5vw, 26px); line-height: 1; letter-spacing: -.04em; }
.eyebrow, .panel-kicker { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.icon-button { border: 1px solid #344258; border-radius: 999px; padding: 8px 12px; color: #cdd7e4; background: rgba(21, 31, 45, .86); font-size: 12px; font-weight: 700; }

.scoreboard {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 8px;
}

.scoreboard > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(104, 125, 151, .24);
  border-radius: 14px;
  background: rgba(24, 34, 49, .82);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.scoreboard span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
.scoreboard strong { display: block; margin-top: 2px; font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.scoreboard > div:first-child strong { color: var(--accent); }

.table-wrap {
  position: relative;
  flex: 1;
  min-height: 500px;
  max-height: calc(100svh - 190px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(155, 175, 198, .18);
  background: #111a25;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .08);
}

.table-wrap.impact { animation: table-impact .32s ease-out; }
@keyframes table-impact {
  20% { transform: translateX(-3px) rotate(-.15deg); }
  45% { transform: translateX(3px) rotate(.15deg); }
  70% { transform: translateX(-1px); }
}

canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 20px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background: rgba(7, 12, 18, .66);
  backdrop-filter: blur(8px);
  transition: opacity .25s ease;
}

.panel.show { opacity: 1; pointer-events: auto; }
.panel-card { width: min(100%, 340px); padding: 26px 24px 24px; border: 1px solid rgba(153, 174, 198, .22); border-radius: 24px; background: linear-gradient(150deg, rgba(31, 44, 61, .98), rgba(17, 26, 38, .98)); box-shadow: 0 22px 55px rgba(0,0,0,.42); text-align: center; }
.panel-card h2 { margin: 6px 0 10px; font-size: 26px; letter-spacing: -.04em; }
.panel-card p { margin: 10px auto; color: #c1cbd8; font-size: 14px; line-height: 1.65; }
.panel-card ul { margin: 16px 0 20px; padding: 0; list-style: none; color: #9eacbd; font-size: 12px; line-height: 1.9; }

.primary-button { width: 100%; border: 0; border-radius: 15px; padding: 14px 18px; color: #1b1608; background: linear-gradient(180deg, #ffdb63, #f4b72d); box-shadow: 0 8px 24px rgba(245, 183, 45, .22), inset 0 1px rgba(255,255,255,.65); font-size: 15px; font-weight: 900; cursor: pointer; }
.primary-button:active { transform: translateY(1px); }

.gesture-demo { height: 54px; display: flex; align-items: center; justify-content: center; }
.demo-ball { width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: inset -6px -7px 9px #aeb8c6; }
.demo-line { width: 66px; border-top: 2px dashed rgba(255, 255, 255, .5); }
.demo-hand { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #192232; background: var(--accent); box-shadow: 0 0 0 7px rgba(255, 207, 74, .12); animation: pull 1.8s ease-in-out infinite; }
@keyframes pull { 50% { transform: translateX(18px); } }

.result-score { margin: 20px auto 6px; }
.result-score span { display: block; color: var(--muted); font-size: 12px; }
.result-score strong { display: block; color: var(--accent); font-size: 52px; line-height: 1.05; letter-spacing: -.06em; }

.toast { position: absolute; z-index: 4; left: 50%; top: 18%; transform: translate(-50%, -8px); opacity: 0; color: var(--accent); font-size: 22px; font-weight: 900; text-shadow: 0 3px 12px rgba(0,0,0,.5); transition: .18s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.celebration {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 42%;
  width: 220px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  pointer-events: none;
}
.celebration.show { animation: celebration-pop 1.05s cubic-bezier(.18,.85,.25,1) both; }
.celebration strong { position: relative; color: #fff3b8; font-size: 40px; line-height: 1; font-style: italic; letter-spacing: .08em; text-shadow: 0 3px 0 #b73b25, 0 8px 24px rgba(0,0,0,.62), 0 0 24px rgba(255,207,74,.8); }
.celebration span { position: relative; margin-top: 10px; padding: 5px 12px; border-radius: 999px; color: #241706; background: var(--accent); font-size: 12px; font-weight: 900; box-shadow: 0 5px 18px rgba(255,207,74,.35); }
.celebration-burst, .celebration-burst::before, .celebration-burst::after { position: absolute; inset: 15px; border-radius: 50%; content: ""; }
.celebration-burst { background: repeating-conic-gradient(from 8deg, rgba(255,207,74,.8) 0 3deg, transparent 3deg 18deg); filter: drop-shadow(0 0 8px rgba(255,190,48,.6)); }
.celebration-burst::before { inset: 28px; border: 3px solid rgba(255,255,255,.7); }
.celebration-burst::after { inset: 6px; border: 2px dashed rgba(255,207,74,.55); }
@keyframes celebration-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.45) rotate(-5deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
  35% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(.9); }
}

.time-danger { animation: danger-pulse .65s ease-in-out infinite alternate; }
@keyframes danger-pulse { to { color: #ff5b58; text-shadow: 0 0 14px rgba(255,75,72,.55); } }

.helpbar { display: flex; justify-content: space-between; gap: 12px; color: #738195; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.helpbar b { color: #aebbc9; font-variant-numeric: tabular-nums; }
#statusText { color: #b5c1d0; }

@media (max-height: 720px) {
  .game-shell { gap: 8px; padding-top: 8px; }
  .scoreboard > div { padding: 7px 10px; }
  .scoreboard strong { font-size: 19px; }
  .table-wrap { min-height: 430px; }
  .panel-card { padding: 20px; }
  .panel-card ul { margin: 10px 0 14px; line-height: 1.65; }
}