:root {
  --bg: #0a1f26;
  --bg-2: #0f2a33;
  --panel: #14404d;
  --panel-2: #1a5266;
  --text: #f0f7f4;
  --muted: #8fb4b8;
  --accent: #5eead4;
  --left: #ff8f6b;
  --right: #5eead4;
  --shadow: 0 6px 20px rgba(0,0,0,.45);
  --radius: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: radial-gradient(1200px 800px at 50% -10%, #1a5a66 0%, var(--bg) 60%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  touch-action: manipulation;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: calc(var(--safe-top) + 8px) 16px calc(var(--safe-bottom) + 8px);
  gap: 10px;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topbar h1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sd-badge {
  display: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffd60a;
  color: #0a1f26;
  box-shadow: 0 0 12px rgba(255,214,10,0.55);
  animation: sdPulse 1.4s ease-in-out infinite;
}
body[data-sd="on"] .sd-badge { display: inline-block; }
@keyframes sdPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,214,10,0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 18px rgba(255,214,10,0.85); transform: scale(1.06); }
}
.ft-badge {
  display: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #a78bfa;
  color: #1a1033;
  box-shadow: 0 0 12px rgba(167,139,250,0.55);
}
body[data-fun-time="on"] .ft-badge { display: inline-block; }
body[data-fun-time="on"] .scoreboard { display: none !important; }
body[data-fun-time="on"] .round-result { display: none !important; }
/* Fun Time: no opposing team, so hide the L/R call buttons and let Reveal
   fill the guessing row on its own. */
body[data-fun-time="on"] #lrLeftBtn,
body[data-fun-time="on"] #lrRightBtn { display: none !important; }
body[data-fun-time="on"][data-phase="guessing"] .row-guessing {
  grid-template-columns: 1fr !important;
}
/* Sudden-death visual accents throughout the board. */
body[data-sd="on"] .dial-wrap {
  box-shadow: var(--shadow), 0 0 0 2px #ffd60a, 0 0 30px rgba(255,214,10,0.35);
}
body[data-sd="on"] .scoreboard {
  box-shadow: var(--shadow), 0 0 0 2px rgba(255,214,10,0.55);
}
body[data-sd="on"] .turn-indicator {
  background: rgba(255,214,10,0.22);
  border-color: rgba(255,214,10,0.55);
  color: #ffd60a;
}
body[data-sd="on"] .controls {
  box-shadow: var(--shadow), 0 0 0 2px rgba(255,214,10,0.45);
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:active { transform: scale(0.96); }

/* Scoreboard */
.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
}
.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 10px;
}
.team-left { background: linear-gradient(180deg, rgba(255,143,107,.15), rgba(255,143,107,.05)); }
.team-right { background: linear-gradient(180deg, rgba(122,162,255,.15), rgba(122,162,255,.05)); }
.team.active { outline: 2px solid var(--accent); }
.team-left.active  { background: linear-gradient(180deg, rgba(255,143,107,.45), rgba(255,143,107,.22)); }
.team-right.active { background: linear-gradient(180deg, rgba(94,234,212,.45),  rgba(94,234,212,.22)); }
.team-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  outline: none;
  min-width: 60px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 6px;
}
.team-name:focus { background: rgba(255,255,255,.06); }
.team-left .team-name { color: var(--left); }
.team-right .team-name { color: var(--right); }
.score-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.score {
  font-size: 28px;
  font-weight: 800;
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.score-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--panel-2);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.score-btn:active { transform: scale(0.94); }
.turn-indicator {
  font-size: 12px;
  text-align: center;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 10px;
  background: rgba(94,234,212,.14);
  border: 1px solid rgba(94,234,212,.35);
  border-radius: 8px;
  line-height: 1.3;
}

/* Card strip */
.card-strip {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: stretch;     /* arrow buttons match card height */
  align-self: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  max-width: min(560px, 100%);
  margin: clamp(20px, 4vh, 40px) auto clamp(20px, 4vh, 36px);
  padding: 0;
}
.card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  justify-items: stretch;
  background: #f7f2e4;   /* light cream base — the two halves tint from here */
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: 20px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,0.4);
  aspect-ratio: 2 / 1;    /* card shape derived from available width — no fixed min */
  max-height: 40vh;       /* cap on tall phones */
  overflow: hidden;
  min-width: 0;
}
/* Center divider line — a real vertical line, not the old dashed row */
.card::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 2px;
  background: rgba(0,0,0,0.25);
  transform: translateX(-50%);
}
.card-side {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 5.5vw, 40px);
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  padding: 16px 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/* Distinct tints for each half of the card so the two ends are clearly
   different, while both sit on the same light cream base. */
.card-side.left {
  color: #b93a1f;                     /* deep coral text */
  background: rgba(255,143,107,0.18); /* warm tint */
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
.card-side.right {
  color: #0e5a66;                     /* deep teal text */
  background: rgba(94,234,212,0.20);  /* cool tint */
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
.card-nav {
  align-self: stretch;
  min-height: 48px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 28px;
  cursor: pointer;
}
.card-nav:active { transform: scale(0.94); }

/* Dial */
.dial-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 10px 8px 6px;
  box-shadow: var(--shadow);
  position: relative;
  width: 100%;
  max-width: min(560px, 100%);
  align-self: center;
}
/* All dial phases (everything except the card-picker setup screen): sandwich
   the dial vertically between the scoreboard and action buttons — same feel
   as the card-pick screen. */
body:not([data-phase="setup"]) .dial-wrap {
  margin-top: auto;
  margin-bottom: auto;
  flex: 0 1 auto;
  min-height: 0;
  align-self: center !important;
  width: 100%;
  max-width: min(760px, 96vw);
  margin-left: auto;
  margin-right: auto;
  padding: 16px 12px 10px;
}
body:not([data-phase="setup"]) #dial {
  /* Cap by height so topbar + scoreboard + controls all stay above the fold
     on desktop and tablets. 240px reserves topbar (~44) + scoreboard (~76)
     + controls (~80) + gaps and padding. */
  max-height: calc(100dvh - 240px);
}
#dial {
  width: 100%;
  max-width: 720px;
  height: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;  /* suppress iOS long-press callout */
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
#dial:active { cursor: grabbing; }
.dial-labels {
  display: none;
  width: 100%;
  max-width: 720px;
  justify-content: space-between;
  padding: 0 4px;
  margin-top: 2px;
}
.dial-labels.visible { display: flex; }
.dial-label {
  font-size: 26px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  max-width: 45%;
  text-align: center;
  line-height: 1.2;
}
.dial-label.left { color: var(--left); }
.dial-label.right { color: var(--right); }

/* Controls */
.controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
}
.phase,
.round-result {
  font-size: 13px;
  color: var(--text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  opacity: 0.9;
  white-space: pre-line;
}
.phase:empty,
.round-result:empty { display: none; }
body[data-phase="setup"] .phase {
  font-size: 15px;
  margin-bottom: 6px;
}
.btn-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.btn {
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn.small { padding: 10px 6px; font-size: 12px; }
.btn.primary { background: var(--accent); color: #0b1220; border-color: transparent; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.97); }
/* .selected marks the opponent's L/R pick during guessing. Distinct from the
   primary CTA styling: filled with accent, dark text, and a subtle ring so
   it reads clearly as a chosen toggle. */
.btn.selected {
  background: var(--accent);
  color: #0a1f26;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(94,234,212,0.4), var(--shadow);
  font-weight: 800;
}

/* Button label variants: full text by default, short text only on mobile
   landscape (media query below toggles which span is visible). */
.lbl-short { display: none; }
.lbl-full  { display: inline; }
/* Desktop: lines flow inline on one row, spaced generously. */
.round-result {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0 80px;
  white-space: nowrap;
}
.round-result-line { display: inline; white-space: nowrap; }

/* Reveal screen: promote the round result above the End Turn button and give
   it more presence. */
body[data-phase="revealed"] .round-result {
  order: -1;
  width: 100%;
  padding: 4px 0;
  font-size: 14px;
  opacity: 1;
}

/* Drawer */
.drawer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 20;
  display: none;
}
.drawer[aria-hidden="false"] { display: block; }
.drawer-inner {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--bg-2);
  padding: calc(var(--safe-top) + 16px) 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  box-shadow: 4px 0 30px rgba(0,0,0,.5);
}
.drawer h2 { margin: 0 0 4px; }
.drawer-version {
  margin-top: auto;
  padding-top: 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  opacity: 0.7;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 6px 0;
  color: var(--muted);
}
/* How to Play modal — scrollable card with sectioned instructions. Uses
   dynamic viewport height (dvh) to account for mobile browser chrome, and
   hard-caps against the wrapping .modal's padding so the body always has
   room to scroll on short screens. */
.how-to {
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  padding: 20px 22px 16px;
  position: relative;
  min-height: 0;
}
.how-to > h2 {
  margin: 0 0 4px;
  padding-right: 32px;    /* room for the close button */
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  flex: 0 0 auto;
}
.how-to > .btn-row { flex: 0 0 auto; }
.modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
}
.modal-close:hover { background: rgba(255,255,255,0.08); }
.modal-close:active { background: rgba(255,255,255,0.14); }
.how-to-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 0;
  flex: 1 1 auto;
}
.how-to-body section { margin-top: 14px; }
.how-to-body section:first-child { margin-top: 6px; }
.how-to-body h3 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.how-to-body p  { margin: 0 0 6px; }
.how-to-body ul,
.how-to-body ol { margin: 0 0 6px; padding-left: 20px; }
.how-to-body li { margin-bottom: 3px; }
.how-to-body b  { color: #fff; }
.how-to-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}
.how-to-table th,
.how-to-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
}
.how-to-table th {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 11px;
}
.how-to-note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
  font-style: italic;
}

/* Winner modal — semi-transparent backdrop, centered card with the winning
   team name and final score. Reuses the .modal base class for backdrop +
   show/hide, with a custom inner. */
.win-modal { z-index: 40; }
/* Backdrop tint by team so the whole screen reads as the winning color. */
.win-modal[data-team="left"]  { background: rgba(255,143,107,0.55); }
.win-modal[data-team="right"] { background: rgba(94,234,212,0.45); }
.win-modal-inner {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: 20px;
  padding: 32px 24px 28px;
  text-align: center;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  animation: winPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  border: 3px solid transparent;
}
/* Card border + gradient tint follows the winning team. */
.win-modal[data-team="left"]  .win-modal-inner {
  background: linear-gradient(180deg, rgba(255,143,107,0.30), var(--panel-2));
  border-color: var(--left);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5),
              0 0 40px rgba(255,143,107,0.35),
              0 0 0 1px rgba(255,143,107,0.4);
}
.win-modal[data-team="right"] .win-modal-inner {
  background: linear-gradient(180deg, rgba(94,234,212,0.28), var(--panel-2));
  border-color: var(--right);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5),
              0 0 40px rgba(94,234,212,0.35),
              0 0 0 1px rgba(94,234,212,0.4);
}
.win-modal[data-team="left"]  .win-trophy { color: var(--left); text-shadow: 0 0 20px rgba(255,143,107,0.4); }
.win-modal[data-team="right"] .win-trophy { color: var(--right); text-shadow: 0 0 20px rgba(94,234,212,0.4); }
/* Sudden-death winner: gold accents on top of the team-tinted card. */
.win-modal[data-sd] h2 {
  color: #ffd60a;
  text-shadow: 0 0 12px rgba(255,214,10,0.5);
}
.win-modal[data-sd] .win-modal-inner {
  outline: 2px solid #ffd60a;
  outline-offset: 3px;
}
.win-modal[data-sd] .win-trophy {
  text-shadow: 0 0 24px rgba(255,214,10,0.7);
}
@keyframes winPop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.win-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
}
.win-close:hover { background: rgba(255,255,255,0.12); }
.win-close:active { background: rgba(255,255,255,0.20); }
.win-trophy {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
}
.win-modal h2 {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
}
.win-team {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: var(--accent);
}
.win-team.left  { color: var(--left); }
.win-team.right { color: var(--right); }
.win-score {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  opacity: 0.9;
  letter-spacing: 2px;
}

/* Sudden Death modal — neutral (no team tint) since both teams are competing. */
.sudden-death-modal { z-index: 40; background: rgba(0,0,0,0.6); }
.sudden-death-inner {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 20px;
  padding: 28px 24px 22px;
  text-align: center;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5),
              0 0 40px rgba(255, 214, 10, 0.35),
              0 0 0 1px rgba(255, 214, 10, 0.45);
  animation: winPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  border: 3px solid #ffd60a;
  background: linear-gradient(180deg, rgba(255,214,10,0.20), var(--panel-2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sd-emoji {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 4px;
  color: #ffd60a;
  text-shadow: 0 0 20px rgba(255,214,10,0.5);
}
.sudden-death-modal h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffd60a;
  font-weight: 800;
}
.sd-body {
  margin: 4px 0 8px;
  font-size: 15px;
  color: var(--text);
  opacity: 0.95;
  line-height: 1.35;
}
.sudden-death-inner .btn { width: 100%; }

/* Tie modal — fully neutral, no team accent. */
.tie-modal { z-index: 40; background: rgba(0,0,0,0.65); }
.tie-inner {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 20px;
  padding: 28px 24px 22px;
  text-align: center;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5),
              0 0 0 1px rgba(255,255,255,0.15);
  animation: winPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  border: 3px solid var(--muted);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tie-emoji {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 4px;
}
.tie-modal h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 800;
}
.tie-score {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  color: var(--text);
}
.tie-body {
  margin: 4px 0 8px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.35;
}
.tie-inner .btn { width: 100%; }

/* Catch-Up modal — mirrors the win modal so a triggered bonus turn is
   unmistakable. Tinted by active team. */
.catch-up-modal { z-index: 40; }
.catch-up-modal[data-team="left"]  { background: rgba(255,143,107,0.45); }
.catch-up-modal[data-team="right"] { background: rgba(94,234,212,0.35); }
.catch-up-inner {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 20px;
  padding: 28px 24px 22px;
  text-align: center;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  animation: winPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  border: 3px solid transparent;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.catch-up-modal[data-team="left"]  .catch-up-inner {
  background: linear-gradient(180deg, rgba(255,143,107,0.30), var(--panel-2));
  border-color: var(--left);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5),
              0 0 40px rgba(255,143,107,0.35),
              0 0 0 1px rgba(255,143,107,0.4);
}
.catch-up-modal[data-team="right"] .catch-up-inner {
  background: linear-gradient(180deg, rgba(94,234,212,0.28), var(--panel-2));
  border-color: var(--right);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5),
              0 0 40px rgba(94,234,212,0.35),
              0 0 0 1px rgba(94,234,212,0.4);
}
.catch-up-emoji {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 4px;
}
.catch-up-modal h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 800;
}
.catch-up-team {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent);
}
.catch-up-team.left  { color: var(--left); }
.catch-up-team.right { color: var(--right); }
.catch-up-body {
  margin: 4px 0 8px;
  font-size: 15px;
  color: var(--text);
  opacity: 0.95;
  line-height: 1.35;
}
.catch-up-inner .btn { width: 100%; }

/* Reveal-confirm modal — guards the score reveal. */
.reveal-confirm-modal { z-index: 40; background: rgba(0,0,0,0.65); }
.reveal-confirm-inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 20px;
  padding: 28px 24px 22px;
  text-align: center;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5),
              0 0 0 1px rgba(94,234,212,0.35);
  animation: winPop 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.reveal-confirm-emoji {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 2px;
}
.reveal-confirm-modal h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
}
.reveal-confirm-body {
  margin: 4px 0 10px;
  font-size: 14px;
  color: var(--text);
  opacity: 0.9;
  line-height: 1.4;
}
.reveal-confirm-actions {
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.reveal-confirm-actions .btn {
  width: 100%;
  min-height: 48px;   /* tap-target-friendly on touch devices */
  padding: 12px 12px;
}
/* Short viewports (phone landscape, low-height tablets): shrink the modal
   card so all controls remain visible without scrolling. */
@media (max-height: 480px) {
  .reveal-confirm-inner {
    padding: 14px 16px 12px;
    gap: 4px;
    max-width: 360px;
  }
  .reveal-confirm-emoji { font-size: 28px; }
  .reveal-confirm-modal h2 { font-size: 15px; letter-spacing: 1.5px; }
  .reveal-confirm-body { font-size: 12px; margin: 2px 0 6px; }
  .reveal-confirm-actions .btn { min-height: 40px; padding: 8px 10px; font-size: 13px; }
}

/* Modal (card manager) */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal[aria-hidden="false"] { display: flex; }
.modal-inner {
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.modal-inner h2 { margin: 0; }
.add-card {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
}
.add-card input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  /* Let 1fr shrink below the placeholder's intrinsic width so the Add
     button doesn't get pushed outside the modal on narrow viewports. */
  min-width: 0;
}
/* On short/narrow viewports the two inputs + button don't fit on one row.
   Stack the inputs and let Add span the full width. */
@media (max-width: 520px), (max-height: 480px) {
  .add-card {
    grid-template-columns: 1fr;
  }
  .add-card #addCardBtn { justify-self: stretch; }
}
.card-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  background: var(--panel);
  border-radius: 10px;
  min-height: 0;
  flex: 1;
}
.card-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 13px;
}
.card-row .sep { color: var(--muted); }
.card-row .del {
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.card-row.builtin { opacity: 0.85; }
.card-row.builtin .del { display: none; }


/* When target is revealed (screen cover hidden) */
#screenCover.hidden { display: none; }

/* Update banner — sits at the top of the viewport when a new service-worker
   version is waiting. Hidden by default; JS flips aria-hidden to reveal it. */
.update-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: none;
  padding: calc(var(--safe-top) + 8px) 12px 8px;
  background: linear-gradient(180deg, rgba(94,234,212,0.95), rgba(94,234,212,0.85));
  color: #0a1f26;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  animation: updateBannerIn 0.3s ease-out;
}
.update-banner[aria-hidden="false"] { display: block; }
@keyframes updateBannerIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}
.update-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.update-banner-icon {
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}
.update-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.update-banner-title {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.update-banner-version {
  font-size: 13px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.update-banner-version b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.update-banner-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.update-banner-actions .btn {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.update-banner-actions .btn.ghost {
  background: transparent;
  color: #0a1f26;
  border-color: rgba(10,31,38,0.35);
}
.update-banner-actions .btn.primary {
  background: #0a1f26;
  color: var(--accent);
  border-color: transparent;
}

/* Narrow viewports: stack text over buttons so nothing wraps awkwardly. */
@media (max-width: 520px) {
  .update-banner-inner {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .update-banner-text { flex: 1 1 100%; }
  .update-banner-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}
/* Phone-landscape: keep it a compact single row since vertical space is
   scarce. Shrink type and buttons. */
@media (orientation: landscape) and (max-height: 600px) {
  .update-banner { padding: calc(var(--safe-top) + 4px) 10px 4px; }
  .update-banner-icon { font-size: 18px; }
  .update-banner-title { font-size: 12px; }
  .update-banner-version { font-size: 11px; }
  .update-banner-actions .btn {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* Portrait-on-phones blocker. Hidden by default; the media query below
   enables it only when the viewport is narrow AND portrait. Tablets in
   portrait are wide enough that the max-width guard keeps the app visible. */
#rotateGate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(1200px 800px at 50% -10%, #1a5a66 0%, var(--bg) 60%);
  color: var(--text);
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.rotate-inner { max-width: 340px; }
.rotate-icon {
  font-size: 64px;
  color: var(--accent);
  margin-bottom: 16px;
  animation: rotateHint 2s ease-in-out infinite;
  display: inline-block;
}
#rotateGate h2 {
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--accent);
}
#rotateGate p {
  font-size: 15px;
  color: var(--text);
  opacity: 0.85;
  margin: 0;
  line-height: 1.4;
}
@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}

/* Phone-portrait detection: narrow viewport (<= 600px wide) held portrait.
   Tablets are wider than 600px in portrait so the app remains usable. */
@media (orientation: portrait) and (max-width: 600px) {
  #rotateGate { display: flex; }
  #app { display: none !important; }
}

/* Per-phase visibility. Each button row is shown only on the screens where
   it applies. Body[data-phase] is set from app.js. */
.row-setup, .row-spinning, .row-psychicKnows, .row-guessing, .row-revealed {
  display: none;
}

body[data-phase="setup"]        .row-setup        { display: grid; }
body[data-phase="spinning"]     .row-spinning     { display: grid; }
body[data-phase="psychicKnows"] .row-psychicKnows { display: grid; }
body[data-phase="guessing"]     .row-guessing     { display: grid; }
body[data-phase="revealed"]     .row-revealed     { display: grid; }

/* Restart Turn button in the top bar. Only appears on post-setup,
   pre-revealed phases: once the reveal is confirmed the score stands and
   there's nothing to restart. */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-restart {
  display: none;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.topbar-restart:active:not(:disabled) { transform: scale(0.96); }
.topbar-restart:disabled { opacity: 0.4; cursor: not-allowed; }
.topbar-restart .restart-icon {
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
}
body[data-phase="spinning"]     .topbar-restart,
body[data-phase="psychicKnows"] .topbar-restart,
body[data-phase="guessing"]     .topbar-restart {
  display: inline-flex;
}

/* Full card picker on setup only; hidden during round phases. */
body[data-phase="spinning"] .card-strip,
body[data-phase="psychicKnows"] .card-strip,
body[data-phase="guessing"] .card-strip,
body[data-phase="revealed"] .card-strip { display: none; }

/* Dial hidden on setup (before the psychic spins), visible on all other phases. */
body[data-phase="setup"] .dial-wrap { display: none; }

/* Force flex-column layout across all phases so every screen has the same
   anchoring: topbar → main content → action panel. Overrides any grid
   layout from wider media queries below. */
body[data-phase="setup"] #app,
body[data-phase="spinning"] #app,
body[data-phase="psychicKnows"] #app,
body[data-phase="guessing"] #app,
body[data-phase="revealed"] #app {
  display: flex !important;
  flex-direction: column;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
}

/* Landscape on the setup screen: keep the card to ~75% width and ensure the
   Spin button stays above the fold. */
@media (orientation: landscape) and (max-height: 600px),
       (orientation: landscape) and (min-width: 820px) {
  body[data-phase="setup"] .card-strip {
    width: 75vw;
    max-width: 75vw;
    margin-top: clamp(8px, 2vh, 20px);
    margin-bottom: clamp(8px, 2vh, 20px);
  }
  body[data-phase="setup"] .card {
    aspect-ratio: auto;    /* let it fill the column instead of self-sizing */
    height: min(38vh, calc((75vw - 96px) / 2.5));
    max-height: 38vh;
    justify-self: stretch;
  }
  body[data-phase="setup"] .card-side {
    font-size: clamp(18px, 3vw, 32px);
    padding: 8px 10px;
  }
  body[data-phase="setup"] .controls {
    padding: 8px 20px;
    gap: 6px;
  }
  body[data-phase="setup"] .btn.large {
    padding: 12px 20px;
    font-size: 16px;
    letter-spacing: 1.5px;
  }
  body[data-phase="setup"] .phase { font-size: 12px; margin-bottom: 2px; }
}

/* Phone-landscape: compact layout with absolute topbar and a 3-panel bottom
   row on every screen: [scoreboard][controls][help/round-result]. */
@media (orientation: landscape) and (max-height: 600px) {
  body #app {
    padding-top: calc(var(--safe-top) + 4px);
    padding-bottom: calc(var(--safe-bottom) + 4px);
    gap: 6px;
    justify-content: center;
  }
  /* Absolute topbar so it doesn't push the centered content block down. */
  body .topbar {
    position: absolute;
    top: calc(var(--safe-top) + 4px);
    left: 16px;
    right: 16px;
    z-index: 5;
  }
  /* Sudden-death badge sits inline with the title; keep it compact. */
  body .sd-badge,
  body .ft-badge {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 1px;
  }
  body .topbar h1 { gap: 6px; font-size: 16px; }
  body .controls {
    padding: 6px 16px;
    margin-bottom: 0;
    max-width: min(360px, 50vw) !important;
  }
  /* Restart Turn in the topbar: on phone-landscape the topbar is compact,
     so shrink to icon + short label. */
  body .topbar-restart {
    height: 32px;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 0.5px;
    gap: 4px;
  }
  body .topbar-restart .restart-icon { font-size: 14px; }
  body .topbar-restart .restart-label { font-size: 10px; }

  /* Setup screen mirrors the round-phase layout: absolute topbar, card-strip
     fills the middle (like dial-wrap does on round phases), controls sits at
     the bottom flanked by absolute-positioned scoreboard/help panels. */
  body[data-phase="setup"] #app {
    padding-top: calc(var(--safe-top) + 44px);
    padding-bottom: calc(var(--safe-bottom) + 8px);
    justify-content: flex-start;
    gap: 0;
  }
  body[data-phase="setup"] .card-strip {
    width: 75vw;
    max-width: 75vw;
    margin: 16px auto;
    padding: 0;
    align-self: center;
    flex: 1 1 auto;
    min-height: 0;
  }
  body[data-phase="setup"] .card {
    aspect-ratio: auto;
    height: 100%;
    max-height: 100%;
    min-width: 0;
    justify-self: stretch;
  }
  body[data-phase="setup"] .card-side {
    font-size: clamp(16px, 3vw, 28px);
    padding: 8px 10px;
  }
  body[data-phase="setup"] .card-nav {
    min-height: 40px;
    font-size: 22px;
  }
  body[data-phase="setup"] .controls {
    width: min(360px, 50vw);
    max-width: min(360px, 50vw) !important;
    height: 84px;
    justify-content: center;
    padding: 6px 12px !important;
    gap: 4px;
    margin-top: 0;
    margin-bottom: 0;
    align-self: center;
    box-sizing: border-box;
  }
  body[data-phase="setup"] .btn.large {
    padding: 10px 14px;
    font-size: 14px;
    letter-spacing: 1.5px;
  }
  body[data-phase="setup"] .row-setup { width: 100%; }
  body[data-phase="setup"] .phase {
    margin-bottom: 0 !important;
  }

  body .scoreboard {
    display: grid !important;
    position: absolute;
    left: max(10px, env(safe-area-inset-left));
    bottom: calc(var(--safe-bottom) + 8px);
    /* Fill the left flank up to the action panel edge, locked height so
       both flanks share top+bottom edges. */
    width: calc((100vw - min(360px, 50vw)) / 2 - 16px);
    height: 84px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "left right"
      "turn turn";
    padding: 6px 8px;
    column-gap: 6px;
    row-gap: 4px;
    z-index: 3;
    box-sizing: border-box;
  }
  body .scoreboard .team-left  { grid-area: left; }
  body .scoreboard .team-right { grid-area: right; }
  body .scoreboard .turn-indicator { grid-area: turn; }
  body .scoreboard .team {
    padding: 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
  }
  body .scoreboard .team-name {
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 0;
    min-width: 0;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  body .scoreboard .score-row { gap: 4px; }
  body .scoreboard .score {
    font-size: 20px;
    min-width: 22px;
  }
  body .scoreboard .score-btn {
    width: 28px; height: 28px; font-size: 14px;
  }
  body .scoreboard .turn-indicator {
    font-size: 9px;
    padding: 3px 4px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
  }

  /* Right column panel — matches the scoreboard's styling so the two flanks
     read as siblings on the same row. .phase and .round-result are separate
     DOM nodes; each is absolutely positioned to occupy the same right-flank
     rectangle. */
  body .phase,
  body .round-result {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    left: auto !important;
    top: auto !important;
    bottom: calc(var(--safe-bottom) + 8px) !important;
    width: calc((100vw - min(360px, 50vw)) / 2 - 16px) !important;
    height: 84px !important;
    padding: 6px 8px;
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    font-size: 13px;
    letter-spacing: 1.5px;
    line-height: 1.25;
    overflow: hidden;
    z-index: 3;
    box-sizing: border-box;
  }
  /* Round result shows per-team scores — stack lines vertically, left-aligned
     so multiple lines share a common left edge. Other help text stays
     centered. */
  body .round-result {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    padding-left: 12px !important;
    gap: 2px !important;
  }
  body .round-result-line { display: block; }
  /* Hide empty panels so we don't render a blank card. */
  body .phase:empty,
  body .round-result:empty {
    display: none !important;
  }

  /* All dial phases on phone-landscape: dial gets top billing with card
     values flanking it in a 3-column [label][dial][label] grid. */
  body:not([data-phase="setup"]) #app {
    padding-top: calc(var(--safe-top) + 44px);
    justify-content: flex-start;
  }
  body:not([data-phase="setup"]) .dial-wrap {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    column-gap: 8px;
    width: 100%;
    max-width: 100vw;
    padding: 4px 8px 2px;
    margin: auto;
    min-height: 0;
    overflow: hidden;
  }
  body:not([data-phase="setup"]) #dial {
    grid-column: 2;
    grid-row: 1;
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 160px);
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 160px);
    width: auto;
    max-width: 100%;
    display: block;
  }
  body:not([data-phase="setup"]) .dial-labels.visible { display: contents; }
  body:not([data-phase="setup"]) .dial-label.left  { grid-column: 1; grid-row: 1; }
  body:not([data-phase="setup"]) .dial-label.right { grid-column: 3; grid-row: 1; }
  body:not([data-phase="setup"]) .dial-label {
    position: static;
    transform: none;
    max-width: 100%;
    font-size: clamp(15px, 3vw, 22px);
    padding: 8px 12px;
    background: rgba(255,255,255,0.06);
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
  }
  body:not([data-phase="setup"]) .btn-row .btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  /* Swap to short button labels — the guessing row's abbreviated text keeps
     the action panel narrow. */
  .lbl-full  { display: none; }
  .lbl-short { display: inline; }
}

/* Hero primary action button on the setup screen */
.btn.large {
  padding: 28px 20px;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
}

/* Every phase's controls panel: hugged, centered, action-focused. */
body[data-phase="setup"]        .controls,
body[data-phase="spinning"]     .controls,
body[data-phase="psychicKnows"] .controls,
body[data-phase="guessing"]     .controls,
body[data-phase="revealed"]     .controls {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center !important;
  text-align: center;
  width: auto;
  max-width: 480px;
  padding: 16px 24px;
  gap: 10px;
}

/* Dial-phase button rows and sizing. */
body[data-phase="spinning"] .row-spinning {
  grid-template-columns: auto 1fr;
  justify-content: center;
  width: 100%;
  gap: 10px;
}
/* Guessing row: [Opp Left] [Reveal] [Opp Right] on one line. */
body[data-phase="guessing"] .row-guessing {
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  width: 100%;
  gap: 10px;
}
body[data-phase="guessing"] .row-guessing .btn { white-space: nowrap; }
body[data-phase="guessing"] .row-guessing .btn.small {
  font-size: clamp(11px, 1.6vw, 14px);
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: 0.3px;
}
body[data-phase="guessing"] .row-guessing #revealBtn {
  padding-left: 20px;
  padding-right: 20px;
}
body[data-phase="guessing"] .controls { max-width: 720px; }
body[data-phase="spinning"]     .btn-row .btn,
body[data-phase="psychicKnows"] .btn-row .btn,
body[data-phase="guessing"]     .btn-row .btn,
body[data-phase="revealed"]     .btn-row .btn {
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}
body[data-phase="spinning"]     .btn-row .btn.small,
body[data-phase="guessing"]     .btn-row .btn.small {
  padding: 16px 14px;
  font-size: 14px;
}
body[data-phase="psychicKnows"] .row-psychicKnows,
body[data-phase="revealed"]     .row-revealed {
  width: 100%;
}
body[data-phase="setup"] .controls > * {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body[data-phase="setup"] .row-setup {
  display: flex !important;
  justify-content: center;
}
body[data-phase="setup"] .row-setup .btn {
  width: 100%;
}

/* Small screens */
@media (max-height: 700px) {
  .card { min-height: 100px; max-height: 30vh; }
  .card-side { font-size: clamp(22px, 5.5vw, 32px); padding: 10px 10px; }
  .score { font-size: 24px; }
  .btn { padding: 10px 6px; }
}

/* Landscape sizing tweaks: shrink scoreboard, buttons, and card text. */
@media (orientation: landscape) and (max-height: 600px),
       (min-width: 820px) and (min-aspect-ratio: 4/3) {
  .score { font-size: 22px; }
  .btn { padding: 10px 6px; font-size: 13px; }
  .btn.small { padding: 8px 4px; font-size: 11px; }
  .card { max-height: none; }
  .card-side { font-size: clamp(24px, 4.5vw, 40px); padding: 14px 12px; }
  /* Tighten the modal backdrop on short viewports so the How to Play card
     has more room and its inner body can scroll comfortably. */
  .modal { padding: 8px; }
  .how-to { padding: 12px 14px 10px; max-height: calc(100dvh - 16px); }
  .how-to > h2 { font-size: 16px; }
  .how-to-body { font-size: 13px; line-height: 1.4; }
  .how-to-body section { margin-top: 10px; }
}