/* THEME: CLASSIC — electric tropical glass (default) */

body.theme-classic {
  background: radial-gradient(at 10% 20%, #ff5e00 0px, transparent 55%),
              radial-gradient(at 90% 15%, #00f0ff 0px, transparent 50%),
              radial-gradient(at 85% 85%, #a855f7 0px, transparent 55%),
              radial-gradient(at 15% 80%, #10b981 0px, transparent 50%),
              #0d0714;
  background-attachment: fixed;

  --text-main: #ffffff;
  --text-muted: #d8cff0;
  --border-color: rgba(255, 255, 255, 0.25);
  --bg-card: rgba(255, 255, 255, 0.10);
  --accent-active: #00f0ff;

  /* Grid surface */
  --board-bg: rgba(13, 7, 20, 0.55);
  --cell-blank: #2b2140;
  --cell-line: #a394c9;

  /* Overlays tuned for a dark grid */
  --axis: #ffd54a;
  --axis-halo: rgba(0, 0, 0, 0.6);
  --cursor: #ffffff;
  --cursor-halo: rgba(0, 0, 0, 0.7);
  --ghost: #38bdf8;                        /* sky — reads on the dark board */
  --ghost-fill: rgba(56, 189, 248, 0.22);
  --focus: #ffb300;

  color: var(--text-main);
}

/* Frosted glass chrome.
   The template's rgba(255,255,255,0.08) let the vivid gradient through and gave
   white text only 1.4–3.5:1 contrast. A dark tint keeps the glass look while
   lifting every gradient spot to 7:1+ (WCAG AA). */
body.theme-classic .reading,
body.theme-classic .panel-left,
body.theme-classic .panel-right,
body.theme-classic .workspace .ex-play__instruction,
body.theme-classic .top-bar {
  background: rgba(13, 7, 20, 0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

body.theme-classic .workspace { background: transparent; }

body.theme-classic .board,
body.theme-classic .results-card {
  background: var(--board-bg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.theme-classic .results-card { background: rgba(255, 255, 255, 0.08); }

body.theme-classic .select,
body.theme-classic .btn {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Accent button: turquoise → orange */
body.theme-classic .btn-primary {
  background: linear-gradient(135deg, #00f0ff 0%, #ff5e00 100%);
  color: #0d0714;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

body.theme-classic .results__nearmiss {
  background: rgba(255, 179, 0, 0.2);
}