@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

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

:root {
  --green:    #006633;
  --green-hi: #00cc55;
  --cyan:     #005f8a;
  --cyan-hi:  #00ccff;
  --magenta:  #990066;
  --mag-hi:   #ff44bb;
  --yellow:   #886600;
  --mark:     #0055bb;
  --birgit:   #cc0077;
  --bg:       #eafce4;
  --card:     #ffffff;
  --card-bar: #006633;
  --border:   #006633;
  --text:     #001a00;
  --muted:    #446644;
  --radius:   0px;
}

/* ── Base – mobile first ─────────────────────────────────────────────── */
html { font-size: 16px; }

body {
  font-family: 'VT323', monospace;
  font-size: 22px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* tight side padding on mobile */
  padding: 0.75rem 0.75rem 3rem;
  color: var(--text);
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* scrolling dot-matrix grid */
body.no-bg-image {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(0,100,50,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,100,50,.1) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: gridScroll 30s linear infinite;
}
@keyframes gridScroll {
  0%   { background-position: 0 0; }
  100% { background-position: 32px 32px; }
}

/* scanlines – lighter than before */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px
  );
  pointer-events: none;
  z-index: 9000;
}

/* bg image layer */
#bg-layer {
  position: fixed; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  filter: saturate(.35) brightness(.85);
}
#overlay-layer { position: fixed; inset: 0; z-index: -1; }

/* ── Sticker strip — sits ABOVE the card, never overlaps ─────────────── */
#sticker-strip {
  width: 100%;
  max-width: 600px;
  height: 90px;
  position: relative;
  pointer-events: none;
  overflow: hidden;
  flex-shrink: 0;
}

/* stickers live inside the strip */
.sticker {
  position: absolute;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(1px 1px 0 var(--green))
    drop-shadow(-1px -1px 0 rgba(0,200,80,.3));
  animation: stickerFloat 6s ease-in-out infinite;
}
.sticker:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes stickerFloat {
  0%,100% { transform: translateY(0) var(--sticker-rotate, rotate(0deg)); }
  50%      { transform: translateY(-8px) var(--sticker-rotate, rotate(0deg)); }
}

/* ── Card ────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 2px solid var(--border);
  box-shadow:
    4px 4px 0 var(--green),
    inset 0 0 0 1px rgba(0,102,51,.08);
  /* 0 top padding — title bar sits flush */
  padding: 0 1.25rem 1.75rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  overflow: hidden;
}

/* terminal title bar — fullwidth because it bleeds past horizontal padding */
.card::before {
  content: '■ ■ ■   MARK & BIBI.EXE';
  display: block;
  background: var(--card-bar);
  color: var(--bg);
  font-family: 'Press Start 2P', monospace;
  font-size: .52rem;
  padding: .5rem .75rem;
  letter-spacing: .05em;
  margin: 0 -1.25rem 1.5rem;
}

/* ── Logo ────────────────────────────────────────────────────────────── */
.logo {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.05rem, 5vw, 1.45rem);
  text-align: center;
  margin-bottom: .4rem;
  line-height: 1.7;
  color: var(--magenta);
  text-shadow: 2px 2px 0 var(--mag-hi), -1px 0 0 rgba(0,200,255,.4);
}
.logo .amp { color: var(--yellow); text-shadow: 1px 1px 0 #ddbb00; }
.logo::after {
  content: '_';
  color: var(--green-hi);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

.subtitle {
  text-align: center;
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  letter-spacing: .04em;
}

/* ── Section deco photo ──────────────────────────────────────────────── */
.deco-photo {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  margin-bottom: 1.25rem;
  border: 2px solid var(--cyan);
  box-shadow: 3px 3px 0 var(--cyan);
  filter: saturate(.7) brightness(.95);
}

/* ── Buttons — large touch targets ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: 'Press Start 2P', monospace;
  /* clamp keeps text readable between 320px and 600px */
  font-size: clamp(.68rem, 2.8vw, .82rem);
  line-height: 1.7;
  /* minimum 52px touch target */
  padding: .95rem 1.5rem;
  min-height: 52px;
  border: 2px solid;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .1s, color .1s, box-shadow .1s, transform .08s;
  width: 100%;
  letter-spacing: .04em;
  text-transform: uppercase;
  position: relative;
}
.btn:active { transform: translate(2px, 2px); box-shadow: none !important; }

.btn-primary {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
  box-shadow: 3px 3px 0 #660044;
}
.btn-primary:hover { background: #bb0088; box-shadow: 4px 4px 0 #440033; }

.btn-mark {
  background: var(--mark);
  border-color: var(--mark);
  color: #fff;
  box-shadow: 3px 3px 0 #003388;
}
.btn-mark:hover { background: #003daa; }

.btn-birgit {
  background: var(--birgit);
  border-color: var(--birgit);
  color: #fff;
  box-shadow: 3px 3px 0 #880055;
}
.btn-birgit:hover { background: #bb0066; }

.btn-secondary {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
  box-shadow: 3px 3px 0 #004422;
}
.btn-secondary:hover { background: var(--green); color: #fff; }

.btn-ghost {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--muted);
  width: auto;
  min-height: 44px;
  padding: .5rem 1rem;
  font-size: .62rem;
}
.btn-ghost:hover { color: var(--green); }

/* ── Form ────────────────────────────────────────────────────────────── */
.field { margin-bottom: 1.25rem; }

label {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(.62rem, 2.4vw, .76rem);
  margin-bottom: .5rem;
  color: var(--cyan);
  text-shadow: 1px 1px 0 rgba(0,100,150,.3);
  letter-spacing: .04em;
}

input[type=text], input[type=password] {
  width: 100%;
  /* 48px+ touch-friendly */
  padding: .8rem 1rem;
  min-height: 48px;
  border: 2px solid var(--border);
  background: #f0fff0;
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: 1.7rem;
  outline: none;
  border-radius: 0;
  transition: border-color .15s, box-shadow .15s;
  caret-color: var(--green);
  box-shadow: 2px 2px 0 var(--green);
}
input:focus {
  border-color: var(--cyan);
  box-shadow: 2px 2px 0 var(--cyan);
}
input::placeholder { color: #99cc99; }

/* ── Progress bar ────────────────────────────────────────────────────── */
.progress-wrap {
  background: #d0f0d0;
  border: 2px solid var(--green);
  box-shadow: 2px 2px 0 var(--green);
  height: 22px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  position: relative;
}
.progress-wrap::before {
  content: 'PROGRESS';
  position: absolute; left: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: .35rem;
  color: rgba(0,100,50,.35);
  z-index: 1; pointer-events: none;
}
.progress-bar {
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--green) 0px, var(--green) 10px,
    #009944 10px, #009944 12px
  );
  transition: width .3s steps(10);
}

/* ── Quiz answers — generous touch targets ───────────────────────────── */
.answers { display: flex; flex-direction: column; gap: .9rem; margin-top: 1rem; }
.answer-btn {
  background: #f0fff0;
  border: 2px solid #aaddaa;
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: 1.75rem;
  /* min 56px for comfortable thumb tap */
  padding: 1rem 1rem;
  min-height: 60px;
  cursor: pointer;
  text-align: left;
  transition: border-color .1s, color .1s, background .1s, box-shadow .1s;
  border-radius: 0;
  line-height: 1.3;
}
.answer-btn::before { content: '> '; color: #aaddaa; }
.answer-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: #e8f8ff;
  box-shadow: 2px 2px 0 var(--cyan);
}
.answer-btn:hover::before { color: var(--cyan); }
.answer-btn.selected-mark {
  border-color: var(--mark);
  color: var(--mark);
  background: #e8f0ff;
  box-shadow: 2px 2px 0 var(--mark);
}
.answer-btn.selected-mark::before { content: '■ '; color: var(--mark); }
.answer-btn.selected-birgit {
  border-color: var(--birgit);
  color: var(--birgit);
  background: #fff0f8;
  box-shadow: 2px 2px 0 var(--birgit);
}
.answer-btn.selected-birgit::before { content: '■ '; color: var(--birgit); }

/* ── Result ──────────────────────────────────────────────────────────── */
.result-photo {
  width: 130px;
  height: 130px;
  object-fit: cover;
  display: block;
  margin: 0 auto 1rem;
  border: 3px solid var(--cyan);
  box-shadow: 4px 4px 0 var(--cyan-hi);
  filter: saturate(.6);
}
.result-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1rem, 4.5vw, 1.3rem);
  text-align: center;
  margin: .75rem 0 .4rem;
  line-height: 1.8;
  animation: glitch 5s infinite;
}
.result-badge.mark   { color: var(--mark);   text-shadow: 2px 2px 0 var(--cyan-hi); }
.result-badge.birgit { color: var(--birgit); text-shadow: 2px 2px 0 var(--mag-hi); }
@keyframes glitch {
  0%,100%  { transform: none; filter: none; }
  94%      { transform: none; filter: none; }
  95%      { transform: translate(-2px,0); filter: hue-rotate(90deg); }
  96%      { transform: translate(2px,0);  filter: hue-rotate(-90deg); }
  97%      { transform: none; filter: none; }
}
.result-sub {
  text-align: center;
  font-size: 1.4rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

/* ── Confetti ────────────────────────────────────────────────────────── */
#confetti-canvas {
  position: fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:999;
}

/* ── Playlist ────────────────────────────────────────────────────────── */
.song-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.song-item {
  background: #f0fff0;
  border: 1px solid #aaddaa;
  border-left: 4px solid var(--green);
  padding: .75rem .9rem;
  display: flex; flex-direction: column; gap: .1rem;
  transition: border-color .1s;
}
.song-item:hover { border-left-color: var(--cyan); }
.song-title { font-size: 1.65rem; color: var(--text); font-weight: 700; }
.song-meta  { font-size: 1.35rem; color: var(--muted); }

/* ── New-entry flash (playlist live highlight) ───────────────────────── */
@keyframes newEntryFlash {
  0%   { background: #FFE000; border-left-color: #886600; transform: translateX(-4px); }
  15%  { background: #fff5aa; border-left-color: #886600; transform: translateX(0); }
  100% { background: #f0fff0; border-left-color: var(--green); }
}
.song-item.new-entry {
  animation: newEntryFlash 2.5s ease forwards;
}

/* ── Delete button (playlist admin) ─────────────────────────────────── */
.btn-delete {
  background: transparent;
  border: 2px solid #cc0000;
  color: #cc0000;
  font-family: 'Press Start 2P', monospace;
  font-size: .58rem;
  padding: .3rem .5rem;
  cursor: pointer;
  border-radius: 0;
  line-height: 1.4;
  flex-shrink: 0;
  transition: background .1s, color .1s;
}
.btn-delete:hover { background: #cc0000; color: #fff; }
.btn-delete:active { transform: translate(1px,1px); }

.song-item-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.song-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

/* ── Reset button ────────────────────────────────────────────────────── */
.btn-reset {
  background: transparent;
  border: 2px solid #880000;
  color: #880000;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(.54rem, 2.2vw, .65rem);
  padding: .6rem 1rem;
  min-height: 44px;
  cursor: pointer;
  border-radius: 0;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .1s, color .1s, box-shadow .1s;
  box-shadow: 2px 2px 0 #440000;
  width: 100%;
}
.btn-reset:hover { background: #880000; color: #fff; }
.btn-reset:active { transform: translate(2px,2px); box-shadow: none; }
/* armed state (first tap done) */
.btn-reset.armed {
  background: #880000;
  color: #fff;
  animation: resetPulse .7s ease-in-out infinite alternate;
}
@keyframes resetPulse {
  from { box-shadow: 2px 2px 0 #440000; }
  to   { box-shadow: 2px 2px 0 #440000, 0 0 12px #cc0000; }
}

/* ── Admin score cards ───────────────────────────────────────────────── */
.score-wrap { display: flex; gap: .75rem; margin-bottom: 1.5rem; }
.score-card {
  flex: 1;
  padding: 1rem .75rem;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  border: 2px solid;
}
.score-card.mark   { border-color: var(--mark);   color: var(--mark);   box-shadow: 3px 3px 0 #003388; }
.score-card.birgit { border-color: var(--birgit); color: var(--birgit); box-shadow: 3px 3px 0 #880055; }
.score-card .num   { font-size: clamp(1.9rem, 7vw, 2.8rem); line-height: 1; }
.score-card .lbl   { font-size: .5rem; opacity: .75; margin-top: .4rem; }

/* ── Admin table ─────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 1.45rem; }
th {
  text-align: left; padding: .5rem .6rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  color: var(--green); border-bottom: 2px solid var(--green);
  text-transform: uppercase; letter-spacing: .06em;
}
td { padding: .55rem .6rem; border-bottom: 1px solid #cceecc; color: var(--text); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f0fff0; }
.team-mark   { color: var(--mark);   font-weight: 700; }
.team-birgit { color: var(--birgit); font-weight: 700; }

/* ── Bar chart ───────────────────────────────────────────────────────── */
.bar-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.bar-label { width: 60px; font-family: 'Press Start 2P', monospace; font-size: .5rem; }
.bar-track { flex: 1; background: #d0f0d0; border: 1px solid var(--green); height: 18px; }
.bar-fill  { height: 100%; transition: width .4s steps(20); }
.bar-fill.mark   { background: var(--mark);   box-shadow: inset 0 -2px 0 #003388; }
.bar-fill.birgit { background: var(--birgit); box-shadow: inset 0 -2px 0 #880055; }

/* ── Live badge ──────────────────────────────────────────────────────── */
.live-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  color: var(--green);
  background: #d0f0d0;
  border: 1px solid var(--green);
  padding: .3rem .6rem;
}
.live-dot {
  width: 8px; height: 8px;
  background: var(--green-hi);
  animation: blink 1s step-end infinite;
}

/* ── Admin login ─────────────────────────────────────────────────────── */
.pin-form { display: flex; gap: .5rem; }
.pin-input {
  flex: 1; min-height: 52px;
  padding: .75rem 1rem;
  border: 2px solid var(--green);
  background: #f0fff0; color: var(--text);
  font-family: 'Press Start 2P', monospace;
  font-size: 1.3rem; letter-spacing: .35em; text-align: center;
  outline: none; border-radius: 0;
  box-shadow: 2px 2px 0 var(--green);
}
.pin-input:focus { border-color: var(--cyan); box-shadow: 2px 2px 0 var(--cyan); }
.pin-btn { flex: 0 0 auto; width: auto; }
.error-msg {
  color: #cc0000; font-family: 'Press Start 2P', monospace;
  font-size: .48rem; margin-top: .6rem;
}
.error-msg::before { content: 'ERROR: '; }

/* ── Helpers ─────────────────────────────────────────────────────────── */
.mt1 { margin-top: .5rem; }
.mt2 { margin-top: 1rem; }
.mt3 { margin-top: 1.5rem; }
.stack  { display: flex; flex-direction: column; gap: .75rem; }
.center { text-align: center; }
.emoji-big { font-size: 2.8rem; text-align: center; display: block; margin: .4rem 0; }
.hidden    { display: none !important; }

/* ── Theme select (admin) ────────────────────────────────────────────── */
.theme-select {
  flex: 1;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(.44rem, 1.8vw, .54rem);
  padding: .45rem .6rem;
  min-height: 40px;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  padding-right: 1.8rem;
}

/* ── Desktop enhancements (min 640px) ───────────────────────────────── */
@media (min-width: 640px) {
  body { padding: 1.5rem 1.5rem 4rem; }
  .card { padding: 0 2rem 2.25rem; }
  .card::before { margin: 0 -2rem 1.75rem; }
  .logo { font-size: 1.5rem; }
  #sticker-strip { height: 120px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AMIGA WORKBENCH 2.04 THEME
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="amiga"] {
  --green:    #0055AA;
  --green-hi: #4488EE;
  --cyan:     #0055AA;
  --cyan-hi:  #4488EE;
  --magenta:  #BB0000;
  --mag-hi:   #FF4444;
  --yellow:   #BB6600;
  --mark:     #0055AA;
  --birgit:   #BB4400;
  --bg:       #AAAAAA;
  --card:     #BBBBBB;
  --card-bar: #0055AA;
  --border:   #000000;
  --text:     #000000;
  --muted:    #444444;
}

/* Checkered Workbench desktop */
[data-theme="amiga"] body.no-bg-image {
  background-color: #AAAAAA;
  background-image:
    linear-gradient(45deg, #999999 25%, transparent 25%),
    linear-gradient(-45deg, #999999 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #999999 75%),
    linear-gradient(-45deg, transparent 75%, #999999 75%);
  background-size: 4px 4px;
  background-position: 0 0, 0 2px, 2px -2px, -2px 0;
  animation: none;
}

/* No CRT scanlines */
[data-theme="amiga"] body::after { display: none; }

/* Amiga window with 3D bevel */
[data-theme="amiga"] .card {
  background: #BBBBBB;
  border: 2px solid #000000;
  box-shadow:
    inset 1px 1px 0 #FFFFFF,
    inset -1px -1px 0 #555555,
    3px 3px 0 #000000;
}

/* Blue title bar with subtle stripe */
[data-theme="amiga"] .card::before {
  content: '\25A0  MARK & BIBI  \25A0';
  background: #0055AA;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0px, transparent 1px,
    rgba(255,255,255,.08) 1px, rgba(255,255,255,.08) 2px
  );
  color: #FFFFFF;
  text-shadow: none;
}

/* Logo: Amiga blue, no glow */
[data-theme="amiga"] .logo { color: #0055AA; text-shadow: 1px 1px 0 #FFFFFF; }
[data-theme="amiga"] .logo::after { color: #000000; }

/* Labels */
[data-theme="amiga"] label { color: #000000; text-shadow: none; }

/* Sunken inputs */
[data-theme="amiga"] input[type=text],
[data-theme="amiga"] input[type=password] {
  background: #FFFFFF;
  border: 2px solid #000000;
  box-shadow: inset 1px 1px 0 #555555, inset -1px -1px 0 #FFFFFF;
  color: #000000;
  caret-color: #000000;
}
[data-theme="amiga"] input:focus {
  border-color: #000000;
  box-shadow: inset 1px 1px 0 #555555, inset -1px -1px 0 #FFFFFF;
}
[data-theme="amiga"] input::placeholder { color: #888888; }

/* Raised buttons */
[data-theme="amiga"] .btn { text-shadow: none; }
[data-theme="amiga"] .btn-primary {
  background: #0055AA;
  border-color: #000000;
  color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #4488DD, inset -1px -1px 0 #003377, 2px 2px 0 #000000;
}
[data-theme="amiga"] .btn-primary:hover { background: #0066BB; box-shadow: inset 1px 1px 0 #4488DD, inset -1px -1px 0 #003377, 2px 2px 0 #000000; }
[data-theme="amiga"] .btn-primary:active { box-shadow: inset 1px 1px 0 #003377, inset -1px -1px 0 #4488DD !important; }

[data-theme="amiga"] .btn-mark {
  background: #0055AA; border-color: #000000; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #4488DD, inset -1px -1px 0 #003377, 2px 2px 0 #000000;
}
[data-theme="amiga"] .btn-birgit {
  background: #BB4400; border-color: #000000; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #FF7700, inset -1px -1px 0 #772200, 2px 2px 0 #000000;
}
[data-theme="amiga"] .btn-secondary {
  background: #BBBBBB; border-color: #000000; color: #000000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555, 2px 2px 0 #000000;
}
[data-theme="amiga"] .btn-secondary:hover { background: #CCCCCC; color: #000000; }

/* Progress bar: sunken track, solid fill */
[data-theme="amiga"] .progress-wrap {
  background: #FFFFFF; border-color: #000000;
  box-shadow: inset 1px 1px 0 #555555, inset -1px -1px 0 #FFFFFF;
}
[data-theme="amiga"] .progress-wrap::before { color: rgba(0,0,0,.3); }
[data-theme="amiga"] .progress-bar { background: #0055AA; background-image: none; transition: width .3s; }

/* Answer buttons: Amiga gadgets */
[data-theme="amiga"] .answer-btn {
  background: #BBBBBB; border: 2px solid #000000; color: #000000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555;
}
[data-theme="amiga"] .answer-btn::before { color: #555555; }
[data-theme="amiga"] .answer-btn:hover {
  background: #CCCCCC; border-color: #000000; color: #000000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555;
}
[data-theme="amiga"] .answer-btn:hover::before { color: #555555; }
[data-theme="amiga"] .answer-btn.selected-mark {
  background: #0055AA; border-color: #000000; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #555555, inset -1px -1px 0 #FFFFFF;
}
[data-theme="amiga"] .answer-btn.selected-mark::before { color: #FFFFFF; }
[data-theme="amiga"] .answer-btn.selected-birgit {
  background: #BB4400; border-color: #000000; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #555555, inset -1px -1px 0 #FFFFFF;
}
[data-theme="amiga"] .answer-btn.selected-birgit::before { color: #FFFFFF; }

/* Result badge: no glitch animation */
[data-theme="amiga"] .result-badge { animation: none; }
[data-theme="amiga"] .result-badge.mark   { color: #0055AA; text-shadow: none; }
[data-theme="amiga"] .result-badge.birgit { color: #BB4400; text-shadow: none; }

/* Score cards */
[data-theme="amiga"] .score-card {
  background: #BBBBBB;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555, 2px 2px 0 #000000;
}
[data-theme="amiga"] .score-card.mark   { border-color: #0055AA; color: #0055AA; }
[data-theme="amiga"] .score-card.birgit { border-color: #BB4400; color: #BB4400; }

/* Table */
[data-theme="amiga"] th { color: #0055AA; border-color: #0055AA; }
[data-theme="amiga"] td { border-color: #999999; }
[data-theme="amiga"] tr:hover td { background: #CCCCCC; }
[data-theme="amiga"] .team-mark   { color: #0055AA; }
[data-theme="amiga"] .team-birgit { color: #BB4400; }

/* Bar chart */
[data-theme="amiga"] .bar-track {
  background: #FFFFFF; border-color: #000000;
  box-shadow: inset 1px 1px 0 #555555;
}
[data-theme="amiga"] .bar-fill.mark   { background: #0055AA; box-shadow: none; }
[data-theme="amiga"] .bar-fill.birgit { background: #BB4400; box-shadow: none; }

/* Live badge */
[data-theme="amiga"] .live-badge {
  background: #BBBBBB; border-color: #000000; color: #000000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555;
}
[data-theme="amiga"] .live-dot { background: #00AA00; }

/* Song list */
[data-theme="amiga"] .song-item {
  background: #CCCCCC;
  border-color: #999999;
  border-left-color: #0055AA;
}
[data-theme="amiga"] .song-item:hover { border-left-color: #BB4400; }

@keyframes newEntryFlashAmiga {
  0%   { background: #FFFF00; border-left-color: #BB6600; }
  100% { background: #CCCCCC; border-left-color: #0055AA; }
}
[data-theme="amiga"] .song-item.new-entry {
  animation: newEntryFlashAmiga 2.5s ease forwards;
}

/* Delete button */
[data-theme="amiga"] .btn-delete {
  background: #BBBBBB; border-color: #000000; color: #880000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555;
}
[data-theme="amiga"] .btn-delete:hover { background: #880000; color: #FFFFFF; box-shadow: none; }

/* Reset button */
[data-theme="amiga"] .btn-reset {
  background: #BBBBBB; border-color: #000000; color: #880000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555, 2px 2px 0 #000000;
}
[data-theme="amiga"] .btn-reset:hover { background: #880000; color: #FFFFFF; box-shadow: none; }
[data-theme="amiga"] .btn-reset:active { transform: translate(1px,1px); }
@keyframes resetPulseAmiga {
  from { box-shadow: 2px 2px 0 #440000; }
  to   { box-shadow: 2px 2px 0 #440000, 0 0 8px #cc0000; }
}
[data-theme="amiga"] .btn-reset.armed {
  background: #880000; color: #FFFFFF;
  animation: resetPulseAmiga .7s ease-in-out infinite alternate;
}

/* PIN input */
[data-theme="amiga"] .pin-input {
  background: #FFFFFF; border: 2px solid #000000; color: #000000;
  box-shadow: inset 1px 1px 0 #555555, inset -1px -1px 0 #FFFFFF;
}
[data-theme="amiga"] .pin-input:focus {
  border-color: #000000;
  box-shadow: inset 1px 1px 0 #555555, inset -1px -1px 0 #FFFFFF;
}

/* Theme switcher in Amiga mode */
[data-theme="amiga"] .theme-btn {
  background: #BBBBBB; border-color: #000000; color: #000000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555;
}
[data-theme="amiga"] .theme-btn.active {
  background: #0055AA; border-color: #000000; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #555555, inset -1px -1px 0 #003377;
}
[data-theme="amiga"] .theme-btn:hover:not(.active) {
  background: #CCCCCC; border-color: #000000; color: #000000;
}

/* Stickers: no neon glow, no float */
[data-theme="amiga"] .sticker { filter: none; animation: none; }

/* Deco photo: plain border */
[data-theme="amiga"] .deco-photo {
  border-color: #000000;
  box-shadow: 2px 2px 0 #555555;
  filter: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   AMIGA WORKBENCH 1.3 THEME
   Flat borders (no 3D bevel), classic medium-blue desktop, orange accent
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="wb13"] {
  --green:    #0033AA;
  --green-hi: #4466EE;
  --cyan:     #0033AA;
  --cyan-hi:  #6699FF;
  --magenta:  #AA2200;
  --mag-hi:   #FF6600;
  --yellow:   #DD5500;
  --mark:     #0033AA;
  --birgit:   #DD5500;
  --bg:       #5577AA;
  --card:     #AABBCC;
  --card-bar: #000033;
  --border:   #000000;
  --text:     #000000;
  --muted:    #223355;
}

/* Solid medium-blue desktop — no animation, no grid */
[data-theme="wb13"] body.no-bg-image {
  background-color: #5577AA;
  background-image: none;
  animation: none;
}

/* No CRT scanlines */
[data-theme="wb13"] body::after { display: none; }

/* Flat window — no bevel, no drop shadow */
[data-theme="wb13"] .card {
  background: #AABBCC;
  border: 2px solid #000000;
  box-shadow: none;
}

/* WB 1.3 title bar — dark blue, flat, gadget squares at each end */
[data-theme="wb13"] .card::before {
  content: '\25A1  MARK & BIBI  \25A1';
  background: #000033;
  color: #FFFFFF;
  text-shadow: none;
}

/* Logo */
[data-theme="wb13"] .logo { color: #0033AA; text-shadow: none; }
[data-theme="wb13"] .logo::after { color: #000000; }

/* Labels */
[data-theme="wb13"] label { color: #000033; text-shadow: none; }

/* Flat inputs */
[data-theme="wb13"] input[type=text],
[data-theme="wb13"] input[type=password] {
  background: #CCDDEE;
  border: 2px solid #000000;
  box-shadow: none;
  color: #000000;
  caret-color: #000000;
}
[data-theme="wb13"] input:focus { border-color: #0033AA; box-shadow: none; }
[data-theme="wb13"] input::placeholder { color: #6677AA; }

/* Flat buttons — no bevel */
[data-theme="wb13"] .btn { text-shadow: none; }
[data-theme="wb13"] .btn:active { transform: translate(1px,1px); box-shadow: none !important; }

[data-theme="wb13"] .btn-primary {
  background: #0033AA; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="wb13"] .btn-primary:hover { background: #0044CC; }

[data-theme="wb13"] .btn-mark {
  background: #0033AA; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="wb13"] .btn-birgit {
  background: #DD5500; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="wb13"] .btn-secondary {
  background: #AABBCC; border-color: #000000; color: #000000; box-shadow: none;
}
[data-theme="wb13"] .btn-secondary:hover { background: #BBCCDD; color: #000000; }

/* Progress bar */
[data-theme="wb13"] .progress-wrap {
  background: #CCDDEE; border-color: #000000; box-shadow: none;
}
[data-theme="wb13"] .progress-wrap::before { color: rgba(0,0,51,.3); }
[data-theme="wb13"] .progress-bar { background: #0033AA; background-image: none; transition: width .3s; }

/* Answer buttons — flat */
[data-theme="wb13"] .answer-btn {
  background: #AABBCC; border: 2px solid #000000; color: #000000; box-shadow: none;
}
[data-theme="wb13"] .answer-btn::before { color: #333355; }
[data-theme="wb13"] .answer-btn:hover {
  background: #BBCCDD; border-color: #0033AA; color: #000033; box-shadow: none;
}
[data-theme="wb13"] .answer-btn:hover::before { color: #0033AA; }
[data-theme="wb13"] .answer-btn.selected-mark {
  background: #0033AA; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="wb13"] .answer-btn.selected-mark::before { color: #FFFFFF; }
[data-theme="wb13"] .answer-btn.selected-birgit {
  background: #DD5500; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="wb13"] .answer-btn.selected-birgit::before { color: #FFFFFF; }

/* Result badge — no glitch, no glow */
[data-theme="wb13"] .result-badge { animation: none; }
[data-theme="wb13"] .result-badge.mark   { color: #0033AA; text-shadow: none; }
[data-theme="wb13"] .result-badge.birgit { color: #DD5500; text-shadow: none; }

/* Score cards — flat */
[data-theme="wb13"] .score-card {
  background: #AABBCC; box-shadow: none;
}
[data-theme="wb13"] .score-card.mark   { border-color: #0033AA; color: #0033AA; }
[data-theme="wb13"] .score-card.birgit { border-color: #DD5500; color: #DD5500; }

/* Table */
[data-theme="wb13"] th { color: #000033; border-color: #0033AA; }
[data-theme="wb13"] td { border-color: #7799BB; }
[data-theme="wb13"] tr:hover td { background: #BBCCDD; }
[data-theme="wb13"] .team-mark   { color: #0033AA; }
[data-theme="wb13"] .team-birgit { color: #DD5500; }

/* Bar chart */
[data-theme="wb13"] .bar-track { background: #CCDDEE; border-color: #000000; box-shadow: none; }
[data-theme="wb13"] .bar-fill.mark   { background: #0033AA; box-shadow: none; }
[data-theme="wb13"] .bar-fill.birgit { background: #DD5500; box-shadow: none; }

/* Live badge — orange dot on dark blue badge */
[data-theme="wb13"] .live-badge {
  background: #000033; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="wb13"] .live-dot { background: #FF8800; }

/* Song list */
[data-theme="wb13"] .song-item {
  background: #BBCCDD; border-color: #7799BB; border-left-color: #0033AA;
}
[data-theme="wb13"] .song-item:hover { border-left-color: #DD5500; }

@keyframes newEntryFlashWb13 {
  0%   { background: #FFCC00; border-left-color: #DD5500; }
  100% { background: #BBCCDD; border-left-color: #0033AA; }
}
[data-theme="wb13"] .song-item.new-entry {
  animation: newEntryFlashWb13 2.5s ease forwards;
}

/* Delete button */
[data-theme="wb13"] .btn-delete {
  background: #AABBCC; border-color: #000000; color: #880000; box-shadow: none;
}
[data-theme="wb13"] .btn-delete:hover { background: #880000; color: #FFFFFF; }

/* Reset button */
[data-theme="wb13"] .btn-reset {
  background: #AABBCC; border-color: #000000; color: #880000; box-shadow: none;
}
[data-theme="wb13"] .btn-reset:hover { background: #880000; color: #FFFFFF; }
[data-theme="wb13"] .btn-reset:active { transform: translate(1px,1px); }
@keyframes resetPulseWb13 {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 0 2px #cc0000; }
}
[data-theme="wb13"] .btn-reset.armed {
  background: #880000; color: #FFFFFF;
  animation: resetPulseWb13 .7s ease-in-out infinite alternate;
}

/* PIN input */
[data-theme="wb13"] .pin-input {
  background: #CCDDEE; border: 2px solid #000000; color: #000000; box-shadow: none;
}
[data-theme="wb13"] .pin-input:focus { border-color: #0033AA; box-shadow: none; }

/* Theme switcher in WB 1.3 mode */
[data-theme="wb13"] .theme-btn {
  background: #AABBCC; border-color: #000000; color: #000033; box-shadow: none;
}
[data-theme="wb13"] .theme-btn.active {
  background: #000033; border-color: #000000; color: #FFFFFF;
}
[data-theme="wb13"] .theme-btn:hover:not(.active) {
  background: #BBCCDD; border-color: #0033AA; color: #000033;
}

/* Stickers: no neon glow, no float */
[data-theme="wb13"] .sticker { filter: none; animation: none; }

/* Deco photo */
[data-theme="wb13"] .deco-photo {
  border-color: #000000; box-shadow: 2px 2px 0 #223355; filter: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   X11 / OLVWM (OpenLook Virtual Window Manager) THEME
   SlateGray desktop · grey windows with drop shadow · system sans-serif
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="olvwm"] {
  --green:    #336644;
  --green-hi: #558866;
  --cyan:     #336688;
  --cyan-hi:  #6699BB;
  --magenta:  #884444;
  --mag-hi:   #BB7777;
  --yellow:   #886633;
  --mark:     #224488;
  --birgit:   #884422;
  --bg:       #708090;
  --card:     #C0C0C0;
  --card-bar: #A0A0A0;
  --border:   #555555;
  --text:     #000000;
  --muted:    #444444;
}

/* Lucida/Helvetica feel for body text */
[data-theme="olvwm"] body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
}

/* SlateGray root window with subtle X11 stipple */
[data-theme="olvwm"] body.no-bg-image {
  background-color: #708090;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 1px, transparent 1px, transparent 4px);
  animation: none;
}

/* No CRT scanlines */
[data-theme="olvwm"] body::after { display: none; }

/* OpenLook window — grey, 3D bevel, floating drop shadow */
[data-theme="olvwm"] .card {
  background: #C0C0C0;
  border: 1px solid #555555;
  box-shadow:
    inset 1px 1px 0 #E8E8E8,
    inset -1px -1px 0 #7A7A7A,
    4px 4px 8px rgba(0,0,0,.45);
}

/* OpenLook header — grey stripe texture, pushpin on left, sans-serif */
[data-theme="olvwm"] .card::before {
  content: '\25CB  MARK & BIBI';
  background: #A0A0A0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.18) 0px, rgba(255,255,255,.18) 1px,
    transparent 1px, transparent 8px
  );
  color: #000000;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .95rem;
  font-weight: bold;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  border-bottom: 1px solid #7A7A7A;
}

/* Logo — sans-serif, no glow, no blink cursor */
[data-theme="olvwm"] .logo {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1.4rem, 5.5vw, 2rem);
  font-weight: bold;
  color: #224488;
  text-shadow: none;
  letter-spacing: .01em;
}
[data-theme="olvwm"] .logo::after { display: none; }

/* Subtitle */
[data-theme="olvwm"] .subtitle {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

/* Labels */
[data-theme="olvwm"] label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .8rem;
  font-weight: bold;
  color: #000000;
  text-shadow: none;
}

/* Inputs — white, inset bevel */
[data-theme="olvwm"] input[type=text],
[data-theme="olvwm"] input[type=password] {
  background: #FFFFFF;
  border: 1px solid #7A7A7A;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.2);
  color: #000000;
  caret-color: #224488;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
}
[data-theme="olvwm"] input:focus { border-color: #224488; box-shadow: inset 1px 1px 3px rgba(0,0,0,.2); }
[data-theme="olvwm"] input::placeholder { color: #999999; }

/* Buttons — grey bevel, slightly rounded */
[data-theme="olvwm"] .btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(.85rem, 3vw, 1rem);
  font-weight: bold;
  letter-spacing: .01em;
  text-shadow: none;
  border-radius: 3px;
}
[data-theme="olvwm"] .btn-primary {
  background: #C0C0C0; border: 1px solid #555555; color: #000000;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A, 1px 1px 2px rgba(0,0,0,.3);
}
[data-theme="olvwm"] .btn-primary:hover { background: #CACACA; }
[data-theme="olvwm"] .btn-primary:active { box-shadow: inset 1px 1px 0 #7A7A7A, inset -1px -1px 0 #E8E8E8 !important; transform: none; }

[data-theme="olvwm"] .btn-mark {
  background: #224488; border: 1px solid #112244; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #4466AA, inset -1px -1px 0 #112233, 1px 1px 2px rgba(0,0,0,.3);
}
[data-theme="olvwm"] .btn-mark:hover { background: #2255AA; }

[data-theme="olvwm"] .btn-birgit {
  background: #884422; border: 1px solid #442211; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #BB6644, inset -1px -1px 0 #441100, 1px 1px 2px rgba(0,0,0,.3);
}
[data-theme="olvwm"] .btn-birgit:hover { background: #995533; }

[data-theme="olvwm"] .btn-secondary {
  background: #C0C0C0; border: 1px solid #555555; color: #000000;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A, 1px 1px 2px rgba(0,0,0,.3);
}
[data-theme="olvwm"] .btn-secondary:hover { background: #CACACA; color: #000000; }

[data-theme="olvwm"] .btn-ghost {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .85rem; color: #555555;
}
[data-theme="olvwm"] .btn-ghost:hover { color: #224488; }

/* Progress bar */
[data-theme="olvwm"] .progress-wrap {
  background: #FFFFFF; border: 1px solid #7A7A7A;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.2);
}
[data-theme="olvwm"] .progress-wrap::before {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .65rem; color: rgba(0,0,0,.3);
}
[data-theme="olvwm"] .progress-bar { background: #224488; background-image: none; transition: width .3s ease; }

/* Answer buttons — styled as X11 radio/option buttons */
[data-theme="olvwm"] .answer-btn {
  background: #C0C0C0; border: 1px solid #7A7A7A; color: #000000;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A;
  border-radius: 2px;
}
[data-theme="olvwm"] .answer-btn::before { display: none; }
[data-theme="olvwm"] .answer-btn:hover {
  background: #CACACA; border-color: #555555; color: #000000;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A;
}
[data-theme="olvwm"] .answer-btn.selected-mark {
  background: #224488; border-color: #112244; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #7A7A7A, inset -1px -1px 0 #4466AA;
}
[data-theme="olvwm"] .answer-btn.selected-mark::before { display: none; }
[data-theme="olvwm"] .answer-btn.selected-birgit {
  background: #884422; border-color: #442211; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #7A7A7A, inset -1px -1px 0 #BB6644;
}
[data-theme="olvwm"] .answer-btn.selected-birgit::before { display: none; }

/* Result badge */
[data-theme="olvwm"] .result-badge {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1.3rem, 5.5vw, 2rem);
  font-weight: bold;
  animation: none;
}
[data-theme="olvwm"] .result-badge.mark   { color: #224488; text-shadow: none; }
[data-theme="olvwm"] .result-badge.birgit { color: #884422; text-shadow: none; }
[data-theme="olvwm"] .result-sub { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* Score cards */
[data-theme="olvwm"] .score-card {
  background: #C0C0C0;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A, 1px 1px 3px rgba(0,0,0,.3);
}
[data-theme="olvwm"] .score-card .num {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
[data-theme="olvwm"] .score-card .lbl {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .7rem; font-weight: bold; opacity: 1;
}
[data-theme="olvwm"] .score-card.mark   { border-color: #224488; color: #224488; }
[data-theme="olvwm"] .score-card.birgit { border-color: #884422; color: #884422; }

/* Table */
[data-theme="olvwm"] table {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: .9rem;
}
[data-theme="olvwm"] th {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .75rem; color: #000000; border-color: #7A7A7A;
}
[data-theme="olvwm"] td { border-color: #AAAAAA; }
[data-theme="olvwm"] tr:hover td { background: #CACACA; }
[data-theme="olvwm"] .team-mark   { color: #224488; }
[data-theme="olvwm"] .team-birgit { color: #884422; }

/* Bar chart */
[data-theme="olvwm"] .bar-track {
  background: #FFFFFF; border: 1px solid #7A7A7A;
  box-shadow: inset 1px 1px 1px rgba(0,0,0,.15);
}
[data-theme="olvwm"] .bar-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .75rem; font-weight: bold;
}
[data-theme="olvwm"] .bar-fill.mark   { background: #224488; box-shadow: none; transition: width .3s ease; }
[data-theme="olvwm"] .bar-fill.birgit { background: #884422; box-shadow: none; transition: width .3s ease; }

/* Live badge */
[data-theme="olvwm"] .live-badge {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: .7rem;
  background: #C0C0C0; border: 1px solid #555555; color: #000000;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A;
}
[data-theme="olvwm"] .live-dot { background: #336644; }

/* Song list */
[data-theme="olvwm"] .song-item {
  background: #D0D0D0; border-color: #AAAAAA; border-left-color: #224488;
}
[data-theme="olvwm"] .song-item:hover { border-left-color: #884422; }
[data-theme="olvwm"] .song-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1rem;
}
[data-theme="olvwm"] .song-meta {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: .85rem;
}

@keyframes newEntryFlashOlvwm {
  0%   { background: #FFFFCC; border-left-color: #886633; }
  100% { background: #D0D0D0; border-left-color: #224488; }
}
[data-theme="olvwm"] .song-item.new-entry { animation: newEntryFlashOlvwm 2.5s ease forwards; }

/* Delete button */
[data-theme="olvwm"] .btn-delete {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: .8rem;
  background: #C0C0C0; border: 1px solid #555555; color: #880000; border-radius: 2px;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A;
}
[data-theme="olvwm"] .btn-delete:hover { background: #880000; color: #FFFFFF; box-shadow: none; }

/* Reset button */
[data-theme="olvwm"] .btn-reset {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(.8rem, 3vw, .9rem); font-weight: bold;
  background: #C0C0C0; border: 1px solid #555555; color: #880000; border-radius: 3px;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A, 1px 1px 2px rgba(0,0,0,.3);
}
[data-theme="olvwm"] .btn-reset:hover { background: #880000; color: #FFFFFF; box-shadow: none; }
[data-theme="olvwm"] .btn-reset:active { transform: translate(1px,1px); }
@keyframes resetPulseOlvwm {
  from { box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A; }
  to   { box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A, 0 0 8px #cc0000; }
}
[data-theme="olvwm"] .btn-reset.armed {
  background: #880000; color: #FFFFFF;
  animation: resetPulseOlvwm .7s ease-in-out infinite alternate;
}

/* PIN input */
[data-theme="olvwm"] .pin-input {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.2rem;
  background: #FFFFFF; border: 1px solid #7A7A7A; color: #000000;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); border-radius: 2px;
}
[data-theme="olvwm"] .pin-input:focus { border-color: #224488; }

/* Error message */
[data-theme="olvwm"] .error-msg {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
[data-theme="olvwm"] .error-msg::before { content: 'Error: '; }

/* Theme switcher */
[data-theme="olvwm"] .theme-btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(.75rem, 2.5vw, .85rem); font-weight: bold;
  background: #C0C0C0; border-color: #555555; color: #000000; border-radius: 3px;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A;
}
[data-theme="olvwm"] .theme-btn.active {
  background: #224488; border-color: #112244; color: #FFFFFF;
  box-shadow: inset 1px 1px 0 #7A7A7A, inset -1px -1px 0 #4466AA;
}
[data-theme="olvwm"] .theme-btn:hover:not(.active) { background: #CACACA; color: #000000; }

/* Stickers — realistic drop shadow instead of neon */
[data-theme="olvwm"] .sticker {
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,.35));
  animation: none;
}

/* Deco photo */
[data-theme="olvwm"] .deco-photo {
  border-color: #555555;
  box-shadow: 3px 3px 6px rgba(0,0,0,.4);
  filter: saturate(.65) brightness(.95);
}

/* ═══════════════════════════════════════════════════════════════════════
   ATARI ST GEM THEME
   Forest-green desktop · flat white windows · black title bars
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="gem"] {
  --green:    #007700;
  --green-hi: #00AA00;
  --cyan:     #005588;
  --cyan-hi:  #0088CC;
  --magenta:  #880000;
  --mag-hi:   #CC0000;
  --yellow:   #886600;
  --mark:     #000088;
  --birgit:   #880000;
  --bg:       #00BB00;
  --card:     #FFFFFF;
  --card-bar: #000000;
  --border:   #000000;
  --text:     #000000;
  --muted:    #444444;
}

[data-theme="gem"] body.no-bg-image {
  background-color: #00BB00;
  background-image: none;
  animation: none;
}

[data-theme="gem"] body::after { display: none; }

/* Flat white window, no bevel, no shadow */
[data-theme="gem"] .card {
  background: #FFFFFF;
  border: 2px solid #000000;
  box-shadow: none;
}

/* GEM black title bar: white text, close gadget on left */
[data-theme="gem"] .card::before {
  content: '[x]  MARK & BIBI';
  background: #000000;
  color: #FFFFFF;
  text-shadow: none;
}

[data-theme="gem"] .logo { color: #000088; text-shadow: none; }
[data-theme="gem"] .logo::after { color: #000000; }
[data-theme="gem"] label { color: #000000; text-shadow: none; }

[data-theme="gem"] input[type=text],
[data-theme="gem"] input[type=password] {
  background: #FFFFFF; border: 2px solid #000000; box-shadow: none;
  color: #000000; caret-color: #000000;
}
[data-theme="gem"] input:focus { border-color: #000088; box-shadow: none; }
[data-theme="gem"] input::placeholder { color: #888888; }

[data-theme="gem"] .btn { text-shadow: none; }
[data-theme="gem"] .btn:active { transform: translate(1px,1px); box-shadow: none !important; }

[data-theme="gem"] .btn-primary {
  background: #000000; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="gem"] .btn-primary:hover { background: #333333; }
[data-theme="gem"] .btn-mark {
  background: #000088; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="gem"] .btn-birgit {
  background: #880000; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="gem"] .btn-secondary {
  background: #FFFFFF; border-color: #000000; color: #000000; box-shadow: none;
}
[data-theme="gem"] .btn-secondary:hover { background: #EEEEEE; color: #000000; }

[data-theme="gem"] .progress-wrap { background: #FFFFFF; border-color: #000000; box-shadow: none; }
[data-theme="gem"] .progress-wrap::before { color: rgba(0,0,0,.25); }
[data-theme="gem"] .progress-bar { background: #000000; background-image: none; transition: width .3s; }

[data-theme="gem"] .answer-btn {
  background: #FFFFFF; border: 2px solid #000000; color: #000000; box-shadow: none;
}
[data-theme="gem"] .answer-btn::before { color: #888888; }
[data-theme="gem"] .answer-btn:hover { background: #EEEEEE; border-color: #000000; color: #000000; }
[data-theme="gem"] .answer-btn.selected-mark {
  background: #000088; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="gem"] .answer-btn.selected-mark::before { color: #FFFFFF; }
[data-theme="gem"] .answer-btn.selected-birgit {
  background: #880000; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="gem"] .answer-btn.selected-birgit::before { color: #FFFFFF; }

[data-theme="gem"] .result-badge { animation: none; }
[data-theme="gem"] .result-badge.mark   { color: #000088; text-shadow: none; }
[data-theme="gem"] .result-badge.birgit { color: #880000; text-shadow: none; }

[data-theme="gem"] .score-card { background: #FFFFFF; box-shadow: none; }
[data-theme="gem"] .score-card.mark   { border-color: #000088; color: #000088; }
[data-theme="gem"] .score-card.birgit { border-color: #880000; color: #880000; }

[data-theme="gem"] th { color: #000000; border-color: #000000; }
[data-theme="gem"] td { border-color: #AAAAAA; }
[data-theme="gem"] tr:hover td { background: #EEEEEE; }
[data-theme="gem"] .team-mark   { color: #000088; }
[data-theme="gem"] .team-birgit { color: #880000; }

[data-theme="gem"] .bar-track { background: #FFFFFF; border-color: #000000; box-shadow: none; }
[data-theme="gem"] .bar-fill.mark   { background: #000088; box-shadow: none; }
[data-theme="gem"] .bar-fill.birgit { background: #880000; box-shadow: none; }

[data-theme="gem"] .live-badge {
  background: #000000; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="gem"] .live-dot { background: #00CC00; }

[data-theme="gem"] .song-item { background: #FFFFFF; border-color: #AAAAAA; border-left-color: #000088; }
[data-theme="gem"] .song-item:hover { border-left-color: #880000; }

@keyframes newEntryFlashGem {
  0%   { background: #FFFFAA; border-left-color: #886600; }
  100% { background: #FFFFFF; border-left-color: #000088; }
}
[data-theme="gem"] .song-item.new-entry { animation: newEntryFlashGem 2.5s ease forwards; }

[data-theme="gem"] .btn-delete {
  background: #FFFFFF; border-color: #000000; color: #880000; box-shadow: none;
}
[data-theme="gem"] .btn-delete:hover { background: #880000; color: #FFFFFF; }

[data-theme="gem"] .btn-reset {
  background: #FFFFFF; border-color: #000000; color: #880000; box-shadow: none;
}
[data-theme="gem"] .btn-reset:hover { background: #880000; color: #FFFFFF; }
[data-theme="gem"] .btn-reset:active { transform: translate(1px,1px); }
@keyframes resetPulseGem {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 0 2px #cc0000; }
}
[data-theme="gem"] .btn-reset.armed {
  background: #880000; color: #FFFFFF;
  animation: resetPulseGem .7s ease-in-out infinite alternate;
}

[data-theme="gem"] .pin-input { background: #FFFFFF; border: 2px solid #000000; color: #000000; box-shadow: none; }
[data-theme="gem"] .pin-input:focus { border-color: #000088; }

[data-theme="gem"] .theme-btn { background: #FFFFFF; border-color: #000000; color: #000000; box-shadow: none; }
[data-theme="gem"] .theme-btn.active { background: #000000; border-color: #000000; color: #FFFFFF; }
[data-theme="gem"] .theme-btn:hover:not(.active) { background: #EEEEEE; }

[data-theme="gem"] .sticker { filter: none; animation: none; }
[data-theme="gem"] .deco-photo { border-color: #000000; box-shadow: none; filter: saturate(.7); }

/* ═══════════════════════════════════════════════════════════════════════
   CLASSIC MAC OS 1984 (System 1) THEME
   Pure monochrome · pinstripe title bars · black drop shadows · rounded buttons
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="mac1"] {
  --green:    #000000;
  --green-hi: #444444;
  --cyan:     #000000;
  --cyan-hi:  #555555;
  --magenta:  #000000;
  --mag-hi:   #444444;
  --yellow:   #444444;
  --mark:     #000000;
  --birgit:   #555555;
  --bg:       #FFFFFF;
  --card:     #FFFFFF;
  --card-bar: #000000;
  --border:   #000000;
  --text:     #000000;
  --muted:    #555555;
}

/* Mac desktop: 50% dither (2×2 checker) */
[data-theme="mac1"] body.no-bg-image {
  background-color: #FFFFFF;
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
  animation: none;
}

[data-theme="mac1"] body::after { display: none; }

/* Mac window: white, 2px border, hard black drop shadow */
[data-theme="mac1"] .card {
  background: #FFFFFF;
  border: 2px solid #000000;
  box-shadow: 4px 4px 0 #000000;
}

/* Pinstripe title bar — the Mac's most distinctive visual */
[data-theme="mac1"] .card::before {
  content: '\25A1  MARK & BIBI  \25A1';
  background: repeating-linear-gradient(
    180deg,
    #000000 0px, #000000 1px,
    #FFFFFF 1px, #FFFFFF 2px
  );
  color: #FFFFFF;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000;
}

[data-theme="mac1"] .logo { color: #000000; text-shadow: none; }
[data-theme="mac1"] .logo::after { color: #000000; }
[data-theme="mac1"] label { color: #000000; text-shadow: none; }

[data-theme="mac1"] input[type=text],
[data-theme="mac1"] input[type=password] {
  background: #FFFFFF; border: 2px solid #000000;
  box-shadow: 2px 2px 0 #000000; color: #000000; caret-color: #000000;
}
[data-theme="mac1"] input:focus { border-color: #000000; box-shadow: 2px 2px 0 #000000; }
[data-theme="mac1"] input::placeholder { color: #888888; }

/* Mac buttons: rounded rectangle, hard shadow for default */
[data-theme="mac1"] .btn { text-shadow: none; border-radius: 6px; }
[data-theme="mac1"] .btn:active { transform: translate(2px,2px); box-shadow: none !important; }

[data-theme="mac1"] .btn-primary {
  background: #000000; border-color: #000000; color: #FFFFFF;
  box-shadow: 2px 2px 0 #444444;
}
[data-theme="mac1"] .btn-primary:hover { background: #333333; }

[data-theme="mac1"] .btn-mark {
  background: #000000; border-color: #000000; color: #FFFFFF;
  box-shadow: 2px 2px 0 #444444;
}
[data-theme="mac1"] .btn-birgit {
  background: #555555; border-color: #000000; color: #FFFFFF;
  box-shadow: 2px 2px 0 #000000;
}
/* Default button: double border (Mac convention) */
[data-theme="mac1"] .btn-secondary {
  background: #FFFFFF; border: 2px solid #000000; color: #000000;
  box-shadow: 0 0 0 2px #000000, 3px 3px 0 #000000;
}
[data-theme="mac1"] .btn-secondary:hover { background: #EEEEEE; }

[data-theme="mac1"] .progress-wrap {
  background: #FFFFFF; border-color: #000000; box-shadow: 2px 2px 0 #000000;
}
[data-theme="mac1"] .progress-wrap::before { color: rgba(0,0,0,.2); }
[data-theme="mac1"] .progress-bar { background: #000000; background-image: none; transition: width .3s; }

[data-theme="mac1"] .answer-btn {
  background: #FFFFFF; border: 2px solid #000000; color: #000000;
  box-shadow: none; border-radius: 4px;
}
[data-theme="mac1"] .answer-btn::before { color: #666666; }
[data-theme="mac1"] .answer-btn:hover { background: #EEEEEE; border-color: #000000; }
[data-theme="mac1"] .answer-btn.selected-mark {
  background: #000000; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="mac1"] .answer-btn.selected-mark::before { color: #FFFFFF; }
[data-theme="mac1"] .answer-btn.selected-birgit {
  background: #555555; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="mac1"] .answer-btn.selected-birgit::before { color: #FFFFFF; }

[data-theme="mac1"] .result-badge { animation: none; }
[data-theme="mac1"] .result-badge.mark   { color: #000000; text-shadow: none; }
[data-theme="mac1"] .result-badge.birgit { color: #555555; text-shadow: none; }

[data-theme="mac1"] .score-card { background: #FFFFFF; box-shadow: 2px 2px 0 #000000; }
[data-theme="mac1"] .score-card.mark   { border-color: #000000; color: #000000; }
[data-theme="mac1"] .score-card.birgit { border-color: #555555; color: #555555; }

[data-theme="mac1"] th { color: #000000; border-color: #000000; }
[data-theme="mac1"] td { border-color: #AAAAAA; }
[data-theme="mac1"] tr:hover td { background: #F0F0F0; }
[data-theme="mac1"] .team-mark   { color: #000000; }
[data-theme="mac1"] .team-birgit { color: #555555; }

[data-theme="mac1"] .bar-track {
  background: #FFFFFF; border-color: #000000; box-shadow: 1px 1px 0 #000000;
}
[data-theme="mac1"] .bar-fill.mark   { background: #000000; box-shadow: none; }
[data-theme="mac1"] .bar-fill.birgit {
  background: repeating-linear-gradient(45deg, #000 0px, #000 2px, #fff 2px, #fff 4px);
  box-shadow: none;
}

[data-theme="mac1"] .live-badge {
  background: #FFFFFF; border-color: #000000; color: #000000;
  box-shadow: 1px 1px 0 #000000;
}
[data-theme="mac1"] .live-dot { background: #000000; animation: blink 1s step-end infinite; }

[data-theme="mac1"] .song-item { background: #FFFFFF; border-color: #AAAAAA; border-left-color: #000000; }
[data-theme="mac1"] .song-item:hover { background: #F8F8F8; border-left-color: #555555; }

@keyframes newEntryFlashMac1 {
  0%   { background: #BBBBBB; border-left-color: #000000; }
  100% { background: #FFFFFF; border-left-color: #000000; }
}
[data-theme="mac1"] .song-item.new-entry { animation: newEntryFlashMac1 2.5s ease forwards; }

[data-theme="mac1"] .btn-delete {
  background: #FFFFFF; border-color: #000000; color: #000000;
  box-shadow: none; border-radius: 2px;
}
[data-theme="mac1"] .btn-delete:hover { background: #000000; color: #FFFFFF; }

[data-theme="mac1"] .btn-reset {
  background: #FFFFFF; border: 2px solid #000000; color: #000000;
  box-shadow: 2px 2px 0 #000000; border-radius: 6px;
}
[data-theme="mac1"] .btn-reset:hover { background: #000000; color: #FFFFFF; box-shadow: none; }
[data-theme="mac1"] .btn-reset:active { transform: translate(2px,2px); }
@keyframes resetPulseMac1 {
  from { box-shadow: 2px 2px 0 #000000; }
  to   { box-shadow: 2px 2px 0 #000000, 0 0 0 3px #000000; }
}
[data-theme="mac1"] .btn-reset.armed {
  background: #000000; color: #FFFFFF;
  animation: resetPulseMac1 .7s ease-in-out infinite alternate;
}

[data-theme="mac1"] .pin-input {
  background: #FFFFFF; border: 2px solid #000000; color: #000000;
  box-shadow: 2px 2px 0 #000000; border-radius: 4px;
}
[data-theme="mac1"] .pin-input:focus { border-color: #000000; }

[data-theme="mac1"] .theme-btn {
  background: #FFFFFF; border-color: #000000; color: #000000;
  box-shadow: 2px 2px 0 #000000; border-radius: 4px;
}
[data-theme="mac1"] .theme-btn.active {
  background: #000000; border-color: #000000; color: #FFFFFF; box-shadow: none;
}
[data-theme="mac1"] .theme-btn:hover:not(.active) { background: #EEEEEE; }
[data-theme="mac1"] .theme-btn:active { transform: translate(2px,2px); box-shadow: none !important; }

/* Grayscale stickers on Mac mono theme */
[data-theme="mac1"] .sticker { filter: grayscale(1) contrast(1.1); animation: none; }

[data-theme="mac1"] .deco-photo {
  border-color: #000000;
  box-shadow: 4px 4px 0 #000000;
  filter: grayscale(1) contrast(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════
   WINDOW CHROME — authentic per-theme title gadgets, resize handles, scrollbars
   ═══════════════════════════════════════════════════════════════════════ */

/* ── AMIGA WB 2.04 — □ close gadget, □□ depth gadgets, blue drag bar at bottom ── */
[data-theme="amiga"] .card::before {
  content: '\25A1  MARK & BIBI  \25A1\25A1';
}
/* Blue drag bar at bottom of window (same blue as title bar) */
[data-theme="amiga"] .card {
  background-color: #BBBBBB;
  background-image: linear-gradient(to top, #0055AA 16px, transparent 16px);
  padding-bottom: calc(1.75rem + 16px);
}
@media (min-width: 640px) {
  [data-theme="amiga"] .card { padding-bottom: calc(2.25rem + 16px); }
}
[data-theme="amiga"] .card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 18px; height: 16px;
  background: #BBBBBB;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555;
  z-index: 10;
}

/* ── AMIGA WB 1.3 — title bar + drag bar below it, resize gadget ──────── */
[data-theme="wb13"] .card::before {
  content: '\25A1  MARK & BIBI  \25A1';
  background: linear-gradient(
    #000033 0px, #000033 calc(100% - 10px),
    #5577AA calc(100% - 10px) 100%
  );
  padding-bottom: calc(.5rem + 10px);
}
[data-theme="wb13"] .card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  background: #AABBCC;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  z-index: 10;
}

/* ── OLVWM — ○ pushpin (left), ▿ menu (right), 3D resize corner ────────── */
[data-theme="olvwm"] .card::before {
  content: '\25CB  MARK & BIBI  \25BF';
}
[data-theme="olvwm"] .card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 16px; height: 16px;
  background: #C0C0C0;
  border-top: 1px solid #555555;
  border-left: 1px solid #555555;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A;
  z-index: 10;
}

/* ── ATARI TOS/GEM — dithered title bar, [x] close, [↕] fullscreen ──────── */
[data-theme="gem"] .card::before {
  content: '[x]  MARK & BIBI  [\2195]';
  /* Active window: 50% dither (black dots on white → visual ~#888888) */
  background-color: #FFFFFF;
  background-image:
    linear-gradient(45deg, #000000 25%, transparent 25%),
    linear-gradient(-45deg, #000000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000000 75%),
    linear-gradient(-45deg, transparent 75%, #000000 75%);
  background-size: 2px 2px;
  background-position: 0 0, 0 1px, 1px -1px, -1px 0;
  /* TOS system font — clearer than Press Start 2P */
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: #FFFFFF;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000;
}
/* Sizer/grow box: diagonal hatching (TOS resize indicator) */
[data-theme="gem"] .card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 16px; height: 16px;
  background: repeating-linear-gradient(
    -45deg,
    #000000 0px, #000000 2px,
    #FFFFFF 2px, #FFFFFF 4px
  );
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  z-index: 10;
}

/* ── MAC OS 1984 — □ close box left only, grow box at bottom-right ──────── */
/* Remove right □ from title — System 1 had no zoom/size box in title bar */
[data-theme="mac1"] .card::before {
  content: '\25A1  MARK & BIBI';
}
/* Grow box: two nested corner-squares (classic Mac resize indicator) */
[data-theme="mac1"] .card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 15px; height: 15px;
  background: #FFFFFF;
  /* Two overlapping L-shapes from bottom-right corner */
  box-shadow:
    inset -1px  0   0 #000000,
    inset  0   -1px 0 #000000,
    inset -5px  0   0 #000000,
    inset  0   -5px 0 #000000,
    inset -9px  0   0 #000000,
    inset  0   -9px 0 #000000;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  z-index: 10;
}

/* ── Scrollbars ───────────────────────────────────────────────────────── */

/* Retro: phosphor-green on black */
[data-theme="retro"] { scrollbar-color: #009944 #001a00; scrollbar-width: thin; }
[data-theme="retro"]::-webkit-scrollbar,
[data-theme="retro"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="retro"]::-webkit-scrollbar-track,
[data-theme="retro"] ::-webkit-scrollbar-track { background: #001a00; border: 1px solid #006633; }
[data-theme="retro"]::-webkit-scrollbar-thumb,
[data-theme="retro"] ::-webkit-scrollbar-thumb { background: #006633; }
[data-theme="retro"]::-webkit-scrollbar-thumb:hover,
[data-theme="retro"] ::-webkit-scrollbar-thumb:hover { background: #00cc55; }
[data-theme="retro"]::-webkit-scrollbar-corner,
[data-theme="retro"] ::-webkit-scrollbar-corner { background: #001a00; }

/* Amiga WB 2.04: 2×2 pixel checkerboard track, 3D-beveled thumb, ▲▼ arrow buttons */
[data-theme="amiga"] { scrollbar-color: #BBBBBB #999999; scrollbar-width: auto; }
[data-theme="amiga"]::-webkit-scrollbar,
[data-theme="amiga"] ::-webkit-scrollbar { width: 16px; height: 16px; }
[data-theme="amiga"]::-webkit-scrollbar-track,
[data-theme="amiga"] ::-webkit-scrollbar-track {
  background-color: #BBBBBB;
  background-image:
    linear-gradient(45deg, #888888 25%, transparent 25%),
    linear-gradient(-45deg, #888888 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #888888 75%),
    linear-gradient(-45deg, transparent 75%, #888888 75%);
  background-size: 2px 2px;
  background-position: 0 0, 0 1px, 1px -1px, -1px 0;
}
[data-theme="amiga"]::-webkit-scrollbar-thumb,
[data-theme="amiga"] ::-webkit-scrollbar-thumb {
  background: #BBBBBB;
  border: 2px solid #000000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555;
  min-height: 20px;
}
[data-theme="amiga"]::-webkit-scrollbar-button,
[data-theme="amiga"] ::-webkit-scrollbar-button {
  background: #BBBBBB;
  border: 2px solid #000000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #555555;
  display: block;
  height: 16px;
}
[data-theme="amiga"]::-webkit-scrollbar-button:vertical:start,
[data-theme="amiga"] ::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,3 13,11 3,11' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
[data-theme="amiga"]::-webkit-scrollbar-button:vertical:end,
[data-theme="amiga"] ::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='3,5 13,5 8,13' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
[data-theme="amiga"]::-webkit-scrollbar-corner,
[data-theme="amiga"] ::-webkit-scrollbar-corner { background: #AAAAAA; }

/* Amiga WB 1.3: flat, dark-navy track, blue thumb */
[data-theme="wb13"] { scrollbar-color: #0033AA #AABBCC; scrollbar-width: auto; }
[data-theme="wb13"]::-webkit-scrollbar,
[data-theme="wb13"] ::-webkit-scrollbar { width: 14px; height: 14px; }
[data-theme="wb13"]::-webkit-scrollbar-track,
[data-theme="wb13"] ::-webkit-scrollbar-track { background: #AABBCC; border: 2px solid #000000; }
[data-theme="wb13"]::-webkit-scrollbar-thumb,
[data-theme="wb13"] ::-webkit-scrollbar-thumb { background: #0033AA; border: 2px solid #000000; }
[data-theme="wb13"]::-webkit-scrollbar-button,
[data-theme="wb13"] ::-webkit-scrollbar-button {
  background: #000033; border: 2px solid #000000; height: 14px; display: block;
}
[data-theme="wb13"]::-webkit-scrollbar-corner,
[data-theme="wb13"] ::-webkit-scrollbar-corner { background: #AABBCC; border: 2px solid #000000; }

/* OLVWM: 3D-beveled grey, rounded thumb */
[data-theme="olvwm"] { scrollbar-color: #A0A0A0 #C0C0C0; scrollbar-width: thin; }
[data-theme="olvwm"]::-webkit-scrollbar,
[data-theme="olvwm"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="olvwm"]::-webkit-scrollbar-track,
[data-theme="olvwm"] ::-webkit-scrollbar-track {
  background: #C0C0C0;
  box-shadow: inset 1px 1px 0 #E8E8E8, inset -1px -1px 0 #7A7A7A;
}
[data-theme="olvwm"]::-webkit-scrollbar-thumb,
[data-theme="olvwm"] ::-webkit-scrollbar-thumb {
  background: #A0A0A0;
  border: 1px solid #555555;
  box-shadow: inset 1px 1px 0 #D0D0D0, inset -1px -1px 0 #707070;
  border-radius: 10px;
}
[data-theme="olvwm"]::-webkit-scrollbar-corner,
[data-theme="olvwm"] ::-webkit-scrollbar-corner { background: #C0C0C0; }

/* Atari TOS/GEM: 50% dither track (black on white), white thumb, ↑↓ arrows */
[data-theme="gem"] { scrollbar-color: #FFFFFF #888888; scrollbar-width: auto; }
[data-theme="gem"]::-webkit-scrollbar,
[data-theme="gem"] ::-webkit-scrollbar { width: 16px; height: 16px; }
[data-theme="gem"]::-webkit-scrollbar-track,
[data-theme="gem"] ::-webkit-scrollbar-track {
  /* Same 50% dither as title bar */
  background-color: #FFFFFF;
  background-image:
    linear-gradient(45deg, #000000 25%, transparent 25%),
    linear-gradient(-45deg, #000000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000000 75%),
    linear-gradient(-45deg, transparent 75%, #000000 75%);
  background-size: 2px 2px;
  background-position: 0 0, 0 1px, 1px -1px, -1px 0;
  border-left: 1px solid #000000;
}
[data-theme="gem"]::-webkit-scrollbar-thumb,
[data-theme="gem"] ::-webkit-scrollbar-thumb {
  background: #FFFFFF;
  border: 1px solid #000000;
  min-height: 20px;
}
[data-theme="gem"]::-webkit-scrollbar-button,
[data-theme="gem"] ::-webkit-scrollbar-button {
  background: #FFFFFF; border: 1px solid #000000; height: 16px; display: block;
}
[data-theme="gem"]::-webkit-scrollbar-button:vertical:start,
[data-theme="gem"] ::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,3 13,11 3,11' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
[data-theme="gem"]::-webkit-scrollbar-button:vertical:end,
[data-theme="gem"] ::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='3,5 13,5 8,13' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Sizer corner: diagonal hatching (matches ::after grow box) */
[data-theme="gem"]::-webkit-scrollbar-corner,
[data-theme="gem"] ::-webkit-scrollbar-corner {
  background: repeating-linear-gradient(
    -45deg, #000000 0px, #000000 2px, #FFFFFF 2px, #FFFFFF 4px
  );
}

/* Mac OS 1984: 2×2 checkerboard track, white thumb, ▲▼ arrow buttons, grow box corner */
[data-theme="mac1"] { scrollbar-color: #FFFFFF #555555; scrollbar-width: auto; }
[data-theme="mac1"]::-webkit-scrollbar,
[data-theme="mac1"] ::-webkit-scrollbar { width: 15px; height: 15px; }
[data-theme="mac1"]::-webkit-scrollbar-track,
[data-theme="mac1"] ::-webkit-scrollbar-track {
  background-color: #FFFFFF;
  background-image:
    linear-gradient(45deg, #000000 25%, transparent 25%),
    linear-gradient(-45deg, #000000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000000 75%),
    linear-gradient(-45deg, transparent 75%, #000000 75%);
  background-size: 2px 2px;
  background-position: 0 0, 0 1px, 1px -1px, -1px 0;
  border-left: 1px solid #000000;
}
[data-theme="mac1"]::-webkit-scrollbar-thumb,
[data-theme="mac1"] ::-webkit-scrollbar-thumb {
  background: #FFFFFF;
  border: 1px solid #000000;
  min-height: 20px;
}
[data-theme="mac1"]::-webkit-scrollbar-button,
[data-theme="mac1"] ::-webkit-scrollbar-button {
  background: #FFFFFF;
  border: 1px solid #000000;
  display: block;
  height: 15px;
}
[data-theme="mac1"]::-webkit-scrollbar-button:vertical:start,
[data-theme="mac1"] ::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cpolygon points='7,2 13,10 1,10' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
[data-theme="mac1"]::-webkit-scrollbar-button:vertical:end,
[data-theme="mac1"] ::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cpolygon points='1,5 13,5 7,13' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Grow box corner: same 2×2 checkerboard as track */
[data-theme="mac1"]::-webkit-scrollbar-corner,
[data-theme="mac1"] ::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
  background-image:
    linear-gradient(45deg, #000000 25%, transparent 25%),
    linear-gradient(-45deg, #000000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000000 75%),
    linear-gradient(-45deg, transparent 75%, #000000 75%);
  background-size: 2px 2px;
  background-position: 0 0, 0 1px, 1px -1px, -1px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CRT PHOSPHOR THEME
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="crt"] {
  --bg:       #000a00;
  --card:     #000d00;
  --card-bar: #00cc00;
  --border:   #00aa00;
  --text:     #33ff33;
  --muted:    #009900;
  --mark:     #00ffff;
  --birgit:   #ffaa00;
  --radius:   0px;
}

/* Deep black-green background with subtle phosphor glow */
[data-theme="crt"] body {
  background-color: #000a00;
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: #33ff33;
}

/* Override base no-bg-image grid with CRT scanline variant */
[data-theme="crt"] body.no-bg-image {
  background-color: #000a00;
  background-image: none;
  animation: none;
}

/* Heavy scanlines for CRT effect */
[data-theme="crt"] body::after {
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(0, 0, 0, 0.45) 2px, rgba(0, 0, 0, 0.45) 3px
  );
}

/* ASCII border decoration around the viewport */
[data-theme="crt"] body::before {
  content: '';
  position: fixed;
  inset: 4px;
  border: 2px solid #006600;
  box-shadow:
    0 0 0 1px #002200,
    0 0 20px rgba(0, 204, 0, 0.15),
    inset 0 0 20px rgba(0, 204, 0, 0.05);
  pointer-events: none;
  z-index: 8999;
}

[data-theme="crt"] .card {
  background-color: #000d00;
  border: 1px solid #00aa00;
  border-radius: 0;
  box-shadow:
    0 0 8px rgba(0, 204, 0, 0.5),
    0 0 2px rgba(51, 255, 51, 0.7),
    inset 0 0 16px rgba(0, 30, 0, 0.9);
  position: relative;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

/* ── CRT title bar ── */
[data-theme="crt"] .card::before {
  content: '\2550\2550\2550\2550[ MARK & BIBI.EXE ]\2550\2550\2550\2550';
  background: #000d00;
  border-bottom: 1px solid #00aa00;
  color: #33ff33;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: .1em;
  text-shadow:
    0 0 6px rgba(51, 255, 51, 0.9),
    0 0 12px rgba(0, 204, 0, 0.5);
}

/* ── CRT blinking cursor in corner ── */
[data-theme="crt"] .card::after {
  content: '\2588';
  position: absolute;
  bottom: 0.4rem;
  right: 0.6rem;
  width: auto;
  height: auto;
  background: none;
  border: none;
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: #33ff33;
  text-shadow: 0 0 6px rgba(51, 255, 51, 0.9);
  animation: crtBlink 1s step-end infinite;
}
@keyframes crtBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── All text elements ── */
[data-theme="crt"] h1,
[data-theme="crt"] h2,
[data-theme="crt"] .logo {
  font-family: 'VT323', monospace;
  color: #33ff33;
  text-shadow: 0 0 8px rgba(51, 255, 51, 0.8), 0 0 16px rgba(0, 204, 0, 0.4);
}

[data-theme="crt"] .logo::before { content: '> '; }

[data-theme="crt"] p,
[data-theme="crt"] label,
[data-theme="crt"] .subtitle {
  font-family: 'VT323', monospace;
  color: #33ff33;
}

[data-theme="crt"] .subtitle { color: #009900; }

/* ── Buttons ── */
[data-theme="crt"] .btn,
[data-theme="crt"] button,
[data-theme="crt"] input[type="submit"] {
  background: #000d00;
  border: 1px solid #00aa00;
  border-radius: 0;
  color: #33ff33;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  text-shadow: 0 0 4px rgba(51, 255, 51, 0.7);
  box-shadow: 0 0 4px rgba(0, 170, 0, 0.4);
  cursor: pointer;
  transition: none;
}

[data-theme="crt"] .btn:hover,
[data-theme="crt"] button:hover {
  background: #001a00;
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.6), inset 0 0 4px rgba(0, 204, 0, 0.2);
}

/* ── Answer option buttons — ASCII prefix ── */
[data-theme="crt"] .option-btn {
  border: 1px solid #005500;
  color: #009900;
  text-align: left;
  padding-left: 0.4rem;
}

[data-theme="crt"] .option-btn::before { content: '\00BB  '; }

[data-theme="crt"] .option-btn.selected,
[data-theme="crt"] .option-btn:focus {
  border-color: #33ff33;
  color: #33ff33;
  background: #001200;
  box-shadow: 0 0 6px rgba(51, 255, 51, 0.5);
}

[data-theme="crt"] .option-btn.selected::before { content: '\2588  '; }

/* ── Input fields ── */
[data-theme="crt"] input[type="text"],
[data-theme="crt"] input[type="search"],
[data-theme="crt"] textarea {
  background: #000d00;
  border: 1px solid #006600;
  border-radius: 0;
  color: #33ff33;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  caret-color: #33ff33;
  box-shadow: inset 0 0 6px rgba(0, 30, 0, 0.8);
}

[data-theme="crt"] input[type="text"]:focus,
[data-theme="crt"] textarea:focus {
  border-color: #33ff33;
  outline: none;
  box-shadow: 0 0 6px rgba(51, 255, 51, 0.5), inset 0 0 6px rgba(0, 30, 0, 0.8);
}

/* ── Progress bar ── */
[data-theme="crt"] .progress-bar {
  background: #001a00;
  border: 1px solid #006600;
}

[data-theme="crt"] .progress-fill {
  background: #33ff33;
  box-shadow: 0 0 4px rgba(51, 255, 51, 0.7);
}

/* ── Score cards ── */
[data-theme="crt"] .score-wrap {
  gap: 1rem;
}

[data-theme="crt"] .score-card {
  background: #000d00;
  border: 1px solid #005500;
  box-shadow: 0 0 4px rgba(0, 170, 0, 0.3);
}

[data-theme="crt"] .score-card .num {
  font-family: 'VT323', monospace;
  text-shadow: 0 0 8px currentColor;
}

[data-theme="crt"] .score-card.mark  { color: #00ffff; border-color: #00aaaa; }
[data-theme="crt"] .score-card.mark .num { color: #00ffff; }

[data-theme="crt"] .score-card.birgit { color: #ffaa00; border-color: #aa7700; }
[data-theme="crt"] .score-card.birgit .num { color: #ffaa00; }

/* ── Bar chart ── */
[data-theme="crt"] .bar-track {
  background: #001200;
  border: 1px solid #005500;
}

[data-theme="crt"] .bar-fill.mark   { background: #00ffff; box-shadow: 0 0 4px rgba(0, 255, 255, 0.6); }
[data-theme="crt"] .bar-fill.birgit { background: #ffaa00; box-shadow: 0 0 4px rgba(255, 170, 0, 0.6); }

/* ── Table ── */
[data-theme="crt"] table {
  border-collapse: collapse;
  font-family: 'VT323', monospace;
}

[data-theme="crt"] th {
  border-bottom: 1px solid #00aa00;
  color: #009900;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

[data-theme="crt"] td {
  border-bottom: 1px solid #002200;
  color: #33ff33;
}

[data-theme="crt"] .team-mark   { color: #00ffff; }
[data-theme="crt"] .team-birgit { color: #ffaa00; }

/* ── Live badge ── */
[data-theme="crt"] .live-badge {
  background: #000d00;
  border: 1px solid #006600;
  color: #33ff33;
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  letter-spacing: .12em;
}

[data-theme="crt"] .live-dot { background: #33ff33; box-shadow: 0 0 4px #33ff33; }

/* ── Round photo ── */
[data-theme="crt"] .round-photo {
  border: 2px solid #00aa00;
  box-shadow: 0 0 8px rgba(0, 204, 0, 0.5);
  filter: grayscale(1) sepia(1) hue-rotate(80deg) saturate(3) brightness(.7);
}

/* ── Decoration image ── */
[data-theme="crt"] .page-decoration {
  filter: grayscale(1) sepia(1) hue-rotate(80deg) saturate(3) brightness(.55);
  border-bottom: 1px solid #006600;
  opacity: 0.7;
}

/* ── Result page ASCII art ── */
[data-theme="crt"] .result-icon::before { content: '[\2713] '; color: #33ff33; }

/* ── Playlist items ── */
[data-theme="crt"] .playlist-item {
  border: 1px solid #004400;
  background: #000a00;
}

[data-theme="crt"] .playlist-item:hover { border-color: #009900; }

/* ── Reset button ── */
[data-theme="crt"] .btn-reset {
  background: #0a0000;
  border-color: #660000;
  color: #ff4444;
  text-shadow: 0 0 4px rgba(255, 68, 68, 0.6);
}

[data-theme="crt"] .btn-reset.armed {
  border-color: #ff0000;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

/* ── Theme select ── */
[data-theme="crt"] .theme-select {
  background: #000d00;
  border: 1px solid #006600;
  color: #33ff33;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
}

/* ── Scrollbar ── */
[data-theme="crt"]::-webkit-scrollbar,
[data-theme="crt"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="crt"]::-webkit-scrollbar-track,
[data-theme="crt"] ::-webkit-scrollbar-track {
  background: #000a00;
  border-left: 1px solid #004400;
}

[data-theme="crt"]::-webkit-scrollbar-thumb,
[data-theme="crt"] ::-webkit-scrollbar-thumb {
  background: #006600;
  border: 1px solid #009900;
  box-shadow: 0 0 4px rgba(0, 204, 0, 0.4);
}

[data-theme="crt"]::-webkit-scrollbar-thumb:hover,
[data-theme="crt"] ::-webkit-scrollbar-thumb:hover {
  background: #009900;
}

[data-theme="crt"]::-webkit-scrollbar-corner,
[data-theme="crt"] ::-webkit-scrollbar-corner {
  background: #000a00;
}

/* Firefox */
[data-theme="crt"] * {
  scrollbar-color: #006600 #000a00;
  scrollbar-width: thin;
}

/* ═══════════════════════════════════════════════════════════════════════
   C64 THEME  (Commodore 64 BASIC V2)
   Palette: Pepto's canonical VIC-II colors
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="c64"] {
  --bg:       #3128A0;   /* C64 border blue */
  --card:     #2E2C9B;   /* C64 screen blue */
  --card-bar: #2E2C9B;
  --border:   #AAAAFF;   /* C64 light blue — brighter for contrast */
  --text:     #AAAAFF;
  --muted:    #7070CC;
  --mark:     #75CEC8;   /* C64 cyan */
  --birgit:   #EDF171;   /* C64 yellow */
  --radius:   0px;
}

[data-theme="c64"] body {
  background-color: #3128A0;
  font-family: 'VT323', monospace;
  font-size: 28px;
  color: #AAAAFF;
}

[data-theme="c64"] body.no-bg-image {
  background-color: #3128A0;
  background-image: none;
  animation: none;
}

/* No scanlines — C64 is a TV, but the flat-color aesthetic is the vibe */
[data-theme="c64"] body::after { display: none; }

/* The card IS the C64 screen — no border, no shadow, flat blue */
[data-theme="c64"] .card {
  background-color: #2E2C9B;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  padding-top: 2.8rem;
}

/* PETSCII header: **** MARK & BIBI **** */
[data-theme="c64"] .card::before {
  content: '**** MARK & BIBI ****';
  background-color: #2E2C9B;
  border-bottom: none;
  color: #AAAAFF;
  font-family: 'VT323', monospace;
  font-size: 1.05rem;
  letter-spacing: .15em;
  text-align: center;
  text-shadow: none;
}

/* Blinking █ cursor at bottom right */
[data-theme="c64"] .card::after {
  content: '\2588';
  position: absolute;
  bottom: 0.4rem;
  right: 0.6rem;
  width: auto;
  height: auto;
  background: none;
  border: none;
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: #AAAAFF;
  animation: crtBlink 1s step-end infinite;
}

/* ── Typography ── */
[data-theme="c64"] h1,
[data-theme="c64"] h2,
[data-theme="c64"] .logo {
  font-family: 'VT323', monospace;
  color: #AAAAFF;
  text-shadow: none;
  text-transform: uppercase;
}

[data-theme="c64"] p,
[data-theme="c64"] label,
[data-theme="c64"] .subtitle,
[data-theme="c64"] th,
[data-theme="c64"] td {
  font-family: 'VT323', monospace;
  text-transform: uppercase;
}

[data-theme="c64"] .subtitle { color: #7070CC; }

/* ── Buttons ── */
[data-theme="c64"] .btn,
[data-theme="c64"] button,
[data-theme="c64"] input[type="submit"] {
  background: #2E2C9B;
  border: 1px solid #AAAAFF;
  border-radius: 0;
  color: #AAAAFF;
  font-family: 'VT323', monospace;
  font-size: 1.05rem;
  text-transform: uppercase;
  box-shadow: none;
  cursor: pointer;
  transition: none;
}

[data-theme="c64"] .btn:hover,
[data-theme="c64"] button:hover {
  background: #AAAAFF;
  color: #2E2C9B;
  box-shadow: none;
}

/* Answer options — ► prefix, inverted on select */
[data-theme="c64"] .option-btn {
  border: none;
  color: #AAAAFF;
  text-align: left;
}

[data-theme="c64"] .option-btn::before { content: '\25BA  '; }

[data-theme="c64"] .option-btn:hover,
[data-theme="c64"] .option-btn.selected {
  background: #AAAAFF;
  color: #2E2C9B;
  border: none;
  box-shadow: none;
}

[data-theme="c64"] .option-btn.selected::before { content: '\2588  '; color: #2E2C9B; }

/* ── Input fields ── */
[data-theme="c64"] input[type="text"],
[data-theme="c64"] input[type="search"],
[data-theme="c64"] textarea {
  background: #2E2C9B;
  border: none;
  border-bottom: 1px solid #AAAAFF;
  border-radius: 0;
  color: #AAAAFF;
  font-family: 'VT323', monospace;
  font-size: 1.05rem;
  text-transform: uppercase;
  caret-color: #AAAAFF;
  box-shadow: none;
}

[data-theme="c64"] input[type="text"]:focus,
[data-theme="c64"] textarea:focus {
  outline: none;
  border-bottom-color: #75CEC8;
}

/* ── Progress bar ── */
[data-theme="c64"] .progress-bar {
  background: #3128A0;
  border: none;
  border-radius: 0;
}

[data-theme="c64"] .progress-fill {
  background: #AAAAFF;
  border-radius: 0;
  box-shadow: none;
}

/* ── Score cards ── */
[data-theme="c64"] .score-card {
  background: #2E2C9B;
  border: 1px solid #AAAAFF;
  box-shadow: none;
  border-radius: 0;
}

[data-theme="c64"] .score-card.mark   { border-color: #75CEC8; }
[data-theme="c64"] .score-card.mark .num   { color: #75CEC8; text-shadow: none; }
[data-theme="c64"] .score-card.birgit  { border-color: #EDF171; }
[data-theme="c64"] .score-card.birgit .num { color: #EDF171; text-shadow: none; }

/* ── Bar chart ── */
[data-theme="c64"] .bar-track {
  background: #3128A0;
  border: none;
  border-radius: 0;
}

[data-theme="c64"] .bar-fill.mark   { background: #75CEC8; box-shadow: none; border-radius: 0; }
[data-theme="c64"] .bar-fill.birgit { background: #EDF171; box-shadow: none; border-radius: 0; }

/* ── Table ── */
[data-theme="c64"] table { font-family: 'VT323', monospace; }

[data-theme="c64"] th {
  border-bottom: 1px solid #AAAAFF;
  color: #75CEC8;
}

[data-theme="c64"] td { border-bottom: 1px solid #3128A0; }

[data-theme="c64"] .team-mark   { color: #75CEC8; }
[data-theme="c64"] .team-birgit { color: #EDF171; }

/* ── Live badge ── */
[data-theme="c64"] .live-badge {
  background: #2E2C9B;
  border: 1px solid #AAAAFF;
  color: #AAAAFF;
  font-family: 'VT323', monospace;
  box-shadow: none;
}

[data-theme="c64"] .live-dot { background: #75CEC8; box-shadow: none; }

/* ── Photos ── */
[data-theme="c64"] .round-photo {
  border: 2px solid #AAAAFF;
  box-shadow: none;
  /* Shift to the C64 blue tones */
  filter: grayscale(1) sepia(1) hue-rotate(200deg) saturate(2) brightness(.75);
}

[data-theme="c64"] .page-decoration {
  filter: grayscale(1) sepia(1) hue-rotate(200deg) saturate(1.5) brightness(.6);
  border-bottom: 1px solid #AAAAFF;
  opacity: 0.8;
}

/* ── Playlist items ── */
[data-theme="c64"] .playlist-item {
  border: none;
  border-bottom: 1px solid #3128A0;
  background: none;
  border-radius: 0;
}

/* ── Reset button ── */
[data-theme="c64"] .btn-reset {
  background: #2E2C9B;
  border-color: #813338;
  color: #813338;
  text-shadow: none;
}

[data-theme="c64"] .btn-reset.armed {
  background: #813338;
  color: #EDF171;
  box-shadow: none;
}

/* ── Theme select ── */
[data-theme="c64"] .theme-select {
  background: #2E2C9B;
  border: 1px solid #AAAAFF;
  color: #AAAAFF;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
}

/* ── Scrollbar — plain light blue on dark blue ── */
[data-theme="c64"]::-webkit-scrollbar,
[data-theme="c64"] ::-webkit-scrollbar { width: 12px; }

[data-theme="c64"]::-webkit-scrollbar-track,
[data-theme="c64"] ::-webkit-scrollbar-track { background: #3128A0; }

[data-theme="c64"]::-webkit-scrollbar-thumb,
[data-theme="c64"] ::-webkit-scrollbar-thumb {
  background: #AAAAFF;
  border: none;
  box-shadow: none;
}

[data-theme="c64"]::-webkit-scrollbar-thumb:hover,
[data-theme="c64"] ::-webkit-scrollbar-thumb:hover { background: #9090FF; }

[data-theme="c64"]::-webkit-scrollbar-corner,
[data-theme="c64"] ::-webkit-scrollbar-corner { background: #3128A0; }

[data-theme="c64"] * {
  scrollbar-color: #AAAAFF #3128A0;
  scrollbar-width: thin;
}