/*
 * ISOZEKER-huisstijl: bordeaux-verloop als achtergrond (zoals de hero op isozeker.nl),
 * witte kaarten met bordeaux accenten, Open Sans, en het beeldmerk-verloop
 * (bordeaux → koraal → crème) als accent.
 *
 * Truc: binnen .card worden de kleurvariabelen opnieuw gezet (donkere tekst, groen
 * voor "goed"), zodat alle bestaande componenten vanzelf leesbaar zijn op wit.
 */

[data-theme="iso"] {
  --bg: #4a0620;
  --ink: #fff8f4;
  --muted: #f0c9d2;
  --pink: #f07a82;
  --lime: #fbd49a;
  --cyan: #f7b39a;
  --sun: #fbd49a;
  --violet: #c9a3ff;
  --coral: #ff9a9a;
  --glass: #ffffff;
  --line: rgba(255, 255, 255, 0.22);
  --font-display: "Open Sans", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;
  --radius: 16px;
  --iso-primary: #63092a;
  --iso-dark: #4a0620;
  --iso-light: #7e1046;
  --iso-coral: #f07a82;
  --iso-cream: #fbe3b8;
  --iso-grad: linear-gradient(135deg, #63092a 0%, #7e1046 100%);
  --iso-logo-grad: linear-gradient(90deg, #63092a 0%, #b43a5a 35%, #f07a82 58%, #f7b39a 78%, #fbe3b8 100%);
}

/* Kaart-context: donkere tekst op wit. */
[data-theme="iso"] .card,
[data-theme="iso"] .save-bar,
[data-theme="iso"] .audio-panel,
[data-theme="iso"] .role,
[data-theme="iso"] .preview-card {
  --ink: #2a0d18;
  --muted: #7a5a66;
  --line: rgba(99, 9, 42, 0.14);
  --lime: #1f9d55;
  --cyan: #7e1046;
  --sun: #b0701a;
  --pink: #c2185b;
  --coral: #dc2626;
  color: var(--ink);
}

/* ---- achtergrond ------------------------------------------------------ */
[data-theme="iso"] body {
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(240, 122, 130, 0.28), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(251, 227, 184, 0.14), transparent 55%),
    linear-gradient(135deg, #3b0419 0%, #63092a 48%, #7e1046 100%);
  background-color: var(--iso-dark);
}

[data-theme="iso"] body::before {
  opacity: 0.35;
  mix-blend-mode: normal;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

[data-theme="iso"] .sky {
  display: none;
}

[data-theme="iso"] .blob {
  filter: blur(80px);
  opacity: 0.22;
}

[data-theme="iso"] .blob-a { background: var(--iso-coral); }
[data-theme="iso"] .blob-b { background: var(--iso-cream); opacity: 0.14; }
[data-theme="iso"] .blob-c { background: #b43a5a; }

[data-theme="iso"] .floater {
  opacity: 0.55;
  filter: drop-shadow(0 12px 18px rgba(20, 0, 8, 0.35));
  animation-duration: 12s;
}

[data-theme="iso"] .floater img {
  width: 100%;
  display: block;
  user-select: none;
}

[data-theme="iso"] .f-duck {
  opacity: 0.35;
  animation-name: iso-turn;
  animation-duration: 18s;
}

[data-theme="iso"] .parade.party .floater {
  animation-duration: 4s;
}

[data-theme="iso"] .page-play.answering .floater {
  opacity: 0.12;
}

/* ---- mascotte ---------------------------------------------------------- */
[data-theme="iso"] .mascot {
  filter: drop-shadow(0 14px 18px rgba(20, 0, 8, 0.4));
}

[data-theme="iso"] .bubble {
  border-radius: 14px 14px 4px 14px;
  border: 1px solid rgba(99, 9, 42, 0.18);
  background: #fff;
  color: #2a0d18;
  box-shadow: 0 12px 28px rgba(20, 0, 8, 0.3);
}

[data-theme="iso"] .bubble::before {
  content: "";
  display: block;
  height: 3px;
  margin: -0.7rem -0.8rem 0.55rem;
  border-radius: 14px 14px 0 0;
  background: var(--iso-logo-grad);
}

[data-theme="iso"] .mood-win .checks {
  animation: iso-draw 0.8s ease both;
}

[data-theme="iso"] .chip-live,
[data-theme="iso"] .icon-btn,
[data-theme="iso"] .theme-toggle {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

[data-theme="iso"] .pulse-dot {
  background: var(--iso-coral);
  box-shadow: 0 0 0 0 rgba(240, 122, 130, 0.7);
  animation-name: iso-ping;
}

/* ---- typografie ------------------------------------------------------ */
[data-theme="iso"] h1,
[data-theme="iso"] h2,
[data-theme="iso"] h3,
[data-theme="iso"] .role strong,
[data-theme="iso"] .question-text,
[data-theme="iso"] .room-code,
[data-theme="iso"] .count-num,
[data-theme="iso"] .verdict,
[data-theme="iso"] .score-pop,
[data-theme="iso"] .rank-line,
[data-theme="iso"] .final-rank,
[data-theme="iso"] .wait-pulse {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

[data-theme="iso"] .eyebrow {
  font-weight: 700;
  letter-spacing: 0.12em;
}

[data-theme="iso"] .card h2 {
  color: var(--iso-primary);
}

/* ---- homepage --------------------------------------------------------- */
[data-theme="iso"] .hero .eyebrow {
  color: var(--iso-cream);
}

[data-theme="iso"] .logo {
  background: linear-gradient(100deg, #ffffff 30%, #fbe3b8 70%, #f7b39a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 16px 30px rgba(20, 0, 8, 0.4));
}

[data-theme="iso"] .lede {
  color: #f7dde3;
}

[data-theme="iso"] .role {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #fff;
  box-shadow: 0 20px 44px rgba(20, 0, 8, 0.35);
}

[data-theme="iso"] .role::after {
  width: 100%;
  height: 5px;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  filter: none;
  transform: none;
  background: var(--iso-logo-grad);
}

[data-theme="iso"] .host-role strong { color: var(--iso-primary); }
[data-theme="iso"] .play-role { background: linear-gradient(145deg, #fff 30%, #fdeee3 100%); }
[data-theme="iso"] .play-role strong { color: var(--iso-light); }
[data-theme="iso"] .role-kicker { color: var(--iso-light); opacity: 1; }

[data-theme="iso"] .studio-link {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="iso"] .studio-link .role-kicker {
  color: var(--iso-cream);
}

[data-theme="iso"] .studio-sub {
  color: #f7dde3;
}

[data-theme="iso"] .marquee-track {
  color: rgba(255, 244, 234, 0.75);
}

[data-theme="iso"] .marquee b {
  color: var(--iso-cream);
}

/* ---- kaarten ------------------------------------------------------------- */
[data-theme="iso"] .card {
  position: relative;
  overflow: hidden;
  border: 0;
  background: #fff;
  backdrop-filter: none;
  box-shadow:
    0 24px 60px rgba(20, 0, 8, 0.38),
    0 2px 0 rgba(255, 255, 255, 0.6) inset;
}

[data-theme="iso"] .card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--iso-logo-grad);
}

[data-theme="iso"] .finale {
  background:
    radial-gradient(420px 200px at 15% 0%, rgba(251, 212, 154, 0.35), transparent 60%),
    #fff;
}

[data-theme="iso"] input,
[data-theme="iso"] select,
[data-theme="iso"] textarea {
  color: var(--ink);
  background: #fbf7f8;
  border: 1px solid rgba(99, 9, 42, 0.2);
  border-radius: 10px;
}

[data-theme="iso"] input:focus,
[data-theme="iso"] select:focus,
[data-theme="iso"] textarea:focus {
  border-color: var(--iso-primary);
  box-shadow: 0 0 0 4px rgba(99, 9, 42, 0.14);
}

[data-theme="iso"] input[type="range"],
[data-theme="iso"] input[type="checkbox"],
[data-theme="iso"] input[type="radio"] {
  background: none;
  border: 0;
  box-shadow: none;
  accent-color: var(--iso-primary);
}

[data-theme="iso"] label,
[data-theme="iso"] .label,
[data-theme="iso"] .field-label {
  color: var(--iso-light);
}

[data-theme="iso"] :focus-visible {
  outline-color: var(--iso-coral);
}

/* ---- knoppen ----------------------------------------------------------- */
[data-theme="iso"] .btn {
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  background: var(--iso-grad);
  box-shadow: 0 10px 22px rgba(99, 9, 42, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.18s var(--ease), box-shadow 0.2s, filter 0.2s;
}

[data-theme="iso"] .btn:hover:not(:disabled) {
  filter: brightness(1.12);
  box-shadow: 0 14px 28px rgba(99, 9, 42, 0.4);
}

[data-theme="iso"] .btn-primary {
  background: linear-gradient(135deg, #7e1046 0%, #c2185b 55%, #f07a82 100%);
}

[data-theme="iso"] .btn-cyan {
  background: var(--iso-grad);
}

[data-theme="iso"] .btn-sun {
  color: #3a1020;
  background: linear-gradient(135deg, #fbe3b8, #f7b39a);
}

[data-theme="iso"] .btn-ghost {
  color: var(--iso-primary);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(99, 9, 42, 0.25);
}

[data-theme="iso"] .btn-danger {
  color: #fff;
  background: #b91c1c;
}

[data-theme="iso"] .tabs button {
  color: var(--iso-primary);
  border-color: rgba(99, 9, 42, 0.25);
}

[data-theme="iso"] .tabs button[aria-selected="true"] {
  color: #fff;
  background: var(--iso-grad);
}

[data-theme="iso"] .theme-picker button {
  color: var(--ink);
  background: #fbf7f8;
  border-color: rgba(99, 9, 42, 0.18);
  border-radius: 12px;
}

[data-theme="iso"] .theme-picker button[aria-checked="true"] {
  border-color: var(--iso-primary);
  box-shadow: 0 0 0 3px rgba(99, 9, 42, 0.15);
}

[data-theme="iso"] .pill,
[data-theme="iso"] .tool,
[data-theme="iso"] .pack-item,
[data-theme="iso"] .q-card,
[data-theme="iso"] .t-group,
[data-theme="iso"] .qr-card,
[data-theme="iso"] .player-list li,
[data-theme="iso"] .leaderboard td,
[data-theme="iso"] .bar-track {
  background: #fbf7f8;
}

[data-theme="iso"] #wait .player-list li {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="iso"] .pack-item.active,
[data-theme="iso"] .choice-row.is-correct {
  background: #fdf2f5;
}

[data-theme="iso"] .pack-item.active {
  border-color: var(--iso-primary);
}

[data-theme="iso"] .notice {
  border-color: rgba(99, 9, 42, 0.25);
  background: #fdf2f5;
}

[data-theme="iso"] .host-roast {
  color: #9d1747;
}

/* ---- lobby ------------------------------------------------------------ */
[data-theme="iso"] .room-wrap {
  border: 0;
  background: var(--iso-grad);
  padding-top: 2rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="iso"] .room-wrap::before {
  background: conic-gradient(from 0deg, transparent, rgba(251, 227, 184, 0.22), transparent 30%);
  animation-duration: 10s;
}

[data-theme="iso"] .room-wrap::after {
  content: "SESSIECODE";
  position: absolute;
  top: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="iso"] .room-code {
  color: #fff;
  letter-spacing: 0.16em;
  text-shadow: 0 6px 24px rgba(20, 0, 8, 0.45);
}

[data-theme="iso"] .pack-title,
[data-theme="iso"] .join-hint {
  color: rgba(255, 244, 234, 0.85);
}

[data-theme="iso"] .qr {
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(99, 9, 42, 0.15), 0 12px 26px rgba(99, 9, 42, 0.2);
}

[data-theme="iso"] .avatar {
  background: #fdf2f5;
}

[data-theme="iso"] #wait .avatar {
  background: rgba(255, 255, 255, 0.14);
}

/* ---- vraag -------------------------------------------------------------- */
[data-theme="iso"] .card .question-text {
  color: var(--iso-primary);
}

[data-theme="iso"] .timer-bar {
  height: 12px;
  background: rgba(99, 9, 42, 0.1);
}

[data-theme="iso"] .page-play .timer-bar {
  background: rgba(255, 255, 255, 0.16);
}

[data-theme="iso"] .timer-fill {
  background: var(--iso-logo-grad);
  box-shadow: 0 0 14px rgba(240, 122, 130, 0.45);
}

[data-theme="iso"] .timer-fill.urgent {
  background: linear-gradient(90deg, #b91c1c, #f07a82);
}

[data-theme="iso"] .answer-btn {
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 12px 24px rgba(20, 0, 8, 0.22);
}

[data-theme="iso"] .answer-btn::after {
  width: 100%;
  height: 40%;
  left: 0;
  top: 0;
  border-radius: 14px 14px 0 0;
  transform: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
}

[data-theme="iso"] .answer-btn.a0,
[data-theme="iso"] .shape.a0,
[data-theme="iso"] .bar.a0 .bar-fill { background: linear-gradient(160deg, #9b1b4a, #63092a); color: #fff; }
[data-theme="iso"] .answer-btn.a1,
[data-theme="iso"] .shape.a1,
[data-theme="iso"] .bar.a1 .bar-fill { background: linear-gradient(160deg, #e8707c, #c2334a); color: #fff; }
[data-theme="iso"] .answer-btn.a2,
[data-theme="iso"] .shape.a2,
[data-theme="iso"] .bar.a2 .bar-fill { background: linear-gradient(160deg, #ffe0a8, #f0a43c); color: #3a1020; }
[data-theme="iso"] .answer-btn.a3,
[data-theme="iso"] .shape.a3,
[data-theme="iso"] .bar.a3 .bar-fill { background: linear-gradient(160deg, #6f89ab, #3b4f6e); color: #fff; }

[data-theme="iso"] .answer-btn.picked {
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--iso-coral);
}

[data-theme="iso"] .answers-pill b {
  color: var(--iso-primary);
}

[data-theme="iso"] .countdown {
  background: radial-gradient(circle, rgba(99, 9, 42, 0.86), rgba(59, 4, 25, 0.96));
}

[data-theme="iso"] .count-label {
  color: var(--iso-cream);
}

[data-theme="iso"] .count-num {
  background: linear-gradient(160deg, #fff 20%, #fbe3b8 60%, #f07a82);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 12px 30px rgba(20, 0, 8, 0.5));
}

[data-theme="iso"] .count-num.tick {
  animation: iso-count 0.9s var(--ease);
}

/* ---- resultaten ------------------------------------------------------------ */
[data-theme="iso"] .correct-answer {
  color: var(--iso-primary);
}

[data-theme="iso"] .bar.is-correct .bar-track {
  outline-color: #1f9d55;
}

[data-theme="iso"] .bar-label b {
  color: var(--iso-primary);
}

[data-theme="iso"] .leaderboard tr.rank-1 td { background: #fff6e6; }
[data-theme="iso"] .leaderboard tr.rank-2 td { background: #f4f5f8; }
[data-theme="iso"] .leaderboard tr.rank-3 td { background: #fdf0ef; }

[data-theme="iso"] .place-1 .podium-block { background: linear-gradient(180deg, #ffe0a8, #f0a43c); }
[data-theme="iso"] .place-2 .podium-block { background: linear-gradient(180deg, #f4f5f8, #c3c8d4); }
[data-theme="iso"] .place-3 .podium-block { background: linear-gradient(180deg, #f59aa0, #e0485a); color: #fff; }

[data-theme="iso"] .place-1 .podium-name::before {
  content: "🏅 ";
}

[data-theme="iso"] .streak-badge {
  color: #fff;
  background: var(--iso-grad);
  animation-name: iso-pulse;
}

[data-theme="iso"] .verdict.late {
  color: #7a5a66;
}

/* ---- losse onderdelen ------------------------------------------------------- */
[data-theme="iso"] .toast {
  color: #fff;
  background: var(--iso-grad);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 16px 34px rgba(20, 0, 8, 0.45);
}

[data-theme="iso"] .save-bar,
[data-theme="iso"] .audio-panel {
  border: 1px solid rgba(99, 9, 42, 0.14);
  background: rgba(255, 255, 255, 0.97);
}

[data-theme="iso"] .save-state {
  color: #1f9d55;
}

[data-theme="iso"] .save-state.is-dirty {
  color: #b0701a;
}

[data-theme="iso"] .confetti {
  text-shadow: 0 2px 6px rgba(20, 0, 8, 0.3);
}

[data-theme="iso"] .wait-pulse small,
[data-theme="iso"] .page-play .feedback.pending-ack {
  color: #f7dde3;
}

@keyframes iso-turn {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-18px) rotate(8deg); }
}

@keyframes iso-in {
  from { opacity: 0; transform: scale(0.6) rotate(-90deg); }
  to { opacity: 1; transform: none; }
}

@keyframes iso-ping {
  70% { box-shadow: 0 0 0 8px rgba(240, 122, 130, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 122, 130, 0); }
}

@keyframes iso-draw {
  from { stroke-dasharray: 20; stroke-dashoffset: 20; }
  to { stroke-dasharray: 20; stroke-dashoffset: 0; }
}

@keyframes iso-count {
  0% { transform: scale(1.5); opacity: 0; }
  30% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1); opacity: 0.95; }
}

@keyframes iso-pulse {
  50% { transform: scale(1.05); box-shadow: 0 0 24px rgba(240, 122, 130, 0.55); }
}