/* SYNTHWAVE: outrun horizon, chrome lettering, neon glass, VHS overlay. */
[data-theme="synthwave"] {
  --bg: #0b0320;
  --bg-2: #1a0636;
  --surface: #16073a;
  --surface-2: #220a52;
  --text: #f4eaff;
  --text-dim: #b9a6e6;
  --accent: #ff2bd6;
  --accent-2: #00f0ff;
  --accent-3: #ffe14d;
  --border: #7a2bff;
  --shadow: 0 0 0 1px rgba(255,43,214,.35), 0 0 24px rgba(122,43,255,.45), 0 10px 30px rgba(0,0,0,.6);
  --radius: 4px;
  --font-display: 'Audiowide','Orbitron',sans-serif;
  --font-body: 'Rajdhani','Orbitron',system-ui,sans-serif;
  --title-glow: none;
  --btn-bg: linear-gradient(90deg,#ff2bd6,#7a2bff);
  --btn-text: #ffffff;
  --card-bg-fact: linear-gradient(110deg,rgba(0,240,255,.14),rgba(22,7,58,.88) 45%);
  --card-bg-topic: linear-gradient(110deg,rgba(255,43,214,.18),rgba(22,7,58,.88) 45%);
  --top-label: "\2605  High score";
}
[data-theme="synthwave"] body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 500; font-size: 1.05rem; }

/* sky: stars + horizon glow; floor: scrolling grid (::before); banded sun (::after) */
[data-theme="synthwave"] .backdrop {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)),
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 22%, #ffe14d 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 26%, #00f0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 6%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 44%, #ff2bd6 50%, transparent 51%),
    radial-gradient(ellipse 60% 14% at 50% 62%, rgba(255,43,214,.55), transparent 70%),
    linear-gradient(180deg, #07021a 0%, #1a0636 38%, #4a0a6e 61.8%, #07021a 62%, #07021a 100%);
  overflow: hidden;
}
[data-theme="synthwave"] .backdrop::before {
  content: ""; position: absolute; left: -50%; right: -50%; top: 62%; bottom: -20%; z-index: 1;
  background-image:
    linear-gradient(rgba(0,240,255,.7) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,43,214,.6) 2px, transparent 2px);
  background-size: 64px 44px;
  transform: perspective(360px) rotateX(64deg);
  transform-origin: 50% 0;
  animation: sw-grid 1.2s linear infinite;
  mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
}
@keyframes sw-grid { to { background-position: 0 44px, 0 0; } }
[data-theme="synthwave"] .backdrop::after {
  content: ""; position: absolute; left: 50%; top: 62%; width: min(46vmin, 380px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: linear-gradient(180deg, #ffe14d 8%, #ff9a3d 26%, #ff2bd6 46%);
  /* top half only (sits on the horizon), with the classic cut-out bands */
  mask-image: linear-gradient(180deg, #000 0 30%, transparent 30% 32%, #000 32% 37%, transparent 37% 40%, #000 40% 44%, transparent 44% 48%, #000 48% 50%, transparent 50%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 30%, transparent 30% 32%, #000 32% 37%, transparent 37% 40%, #000 40% 44%, transparent 44% 48%, #000 48% 50%, transparent 50%);
}
/* VHS overlay (absolute, so it scrolls away instead of covering cards) */
[data-theme="synthwave"] body::before {
  content: "\25B6  PLAY"; position: absolute; top: 12px; left: 16px; z-index: 2; pointer-events: none;
  font-family: 'Orbitron', sans-serif; font-size: .8rem; letter-spacing: .2em; color: rgba(255,255,255,.75);
  text-shadow: 2px 0 rgba(255,43,214,.7), -2px 0 rgba(0,240,255,.7);
  animation: sw-blink 2s steps(1) infinite;
}
[data-theme="synthwave"] body::after {
  content: "SP  0:19:87"; position: absolute; top: 12px; right: 16px; z-index: 2; pointer-events: none;
  font-family: 'Orbitron', sans-serif; font-size: .75rem; letter-spacing: .15em; color: rgba(255,255,255,.55);
}
@keyframes sw-blink { 0%,60% { opacity: 1 } 61%,100% { opacity: .25 } }

/* chrome title */
[data-theme="synthwave"] #group-name {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-style: italic;
  background: linear-gradient(180deg, #e8f6ff 0%, #9fd8ff 38%, #24135c 50%, #ff7ad9 52%, #ffd1f3 78%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.55);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px #ff2bd6) drop-shadow(0 0 26px #7a2bff);
  animation: sw-glitch 6s infinite;
}
@keyframes sw-glitch {
  0%,92%,100% { transform: none; }
  93% { transform: translate(-4px,1px) skewX(-10deg); }
  95% { transform: translate(4px,-1px) skewX(8deg); }
  97% { transform: translate(-1px,0); }
}
[data-theme="synthwave"] .hero-art svg { filter: drop-shadow(0 0 10px #ff2bd6) drop-shadow(0 0 22px rgba(0,240,255,.6)); }
[data-theme="synthwave"] .hero-art .bob { animation: sw-bob 3s ease-in-out infinite alternate; }
@keyframes sw-bob { from { transform: translateY(0) } to { transform: translateY(-6px) } }

/* neon glass panels */
[data-theme="synthwave"] .gathering,
[data-theme="synthwave"] #add-form {
  background: linear-gradient(160deg, rgba(34,10,82,.78), rgba(11,3,32,.86));
  border: 1px solid var(--accent-2); border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(0,240,255,.25), 0 0 26px rgba(0,240,255,.3), inset 0 0 30px rgba(122,43,255,.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  position: relative;
}
/* corner brackets */
[data-theme="synthwave"] .gathering::before,
[data-theme="synthwave"] .gathering::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 2px solid var(--accent); filter: drop-shadow(0 0 6px var(--accent));
}
[data-theme="synthwave"] .gathering::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
[data-theme="synthwave"] .gathering::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
[data-theme="synthwave"] .gathering .label,
[data-theme="synthwave"] .agenda h2 { font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: .3em; color: var(--accent-2); text-shadow: 0 0 10px var(--accent-2); }
[data-theme="synthwave"] .agenda h2 { font-weight: 800; }
[data-theme="synthwave"] .agenda h2::after { content: ""; display: block; height: 3px; margin-top: 8px; background: linear-gradient(90deg,var(--accent),var(--accent-2) 50%,transparent); box-shadow: 0 0 10px var(--accent); }
[data-theme="synthwave"] #next-date { font-family: 'Orbitron', sans-serif; font-weight: 600; color: var(--accent-3); text-shadow: 0 0 12px rgba(255,225,77,.7); }
/* LCD countdown */
[data-theme="synthwave"] #countdown .unit {
  background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(26,6,54,.7)); border: 1px solid var(--accent); border-radius: 2px;
  box-shadow: 0 0 14px rgba(255,43,214,.4), inset 0 0 12px rgba(255,43,214,.2);
  position: relative; overflow: hidden;
}
[data-theme="synthwave"] #countdown .unit::after {
  content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); pointer-events: none;
}
[data-theme="synthwave"] #countdown .num { font-family: 'Orbitron', sans-serif; font-weight: 800; color: #fff; text-shadow: 0 0 6px var(--accent-2), 0 0 18px var(--accent-2); }
[data-theme="synthwave"] #countdown .lbl { color: var(--accent); text-transform: uppercase; letter-spacing: .2em; }
[data-theme="synthwave"] .badge { background: rgba(0,0,0,.35); color: var(--accent-3); border: 2px solid var(--accent-3); border-radius: 2px; font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: .15em; font-size: .72rem; box-shadow: 0 0 12px rgba(255,225,77,.6), inset 0 0 8px rgba(255,225,77,.3); text-shadow: 0 0 8px var(--accent-3); }

/* inputs */
[data-theme="synthwave"] .type-opt span { background: rgba(0,0,0,.45); color: var(--text-dim); border: 1px solid rgba(0,240,255,.45); border-radius: 2px; font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; }
[data-theme="synthwave"] .type-opt input:checked + span { background: rgba(0,240,255,.14); color: #fff; border-color: var(--accent-2); box-shadow: 0 0 16px rgba(0,240,255,.55), inset 0 0 12px rgba(0,240,255,.35); text-shadow: 0 0 8px var(--accent-2); }
[data-theme="synthwave"] #add-text {
  background: rgba(5,1,20,.8); color: #fff; border: 1px solid var(--accent-2); border-radius: 2px;
  font-family: var(--font-body); font-size: 1.1rem; box-shadow: inset 0 0 14px rgba(0,240,255,.2); caret-color: var(--accent);
}
[data-theme="synthwave"] #add-text::placeholder { color: #8b78c0; opacity: 1; }
[data-theme="synthwave"] #form-msg { color: var(--accent-2); text-shadow: 0 0 8px rgba(0,240,255,.6); }
[data-theme="synthwave"] #form-msg.error { color: #ff7ad9; }

/* cards */
[data-theme="synthwave"] .card {
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow);
  overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
[data-theme="synthwave"] .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
[data-theme="synthwave"] .card-topic { background: var(--card-bg-topic); border-color: rgba(255,43,214,.6); }
[data-theme="synthwave"] .card-fact { background: var(--card-bg-fact); border-color: rgba(0,240,255,.6); }
[data-theme="synthwave"] .card-fact::before { background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); }
[data-theme="synthwave"] .card:hover { transform: translateX(4px) skewX(-1deg); box-shadow: 0 0 30px rgba(255,43,214,.55), 0 10px 30px rgba(0,0,0,.6); }
[data-theme="synthwave"] .card-type { font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: .25em; font-size: .68rem; color: var(--accent-2); text-shadow: 0 0 8px var(--accent-2); }
[data-theme="synthwave"] .card-type::before { content: "\25B8 "; }
[data-theme="synthwave"] .card-topic .card-type { color: var(--accent); text-shadow: 0 0 8px var(--accent); }
[data-theme="synthwave"] .card-text { font-size: 1.15rem; }
[data-theme="synthwave"] .card-top { border-color: var(--accent-3); box-shadow: 0 0 0 1px var(--accent-3), 0 0 28px rgba(255,225,77,.45), 0 10px 30px rgba(0,0,0,.6); }
[data-theme="synthwave"] .card-top::before { background: var(--accent-3); box-shadow: 0 0 14px var(--accent-3); }
[data-theme="synthwave"] .top-tag { color: var(--accent-3); text-shadow: 0 0 8px var(--accent-3); animation: sw-blink 1.4s steps(1) infinite; }
[data-theme="synthwave"] .card .vote { background: rgba(0,0,0,.5); color: var(--accent-2); border: 1px solid var(--accent-2); border-radius: 2px; box-shadow: 0 0 8px rgba(0,240,255,.4); font-family: 'Orbitron', sans-serif; }
[data-theme="synthwave"] .card .vote[aria-pressed="true"] { background: var(--accent-2); color: #08021a; box-shadow: 0 0 20px var(--accent-2), 0 0 40px rgba(0,240,255,.5); }

/* buttons */
[data-theme="synthwave"] button { font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: .12em; }
[data-theme="synthwave"] .btn-primary,
[data-theme="synthwave"] #reroll-theme,
[data-theme="synthwave"] #sound-toggle {
  background: var(--btn-bg); color: var(--btn-text); border: 1px solid #fff; border-radius: 2px; font-weight: 700; font-size: .85rem;
  box-shadow: 0 0 16px rgba(255,43,214,.7), 0 0 36px rgba(122,43,255,.4);
  text-shadow: 0 0 6px rgba(0,0,0,.5);
}
[data-theme="synthwave"] #sound-toggle[aria-pressed="false"] { background: rgba(0,0,0,.5); border-color: var(--accent); }
[data-theme="synthwave"] .btn-primary:hover,
[data-theme="synthwave"] #reroll-theme:hover,
[data-theme="synthwave"] #sound-toggle:hover { filter: brightness(1.25); box-shadow: 0 0 24px #ff2bd6, 0 0 50px rgba(0,240,255,.6); }
[data-theme="synthwave"] :focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; }
[data-theme="synthwave"] a { color: var(--accent-2); }
[data-theme="synthwave"] ::selection { background: var(--accent); color: #fff; }

[data-theme="synthwave"] .rolling { animation: sw-roll .7s steps(14, end); }
@keyframes sw-roll {
  0% { transform: translate(0); filter: none }
  15% { transform: translate(-4px,1px) skewX(-8deg); filter: hue-rotate(90deg) drop-shadow(3px 0 #00f0ff) }
  35% { transform: translate(4px,-1px) skewX(6deg); filter: hue-rotate(-60deg) drop-shadow(-3px 0 #ff2bd6) }
  60% { transform: translate(-2px,0); filter: drop-shadow(0 0 16px #ffe14d) }
  100% { transform: translate(0); filter: none }
}
@media (max-width: 480px) {
  [data-theme="synthwave"] body::after { display: none; }
}
/* flavor text */
[data-theme="synthwave"] .flavor blockquote { background: rgba(11,3,32,.72); padding: .6rem 1rem; border-radius: 12px; font-style: normal; color: var(--accent-2); text-shadow: 0 0 8px rgba(0,240,255,.5); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="synthwave"] .backdrop::before, [data-theme="synthwave"] #group-name, [data-theme="synthwave"] body::before,
  [data-theme="synthwave"] .top-tag, [data-theme="synthwave"] .hero-art .bob, [data-theme="synthwave"] .rolling { animation: none; }
  [data-theme="synthwave"] .card { transition: none; }
}