:root {
  color-scheme: dark;
  --background: #09090b;
  --surface: #1b1d21;
  --control: #24272b;
  --text-primary: rgba(255, 255, 255, 0.94);
  --text-secondary: rgba(255, 255, 255, 0.62);
  --text-tertiary: rgba(255, 255, 255, 0.42);
  --accent: #298aeb;
  --border: rgba(255, 255, 255, 0.10);
  --separator: rgba(255, 255, 255, 0.16);
  --negative: #d14f52;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--background);
  color: var(--text-primary);
  touch-action: manipulation;
}

body { min-height: 100dvh; }

button, input { font: inherit; }
button, a, input { touch-action: manipulation; }

#app {
  min-height: 100dvh;
  background: var(--background);
}

.review-shell {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 14px calc(132px + env(safe-area-inset-bottom));
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 2px 12px;
}

.brand-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.app-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 9px;
  box-shadow: 0 3px 12px color-mix(in srgb, black 22%, transparent);
}

.brand {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
}

.review-title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}

.app-store-link {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--control);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 11px;
  font-weight: 650;
  -webkit-tap-highlight-color: transparent;
}

.hand-meta {
  margin: 0 2px 12px;
  color: var(--text-secondary);
  font-size: 13px;
}

.wheel {
  position: relative;
  width: min(92vw, 410px);
  aspect-ratio: 1 / 0.78;
  margin: 0 auto;
}

.wheel-ring {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 5%;
  bottom: 5%;
  border: 1px solid var(--border);
  border-radius: 50%;
}

.seat {
  position: absolute;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: -25px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease;
}

.seat.hero { color: var(--accent); }
.seat.folded { opacity: 0.34; }
.seat.active {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
}

.committed {
  position: absolute;
  top: 42px;
  min-width: 30px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
  color: var(--text-secondary);
  text-align: center;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.pot-center {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  text-align: center;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 650;
}

.pot-value {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pot-bb {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
}

.board-section { margin: 0 2px 10px; }
.board-label { margin-bottom: 6px; }
.board-row { display: flex; align-items: center; gap: 7px; min-height: 34px; }
.run-label { width: 42px; color: var(--text-tertiary); font-size: 10px; font-weight: 650; }

.card {
  display: grid;
  place-items: center;
  width: 48px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--control);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 750;
}

.card.red { color: var(--negative); }

.action-panel,
.metadata-panel {
  border: 1px solid var(--separator);
  border-radius: 8px;
  background: var(--surface);
  padding: 13px 14px;
}

.action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.street {
  padding: 5px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.step-counter { color: var(--text-tertiary); font-size: 10px; }
.action-line { margin: 16px 0; text-align: center; font-size: 18px; font-weight: 650; }
.action-footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.action-footer p { margin: 0; }
.hero-cards, .pot-detail { color: var(--text-secondary); font-size: 12px; }
.pot-detail { text-align: right; }

.metadata-panel { margin-top: 10px; border-color: var(--border); }
.metadata-panel[hidden] { display: none; }
.metadata-block + .metadata-block { margin-top: 12px; }
.metadata-value { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.tag-line { display: flex; align-items: center; gap: 7px; }
.tag-dot { width: 8px; height: 8px; border-radius: 50%; }

.timeline {
  position: fixed;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: min(100%, 520px);
  padding: 10px 14px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.timeline-head { display: flex; justify-content: space-between; color: var(--text-tertiary); font-size: 10px; font-weight: 650; }
.timeline-controls { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; margin-top: 8px; }
.timeline button {
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--control);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.timeline button:disabled { opacity: 0.32; }
.timeline input { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }

.status-view {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  color: var(--text-secondary);
  text-align: center;
}

.status-view h1 { margin: 0; color: var(--text-primary); font-size: 20px; }
.status-view p { max-width: 330px; margin: 0; line-height: 1.5; font-size: 14px; }

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { rotate: 360deg; } }

@media (min-width: 760px) {
  body { background: color-mix(in srgb, var(--background) 90%, black); }
  #app { width: 520px; min-height: 100dvh; margin: 0 auto; border-inline: 1px solid var(--border); }
}