/* ── Play UI — Mobile-first, themeable ──────────────────────────────────────── */

/* ── Design tokens: Night mode (default) ─────────────────────────────────── */
:root {
  --play-bg:           #0f1624;
  --play-bg-card:      #131e35;
  --play-bg-input:     #0a1628;
  --play-border:       #1c3060;
  --play-border-muted: #4B5563;
  --play-text:         #d0daf0;
  --play-text-bright:  #e0e8ff;
  --play-text-muted:   #6a8ab5;
  --play-text-second:  #8aa4d4;
  --play-placeholder:  #3d5a8a;
  --play-placeholder2: #2d4a72;
  --play-divider:      rgba(255,255,255,0.07);

  /* Accent — Blue (default, matches landing page) */
  --play-accent:       #4255FF;
  --play-accent-rgb:   66,85,255;
  --play-accent-text:  #ffffff;
  --play-accent-light: #a5b4fc;
}

/* ── Day (light) mode ────────────────────────────────────────────────────── */
html.light {
  --play-bg:           #F6F7FB;
  --play-bg-card:      #ffffff;
  --play-bg-input:     #ffffff;
  --play-border:       rgba(66,85,255,.15);
  --play-border-muted: rgba(66,85,255,.25);
  --play-text:         #4a5080;
  --play-text-bright:  #1a1e3c;
  --play-text-muted:   #6b7280;
  --play-text-second:  #4a5080;
  --play-placeholder:  rgba(26,30,60,.35);
  --play-placeholder2: rgba(26,30,60,.28);
  --play-divider:      rgba(66,85,255,.10);
}

/* ── 6 Accent themes ─────────────────────────────────────────────────────── */
/* 1. Blue — default, no class needed */

/* 2. Amber */
html.theme-amber {
  --play-accent:       #ffc107;
  --play-accent-rgb:   255,193,7;
  --play-accent-text:  #1a1a1a;
  --play-accent-light: #ffe08a;
}
/* 3. Ocean */
html.theme-ocean {
  --play-accent:       #0ea5e9;
  --play-accent-rgb:   14,165,233;
  --play-accent-text:  #ffffff;
  --play-accent-light: #7dd3fc;
}
/* 4. Violet */
html.theme-violet {
  --play-accent:       #8b5cf6;
  --play-accent-rgb:   139,92,246;
  --play-accent-text:  #ffffff;
  --play-accent-light: #c4b5fd;
}
/* 5. Emerald */
html.theme-emerald {
  --play-accent:       #10b981;
  --play-accent-rgb:   16,185,129;
  --play-accent-text:  #ffffff;
  --play-accent-light: #6ee7b7;
}
/* 6. Rose */
html.theme-rose {
  --play-accent:       #f43f5e;
  --play-accent-rgb:   244,63,94;
  --play-accent-text:  #ffffff;
  --play-accent-light: #fda4af;
}
/* 7. Slate */
html.theme-slate {
  --play-accent:       #94a3b8;
  --play-accent-rgb:   148,163,184;
  --play-accent-text:  #0f172a;
  --play-accent-light: #e2e8f0;
}

/* ── Bootstrap btn-warning → accent colour ───────────────────────────────── */
.btn-warning {
  --bs-btn-bg:                 var(--play-accent);
  --bs-btn-border-color:       var(--play-accent);
  --bs-btn-hover-bg:           var(--play-accent);
  --bs-btn-hover-border-color: var(--play-accent);
  --bs-btn-active-bg:          var(--play-accent);
  --bs-btn-active-border-color:var(--play-accent);
  --bs-btn-color:              var(--play-accent-text);
  --bs-btn-hover-color:        var(--play-accent-text);
  --bs-btn-active-color:       var(--play-accent-text);
  --bs-btn-focus-shadow-rgb:   var(--play-accent-rgb);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.play-body {
  background: var(--play-bg);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--play-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Dot grid — landing page hero motif */
  background-image: radial-gradient(circle, rgba(var(--play-accent-rgb),.055) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Headings use Plus Jakarta Sans (loaded in base.html) */
h1, h2, h3, h4, h5,
.play-brand, .play-card-title, .play-round-badge, .play-card-eyebrow {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.play-header {
  background: var(--play-bg-card);
  border-bottom: 1px solid var(--play-border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(var(--play-accent-rgb),.08);
}
.play-brand {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.2px;
  color: var(--play-text-bright);
  text-decoration: none;
}
.play-brand:hover { color: var(--play-accent); }
.play-brand-logo {
  height: 55px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* ── Header icon button (⋮ menu trigger) ────────────────────────────────── */
.play-icon-btn {
  background: none;
  border: none;
  color: var(--play-text-second);
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: color .15s;
  flex-shrink: 0;
}
.play-icon-btn:hover { color: var(--play-accent); }

/* ── ⋮ Dropdown menu ────────────────────────────────────────────────────── */
.play-menu {
  position: fixed;
  top: 54px;
  right: 10px;
  background: var(--play-bg-card);
  border: 1px solid var(--play-border);
  border-radius: 16px;
  padding: 6px 0;
  z-index: 400;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  min-width: 210px;
  animation: play-menu-in .15s ease;
}
@keyframes play-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.play-menu-sep {
  height: 1px;
  background: var(--play-border);
  margin: 4px 0;
}
.play-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--play-text);
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
}
.play-menu-row:hover { background: rgba(var(--play-accent-rgb),.08); }
.play-menu-icon {
  font-size: 1rem;
  color: var(--play-text-second);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.play-menu-label { flex: 1; }
.play-menu-logout .play-menu-icon,
.play-menu-logout .play-menu-label { color: #f87171; }
.play-menu-logout:hover { background: rgba(248,113,113,.08); }

/* Language buttons inside menu */
.play-menu-lang-row { cursor: default; gap: 8px; }
.play-menu-lang-row:hover { background: none; }
.play-lang-btn {
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--play-border);
  background: none;
  color: var(--play-text-second);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.play-lang-btn.active,
.play-lang-btn:hover {
  background: var(--play-accent);
  color: var(--play-accent-text);
  border-color: var(--play-accent);
}

/* ── Native <dialog> confirm ─────────────────────────────────────────────── */
dialog.play-dialog {
  background: var(--play-bg-card);
  border: 1px solid var(--play-border);
  border-radius: 16px;
  padding: 22px 18px;
  color: var(--play-text);
  max-width: min(92vw, 360px);
  width: 100%;
}
dialog.play-dialog::backdrop { background: rgba(0,0,0,0.65); }
dialog.play-dialog h5 {
  color: var(--play-text-bright);
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  margin: 0 0 8px;
}
dialog.play-dialog p {
  color: var(--play-text-second);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 20px;
}
.play-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Main content area ───────────────────────────────────────────────────── */
.play-main {
  flex: 1;
  padding: 12px 12px 100px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.play-card {
  background: var(--play-bg-card);
  border: 1px solid var(--play-border);
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 4px 16px rgba(var(--play-accent-rgb),.08);
}
.play-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--play-text-bright);
  margin-bottom: 4px;
}

/* Eyebrow pill — matches landing page section labels */
.play-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(var(--play-accent-rgb),.09);
  color: var(--play-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 20px;
  padding: .22rem .8rem;
  border: 1px solid rgba(var(--play-accent-rgb),.18);
  margin-bottom: .65rem;
}

.play-label {
  color: var(--play-text-second);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 4px;
}

/* ── Phone input group (country code + number) ──────────────────────────── */
.phone-input-group {
  display: flex;
  gap: 0;
}
.phone-country-select {
  width: 110px;
  flex-shrink: 0;
  background: var(--play-bg-input);
  color: var(--play-text-bright);
  border: 1px solid var(--play-border);
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;
  height: 48px;
  font-size: 0.9rem;
  padding: 0 8px;
  appearance: auto;
}
.phone-country-select:focus {
  outline: none;
  border-color: var(--play-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--play-accent-rgb),0.18);
  z-index: 1;
}
.phone-input-group .play-input.phone-local-input {
  border-radius: 0 10px 10px 0 !important;
  flex: 1;
}

/* ── Inputs — 16px minimum to prevent iOS Safari auto-zoom ─────────────── */
.play-input {
  background: var(--play-bg-input) !important;
  color: var(--play-text-bright) !important;
  border: 1px solid var(--play-border) !important;
  border-radius: 10px !important;
  height: 48px;
  font-size: 1rem;
  padding: 0 16px;
  scroll-margin-bottom: 24px;
}
.play-input:focus {
  border: 2px solid var(--play-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--play-accent-rgb),0.18) !important;
  outline: none;
}
.play-input::placeholder { color: var(--play-placeholder); }

/* ── Buttons — min 48px touch target ────────────────────────────────────── */
.play-btn {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  transition: transform .1s, opacity .1s;
}
.play-btn:active { transform: scale(0.98); opacity: 0.88; }

/* ── Round header ────────────────────────────────────────────────────────── */
.play-round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 10px;
  gap: 8px;
}
.play-round-badge {
  background: var(--play-accent);
  color: var(--play-accent-text);
  border-radius: 20px;
  padding: 5px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.play-team-name {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.82rem;
  color: var(--play-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.play-back-link {
  flex-shrink: 0;
  color: var(--play-text-second);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  padding: 0 4px;
}
.play-back-link:hover { color: var(--play-accent); }

/* ── Question cards ──────────────────────────────────────────────────────── */
.play-question-card {
  background: var(--play-bg-card);
  border: 1px solid var(--play-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.play-question-number {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--play-accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.play-question-text {
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--play-text);
}

/* ── Answer textarea ─────────────────────────────────────────────────────── */
.play-answer-input {
  background: var(--play-bg-input) !important;
  color: var(--play-text-bright) !important;
  border: 1px solid var(--play-border) !important;
  border-radius: 10px !important;
  font-size: 1rem;
  padding: 12px 16px;
  resize: none;
  min-height: 80px;
  transition: border-color .15s;
  line-height: 1.5;
}
.play-answer-input:focus {
  border: 2px solid var(--play-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--play-accent-rgb),0.18) !important;
  outline: none;
}
.play-answer-input::placeholder { color: var(--play-placeholder2); }

/* ── Sticky submit bar ───────────────────────────────────────────────────── */
.play-submit-bar {
  position: sticky;
  bottom: 0;
  padding: 14px 0 6px;
  background: linear-gradient(to bottom, transparent, var(--play-bg) 40%);
  margin-top: 8px;
}
.play-submit-bar .btn {
  box-shadow: 0 -4px 20px rgba(var(--play-accent-rgb),0.22);
}

/* ── Lobby waiting animation ─────────────────────────────────────────────── */
.play-spinner {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto;
}
.play-spinner circle { stroke: var(--play-accent); }

@keyframes play-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; }
  40%            { opacity: 1; }
}
.play-waiting-dot {
  background-color: var(--play-accent) !important;
  animation: play-dot-pulse 1.4s ease-in-out infinite;
}
.play-dot {
  width: 10px;
  height: 10px;
}

/* ── Question selector grid ──────────────────────────────────────────────── */
.play-q-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.play-q-btn {
  position: relative;
  background: var(--play-bg-card);
  border: 1px solid var(--play-border-muted);
  border-radius: 14px;
  color: var(--play-text-muted);
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
  text-decoration: none;
}
.play-q-btn:hover  { border-color: var(--play-accent); color: var(--play-accent); }
.play-q-btn:active { transform: scale(0.94); }
.play-q-answered {
  background: rgba(var(--play-accent-rgb),0.10);
  border: 2px solid var(--play-accent);
  color: var(--play-accent);
}
.play-q-number { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.play-q-check {
  position: absolute;
  bottom: 5px;
  right: 9px;
  font-size: 0.75rem;
  line-height: 1;
}

/* ── Answer review list ──────────────────────────────────────────────────── */
.play-answers-review {
  border-top: 1px solid var(--play-border);
  padding-top: 6px;
}
.play-answer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--play-divider);
  text-decoration: none;
  color: inherit;
  transition: opacity .1s;
}
.play-answer-row:active { opacity: 0.65; }
.play-answer-row:last-child { border-bottom: none; }
.play-q-badge-sm {
  flex-shrink: 0;
  background: var(--play-accent);
  color: var(--play-accent-text);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.play-answer-preview {
  flex: 1;
  color: var(--play-text);
  font-size: 0.93rem;
  line-height: 1.4;
  word-break: break-word;
}
.play-answer-edit {
  flex-shrink: 0;
  color: var(--play-border-muted);
  font-size: 0.9rem;
}

/* ── Finish / results ────────────────────────────────────────────────────── */
.play-finish-icon { font-size: 3.5rem; }
.play-results-table {
  color: var(--play-text);
  font-size: 0.88rem;
}
.play-results-table th {
  color: var(--play-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-color: var(--play-border);
  background: var(--play-bg);
}
.play-results-table td {
  border-color: var(--play-border);
  vertical-align: middle;
}
.play-my-row td { background: rgba(var(--play-accent-rgb),.1) !important; color: var(--play-accent-light); }

/* ── Desktop (≥768px) ────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .play-main { padding: 28px 20px 40px; }
  .play-card {
    padding: 30px 26px;
    box-shadow: 0 6px 24px rgba(var(--play-accent-rgb),.10);
  }
  .play-card:hover { box-shadow: 0 12px 36px rgba(var(--play-accent-rgb),.14); }
  .play-submit-bar {
    position: relative;
    padding: 16px 0 0;
    background: transparent;
    box-shadow: none;
  }
  .play-submit-bar .btn { box-shadow: none; }
  .play-question-card { padding: 18px 20px; }
}

/* ── PWA install banner ──────────────────────────────────────────────────── */
.play-install-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--play-bg-card);
  border-top: 1px solid var(--play-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.play-install-banner.visible { transform: translateY(0); }
.play-install-banner__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}
.play-install-banner__text { flex: 1; min-width: 0; line-height: 1.3; }
.play-install-banner__title { font-weight: 600; font-size: .9rem; color: var(--play-text-bright); }
.play-install-banner__sub   { font-size: .75rem; color: var(--play-text-muted); }
.play-install-banner__btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border: none; border-radius: 8px;
  background: var(--play-accent);
  color: var(--play-accent-text);
  font-weight: 700; font-size: .85rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.play-install-banner__close {
  flex-shrink: 0;
  background: none; border: none;
  color: var(--play-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

/* ── Kahoot-style question types (multiselect / sequence / media) ─────────── */

.play-question-media,
.play-question-media-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1rem 0;
  border-radius: 12px;
  overflow: hidden;
}

.play-question-media-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}

/* Image question media — medium size by default, tap/click to expand. */
.play-media-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  margin: 0 0 1rem 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  transition: height .25s ease;
}

.play-media-frame img.play-question-media {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .3s ease;
}

.play-media-frame img.play-question-media.is-loaded {
  opacity: 1;
}

.play-media-frame.expanded {
  height: 70vh;
  cursor: zoom-out;
}

.play-media-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--play-placeholder) 25%,
    var(--play-placeholder2) 37%,
    var(--play-placeholder) 63%);
  background-size: 400% 100%;
  animation: play-media-shimmer 1.4s ease infinite;
}

@keyframes play-media-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Audio question media — custom play/pause player, replacing the browser's
   native <audio controls> widget so it matches the rest of the UI. */
.play-audio-player {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 1rem 0;
  padding: 12px 16px;
  background: var(--play-bg-input);
  border: 1px solid var(--play-border);
  border-radius: 14px;
}

.play-audio-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--play-accent);
  color: var(--play-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform .1s, opacity .1s;
}
.play-audio-btn:active { transform: scale(0.94); opacity: 0.88; }
/* Optical centering — the play triangle glyph isn't visually centered by default. */
.play-audio-btn i { margin-left: 2px; }
.play-audio-btn.is-playing i { margin-left: 0; }

.play-audio-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: var(--play-border-muted);
  cursor: pointer;
}

.play-audio-progress {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: inherit;
  background: var(--play-accent);
  transition: width .1s linear;
}

.play-option-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.play-option-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
  font-weight: 500;
  color: var(--play-text);
}

.play-option-check:hover {
  border-color: var(--yellow, #ffc107);
  background: rgba(255, 193, 7, 0.08);
}

.play-option-check:active { transform: scale(0.99); }

.play-option-check input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--yellow, #ffc107);
  flex-shrink: 0;
}

.play-option-check input[type="checkbox"]:checked ~ span,
.play-option-check:has(input:checked) {
  border-color: var(--yellow, #ffc107);
  background: rgba(255, 193, 7, 0.12);
}

.play-sequence-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: seqcount;
}

.play-sequence-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  cursor: grab;
  user-select: none;
  counter-increment: seqcount;
}

.play-sequence-row::before {
  content: counter(seqcount);
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--yellow, #ffc107);
  color: #000;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.play-sequence-row.play-seq-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.play-seq-btn {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: var(--play-text);
  border-radius: 8px;
  padding: 0.1rem 0.45rem;
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
}

.play-seq-btn:hover { border-color: var(--yellow, #ffc107); }

.play-seq-text { flex: 1; }

.play-seq-grip {
  color: var(--play-text-muted);
  opacity: 0.5;
  font-size: 1.1rem;
  cursor: grab;
}

/* Review panel on the results page (show_answers_after). */
.play-review-round {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.play-review-round summary {
  cursor: pointer;
  padding: 0.25rem 0;
}

.play-review-list {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 0;
}

.play-review-item {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.play-review-item:last-child { border-bottom: 0; }

.play-review-q { font-weight: 600; margin-bottom: 0.25rem; }

.play-review-line {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  line-height: 1.35;
}

.play-review-your { color: var(--play-text); }
.play-review-key { color: var(--yellow, #ffc107); font-weight: 600; }

.play-review-score {
  font-size: 0.8rem;
  color: var(--play-text-muted);
  margin-top: 0.15rem;
}