@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
@font-face {
  font-family: "MyFont";
  src: url("/static/fonts/DINNeuzeitGroteskLT-BoldCond.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: "MyFont", sans-serif;
}

button, input[type=submit], input[type=button] {
  font-family: "MyFont", sans-serif !important;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --green-deep: #1a4a1a;
  --green-mid: #2d7a2d;
  --green-bright: #4caf50;
  --green-neon: #7fff00;
  --green-felt: #1a5c2a;
  --gold: #ffd700;
  --gold-dim: #b8960a;
  --gold-subtle: rgba(255, 215, 0, 0.12);
  --red: #e53935;
  --red-glow: #ff7070;
  --white: #f5f5f0;
  --off-white: #e8e5d8;
  --dark: #0d1f0d;
  --darker: #060f06;
  --surface-1: #111c11;
  --surface-2: #172217;
  --surface-3: #1e2e1e;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-hover: rgba(255, 255, 255, 0.07);
  --panel-strong: rgba(13, 31, 13, 0.88);
  --border: rgba(255, 255, 255, 0.12);
  --border-gold: rgba(255, 215, 0, 0.22);
  --text-dim: rgba(245, 245, 240, 0.65);
  --text-dimmer: rgba(245, 245, 240, 0.45);
  --text-faint: rgba(245, 245, 240, 0.28);
  --btn-a: #e53935;
  --btn-b: #f57c00;
  --btn-c: #1976d2;
  --btn-d: #8e24aa;
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 24px rgba(255, 215, 0, 0.15);
}

@keyframes allinFire {
  0% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }
  30% {
    transform: translateX(-50%) scale(1.12);
    filter: brightness(1.6);
  }
  100% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }
}
@keyframes allinPulse {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 14px rgba(229, 57, 53, 0.35);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 28px rgba(229, 57, 53, 0.7);
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0;
  }
}
@keyframes btnShimmer {
  0% {
    transform: translateX(-100%);
  }
  60% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes chipFall {
  0% {
    transform: translateY(-60px) rotate(0deg);
    opacity: 0.7;
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}
@keyframes chipFallMobile {
  0% {
    transform: translateY(-60px) rotate(0deg);
    opacity: 0.6;
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}
@keyframes chipPop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes dotPulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.85);
  }
  40% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes dp-endgame-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dp-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes dp-trophy-bounce {
  from {
    transform: scale(0.4) rotate(-12deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fallChip {
  0% {
    transform: translateY(-110vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
    background: rgba(255, 255, 255, 0.15);
  }
  50% {
    transform: scale(0.975);
    background: rgba(255, 255, 255, 0.1);
  }
}
@keyframes lbSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes livePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}
@keyframes lpChipFall {
  0% {
    transform: translateY(-60px) rotate(0deg);
    opacity: 0.7;
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}
@keyframes lpFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes nameModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes nameModalSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes panelInMobile {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes pspRowIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.7);
  }
}
@keyframes qrScan {
  0%, 100% {
    top: 14px;
    opacity: 0.8;
  }
  50% {
    top: calc(100% - 14px);
    opacity: 0.8;
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes valuePop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes wrongShake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-6px);
  }
  40%, 80% {
    transform: translateX(6px);
  }
}
/* ══════════════════════════════════════
   KlimaatCasino – Login Ball / User Menu
   Design system from wireframe v4
══════════════════════════════════════ */
/* ── Container ── */
.lb-container {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 999;
  display: inline-block;
  font-family: var(--font-body);
}

/* ── Avatar ball ── */
.lb-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(13, 31, 13, 0.85);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(10px);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
}

.lb-avatar:hover {
  transform: scale(1.08);
  border-color: var(--green-neon);
  color: var(--green-neon);
  text-shadow: 0 0 14px rgba(127, 255, 0, 0.6);
  box-shadow: 0 0 16px rgba(127, 255, 0, 0.2);
}

/* ── Dropdown ── */
.lb-dropdown {
  display: none;
  position: absolute;
  top: 54px;
  left: 0;
  width: 210px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 215, 0, 0.06);
  animation: lbSlideIn 0.18s ease-out;
  z-index: 1000;
}

/* ── Header ── */
.lb-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 4px 8px;
}

.lb-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.35);
  font-weight: 600;
}

.lb-username {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.01em;
}

/* ── Divider ── */
.lb-divider {
  border: none;
  border-top: 1px solid var(--panel-border);
  margin: 4px 0 10px;
}

/* ── Logout button ── */
.lb-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(229, 57, 53, 0.25);
  border-radius: 6px;
  background: rgba(229, 57, 53, 0.08);
  color: rgba(229, 57, 53, 0.85);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.lb-logout-btn:hover {
  background: rgba(229, 57, 53, 0.18);
  border-color: rgba(229, 57, 53, 0.5);
  color: #ff6b68;
}

.lb-logout-icon {
  font-size: 15px;
  line-height: 1;
}

/* ── Version tag ── */
.lb-version {
  font-size: 10px;
  color: rgba(245, 245, 240, 0.2);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.08em;
  font-family: "Courier New", monospace;
}

#kc-conn-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: "DM Sans", system-ui, sans-serif;
  text-align: center;
  background: rgba(184, 150, 10, 0.95);
  color: #1a1200;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  transform: translateY(-110%);
  transition: transform 0.3s ease;
}
#kc-conn-banner.kc-visible {
  display: flex;
  transform: translateY(0);
}
#kc-conn-banner.kc-ok {
  background: rgba(46, 125, 50, 0.95);
  color: #eaffea;
}
#kc-conn-banner .kc-spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #1a1200;
  animation: spin 1s linear infinite;
}
#kc-conn-banner.kc-ok .kc-spin {
  display: none;
}

body.template-homepage {
  background: #111;
  font-family: var(--font-body);
  color: var(--white);
  overflow-x: hidden;
}

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 60px;
  background: rgba(13, 31, 13, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  text-decoration: none;
}

.nav-logo em {
  color: var(--green-neon);
  font-style: normal;
}

.nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
}

.nav-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.2s;
}

.nav-btn.cta {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
  font-weight: 700;
}

.nav-btn.cta:hover {
  background: #ffe033;
}

.nav-btn.admin {
  background: rgba(229, 57, 53, 0.12);
  color: rgba(229, 57, 53, 0.85);
  border-color: rgba(229, 57, 53, 0.35);
  font-size: 11px;
  padding: 6px 13px;
}

.nav-btn.admin::before {
  content: "⚙ ";
}

.nav-btn.admin:hover {
  background: rgba(229, 57, 53, 0.22);
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  /* subtract the ticker height so the ticker fits on screen */
  min-height: calc(100vh - 40px);
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #1e4a1e 0%, var(--dark) 60%, var(--darker) 100%);
  display: flex;
  flex-direction: column;
  padding-top: 88px;
  position: relative;
  overflow: hidden;
}

/* Falling chips */
.chips-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.2;
}

.chip-ph {
  position: absolute;
  border-radius: 50%;
  border: 2.5px solid var(--gold);
  animation: chipFall linear infinite;
}

/* Falling chip images (from original JS) */
.chip {
  width: 44px;
  position: absolute;
  top: -60px;
  transform: translateX(-50%);
  animation: fallChip 4s ease-in forwards;
  pointer-events: none;
  z-index: 0;
}

/* Hero layout */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 20px;
  width: 100%;
}

/* Left */
.hero-left {
  padding-right: 40px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(127, 255, 0, 0.1);
  border: 1px solid var(--green-neon);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 11px;
  color: var(--green-neon);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero-tag::before {
  content: "●";
  font-size: 8px;
}

.hero-headline {
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.hero-headline .line-1 {
  color: var(--white);
}

.hero-headline .line-2 {
  color: var(--gold);
  display: block;
}

.hero-headline .line-3 {
  color: var(--green-neon);
  display: block;
}

.hero-subtitle {
  background: rgba(255, 215, 0, 0.08);
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 14px;
  color: rgba(245, 245, 240, 0.75);
  line-height: 1.65;
  margin: 20px 0 28px;
  max-width: 440px;
}

.hero-subtitle strong {
  color: var(--green-neon);
}

/* CTA cluster */
.cta-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.cta-cluster a {
  text-decoration: none;
}

.cta-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s, box-shadow 0.15s;
}

.cta-btn:hover {
  transform: translateY(-2px);
}

.cta-btn .cta-main {
  font-size: 15px;
  font-weight: 700;
}

.cta-btn .cta-sub {
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 0.04em;
}

.cta-btn.student {
  background: var(--gold);
  color: var(--dark);
  box-shadow: 0 4px 24px rgba(255, 215, 0, 0.35);
}

.cta-btn.student:hover {
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5);
}

.cta-btn.teacher {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.cta-btn.teacher:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Right: Slideshow */
.hero-right {
  position: relative;
}

.slideshow-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.08);
  aspect-ratio: 16/10;
  background: var(--green-deep);
}

/* Slides */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.slide.active {
  opacity: 1;
}

/* Image slides from Wagtail */
.slide-img .slide-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slide 1: Question round */
.slide-1 {
  background: linear-gradient(180deg, var(--green-deep) 0%, #0d2a0d 100%);
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
}

.s1-bar {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--white);
  text-align: center;
  letter-spacing: 0.08em;
}

.s1-question {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--white);
  text-align: center;
  letter-spacing: 0.05em;
  padding: 8px 0 4px;
}

.s1-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.s1-opt {
  flex: 1;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 500;
  color: white;
  gap: 8px;
}

.s1-opt span {
  font-family: var(--font-display);
  font-size: 13px;
}

.s1-opt.a {
  background: rgba(255, 215, 0, 0.35);
  border: 1px solid rgba(255, 215, 0, 0.5);
}

.s1-opt.b {
  background: rgba(233, 30, 99, 0.35);
  border: 1px solid rgba(233, 30, 99, 0.5);
}

.s1-opt.c {
  background: rgba(33, 150, 243, 0.35);
  border: 1px solid rgba(33, 150, 243, 0.5);
}

.s1-opt.d {
  background: rgba(76, 175, 80, 0.6);
  border: 1px solid rgba(76, 175, 80, 0.9);
}

.s1-live {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.s1-player {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: space-between;
}

.s1-player strong {
  color: var(--gold);
  font-size: 10px;
}

/* Slide 2: Wheel */
.slide-2 {
  background: linear-gradient(135deg, #0d2a0d 0%, var(--green-deep) 60%, #0d2a0d 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
  align-items: center;
}

.s2-wheel-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2-wheel {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(var(--red) 0deg 52deg, var(--gold) 52deg 103deg, #1976d2 103deg 154deg, #e91e63 154deg 205deg, #ff9800 205deg 256deg, #9c27b0 256deg 307deg, var(--green-bright) 307deg 360deg);
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
  position: relative;
}

.s2-wheel::after {
  content: "21";
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 18px;
  padding: 3px 10px;
  border-radius: 3px;
}

.s2-info {
  font-size: 11px;
}

.s2-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.s2-disasters {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s2-dis {
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  color: white;
}

.s2-dis.a {
  background: #1976d2;
}

.s2-dis.b {
  background: #ff9800;
}

.s2-dis.c {
  background: #795548;
}

.s2-dis.d {
  background: #e91e63;
}

.s2-dis.e {
  background: #9c27b0;
}

/* Slide 4: Scoreboard */
.slide-4 {
  background: #0d2a0d;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s4-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--white);
  text-align: center;
  letter-spacing: 0.06em;
}

.s4-correct {
  background: rgba(76, 175, 80, 0.25);
  border: 2px solid var(--green-bright);
  border-radius: 4px;
  padding: 8px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #81c784;
}

.s4-scores {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s4-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.s4-rank {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  width: 20px;
}

.s4-name {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
}

.s4-score {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--green-neon);
}

.s4-coins {
  font-size: 10px;
  opacity: 0.6;
}

/* Caption */
.slideshow-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 18px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  letter-spacing: 0.04em;
}

/* Slide controls */
.slide-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 10;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  border: none;
  transition: background 0.3s, transform 0.3s;
}

.dot.active {
  background: var(--gold);
  transform: scale(1.3);
}

.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
  line-height: 1;
}

.slide-arrow:hover {
  background: rgba(255, 215, 0, 0.3);
}

.slide-arrow.prev {
  left: 10px;
}

.slide-arrow.next {
  right: 10px;
}

/* Phone mockups */
.devices-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: flex-end;
  padding-right: 4px;
}

.phone-mock {
  width: 54px;
  background: var(--dark);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.phone-mock::after {
  content: "";
  display: block;
  padding-top: 175%;
}

.phone-screen {
  position: absolute;
  inset: 4px;
  background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.phone-screen .ps-btn {
  width: 80%;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.phone-screen .ps-btn.gold {
  background: rgba(255, 215, 0, 0.5);
}

.phone-label {
  text-align: center;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
  padding-top: 4px;
}

/* ══════════════════════════════════════
   TICKER
══════════════════════════════════════ */
.ticker-bar {
  background: var(--green-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 0;
  overflow: hidden;
}

.ticker-track {
  display: flex;
  gap: 60px;
  animation: ticker 24s linear infinite;
  white-space: nowrap;
}

.ticker-item {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.ticker-item strong {
  color: var(--gold);
}

/* ══════════════════════════════════════
   FEATURES
══════════════════════════════════════ */
.features {
  background: #111a11;
  padding: 56px 40px;
}

.features-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.features-eyebrow {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green-neon);
  margin-bottom: 8px;
  text-align: center;
}

.features-heading {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  text-align: center;
  color: var(--white);
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 24px;
  transition: border-color 0.2s, transform 0.2s;
}

.feat-card:hover {
  border-color: rgba(127, 255, 0, 0.3);
  transform: translateY(-3px);
}

.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(127, 255, 0, 0.1);
  border: 1px solid var(--green-neon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  margin-left: 40%;
}

.feat-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: 8px;
}

.feat-body {
  font-size: 13px;
  color: rgba(245, 245, 240, 0.6);
  line-height: 1.6;
}

/* ══════════════════════════════════════
   SOCIAL PROOF
══════════════════════════════════════ */
.social-proof {
  background: var(--dark);
  padding: 52px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.social-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.social-heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 40px);
  text-align: center;
  color: var(--white);
  letter-spacing: 0.04em;
  margin-bottom: 36px;
}

.stats-bar {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 44px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.stat-label {
  font-size: 12px;
  color: rgba(245, 245, 240, 0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.testimonial-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  transition: border-color 0.2s;
}

.testimonial-card:hover {
  border-color: rgba(255, 215, 0, 0.3);
}

.testimonial-quote {
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 10px;
}

.testimonial-text {
  font-size: 13px;
  color: rgba(245, 245, 240, 0.7);
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 16px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(127, 255, 0, 0.15);
  border: 1px solid rgba(127, 255, 0, 0.3);
  flex-shrink: 0;
  overflow: hidden;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-avatar {
  background: rgba(127, 255, 0, 0.15);
}

.author-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

.author-meta {
  font-size: 10px;
  color: rgba(245, 245, 240, 0.4);
}

/* ══════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════ */
.how {
  background: var(--dark);
  padding: 60px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.how-inner {
  max-width: 900px;
  margin: 0 auto;
}

.how-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  color: var(--gold);
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 40px;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}

.how-steps::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--green-neon));
  opacity: 0.25;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green-deep);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  position: relative;
  z-index: 1;
}

.step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

.step-desc {
  font-size: 11px;
  color: rgba(245, 245, 240, 0.5);
  line-height: 1.5;
}

/* ══════════════════════════════════════
   DUAL CTA
══════════════════════════════════════ */
.dual-cta {
  background: linear-gradient(135deg, var(--green-deep) 0%, #0d2a0d 50%, #1a3a2a 100%);
  border-top: 1px solid rgba(127, 255, 0, 0.15);
  border-bottom: 1px solid rgba(127, 255, 0, 0.15);
  padding: 60px 40px;
}

.dual-cta-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cta-panel {
  border-radius: 10px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cta-panel.student-panel {
  background: rgba(255, 215, 0, 0.08);
  border: 1.5px solid rgba(255, 215, 0, 0.35);
}

.cta-panel.teacher-panel {
  background: rgba(127, 255, 0, 0.05);
  border: 1.5px solid rgba(127, 255, 0, 0.2);
}

.panel-icon {
  font-size: 28px;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
}

.cta-panel.student-panel .panel-title {
  color: var(--gold);
}

.cta-panel.teacher-panel .panel-title {
  color: var(--green-neon);
}

.panel-body {
  font-size: 13px;
  color: rgba(245, 245, 240, 0.65);
  line-height: 1.6;
}

.pricing-note {
  background: rgba(255, 215, 0, 0.08);
  border: 1px dashed rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12px;
  color: rgba(245, 245, 240, 0.55);
}

.panel-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.02em;
  align-self: flex-start;
  transition: transform 0.15s;
  text-decoration: none;
  border: none;
  font-family: var(--font-body);
}

.panel-cta:hover {
  transform: translateY(-2px);
}

.cta-panel.student-panel .panel-cta {
  background: var(--gold);
  color: var(--dark);
}

.cta-panel.teacher-panel .panel-cta {
  background: transparent;
  color: var(--green-neon);
  border: 1.5px solid var(--green-neon);
}

.student-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
  background: var(--dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.footer-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--white);
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }
  .hero-left {
    padding-right: 0;
    margin-bottom: 32px;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .how-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .dual-cta-inner {
    grid-template-columns: 1fr;
  }
  .navbar {
    padding: 0 20px;
  }
  .footer {
    flex-direction: column;
    text-align: center;
  }
}
/* ══════════════════════════════════════
   KlimaatCasino – Docent Login Page
   Design system from wireframe v4
══════════════════════════════════════ */
body:has(.lp-page) {
  font-family: var(--font-body);
  background: radial-gradient(ellipse 90% 70% at 50% 20%, #1e4a1e 0%, var(--dark) 55%, var(--darker) 100%);
  min-height: 100vh;
  color: var(--white);
  overflow-x: hidden;
}

/* ── Page shell ── */
.lp-page {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Falling chips ── */
.lp-chips {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.15;
  z-index: 0;
}

.lp-chip {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: lpChipFall linear infinite;
}

/* ── Wrapper ── */
.lp-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 16px;
  width: 100%;
}

/* ── Card ── */
.lp-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.06);
}

/* ── Header ── */
.lp-header {
  text-align: center;
  margin-bottom: 28px;
}

.lp-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-neon);
  font-weight: 700;
  margin-bottom: 14px;
}

.lp-logo {
  width: 90px;
  margin-bottom: 14px;
  opacity: 0.92;
}

.lp-title {
  font-family: var(--font-display);
  font-size: 52px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 0 28px rgba(255, 215, 0, 0.35);
  line-height: 1;
  margin-bottom: 6px;
}

.lp-subtitle {
  font-size: 13px;
  color: rgba(245, 245, 240, 0.45);
  font-weight: 400;
}

/* ── Error ── */
.lp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(229, 57, 53, 0.1);
  border: 1px solid rgba(229, 57, 53, 0.35);
  color: rgba(255, 150, 148, 0.95);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.lp-error-icon {
  font-size: 15px;
  flex-shrink: 0;
}

/* ── Form ── */
.lp-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lp-field {
  margin-bottom: 18px;
}

.lp-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-neon);
  margin-bottom: 8px;
}

/* Django-rendered inputs */
.lp-field input,
.lp-form input[type=text],
.lp-form input[type=password] {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid var(--panel-border);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  margin-bottom: 0;
}

.lp-field input::placeholder,
.lp-form input::placeholder {
  color: rgba(245, 245, 240, 0.25);
}

.lp-field input:focus,
.lp-form input:focus {
  border-color: var(--gold);
  background: rgba(255, 215, 0, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

/* ── Password wrap ── */
.lp-password-wrap {
  position: relative;
}

.lp-password-wrap input {
  padding-right: 44px;
}

.lp-toggle {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
  opacity: 0.5;
  transition: opacity 0.15s;
  line-height: 1;
  user-select: none;
}

.lp-toggle:hover {
  opacity: 1;
}

/* ── Submit button ── */
.lp-btn-submit {
  width: 100%;
  padding: 14px;
  margin-top: 6px;
  background: var(--gold);
  color: var(--darker);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.lp-btn-submit:hover {
  background: #ffe033;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.35);
}

.lp-btn-submit:active {
  transform: translateY(0);
}

/* ── Forgot password ── */
.lp-forgot-link {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: rgba(245, 245, 240, 0.4);
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245, 245, 240, 0.2);
}

.lp-forgot-link:hover {
  color: var(--white);
}

.lp-forgot-box {
  display: none;
  margin-top: 14px;
  background: rgba(127, 255, 0, 0.06);
  border: 1px solid rgba(127, 255, 0, 0.2);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: center;
  animation: lpFadeIn 0.2s ease;
}

.lp-forgot-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.4);
  margin-bottom: 4px;
}

.lp-forgot-email {
  font-size: 15px;
  color: var(--green-neon);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Footer note ── */
.lp-footer-note {
  font-size: 12px;
  color: rgba(245, 245, 240, 0.25);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .lp-card {
    padding: 28px 22px 24px;
  }
  .lp-title {
    font-size: 44px;
  }
}
body.template-room {
  /* ═══════════════════════════════════════════════
     KlimaatCasino — Lobby / Room Page Styles
     Builds on home_style.css tokens
  ═══════════════════════════════════════════════ */
}
body.template-room {
  min-height: 100%;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #1e4a1e 0%, var(--dark) 60%, var(--darker) 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.template-room {
  /* ── Navbar room badge ────────────────────── */
}
body.template-room .nav-room-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 6px;
  padding: 5px 14px;
}
body.template-room .nav-room-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255, 215, 0, 0.55);
  text-transform: uppercase;
}
body.template-room .nav-room-code {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.1em;
}
body.template-room {
  /* ── Main layout ──────────────────────────── */
}
body.template-room .lobby-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 80px 24px 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
body.template-room {
  /* ── Panels ───────────────────────────────── */
}
body.template-room .lobby-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 104px);
}
body.template-room {
  /* Gold top accent */
}
body.template-room .lobby-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
}
body.template-room {
  /* ── Status badge ─────────────────────────── */
}
body.template-room .lobby-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(127, 255, 0, 0.07);
  border: 1px solid rgba(127, 255, 0, 0.22);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  color: var(--green-neon);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}
body.template-room .waiting-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-neon);
  animation: pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
body.template-room {
  /* ── Lobby heading ────────────────────────── */
}
body.template-room .lobby-heading {
  font-family: var(--font-display);
  line-height: 0.9;
  letter-spacing: 0.03em;
  margin: 0;
}
body.template-room .lh-line1 {
  display: block;
  font-size: clamp(20px, 2.5vw, 30px);
  color: rgba(245, 245, 240, 0.45);
}
body.template-room .lh-line2 {
  display: block;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--gold);
}
body.template-room {
  /* ── Name card ────────────────────────────── */
}
body.template-room .name-card {
  background: rgba(255, 215, 0, 0.06);
  border: 1.5px solid rgba(255, 215, 0, 0.25);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
body.template-room .name-card-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.5);
  white-space: nowrap;
}
body.template-room .name-card-value {
  flex: 1;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--gold);
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.template-room .name-edit-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
  font-family: var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}
body.template-room .name-edit-btn:hover {
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--gold);
  transform: none;
  box-shadow: none;
}
body.template-room {
  /* ── Name modal ───────────────────────────── */
}
body.template-room .name-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
}
body.template-room .name-modal-card {
  background: #0d2a0d;
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  border-radius: 14px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(420px, 92vw);
  animation: slideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body.template-room .name-modal-title {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold);
  letter-spacing: 0.04em;
}
body.template-room .name-modal-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--gold);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.template-room .name-modal-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.12);
}
body.template-room .name-modal-error {
  font-size: 12px;
  color: var(--red);
  min-height: 16px;
}
body.template-room .name-modal-btn {
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 7px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
  font-family: var(--font-body);
  text-transform: none;
  transition: background 0.15s, transform 0.15s;
}
body.template-room .name-modal-btn:hover {
  background: #ffe033;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35);
}
body.template-room {
  /* ── Start button ─────────────────────────── */
}
body.template-room .start-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 8px;
  padding: 16px 24px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 4px 24px rgba(255, 215, 0, 0.35);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
}
body.template-room .start-btn:hover {
  background: #ffe033;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5);
}
body.template-room .start-btn-label {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.06em;
  line-height: 1;
}
body.template-room .start-btn-icon {
  font-size: 26px;
}
body.template-room {
  /* ── Start hint & redirect ────────────────── */
}
body.template-room .start-hint {
  font-size: 12px;
  color: rgba(245, 245, 240, 0.35);
  text-align: center;
  letter-spacing: 0.04em;
  padding: 4px 0;
}
body.template-room .redirect-notice {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(76, 175, 80, 0.15);
  border: 1.5px solid var(--green-bright);
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #81c784;
}
body.template-room .redirect-notice.visible {
  display: flex;
}
body.template-room .redirect-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(129, 199, 132, 0.3);
  border-top-color: #81c784;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
body.template-room {
  /* ── Chip stack row ───────────────────────────── */
}
body.template-room .chip-stack-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 215, 0, 0.04);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
}
body.template-room .chip-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: -2px;
  position: relative;
  width: 36px;
  height: 56px;
  flex-shrink: 0;
}
body.template-room .cs-chip {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 50%/30%;
  border: 1.5px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
body.template-room .cs-chip:nth-child(1) {
  bottom: 0px;
  background: var(--btn-c);
}
body.template-room .cs-chip:nth-child(2) {
  bottom: 10px;
  background: var(--green-bright);
}
body.template-room .cs-chip:nth-child(3) {
  bottom: 20px;
  background: var(--red);
}
body.template-room .cs-chip:nth-child(4) {
  bottom: 30px;
  background: #fff;
}
body.template-room .cs-chip:nth-child(5) {
  bottom: 40px;
}
body.template-room .chip-stack-label {
  font-size: 13px;
  color: rgba(245, 245, 240, 0.5);
  line-height: 1.5;
}
body.template-room {
  /* ── Responsive ───────────────────────────── */
}
@media (max-width: 820px) {
  body.template-room .lobby-main {
    grid-template-columns: 1fr;
    padding: 76px 14px 20px;
    gap: 14px;
  }
  body.template-room .lobby-panel {
    max-height: none;
  }
}
body.template-room {
  /* ── Offline screen ───────────────────────── */
}
body.template-room .end-logo {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.45);
  margin-bottom: 6px;
}
body.template-room .end-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--white);
}
body.template-room .end-score-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}
body.template-room .end-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
  line-height: 1.6;
}

body.template-room-select {
  /* ══════════════════════════════════════
     ROOM SELECT PAGE
     Builds on home_style.css tokens
  ══════════════════════════════════════ */
}
body.template-room-select {
  min-height: 100vh;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #1e4a1e 0%, var(--dark) 55%, var(--darker) 100%);
  display: flex;
  flex-direction: column;
}
body.template-room-select {
  /* ── Main centered layout ── */
}
body.template-room-select .rs-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 40px;
}
body.template-room-select {
  /* ── Card ── */
}
body.template-room-select .rs-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 48px 52px;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.05);
  animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.template-room-select {
  /* ── Eyebrow ── */
}
body.template-room-select .rs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(127, 255, 0, 0.08);
  border: 1px solid var(--green-neon);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 11px;
  color: var(--green-neon);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: fit-content;
}
body.template-room-select .rs-dot {
  font-size: 12px;
}
body.template-room-select {
  /* ── Heading ── */
}
body.template-room-select .rs-heading {
  font-family: var(--font-display);
  line-height: 0.92;
  letter-spacing: 0.02em;
  margin: 0;
}
body.template-room-select .rs-line-1 {
  display: block;
  font-size: clamp(42px, 6vw, 64px);
  color: var(--white);
}
body.template-room-select .rs-line-2 {
  display: block;
  font-size: clamp(42px, 6vw, 64px);
  color: var(--gold);
}
body.template-room-select {
  /* ── Subtitle ── */
}
body.template-room-select .rs-sub {
  font-size: 14px;
  color: rgba(245, 245, 240, 0.5);
  line-height: 1.5;
  margin: -4px 0 4px;
}
body.template-room-select {
  /* ── Input group ── */
}
body.template-room-select .rs-input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.template-room-select .rs-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 16px 20px;
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  caret-color: var(--gold);
}
body.template-room-select .rs-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}
body.template-room-select .rs-input:focus {
  border-color: var(--gold);
  background: rgba(255, 215, 0, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.12);
}
body.template-room-select .rs-input.rs-input--error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
  animation: shake 0.35s ease;
}
body.template-room-select {
  /* ── Submit button ── */
}
body.template-room-select .rs-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 8px;
  padding: 16px 24px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 4px 24px rgba(255, 215, 0, 0.3);
}
body.template-room-select .rs-btn:hover {
  transform: translateY(-2px);
  background: #ffe033;
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.45);
}
body.template-room-select .rs-btn:active {
  transform: translateY(0);
}
body.template-room-select .rs-btn-main {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
body.template-room-select .rs-btn-arrow {
  font-size: 20px;
  font-weight: 700;
  transition: transform 0.2s;
}
body.template-room-select .rs-btn:hover .rs-btn-arrow {
  transform: translateX(4px);
}
body.template-room-select {
  /* ── Error message ── */
}
body.template-room-select .rs-error {
  font-size: 12px;
  color: var(--red);
  display: none;
  margin: -8px 0 0;
}
body.template-room-select .rs-error.visible {
  display: block;
}
body.template-room-select {
  /* ── Divider ── */
}
body.template-room-select .rs-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  letter-spacing: 0.06em;
}
body.template-room-select .rs-divider::before,
body.template-room-select .rs-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
body.template-room-select {
  /* ── QR scan hint ── */
}
body.template-room-select .rs-scan-hint {
  font-size: 13px;
  color: rgba(245, 245, 240, 0.4);
  text-align: center;
  line-height: 1.5;
}
body.template-room-select {
  /* ── Responsive ── */
}
@media (max-width: 580px) {
  body.template-room-select .rs-card {
    padding: 32px 24px;
  }
}

body.template-qr {
  /* ══════════════════════════════════════
     QR PAGE – builds on home_style.css tokens
  ══════════════════════════════════════ */
}
body.template-qr {
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 25% 50%, #1a3d1a 0%, var(--dark) 55%, var(--darker) 100%);
  display: flex;
  flex-direction: column;
}
body.template-qr {
  /* ── Two-column layout: QR left, content right ── */
}
body.template-qr .qr-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 72px 32px 24px;
  min-height: 0;
}
body.template-qr {
  /* ══════════════════════════════════════
     LEFT COLUMN — QR dominant
  ══════════════════════════════════════ */
}
body.template-qr .qr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 0;
}
body.template-qr .qr-label-row {
  align-self: flex-start;
  margin-left: 4px;
}
body.template-qr .qr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(245, 245, 240, 0.5);
  letter-spacing: 0.06em;
}
body.template-qr {
  /* QR box — fills as much vertical space as possible */
}
body.template-qr .qr-box {
  position: relative;
  background: var(--dark);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.08), 0 32px 80px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.template-qr .qr-box img,
body.template-qr .qr-box svg {
  display: block;
  border-radius: 4px;
  /* Fill available height, max out at a generous size */
  height: clamp(180px, 44vh, 420px);
  width: auto;
}
body.template-qr {
  /* Corner brackets */
}
body.template-qr .qr-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
}
body.template-qr .qr-tl {
  top: -2px;
  left: -2px;
  border-top-width: 3px;
  border-left-width: 3px;
  border-top-left-radius: 16px;
}
body.template-qr .qr-tr {
  top: -2px;
  right: -2px;
  border-top-width: 3px;
  border-right-width: 3px;
  border-top-right-radius: 16px;
}
body.template-qr .qr-bl {
  bottom: -2px;
  left: -2px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-bottom-left-radius: 16px;
}
body.template-qr .qr-br {
  bottom: -2px;
  right: -2px;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-bottom-right-radius: 16px;
}
body.template-qr {
  /* URL pill below QR */
}
body.template-qr .qr-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.template-qr .qr-url-label {
  font-size: 11px;
  color: rgba(245, 245, 240, 0.35);
  white-space: nowrap;
}
body.template-qr .qr-url-pill {
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 5px;
  padding: 4px 12px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: rgba(255, 215, 0, 0.7);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  word-break: break-all;
}
body.template-qr .qr-url-pill:hover {
  background: rgba(255, 215, 0, 0.16);
  color: var(--gold);
}
body.template-qr {
  /* ══════════════════════════════════════
     RIGHT COLUMN
  ══════════════════════════════════════ */
}
body.template-qr .right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
body.template-qr {
  /* ── Stats strip ── */
}
body.template-qr .stats-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex-shrink: 0;
}
body.template-qr .stat-card {
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.template-qr .stat-roomcode {
  background: rgba(255, 215, 0, 0.07);
  border: 1.5px solid rgba(255, 215, 0, 0.3);
}
body.template-qr .stat-students {
  background: rgba(127, 255, 0, 0.05);
  border: 1.5px solid rgba(127, 255, 0, 0.2);
  position: relative;
}
body.template-qr .stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.38);
}
body.template-qr .stat-value {
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: 0.04em;
}
body.template-qr .roomcode-value {
  font-size: clamp(26px, 3.5vw, 44px);
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}
body.template-qr .students-value {
  font-size: clamp(26px, 3.5vw, 44px);
  color: var(--green-neon);
  text-shadow: 0 0 30px rgba(127, 255, 0, 0.3);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
  display: inline-block;
}
body.template-qr .students-value.bump {
  transform: scale(1.2);
  text-shadow: 0 0 50px rgba(127, 255, 0, 0.7);
}
body.template-qr {
  /* Live badge */
}
body.template-qr .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(127, 255, 0, 0.08);
  border: 1px solid rgba(127, 255, 0, 0.25);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 8px;
  color: var(--green-neon);
  letter-spacing: 0.1em;
  font-weight: 600;
}
body.template-qr .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-neon);
  animation: livePulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
body.template-qr {
  /* Redirect notice */
}
body.template-qr .redirect-notice {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(13, 31, 13, 0.92);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #81c784;
}
body.template-qr .redirect-notice.visible {
  display: flex;
}
body.template-qr .redirect-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(129, 199, 132, 0.25);
  border-top-color: #81c784;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
body.template-qr {
  /* ── Avatar chips ── */
}
body.template-qr .students-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-shrink: 0;
  max-height: 58px;
  overflow: hidden;
}
body.template-qr .student-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(127, 255, 0, 0.07);
  border: 1px solid rgba(127, 255, 0, 0.2);
  border-radius: 20px;
  padding: 2px 9px 2px 4px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(245, 245, 240, 0.75);
  animation: chipPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
body.template-qr .student-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}
body.template-qr {
  /* Avatar chip strip — no longer used; hidden permanently */
}
body.template-qr .students-avatars {
  display: none !important;
}
body.template-qr {
  /* ══════════════════════════════════════
     CLIMATE FACTS — fills remaining space
  ══════════════════════════════════════ */
}
body.template-qr .fact-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
body.template-qr {
  /* neon left accent */
}
body.template-qr .fact-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--green-neon), var(--gold));
  opacity: 0.55;
}
body.template-qr .fact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
body.template-qr .fact-tag {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-neon);
  font-weight: 600;
}
body.template-qr .fact-counter {
  font-size: 11px;
  color: rgba(245, 245, 240, 0.28);
  letter-spacing: 0.06em;
}
body.template-qr .fact-body {
  font-size: clamp(15px, 1.8vw, 22px);
  line-height: 1.6;
  color: var(--white);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
body.template-qr .fact-body.fade-out {
  opacity: 0;
  transform: translateY(8px);
}
body.template-qr .fact-body.fade-in {
  opacity: 1;
  transform: translateY(0);
}
body.template-qr .fact-source {
  font-size: 11px;
  color: rgba(245, 245, 240, 0.28);
  font-style: italic;
  flex-shrink: 0;
  transition: opacity 0.35s ease;
}
body.template-qr .fact-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
body.template-qr .fact-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  padding: 0;
}
body.template-qr .fact-nav-btn:hover {
  background: rgba(255, 215, 0, 0.14);
  border-color: rgba(255, 215, 0, 0.4);
}
body.template-qr .fact-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
body.template-qr .fact-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}
body.template-qr .fact-dot.active {
  background: var(--gold);
  transform: scale(1.35);
}
body.template-qr {
  /* ══════════════════════════════════════
     QR NAME LIST — list-mode layout
  ══════════════════════════════════════ */
  /*
    In list mode .right-col switches to a 2-column grid:
      col 1 (190px): scrollable name list
      col 2 (1fr):   fact box
    stats-strip spans both; students-avatars is hidden.
  */
}
body.template-qr .right-col--list-mode {
  display: grid !important;
  grid-template-columns: 190px 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
}
body.template-qr .right-col--list-mode .stats-strip {
  grid-column: 1/-1;
  grid-row: 1;
}
body.template-qr .right-col--list-mode .students-avatars {
  display: none !important;
}
body.template-qr .right-col--list-mode .qr-name-list {
  grid-column: 1;
  grid-row: 2;
}
body.template-qr .right-col--list-mode .fact-box {
  grid-column: 2;
  grid-row: 2;
}
body.template-qr {
  /* The name list element */
}
body.template-qr .qr-name-list {
  list-style: none;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 14px 12px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 255, 0, 0.2) transparent;
}
body.template-qr .qr-name-list__empty {
  font-size: 11px;
  color: rgba(245, 245, 240, 0.3);
  font-style: italic;
}
body.template-qr .qr-name-list__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  animation: chipPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
body.template-qr .qr-name-list__item:last-child {
  border-bottom: none;
}
body.template-qr .qr-name-list__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
body.template-qr .qr-name-list__name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(245, 245, 240, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.template-qr {
  /* ── Responsive ── */
}
@media (max-width: 680px) {
  body.template-qr {
    height: auto;
    overflow: auto;
  }
  body.template-qr .qr-main {
    grid-template-columns: 1fr;
    padding: 80px 18px 28px;
    gap: 18px;
  }
  body.template-qr .qr-col {
    align-items: center;
  }
  body.template-qr .qr-label-row {
    align-self: center;
  }
  body.template-qr .qr-box img, body.template-qr .qr-box svg {
    height: clamp(200px, 60vw, 320px);
  }
}

/* desktop_page_style.css — KlimaatCasino display page */
html:has(#app),
body:has(#app) {
  width: 100%;
  height: 100%;
  background: var(--darker);
  font-family: var(--font-body);
  color: var(--white);
  overflow: hidden;
}

/* ── Main layout ── */
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Top bar ── */
#topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 52px;
  background: rgba(13, 31, 13, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 215, 0, 0.18);
}

#topbar .logo {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.35);
}

#topbar .logo em {
  color: var(--green-neon);
  font-style: normal;
}

#topbar .qr-wrap {
  opacity: 0.85;
}

#topbar .round-badge {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

/* ── Canvas container ── */
#canvas-wrap {
  position: absolute;
  inset: 0;
}

/* ── YouTube overlay ── */
#yt-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 15, 6, 0.82);
  backdrop-filter: blur(6px);
  z-index: 80;
}

#yt-overlay.active {
  display: flex;
}

#yt-box {
  background: var(--dark);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
}

/* ── Text-uitleg overlay (fallback when no video/audio) ── */
#uitleg-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 15, 6, 0.82);
  backdrop-filter: blur(6px);
  z-index: 80;
}

#uitleg-overlay.active {
  display: flex;
}

#uitleg-box {
  background: var(--dark);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 10px;
  padding: 28px 36px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
  max-width: min(760px, 82vw);
  max-height: 70vh;
  overflow-y: auto;
}

#uitleg-box .uitleg-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.55);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#uitleg-text {
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--off-white);
  line-height: 1.65;
  min-height: 1.65em;
  white-space: pre-wrap;
}

#uitleg-text.typewriter-active::after {
  content: "|";
  display: inline;
  opacity: 0.7;
  animation: uitleg-blink 0.7s step-end infinite;
  color: var(--green-neon);
}

@keyframes uitleg-blink {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0;
  }
}
/* ── Flash animation for correct answers ── */
.flash {
  animation: flash 0.55s infinite;
}

/* ============================================================
   KlimaatCasino — Mobile player page
   Casino-themed: deep green felt + gold + neon accents
   Single-screen layout (no scroll). The casino table area never
   reflows when the answer grid is hidden — its height is fixed
   and the answer grid is replaced in-place by a result panel.
   ============================================================ */
html:has(#desktop-shell),
body:has(#desktop-shell) {
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  color: var(--white);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* ============================================================
   DESKTOP SHELL — casino backdrop + centred phone column
   ============================================================ */
body:has(#desktop-shell) {
  background: radial-gradient(ellipse 80% 60% at 30% 40%, #142e14 0%, var(--darker) 55%), radial-gradient(ellipse 80% 60% at 70% 60%, var(--dark) 0%, #040a04 55%), var(--darker);
}

#desktop-shell {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  overflow: hidden;
}

/* ── Decorative side gutters ── */
.desktop-side {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Gold hairline between gutter and phone column */
.desktop-side::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 215, 0, 0.16) 20%, rgba(255, 215, 0, 0.28) 50%, rgba(255, 215, 0, 0.16) 80%, transparent);
}

.desktop-side.left::after {
  right: 0;
}

.desktop-side.right::after {
  left: 0;
}

/* Vertical KLIMAATCASINO watermark text */
.side-label {
  font-family: var(--font-display);
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: 0.35em;
  color: rgba(255, 215, 0, 0.14);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  user-select: none;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.desktop-side.left .side-label {
  left: 20px;
  transform: translateY(-50%) rotate(180deg);
}

.desktop-side.right .side-label {
  right: 20px;
  transform: translateY(-50%);
}

/* Falling chips layer — mirrors the wireframe chips-layer / chip-ph */
.side-chips-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.18;
}

.chip-ph {
  position: absolute;
  border-radius: 50%;
  border: 2.5px solid var(--gold);
  animation: chipFallMobile linear infinite;
}

/* ── The centred phone column ── */
#phone-col {
  flex: 0 0 auto;
  width: 100%;
  max-width: 450px;
  height: 100vh;
  height: -webkit-fill-available;
  position: relative;
  overflow: hidden;
  touch-action: none;
  /* Lifted card effect */
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.14), 0 0 80px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* True mobile: collapse to full-width, no shell chrome */
@media (max-width: 500px) {
  #desktop-shell {
    display: block;
    height: 100%;
  }
  .desktop-side {
    display: none;
  }
  #phone-col {
    max-width: 100%;
    height: 100%;
    box-shadow: none;
  }
}
/* ============================================================
   MODAL — How to play / nudge
   ============================================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-content {
  background: linear-gradient(160deg, #1e4a1e 0%, #0d2a0d 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 14px;
  margin: 14% auto 0;
  padding: 28px 24px 22px;
  width: 88%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.modal-logo {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 18px;
  text-shadow: 0 0 22px rgba(255, 215, 0, 0.45);
}

.modal-logo span {
  color: var(--green-neon);
}

.modal-content h2 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 14px;
}

.modal-content ol {
  text-align: left;
  padding-left: 22px;
  font-size: 14px;
  color: rgba(245, 245, 240, 0.78);
  line-height: 1.85;
  margin-bottom: 22px;
}

.modal-content button {
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 6px;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
}

.modal-content button:active {
  transform: scale(0.96);
}

/* ============================================================
   MAIN GAME SCREEN — fills the phone column as one flex column
   ============================================================ */
#game-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--green-deep) 0%, #102d10 60%, var(--green-mid) 100%);
}

/* ============================================================
   TOP BAR — Saldo / Logo / Inzet
   The two scores are now styled as distinct cards, so they read
   instantly without leaning on tiny labels.
   ============================================================ */
#top-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  height: 10vh;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
  border-bottom: 1px solid rgba(255, 215, 0, 0.18);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 215, 0, 0.18);
  min-width: 0; /* allow truncation if needed */
}

.bar-item.bar-right {
  justify-content: flex-end;
}

.bar-item .bar-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.bar-item .bar-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  min-width: 0;
}

.bar-item.bar-right .bar-text {
  align-items: flex-end;
}

.bar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}

.bar-value {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
  transition: transform 0.2s, color 0.2s;
}

/* When the inzet (pot) is non-zero, give it a neon-green glow */
.bar-item.bar-right.has-stake {
  border-color: rgba(127, 255, 0, 0.5);
  background: rgba(127, 255, 0, 0.08);
  box-shadow: 0 0 14px rgba(127, 255, 0, 0.25);
}

.bar-item.bar-right.has-stake .bar-value {
  color: var(--green-neon);
  text-shadow: 0 0 12px rgba(127, 255, 0, 0.5);
}

/* Brief pop animation when values change */
.bar-value.pop {
  animation: valuePop 0.35s ease-out;
}

.bar-logo {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.bar-logo-klimaat {
  font-size: clamp(13px, 4.2vw, 20px);
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
  display: block;
  line-height: 1;
}

.bar-logo-casino {
  font-size: clamp(13px, 4.2vw, 20px);
  color: var(--green-neon);
  text-shadow: 0 0 12px rgba(127, 255, 0, 0.45);
  display: block;
  line-height: 1;
}

/* Question counter — sits below "CASINO" in the logo column.
   Hidden until set_current / set_length arrive from the server. */
.bar-question-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 215, 0, 0.75);
  line-height: 1.4;
}

.bar-question-counter[hidden] {
  display: none;
}

.bar-qc-sep {
  font-size: 9px;
  opacity: 0.5;
  margin: 0 1px;
}

/* ============================================================
   PLAY AREA — fixed-height container.
   This is the KEY fix: a single wrapper holds either the answer
   grid OR the result panel. Its size is locked, so when the
   answer grid is hidden the casino table CANNOT shift up.
   ============================================================ */
#play-area {
  position: relative;
  /* 25% of the space below the top-bar.
     flex-grow ratio 1 : casino-table's 3 gives exactly 25 / 75. */
  flex: 3 1 0;
  min-height: 250px;
  padding: 6px 10px 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Answer grid fills the play area */
#answers_grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* always 2×2, mobile AND desktop */
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  width: 100%;
  flex: 1 1 0; /* grow to fill play-area */
  min-height: 0; /* allow shrinking below content size */
}

#answers_grid.hidden {
  display: none;
}

.answer-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
  transition: transform 0.12s ease, filter 0.12s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.answer-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, transparent 55%);
  pointer-events: none;
}

.answer-btn:active {
  transform: scale(0.94);
  filter: brightness(0.9);
}

.answer-btn:disabled {
  opacity: 0.4;
  cursor: default;
  filter: grayscale(50%);
}

.btn-symbol {
  font-size: clamp(10px, 3vw, 16px);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
}

.btn-letter {
  font-family: var(--font-display);
  font-size: clamp(18px, 5vw, 30px);
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.btn-a {
  background: linear-gradient(145deg, #f44336, #b71c1c);
}

.btn-b {
  background: linear-gradient(145deg, #f57c00, #e65100);
}

.btn-c {
  background: linear-gradient(145deg, #1e88e5, #0d47a1);
}

.btn-d {
  background: linear-gradient(145deg, #ab47bc, #4a148c);
}

/* ============================================================
   RESULT PANEL — replaces the answer grid in the same space.
   Three states: waiting / correct / wrong.
   ============================================================ */
#result-panel {
  position: absolute;
  inset: 10px 10px 6px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 14px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 22px rgba(0, 0, 0, 0.45);
  border: 2px solid transparent;
  background: rgba(0, 0, 0, 0.35);
}

#result-panel.visible {
  display: flex;
  animation: panelInMobile 0.35s ease-out;
}

.result-icon {
  font-size: 56px;
  line-height: 1;
}

.result-title {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.06em;
  line-height: 1;
}

.result-detail {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  max-width: 280px;
}

.result-detail strong {
  color: #fff;
  font-size: 15px;
}

.result-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* — Waiting state (player has answered, others still thinking) — */
#result-panel.waiting {
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.55), rgba(255, 215, 0, 0.06));
  border-color: rgba(255, 215, 0, 0.35);
}

#result-panel.waiting .result-title {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.35);
}

#result-panel.waiting .result-chip {
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid rgba(255, 215, 0, 0.5);
  color: var(--gold);
}

/* Pulsing dots for "waiting" */
.waiting-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.waiting-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.5;
  animation: dotPulse 1.4s infinite ease-in-out;
}

.waiting-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.waiting-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* — Correct state — */
#result-panel.correct {
  background: linear-gradient(160deg, rgba(76, 175, 80, 0.28), rgba(13, 31, 13, 0.6));
  border-color: var(--green-neon);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 38px rgba(127, 255, 0, 0.35), 0 6px 22px rgba(0, 0, 0, 0.45);
}

#result-panel.correct .result-title {
  color: var(--green-neon);
  text-shadow: 0 0 22px rgba(127, 255, 0, 0.55);
}

#result-panel.correct .result-chip {
  background: rgba(127, 255, 0, 0.18);
  border: 1px solid var(--green-neon);
  color: var(--green-neon);
}

/* — Wrong state — */
#result-panel.wrong {
  background: linear-gradient(160deg, rgba(229, 57, 53, 0.28), rgba(40, 8, 8, 0.6));
  border-color: var(--red);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 38px rgba(229, 57, 53, 0.35), 0 6px 22px rgba(0, 0, 0, 0.45);
}

#result-panel.wrong .result-title {
  color: var(--red-glow);
  text-shadow: 0 0 18px rgba(229, 57, 53, 0.5);
}

#result-panel.wrong .result-chip {
  background: rgba(229, 57, 53, 0.2);
  border: 1px solid var(--red-glow);
  color: var(--red-glow);
}

/* Tiny shake on the wrong panel for tactile feedback */
#result-panel.wrong {
  animation: panelInMobile 0.35s ease-out, wrongShake 0.5s ease-out 0.35s;
}

/* ============================================================
   CASINO TABLE — fixed height, never shifts
   ============================================================ */
#casino-table {
  flex: 7 1 0; /* 75% of remaining space (ratio 3:1 with play-area) */
  min-height: 0; /* allow flex to control height freely */
  position: relative;
  background: radial-gradient(ellipse at 50% 35%, rgba(127, 255, 0, 0.05) 0%, transparent 60%), radial-gradient(circle at 50% 0%, var(--green-felt), #0a2410);
  border-top: 4px solid #5d3a1a;
  box-shadow: inset 0 6px 24px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
  touch-action: none;
}

#casino-table::before {
  /* subtle felt texture line */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(255, 215, 0, 0.08);
  border-radius: 18px;
  pointer-events: none;
}

#konva-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

#konva-container canvas {
  display: block;
}

/* ── All-in button ── */
#all-in-btn {
  position: absolute;
  /* top/left set dynamically by positionAllInBtn() in JS */
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 28px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(145deg, #8b0000, #5c0000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(229, 57, 53, 0.45);
  border: 1px solid rgba(229, 57, 53, 0.6);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 125px;
}

#all-in-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 12px rgba(229, 57, 53, 0.3);
}

#all-in-btn:disabled {
  opacity: 0.3;
  cursor: default;
  filter: grayscale(60%);
  box-shadow: none;
}

.allin-icon {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.allin-label {
  font-family: var(--font-display);
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Pulse glow when all-in is available and nothing is locked */
#all-in-btn:not(:disabled) {
  animation: allinPulse 2.4s ease-in-out infinite;
}

/* Brief flash animation when all-in is triggered */
#all-in-btn.firing {
  animation: allinFire 0.4s ease-out forwards;
}

/* ============================================================
   END GAME OVERLAY
   NOTE: #end-screen sits inside #phone-col (overflow:hidden) in
   the HTML, but position:fixed escapes that clip in all modern
   browsers UNLESS a transform/filter/will-change is set on an
   ancestor.  We make sure none of those are set on #phone-col.
   The element is hidden by default; JS adds .visible to show it.
   ============================================================ */
#end-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999; /* above everything, including the modal (z:200) */
  background: radial-gradient(ellipse at 50% 35%, #1e4a1e 0%, var(--dark) 60%, var(--darker) 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 40px 24px;
  /* Ensure no ancestor transform can re-contain this fixed element */
  will-change: opacity;
}

#end-screen.visible {
  display: flex;
  animation: panelInMobile 0.5s ease-out;
}

.end-logo {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.45);
  margin-bottom: 6px;
}

.end-logo-casino {
  color: var(--green-neon);
}

.end-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--white);
}

.end-score-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}

.end-score-value {
  font-family: var(--font-display);
  font-size: 84px;
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 0 44px rgba(255, 215, 0, 0.5);
}

.end-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}

/* ============================================================
   DESKTOP / TABLET overrides
   ============================================================ */
@media (min-width: 1024px) {
  #answers_grid {
    grid-template-columns: 1fr 1fr; /* always 2×2, even on desktop */
    grid-template-rows: 1fr 1fr;
    gap: 8px;
  }
  .btn-letter {
    font-size: clamp(18px, 2.2vw, 28px);
  }
  .btn-symbol {
    font-size: clamp(10px, 1.4vw, 16px);
  }
}
/* Very short screens: no height overrides needed — the 25/75 split handles it */
@media (max-height: 640px) {
  #top-bar {
    height: 56px;
  }
  .bar-value {
    font-size: 22px;
  }
}
/* ============================================================
   NO-BET CONFIRMATION TOAST
   Slides up from the bottom of #game-screen when the player
   tries to submit without betting extra chips.
   ============================================================ */
#no-bet-toast {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: linear-gradient(160deg, #1a3a1a 0%, var(--dark) 100%);
  border-top: 2px solid var(--gold);
  border-radius: 18px 18px 0 0;
  padding: 20px 20px 28px;
  text-align: center;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55);
  /* Start below the fold — slides up when .visible is added */
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#no-bet-toast.visible {
  transform: translateY(0);
}

.no-bet-icon {
  font-size: 32px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

.no-bet-msg {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 16px;
}

.no-bet-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.no-bet-btn {
  flex: 1;
  max-width: 180px;
  padding: 12px 10px;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.no-bet-btn:active {
  opacity: 0.8;
  transform: scale(0.97);
}

.no-bet-confirm {
  background: var(--gold);
  color: #1a1a00;
}

.no-bet-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}

/* ============================================================
   LAST-CHIP TOAST
   Small auto-dismissing banner that slides down from the top of
   #phone-col when the player hits the 1-point floor. No user
   input required — disappears on its own after 3 seconds.
   ============================================================ */
#last-chip-toast {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: linear-gradient(90deg, #2a1a00 0%, #1a1200 100%);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  /* Hidden above the fold by default — slides down when .visible is added */
  transform: translateY(-110%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#last-chip-toast.visible {
  transform: translateY(0);
}

.lct-icon {
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.lct-msg {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(245, 245, 240, 0.9);
  line-height: 1.35;
}

.lct-msg strong {
  color: var(--gold);
}

/* ============================================================
   NAME MODAL — replaces prompt() for username entry
   Mirrors the style used on room_page.html
   ============================================================ */
.name-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 500; /* above howToPlayModal (z:200) */
  display: none; /* shown by mobile_page.js via style.display = 'flex' */
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: nameModalFadeIn 0.2s ease;
}

.name-modal-card {
  background: linear-gradient(160deg, #1e4a1e 0%, #0d2a0d 100%);
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  border-radius: 14px;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 88%;
  max-width: 360px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: nameModalSlideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.name-modal-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-align: center;
  text-shadow: 0 0 22px rgba(255, 215, 0, 0.45);
}

.name-modal-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--gold);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.name-modal-input::placeholder {
  color: rgba(255, 215, 0, 0.3);
  letter-spacing: 0.04em;
}

.name-modal-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.12);
}

.name-modal-error {
  font-size: 12px;
  color: var(--red);
  min-height: 16px;
  text-align: center;
}

.name-modal-btn {
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 6px;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
}

.name-modal-btn:active {
  transform: scale(0.96);
}

.name-modal-btn:hover {
  box-shadow: 0 8px 28px rgba(255, 215, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   docent_page_style.css — KlimaatCasino Dashboard (Spelbesturing rework)
   ═══════════════════════════════════════════════════════════════════════════ */
html:has(.dp-page),
body:has(.dp-page) {
  height: 100%;
  background: var(--dark);
  font-family: var(--font-body);
  color: var(--white);
  font-size: 14px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE SHELL
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--green-deep);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  min-height: 75px;
  background: rgba(13, 31, 13, 0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-gold);
  z-index: 100;
}

.dp-topbar-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
}

.dp-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-left: 40px;
}

.dp-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.dp-topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dp-room-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 5px 14px;
}

.dp-room-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.dp-room-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--gold);
}

/* ── Topbar buttons ── */
.dp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  letter-spacing: 0.02em;
}

.dp-btn:hover {
  transform: translateY(-1px);
}

.dp-btn--gold {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
  box-shadow: 0 2px 14px rgba(255, 215, 0, 0.3);
}

.dp-btn--gold:hover {
  box-shadow: 0 4px 22px rgba(255, 215, 0, 0.45);
}

.dp-btn--green {
  background: transparent;
  color: var(--green-neon);
  border-color: rgba(127, 255, 0, 0.35);
}

.dp-btn--green:hover {
  background: rgba(127, 255, 0, 0.08);
  border-color: var(--green-neon);
}

.dp-btn-icon {
  font-size: 14px;
}

/* ── Topbar timers ── */
.dp-topbar-timers {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dp-topbar-timers[hidden] {
  display: none !important;
}

.dp-timer-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  padding: 5px 13px;
  border: 1px solid transparent;
  min-width: 110px;
}

.dp-timer-chip--question {
  background: rgba(127, 255, 0, 0.07);
  border-color: rgba(127, 255, 0, 0.22);
}

.dp-timer-chip--total {
  background: rgba(255, 215, 0, 0.07);
  border-color: var(--border-gold);
}

.dp-timer-icon {
  font-size: 12px;
  opacity: 0.7;
}

.dp-timer-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.dp-timer-value {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-left: 2px;
}

.dp-timer-chip--question .dp-timer-value {
  color: var(--green-neon);
}

.dp-timer-chip--total .dp-timer-value {
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAB BAR
   ═══════════════════════════════════════════════════════════════════════════ */
/* [hidden] uses display:none natively, but some resets override it.
   Be explicit so the tab bar is truly invisible before game start. */
.dp-tabs[hidden] {
  display: none !important;
}

.dp-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  position: relative;
  z-index: 50;
}

.dp-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  height: 48px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.18s, border-color 0.18s;
  position: relative;
}

.dp-tab:hover {
  color: rgba(255, 255, 255, 0.75);
}

.dp-tab--active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.dp-tab-icon {
  font-size: 15px;
  opacity: 0.6;
}

.dp-tab--active .dp-tab-icon {
  opacity: 1;
}

.dp-tab-hint {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Spelbesturing tab: iframe parked off-screen, panel fills viewport ── */
.dp-main[data-tab=controls] .dp-iframe-panel {
  position: fixed;
  left: -9999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

/*
  New Spelbesturing layout (REWORK):
  ────────────────────────────────────
    Row 1 (auto):    sticky header (spans both columns)
    Row 2 (1fr):     .dp-flow (main game flow) | .dp-side (roster sidebar)

  The flow column is the FOCUS — it holds the question stage, the hero
  action button (the biggest, most prominent element on the page) and
  a small "extra acties" footer for secondary controls.

  The side column is intentionally narrow so the roster is glanceable
  without competing for attention. Both columns scroll independently.

  The flow column uses a max-width so on very wide screens the content
  stays readable and the hero button doesn't stretch absurdly wide.
*/
.dp-main[data-tab=controls] .dp-control-panel {
  flex: 1;
  max-width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 460px;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
}

/* Header spans both columns */
.dp-main[data-tab=controls] .dp-panel-header--controls {
  grid-column: 1/-1;
  grid-row: 1;
}

/* Flow column */
.dp-main[data-tab=controls] .dp-flow {
  grid-column: 1;
  grid-row: 2;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.18) transparent;
}

.dp-main[data-tab=controls] .dp-flow::-webkit-scrollbar {
  width: 6px;
}

.dp-main[data-tab=controls] .dp-flow::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.18);
  border-radius: 3px;
}

/* Sidebar column */
.dp-main[data-tab=controls] .dp-side {
  grid-column: 2;
  grid-row: 2;
  border-left: 1px solid rgba(255, 215, 0, 0.12);
  background: rgba(0, 0, 0, 0.28);
  overflow-y: auto;
  padding: 24px 22px;
}

/* ── Spelvenster tab: iframe + narrow sidebar ── */
.dp-main[data-tab=game] .dp-iframe-panel {
  flex: 1 1 60%;
  min-width: 0;
}

.dp-main[data-tab=game] .dp-control-panel {
  flex: 0 0 360px;
  width: 360px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* On Spelvenster tab the stage card is hidden — the iframe IS the stage. */
.dp-main[data-tab=game] #currentQuestionCard {
  display: none !important;
}

/* On Spelvenster tab the flow + side wrappers become plain stacked blocks
   inside the narrow sidebar. The hero action button becomes a regular
   sidebar button via .dp-ctrl-btn--next overrides (further down). */
.dp-main[data-tab=game] .dp-flow,
.dp-main[data-tab=game] .dp-side {
  display: block;
  border-left: none;
  background: transparent;
  padding: 0;
  overflow-y: visible;
}

.dp-main[data-tab=game] .dp-side {
  padding: 16px 18px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IFRAME PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-iframe-panel {
  display: flex;
  flex-direction: column;
  background: var(--green-deep);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.dp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dp-panel-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.dp-panel-dot {
  font-size: 10px;
  letter-spacing: 0.06em;
}

.dp-panel-dot--live {
  color: var(--green-bright);
}

.dp-iframe-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.dp-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Question counter chip in panel header ── */
.dp-question-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 3px 12px;
}

.dp-question-counter-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-right: 4px;
}

.dp-question-counter-current {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
}

.dp-question-counter-sep {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}

.dp-question-counter-total {
  font-family: var(--font-display);
  font-size: 14px;
  color: rgba(255, 215, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRE-GAME OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-pregame {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(10, 25, 10, 0.97), rgba(5, 15, 5, 0.99));
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  z-index: 20;
  transition: opacity 0.4s ease, visibility 0.4s;
}

/* dp-main must be the positioning context for the full-width overlay */
.dp-main {
  position: relative;
}

.dp-pregame--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dp-pregame-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 780px;
  width: 100%;
}

.dp-pregame-copy {
  flex: 1;
}

.dp-pregame-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-neon);
  margin-bottom: 10px;
}

.dp-pregame-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: 14px;
}

.dp-pregame-sub {
  font-size: 15px;
  color: var(--off-white);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 500px;
}

.dp-qr-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gold);
  color: var(--dark);
  text-decoration: none;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-weight: 700;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}

.dp-qr-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(255, 215, 0, 0.5);
}

.dp-qr-cta-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.dp-qr-cta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dp-qr-cta-label {
  font-size: 15px;
}

.dp-qr-cta-hint {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.65;
}

.dp-qr-cta-arrow {
  margin-left: auto;
  font-size: 16px;
}

.dp-pregame-dismiss {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
  text-decoration: underline;
  transition: color 0.15s;
}

.dp-pregame-dismiss:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* QR mock visual */
.dp-pregame-visual {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.dp-pregame-visual--clickable:hover .dp-qr-mock {
  border-color: rgba(255, 215, 0, 0.5);
}

.dp-pregame-visual--clickable:hover .dp-qr-mock-hover-hint {
  opacity: 1;
}

.dp-qr-mock {
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}

.dp-qr-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid var(--gold);
}

.dp-qr-corner--tl {
  top: 14px;
  left: 14px;
  border-right: none;
  border-bottom: none;
  border-radius: 3px 0 0 0;
}

.dp-qr-corner--tr {
  top: 14px;
  right: 14px;
  border-left: none;
  border-bottom: none;
  border-radius: 0 3px 0 0;
}

.dp-qr-corner--bl {
  bottom: 14px;
  left: 14px;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 3px;
}

.dp-qr-corner--br {
  bottom: 14px;
  right: 14px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 3px 0;
}

.dp-qr-dots {
  width: 80px;
  height: 80px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
  border-radius: 4px;
}

.dp-qr-scan-line {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green-neon), transparent);
  top: 50%;
  animation: qrScan 2s ease-in-out infinite;
}

.dp-qr-mock-hover-hint {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  border-radius: calc(var(--radius-md) - 2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.dp-qr-mock-hover-icon {
  font-size: 22px;
  color: var(--gold);
}

.dp-qr-mock-hover-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

.dp-qr-mock-cta-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 215, 0, 0.6);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROL PANEL — SPELBESTURING
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-control-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.2) transparent;
}

.dp-control-panel::-webkit-scrollbar {
  width: 4px;
}

.dp-control-panel::-webkit-scrollbar-track {
  background: transparent;
}

.dp-control-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.2);
  border-radius: 2px;
}

/* ── Panel header (controls) ── */
.dp-control-panel > .dp-panel-header {
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-1);
}

/* ── Inner content area — switches between two layouts ── */
.dp-control-panel > *:not(.dp-panel-header) {
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   SPELBESTURING LAYOUT — STAGE / HERO / EXTRAS
   ────────────────────────────────────────────────────────────────────────────
   The Spelbesturing tab is built around three vertical zones in the flow:
     1. .dp-stage         — the "what's happening" card (question + answers
                            + uitleg). Visually neutral so it doesn't pull
                            focus from the hero action.
     2. .dp-hero-action   — the only "what should I press?" zone. The action
                            button is BIG, gold, unmistakable. This is where
                            the teacher's eye should land.
     3. .dp-extras        — small, low-contrast utility row (nudge,
                            digibord, force-uitleg, skip). Deliberately
                            dialed down so it never competes with the hero.
   ════════════════════════════════════════════════════════════════════════════ */
/* Header (controls): sticky, spans both columns. Uses the same .dp-panel-header
   base styles defined elsewhere — only the grid placement is added here. */
.dp-main[data-tab=controls] .dp-control-panel > .dp-panel-header--controls {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
}

/* ─── FLOW container (left column on controls tab) ───────────────────────── */
.dp-flow {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px clamp(20px, 4vw, 48px) 48px;
  max-width: 820px; /* keep line lengths readable on wide screens */
  margin: 0 auto;
  width: 100%;
}

/* ─── STAGE card ─────────────────────────────────────────────────────────── */
.dp-stage {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-card);
  opacity: 0.85;
}

.dp-stage-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: 14px;
}

/* Stage-internal uitleg: subtle top border separating it from the hero button */
.dp-stage-explanation {
  padding: 18px 26px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 215, 0, 0.03);
}

/* On Spelvenster sidebar: compact styling */
.dp-main[data-tab=game] .dp-stage-explanation {
  padding: 14px 16px;
  border-radius: var(--radius-md);
}

/* ─── HERO ACTION zone ───────────────────────────────────────────────────── */
.dp-hero-action {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}

/* On the controls tab the action button itself is the headline. The
   secondary "extras" footer below is intentionally muted. */
.dp-main[data-tab=controls] .dp-hero-action .dp-ctrl-btn--next {
  font-size: 20px;
  padding: 22px 28px;
  border-radius: var(--radius-lg);
  letter-spacing: 0.03em;
}

.dp-main[data-tab=controls] .dp-hero-action .dp-ctrl-btn--next > span {
  font-size: 22px;
}

/* ─── EXTRAS footer ──────────────────────────────────────────────────────── */
.dp-extras {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dp-extras-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

.dp-extras-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Base style: muted, ghost-y. Variants tweak colour but stay subdued. */
.dp-extra-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.dp-extra-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.dp-extra-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dp-extra-icon {
  font-size: 13px;
  opacity: 0.75;
}

.dp-extra-btn--nudge:hover:not(:disabled) {
  border-color: rgba(127, 255, 0, 0.4);
  color: var(--green-neon);
  background: rgba(127, 255, 0, 0.06);
}

.dp-extra-btn--force-uitleg {
  border-style: dashed;
}

.dp-extra-btn--force-uitleg:hover:not(:disabled) {
  border-color: rgba(25, 118, 210, 0.45);
  color: #64b5f6;
  background: rgba(25, 118, 210, 0.08);
}

/* Skip: a tiny destructive button on its own line. Red-tinted on hover only
   so it never visually competes with the hero, but is still findable. */
.dp-extra-btn--skip {
  align-self: flex-start;
  color: rgba(229, 57, 53, 0.55);
  border-color: rgba(229, 57, 53, 0.18);
  font-size: 11px;
  padding: 6px 12px;
}

.dp-extra-btn--skip:hover:not(:disabled) {
  background: rgba(229, 57, 53, 0.08);
  border-color: rgba(229, 57, 53, 0.4);
  color: var(--red);
}

/* ─── Hidden slot kept for backward compat (JS no longer uses it) ──────── */
.dp-action-btn-slot {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   SPELVENSTER TAB — sidebar overrides
   On the game tab everything in #dashboard-right collapses into a 360px
   sidebar next to the iframe. Reset spacing so the flow/side wrappers
   become plain stacked blocks, and the hero action shrinks back to a
   normal-sized button.
   ════════════════════════════════════════════════════════════════════════════ */
.dp-main[data-tab=game] .dp-flow {
  padding: 14px 16px;
  gap: 14px;
  max-width: none;
}

.dp-main[data-tab=game] .dp-stage {
  /* Stage is hidden on this tab (see currentQuestionCard rule above) but
     if it ever appears it should look like a sidebar card. */
  padding: 14px 16px;
  border-radius: var(--radius-md);
}

.dp-main[data-tab=game] .dp-hero-action .dp-ctrl-btn--next {
  font-size: 15px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
}

.dp-main[data-tab=game] .dp-hero-action .dp-ctrl-btn--next > span {
  font-size: 16px;
}

.dp-main[data-tab=game] .dp-extras {
  padding-top: 10px;
}

/* ─── Common section title (legacy, kept for other components) ────────── */
.dp-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dp-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CURRENT QUESTION CARD
   ═══════════════════════════════════════════════════════════════════════════ */
#currentQuestionCard {
  overflow-y: visible;
}

.dp-current-question-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.45;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.dp-current-answer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-cq-answer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.2s, border-color 0.2s;
}

.dp-cq-answer-text {
  font-size: 14px;
  color: var(--off-white);
  line-height: 1.4;
}

/* Inside the stage on the controls tab, give answers a touch more breathing
   room — the stage is the focus there. */
.dp-main[data-tab=controls] .dp-stage .dp-cq-answer {
  padding: 8px 12px;
}

.dp-main[data-tab=controls] .dp-stage .dp-cq-answer-text {
  font-size: 13px;
}

.dp-main[data-tab=controls] .dp-stage .dp-current-question-text {
  font-size: 15px;
  margin-bottom: 12px;
}

.dp-cq-answer--correct {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.5);
}

.dp-cq-answer--correct .dp-cq-answer-text {
  color: #81c784;
  font-weight: 600;
}

.dp-cq-answer--correct::before {
  background: rgba(76, 175, 80, 0.3);
  color: #81c784;
}

.dp-cq-answer--wrong {
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPLANATION
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-explanation-wrap {
  /* lives inside .dp-section */
}

.dp-explanation-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.45);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#explanation {
  font-size: 15px;
  color: var(--off-white);
  line-height: 1.7;
  min-height: 40px;
}

#explanation.typewriter-active::after {
  content: "|";
  display: inline;
  opacity: 0.7;
  animation: blink 0.7s step-end infinite;
  color: var(--green-neon);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GAME CONTROLS (ACTION BUTTONS)
   ═══════════════════════════════════════════════════════════════════════════ */
#game-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Primary action button ── */
.dp-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.18s, opacity 0.18s;
  text-decoration: none;
}

.dp-ctrl-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.dp-ctrl-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ── Main action button: big, unmissable ── */
.dp-ctrl-btn--next {
  font-size: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--gold);
  color: var(--dark);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35);
}

.dp-ctrl-btn--next:hover:not(:disabled) {
  box-shadow: 0 6px 28px rgba(255, 215, 0, 0.5);
}

/* Waiting state: clearly communicate "nothing to do yet" */
.dp-ctrl-btn--next.phase-answering {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 22px;
  padding: 16px 20px;
  letter-spacing: 0.01em;
  /* Animation properties */
  animation: heartbeat 1.5s ease-in-out infinite;
}

.dp-ctrl-btn--next.phase-uitleg {
  background: linear-gradient(135deg, #1976d2, #1565c0);
  color: #fff;
  box-shadow: 0 4px 20px rgba(25, 118, 210, 0.4);
}

.dp-ctrl-btn--next.phase-uitleg:hover:not(:disabled) {
  box-shadow: 0 6px 28px rgba(25, 118, 210, 0.55);
}

.dp-ctrl-btn--next.phase-revealed {
  background: var(--gold);
  color: var(--dark);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35);
}

/* ── Separator before secondary actions (legacy, kept harmless) ── */
.dp-ctrl-secondary-sep {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

/* NOTE: the former .dp-ctrl-btn--force-uitleg / --nudge / --digibord /
   --skip / --compact and the .dp-ctrl-utility-row helper have been
   replaced by the new .dp-extra-btn family defined above. They are no
   longer referenced in the HTML and have been removed. */
/* ═══════════════════════════════════════════════════════════════════════════
   PLAYER ROSTER
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-player-roster-card {
  /* lives inside .dp-section */
}

.dp-roster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dp-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.dp-roster-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(127, 255, 0, 0.08);
  border: 1px solid rgba(127, 255, 0, 0.2);
  border-radius: 20px;
  padding: 3px 10px;
}

.dp-roster-count {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--green-neon);
}

.dp-roster-sep {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.2);
}

.dp-roster-answered-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 2px;
}

/* Progress bar */
.dp-roster-progress-bar-wrap {
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 18px;
}

.dp-roster-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green-mid), var(--green-neon));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Roster list */
.dp-roster-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* On the Spelbesturing tab the roster sidebar gets the full column height,
   so let the list grow rather than capping at 340px. */
.dp-main[data-tab=controls] .dp-roster-list {
  max-height: none;
  gap: 6px;
}

/* Controls tab: roster rows are the focal point — make them generous */
.dp-main[data-tab=controls] .dp-roster-row {
  padding: 14px 18px;
  border-radius: var(--radius-md);
}

.dp-main[data-tab=controls] .dp-roster-name {
  font-size: 17px;
}

.dp-main[data-tab=controls] .dp-roster-score {
  font-size: 22px;
}

.dp-main[data-tab=controls] .dp-roster-check,
.dp-main[data-tab=controls] .dp-roster-pending {
  font-size: 20px;
}

.dp-roster-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
  padding: 20px 0;
  letter-spacing: 0.04em;
}

.dp-roster-row {
  display: grid;
  grid-template-columns: 10px 32px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.dp-roster-row--answered {
  border-color: rgba(76, 175, 80, 0.15);
  background: rgba(76, 175, 80, 0.05);
}

.dp-roster-row--pending {
  border-color: rgba(255, 255, 255, 0.05);
}

.dp-roster-row--offline {
  opacity: 0.45;
}

.dp-roster-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dp-roster-dot--online {
  background: var(--green-bright);
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.8);
}

.dp-roster-dot--offline {
  background: var(--red);
  box-shadow: 0 0 6px rgba(229, 57, 53, 0.7);
}

.dp-roster-rank {
  font-size: 16px;
  text-align: center;
  flex-shrink: 0;
}

.dp-roster-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-roster-score {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.dp-roster-check {
  font-size: 18px;
  color: var(--green-bright);
  flex-shrink: 0;
  font-weight: 700;
}

.dp-roster-pending {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  letter-spacing: -0.05em;
}

/* Score deltas */
.dp-roster-delta {
  font-family: var(--font-display);
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.dp-roster-delta--pos {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
}

.dp-roster-delta--neg {
  background: rgba(229, 57, 53, 0.2);
  color: #ef9a9a;
}

.dp-roster-delta--zero {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

/* Answer letter badge (A / B / C / D) */
.dp-roster-answer {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}

.dp-roster-answer--empty {
  /* placeholder so the grid column doesn't collapse for unanswered players */
  min-width: 26px;
}

/* Before reveal: neutral pill — letter visible but no green/red hint yet */
.dp-roster-answer--a,
.dp-roster-answer--b,
.dp-roster-answer--c,
.dp-roster-answer--d {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* After reveal: correct answer → green, wrong answer → red */
.dp-roster-answer--correct {
  background: rgba(76, 175, 80, 0.25);
  color: #a5d6a7;
  border: 1px solid rgba(76, 175, 80, 0.45);
}

.dp-roster-answer--wrong {
  background: rgba(229, 57, 53, 0.22);
  color: #ef9a9a;
  border: 1px solid rgba(229, 57, 53, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY ALIASES (no-op, kept so older snippets don't break)
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-stat-card { /* legacy alias */ }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
/* On narrower screens collapse the Spelbesturing layout to a single column
   so the roster falls below the main flow instead of squeezing into 340px. */
@media (max-width: 1100px) {
  .dp-main[data-tab=controls] .dp-control-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    /* Allow the panel to grow beyond the viewport so both sections
       scroll together as one continuous page */
    height: auto;
    min-height: 100%;
  }
  .dp-main[data-tab=controls] .dp-flow {
    grid-column: 1;
    grid-row: 2;
    padding: 20px 18px 32px;
    overflow-y: visible;
  }
  .dp-main[data-tab=controls] .dp-side {
    grid-column: 1;
    grid-row: 3;
    border-left: none;
    border-top: 1px solid var(--border);
    background: transparent;
    overflow-y: visible;
    padding: 18px 18px 32px;
  }
  .dp-main[data-tab=controls] .dp-roster-list {
    max-height: none;
    min-height: 220px;
  }
}
@media (max-width: 720px) {
  .dp-topbar {
    padding: 0 16px;
    height: 52px;
  }
  .dp-tab-hint {
    display: none;
  }
  .dp-tabs {
    padding: 0 8px;
  }
  .dp-tab {
    padding: 0 14px;
    gap: 6px;
  }
  .dp-pregame-inner {
    flex-direction: column;
    gap: 28px;
  }
  .dp-pregame-visual {
    display: none;
  }
  /* Tighter hero on mobile */
  .dp-main[data-tab=controls] .dp-hero-action .dp-ctrl-btn--next {
    font-size: 17px;
    padding: 18px 22px;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   END-GAME PANEL  (#endgamePanel)
   Replaces the stage + hero-action zone when the server sends 'end_game'.
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-endgame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px 24px;
  animation: dp-endgame-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dp-endgame-trophy {
  font-size: 52px;
  filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.55));
  animation: dp-trophy-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

.dp-endgame-title {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: var(--shadow-glow);
  text-align: center;
}

.dp-endgame-sub {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--off-white);
  text-align: center;
  margin-bottom: 4px;
}

/* ── Leaderboard list ── */
.dp-endgame-leaderboard {
  list-style: none;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-endgame-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background 0.2s;
}

.dp-endgame-row--top3 {
  background: var(--surface-3);
  border-color: var(--border-gold);
}

.dp-endgame-row--top3:first-child {
  background: rgba(255, 215, 0, 0.09);
  border-color: rgba(255, 215, 0, 0.35);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.08);
}

.dp-endgame-rank {
  font-family: var(--font-display);
  font-size: 18px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.dp-endgame-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Legacy fallback: name already contains "name: score" as one string */
.dp-endgame-name--legacy {
  font-size: 13px;
  font-weight: 500;
  color: var(--off-white);
}

.dp-endgame-score {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--green-neon);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

/* ── Actions row below leaderboard ── */
.dp-endgame-actions {
  margin-top: 8px;
  width: 100%;
  max-width: 480px;
}

.dp-endgame-cta {
  display: flex;
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRE-GAME START PANEL  (#pregameStartPanel)
   Shown to the right of the iframe after the QR overlay is dismissed.
   Sits as a sibling of .dp-iframe-panel and .dp-control-panel inside
   .dp-main[data-tab="game"]. Hidden once the game starts.
   ═══════════════════════════════════════════════════════════════════════════ */
/* .dp-pregame-start-panel base rule moved to the pre-game section below */
/* On controls tab the panel is not needed */
.dp-main[data-tab=controls] .dp-pregame-start-panel {
  display: none !important;
}

/* Inner padding wrapper */
.dp-psp-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 24px 32px;
  height: 100%;
}

/* ── Status chip ── */
.dp-psp-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(127, 255, 0, 0.07);
  border: 1px solid rgba(127, 255, 0, 0.22);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  color: var(--green-neon);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}

.dp-psp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-neon);
  flex-shrink: 0;
  animation: pulse 1.4s ease-in-out infinite;
}

/* ── Heading ── */
.dp-psp-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dp-psp-label {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.1;
}

/* ── Sub text ── */
.dp-psp-sub {
  font-size: 13px;
  color: var(--off-white);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   THE START GAME BUTTON
   This is the teacher's primary action — unmistakably large,
   gold, impossible to miss.
   ══════════════════════════════════════════════════════════════ */
.dp-start-game-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 20px 24px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--gold);
  color: var(--dark);
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 4px 28px rgba(255, 215, 0, 0.45);
  position: relative;
  overflow: hidden;
}

/* Subtle shimmer sweep */
.dp-start-game-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: btnShimmer 2.4s ease-in-out infinite 0.6s;
}

.dp-start-game-btn:hover {
  background: #ffe033;
  transform: translateY(-3px);
  box-shadow: 0 8px 36px rgba(255, 215, 0, 0.6);
}

.dp-start-game-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 16px rgba(255, 215, 0, 0.4);
}

.dp-start-game-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.dp-start-game-btn__icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.dp-start-game-btn__label {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* ── Pre-game roster list (player names in lobby) ── */
.dp-psp-roster-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.dp-psp-roster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dp-psp-roster-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

.dp-psp-roster-count {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.dp-psp-roster-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 280px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.15) transparent;
}

.dp-psp-roster-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  animation: pspRowIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dp-psp-roster-list li::before {
  content: "●";
  font-size: 7px;
  color: var(--green-neon);
  flex-shrink: 0;
}

.dp-psp-roster-empty {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.2) !important;
  text-align: center;
  padding: 20px 0 !important;
  letter-spacing: 0.04em;
  font-weight: 400 !important;
}

.dp-psp-roster-empty::before {
  display: none !important;
}

/* ── Responsive: collapse start panel on narrow screens ── */
@media (max-width: 900px) {
  .dp-pregame-start-panel {
    flex: 0 0 260px;
    width: 260px;
  }
  .dp-start-game-btn__label {
    font-size: 20px;
  }
  .dp-start-game-btn__icon {
    font-size: 22px;
  }
}
@media (max-width: 700px) {
  /* Stack vertically on very small screens */
  .dp-main[data-tab=game] {
    flex-direction: column;
  }
  .dp-pregame-start-panel {
    flex: none;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-gold);
  }
  .dp-psp-inner {
    padding: 20px 18px 24px;
    gap: 14px;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PRE-GAME START PANEL — two-column layout with question list
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-pregame-start-panel {
  position: absolute;
  inset: 0;
  z-index: 15; /* above iframe (Konva), below QR overlay (z:20) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--green-deep);
}

.dp-pregame-start-panel[hidden] {
  display: none !important;
}

.dp-psp-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

/* ── Left column: question list ── */
.dp-psp-questions-col {
  position: relative; /* anchors the bottom scroll-fade below */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0; /* grid item: without this it can't shrink, so the list below never gets to scroll */
  border-right: 1px solid var(--border);
  background: var(--surface-1);
}

/* Soft fade at the bottom edge hints there's more to scroll to. Purely
   decorative — sits above the list, below the header, ignores clicks. */
.dp-psp-questions-col::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--surface-1));
  pointer-events: none;
  z-index: 1;
}

.dp-psp-col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 31, 13, 0.7);
  flex-shrink: 0;
}

.dp-psp-col-icon {
  font-size: 16px;
}

.dp-psp-col-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--white);
}

.dp-psp-set-name {
  flex: 1;
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-psp-question-count {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: 0.04em;
}

/* Scrollable question list */
.dp-psp-question-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* let the list itself shrink/scroll instead of pushing items to be squashed */
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.2) transparent;
}

.dp-psp-question-list::-webkit-scrollbar {
  width: 5px;
}

.dp-psp-question-list::-webkit-scrollbar-track {
  background: transparent;
}

.dp-psp-question-list::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.2);
  border-radius: 3px;
}

.dp-psp-question-loading,
.dp-psp-question-empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  padding: 24px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Spinner */
.dp-psp-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: dp-spin 0.7s linear infinite;
}

/* Each question card */
.dp-psp-question-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s, transform 0.12s;
  overflow: hidden;
  flex-shrink: 0; /* never squash a question card to fit — the list scrolls instead */
}

.dp-psp-question-item:hover {
  border-color: var(--border-gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Expanded card gets a subtle gold-tinted lift so it visually separates
   from the rest of the (still collapsed) list. Progressive enhancement —
   browsers without :has() just skip this and the chevron/rotation still
   communicates state. */
.dp-psp-question-item:has(.dp-psp-q-toggle[aria-expanded=true]) {
  border-color: var(--border-gold);
  background: var(--surface-3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 215, 0, 0.06) inset;
}

.dp-psp-q-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.22);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--gold);
  line-height: 1;
  transition: background 0.18s, border-color 0.18s;
}

.dp-psp-q-toggle[aria-expanded=true] .dp-psp-q-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}

.dp-psp-q-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

/* Answer list under each question */
.dp-psp-answers {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-psp-answer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(245, 245, 240, 0.55);
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}

.dp-psp-answer-letter {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1;
}

.dp-psp-answer-text {
  flex: 1;
  min-width: 0;
}

.dp-psp-answer-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-neon);
  color: var(--dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.dp-psp-answer--correct {
  color: var(--green-neon);
  font-weight: 600;
  background: rgba(127, 255, 0, 0.08);
  border-color: rgba(127, 255, 0, 0.3);
}

.dp-psp-answer--correct .dp-psp-answer-letter {
  background: var(--green-neon);
  border-color: var(--green-neon);
  color: var(--dark);
}

/* ── Right column: lobby + start ── */
.dp-psp-lobby-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 20px;
  gap: 14px;
  background: var(--surface-2);
}

/* Keep the roster scrollable inside the fixed-height right col */
.dp-psp-roster-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.dp-psp-roster-list {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.2) transparent;
}

.dp-psp-roster-list::-webkit-scrollbar {
  width: 4px;
}

.dp-psp-roster-list::-webkit-scrollbar-track {
  background: transparent;
}

.dp-psp-roster-list::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.2);
  border-radius: 2px;
}

/* ── Explanation block inside pre-game question cards ── */
.dp-psp-explanation {
  margin-top: 2px;
  padding: 10px 12px;
  background: rgba(127, 255, 0, 0.04);
  border: 1px solid rgba(127, 255, 0, 0.18);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: rgba(245, 245, 240, 0.6);
  line-height: 1.55;
}

.dp-psp-explanation-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-neon);
  margin-bottom: 5px;
}

/* ── Collapsible question toggle ── */
.dp-psp-q-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  font-family: var(--font-body);
  transition: background 0.15s;
}

.dp-psp-q-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}

.dp-psp-q-toggle .dp-psp-q-num {
  flex-shrink: 0;
}

.dp-psp-q-toggle .dp-psp-q-text {
  flex: 1;
}

.dp-psp-q-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.2s, color 0.2s, background 0.2s;
}

.dp-psp-q-toggle[aria-expanded=true] .dp-psp-q-chevron {
  transform: rotate(90deg);
  color: var(--dark);
  background: var(--gold);
}

.dp-psp-q-body {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 2px 16px 16px 52px; /* indent aligns with question text */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 2px;
  padding-top: 12px;
}

.dp-psp-q-body.is-open {
  display: flex;
  animation: dp-psp-body-in 0.16s ease-out;
}

@keyframes dp-psp-body-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Remove the old padding from the header since toggle handles it */
.dp-psp-q-header {
  display: none; /* replaced by .dp-psp-q-toggle */
}

/* ══════════════════════════════════════
   QR VIEW TOGGLE (pre-game, lobby col)
══════════════════════════════════════ */
.dp-qr-view-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.dp-qr-view-toggle-label {
  font-size: 11px;
  color: var(--off-white);
  letter-spacing: 0.03em;
  flex: 1;
}

.dp-qr-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border-gold);
  background: rgba(255, 215, 0, 0.07);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.dp-qr-view-toggle-btn:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.dp-qr-view-toggle-btn[data-view=list] {
  border-color: rgba(127, 255, 0, 0.4);
  background: rgba(127, 255, 0, 0.07);
  color: var(--green-neon);
}

.dp-qr-view-toggle-btn[data-view=list]:hover {
  background: rgba(127, 255, 0, 0.14);
  border-color: var(--green-neon);
}

.dp-qr-view-toggle-icon {
  font-size: 14px;
  line-height: 1;
}

/* ══════════════════════════════════════
   KlimaatCasino – Vragensets
   Two views: LIST (default) and EDIT/CREATE
   Design system from wireframe v4
══════════════════════════════════════ */
/* ── Page shell ── */
body:has(.sq-page) {
  font-family: var(--font-body);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #1e4a1e 0%, var(--dark) 55%, var(--darker) 100%);
  min-height: 100vh;
  color: var(--white);
  overflow-x: hidden;
}

.sq-page {
  min-height: 100vh;
}

/* ══════════════════════════════════════
   HEADER (shared)
══════════════════════════════════════ */
.sq-header {
  border-bottom: 1px solid var(--panel-border);
  background: rgba(13, 31, 13, 0.7);
  backdrop-filter: blur(12px);
  padding: 36px 0 28px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sq-header-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px;
}

.sq-back-link {
  display: inline-block;
  font-size: 12px;
  color: rgba(245, 245, 240, 0.55);
  text-decoration: none;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}

.sq-back-link:hover {
  color: var(--gold);
}

.sq-eyebrow {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green-neon);
  margin-bottom: 6px;
  font-weight: 600;
}

.sq-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
  line-height: 1;
  margin-bottom: 6px;
}

.sq-subtitle {
  font-size: 14px;
  color: rgba(245, 245, 240, 0.55);
  font-weight: 400;
}

/* ══════════════════════════════════════
   CONTAINER (shared)
══════════════════════════════════════ */
.sq-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sq-container--list {
  gap: 28px;
}

/* ══════════════════════════════════════
   VIEW 1 — LIST: set cards
══════════════════════════════════════ */
.sq-set-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sq-set-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.sq-set-card:hover {
  border-color: rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.04);
  transform: translateY(-1px);
}

.sq-set-card__main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.sq-set-card__icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 255, 0, 0.08);
  border: 1px solid rgba(127, 255, 0, 0.25);
  border-radius: var(--radius);
}

.sq-set-card__body {
  min-width: 0;
}

.sq-set-card__name {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.03em;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 4px;
}

.sq-set-card__meta {
  font-size: 12px;
  color: rgba(245, 245, 240, 0.45);
  letter-spacing: 0.04em;
}

.sq-set-card__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Empty state ── */
.sq-empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--panel-bg);
  border: 1.5px dashed var(--panel-border);
  border-radius: var(--radius-lg);
}

.sq-empty__icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.sq-empty__title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.03em;
  color: var(--white);
  margin-bottom: 8px;
}

.sq-empty__text {
  font-size: 14px;
  color: rgba(245, 245, 240, 0.5);
}

/* ── Bottom CTA ── */
.sq-new-cta {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

/* ══════════════════════════════════════
   VIEW 2 / 3 — EDIT / CREATE: form
══════════════════════════════════════ */
.sq-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Card ── */
.sq-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  transition: border-color 0.2s;
}

.sq-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.sq-card-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-neon);
  font-weight: 600;
  margin-bottom: 12px;
}

/* ── Top action bar (Play primary) ── */
.sq-card--actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-color: rgba(255, 215, 0, 0.25);
  background: rgba(255, 215, 0, 0.04);
}

.sq-actions-left .sq-card-label {
  margin-bottom: 4px;
}

.sq-actions-hint {
  font-size: 13px;
  color: rgba(245, 245, 240, 0.6);
}

.sq-actions-right {
  flex-shrink: 0;
}

/* ── Text input ── */
.sq-text-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid var(--panel-border);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.sq-text-input::placeholder {
  color: rgba(245, 245, 240, 0.3);
}

.sq-text-input:focus {
  border-color: var(--gold);
  background: rgba(255, 215, 0, 0.05);
}

.sq-text-input--full {
  width: 100%;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.sq-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  white-space: nowrap;
}

.sq-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.sq-btn:active {
  transform: translateY(0);
}

.sq-btn--play {
  background: var(--gold);
  color: var(--darker);
  font-weight: 700;
}

.sq-btn--play:hover {
  background: #ffe033;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35);
}

.sq-btn--save {
  background: var(--green-mid);
  color: var(--white);
}

.sq-btn--save:hover {
  background: var(--green-bright);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
}

.sq-btn--delete {
  background: rgba(229, 57, 53, 0.12);
  color: rgba(229, 57, 53, 0.9);
  border: 1.5px solid rgba(229, 57, 53, 0.35);
}

.sq-btn--delete:hover {
  background: rgba(229, 57, 53, 0.25);
  border-color: var(--red);
  box-shadow: 0 6px 20px rgba(229, 57, 53, 0.2);
}

.sq-btn--ghost {
  background: transparent;
  color: rgba(245, 245, 240, 0.75);
  border: 1.5px solid var(--panel-border);
}

.sq-btn--ghost:hover {
  background: var(--panel-hover);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}

.sq-btn--lg {
  font-size: 16px;
  padding: 14px 28px;
}

/* ══════════════════════════════════════
   QUESTIONS CARD
══════════════════════════════════════ */
.sq-questions-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sq-section-heading {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--white);
}

.sq-selected-counter {
  background: rgba(127, 255, 0, 0.1);
  border: 1px solid rgba(127, 255, 0, 0.35);
  color: var(--green-neon);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

.sq-selected-counter span {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.02em;
  margin-right: 4px;
}

/* ── Scrollbox ── */
.sq-questions-box {
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-width: thin;
  scrollbar-color: var(--green-mid) transparent;
}

.sq-questions-box::-webkit-scrollbar {
  width: 6px;
}

.sq-questions-box::-webkit-scrollbar-track {
  background: transparent;
}

.sq-questions-box::-webkit-scrollbar-thumb {
  background: var(--green-mid);
  border-radius: 3px;
}

/* ── Category ── */
.sq-category {
  margin-bottom: 4px;
}

.sq-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #111e11;
  border-bottom: 1px solid var(--panel-border);
  border-top: 1px solid var(--panel-border);
  position: sticky;
  top: 0;
  z-index: 2;
}

.sq-category-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-neon);
}

.sq-category-count {
  font-size: 10px;
  color: rgba(245, 245, 240, 0.35);
  letter-spacing: 0.08em;
}

/* ── Question item ── */
.sq-question-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sq-question-item:last-child {
  border-bottom: none;
}

.sq-question-item:hover {
  background: var(--panel-hover);
}

/* Hide native checkbox */
.sq-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox */
.sq-check-custom {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  margin-top: 1px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sq-check-custom::after {
  content: "";
  width: 5px;
  height: 9px;
  border: 2px solid var(--darker);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity 0.1s;
}

.sq-checkbox:checked ~ .sq-check-custom {
  background: var(--green-neon);
  border-color: var(--green-neon);
  box-shadow: 0 0 8px rgba(127, 255, 0, 0.4);
}

.sq-checkbox:checked ~ .sq-check-custom::after {
  opacity: 1;
}

.sq-question-text {
  font-size: 14px;
  color: rgba(245, 245, 240, 0.8);
  line-height: 1.5;
  flex: 1;
  transition: color 0.15s;
}

.sq-question-item:has(.sq-checkbox:checked) .sq-question-text {
  color: var(--white);
}

/* ══════════════════════════════════════
   FOOTER ACTIONS
══════════════════════════════════════ */
.sq-footer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 600px) {
  .sq-header {
    position: static;
    padding: 24px 0 18px;
  }
  .sq-header-inner,
  .sq-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sq-set-card {
    flex-direction: column;
    align-items: stretch;
  }
  .sq-set-card__actions {
    width: 100%;
  }
  .sq-set-card__actions .sq-btn {
    flex: 1;
    justify-content: center;
  }
  .sq-card--actions {
    flex-direction: column;
    align-items: stretch;
  }
  .sq-actions-right .sq-btn {
    width: 100%;
    justify-content: center;
  }
  .sq-footer-actions {
    flex-direction: column-reverse;
  }
  .sq-footer-actions .sq-btn {
    width: 100%;
    justify-content: center;
  }
  .sq-btn {
    justify-content: center;
  }
}
/* ── Category header: right side (count + select-all) ── */
.sq-category-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sq-select-all-btn {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1200;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1.6;
}

.sq-select-all-btn:hover {
  background: #ffe033;
  border-color: #ffe033;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.35);
}

.sq-select-all-btn:active {
  background: var(--gold-dim);
}

.sq-select-all-btn--deselect {
  color: var(--white);
  background: rgba(229, 57, 53, 0.15);
  border-color: rgba(229, 57, 53, 0.6);
}

.sq-select-all-btn--deselect:hover {
  background: rgba(229, 57, 53, 0.28);
  border-color: var(--red);
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.25);
}

.sq-select-all-btn--deselect:active {
  background: rgba(229, 57, 53, 0.4);
}

/* ── Category header left (collapse icon + name) ── */
.sq-category-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sq-category-toggle {
  cursor: pointer;
  user-select: none;
}

.sq-category-toggle:hover {
  background: rgba(127, 255, 0, 0.1);
}

.sq-collapse-icon {
  font-size: 14px;
  color: var(--green-neon);
  transition: transform 0.22s ease;
  display: inline-block;
  line-height: 1;
  flex-shrink: 0;
}

.sq-collapse-icon--collapsed {
  transform: rotate(-90deg);
}

/* ── Category body collapse animation ── */
.sq-category-body {
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease;
  max-height: 2000px; /* large enough for any category */
  opacity: 1;
}

.sq-category-body--collapsed {
  max-height: 0 !important;
  opacity: 0;
}

/*# sourceMappingURL=main.css.map */