/* board-base.css
   Base, theme-agnostic styles for the math board UI.
   - This file defines layout, components, and animations.
   - Color choices and backgrounds are NOT defined here; themes set CSS variables.
   - Safe to use alone; if no theme is loaded, browsers will still render with defaults.

   How theming works:
   - Theme files (e.g., theme-candy.css, theme-ocean.css, theme-star.css) define CSS custom
     properties (variables) like --blue-600, --green-500, etc., and optional body backgrounds.
   - Components below consume those variables. If a variable is missing, the browser keeps
     the last value or uses initial values. Our Theme Manager ensures a valid theme is loaded.
*/

/* Base font stack similar to Tailwind Preflight */
html {
  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.5;
}

/* Remove default body margin */
body { margin: 0; }

/* CSS variables consumed by components below. Themes should override these. */
:root {
  /* Animation durations (themes may override if desired) */
  --solved-duration: 1000ms;
  --post-solved-duration: 7000ms;

  /* Color variables (THEMES SHOULD SET THESE) */
  --blue-500: #4f46e5; /* Fallback only; themes replace */
  --blue-600: #4338ca;
  --blue-700: #3730a3;
  --green-500: #86efac;
  --green-600: #22c55e;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --pink-200: #e9d5ff;
  --violet-100: #fff7ed;
  --ring: rgba(99, 102, 241, 0.5);
  --solved-500: #22c55e;
  --solved-600: #16a34a;
}

/* Container */
.container {
  max-width: 672px;
  margin: 32px auto;
  padding: 0 16px;
}

/* Title */
h1 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  letter-spacing: 0.5px;
  color: #222;
}

/* 2-column board */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 672px;
  margin: 0 auto;
}

/* Board wrapper + overlay (for demo mode) */
.board-wrap {
  position: relative;
  max-width: 672px;
  margin: 0 auto;
}

.board-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(1.1) blur(1px);
  border-radius: 16px;
  z-index: 5;
  pointer-events: none; /* visual only; buttons are disabled separately */
}

.board-overlay-msg {
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 8px 12px;
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: 0.95rem;
}

/* Column card */
.column {
  background: linear-gradient(180deg, #ffffff, var(--violet-100));
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* Column title */
.column h2 {
  text-align: center;
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Button list */
.button-list {
  display: grid;
  gap: 12px;
}

/* Buttons consume variables for colors/shadows */
.btn {
  display: inline-block;
  width: 100%;
  padding: 14px 16px;
  min-height: 56px;
  background: var(--blue-600);
  color: white;
  border: none;
  border-radius: 9999px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--blue-700), 0 10px 16px rgba(0,0,0,0.10);
  transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}

.btn:hover,
.btn:focus {
  background: var(--blue-500);
  outline: none;
  transform: translateY(-1px);
}

.btn:focus-visible {
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--ring), 0 6px 0 var(--blue-700);
}

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--blue-700), 0 6px 12px rgba(0,0,0,0.12);
}

/* Selected state */
.btn.selected,
.btn[aria-pressed="true"] {
  background: var(--green-500);
  color: #064e3b;
  box-shadow: 0 6px 0 var(--green-600), 0 10px 16px rgba(134, 239, 172, 0.45);
  animation: btnBounce 400ms ease;
}

/* Solved state */
.btn.solved,
.btn[data-solved="true"] {
  background: var(--solved-500);
  color: #111;
  cursor: not-allowed;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) inset;
  animation: solvedFade var(--solved-duration) linear forwards;
  position: relative;
  transform: none;
}

.btn.solved:hover,
.btn[data-solved="true"]:hover {
  transform: none;
  background: var(--solved-500);
}

/* Post-solved content fade-in */
.btn.post-solved { animation: postSolvedAppear var(--post-solved-duration) ease-out forwards; }

/* Keyframes */
@keyframes solvedFade { from { opacity: 1; } to { opacity: 0; } }
@keyframes postSolvedAppear { from { opacity: 0; } to { opacity: 1; } }
@keyframes btnBounce {
  0%   { transform: translateY(-1px) scale(1.00); }
  30%  { transform: translateY(-4px) scale(1.03); }
  60%  { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0)     scale(1.00); }
}

/* Mobile */
@media (max-width: 640px) {
  .columns { grid-template-columns: 1fr 1fr; }
  .btn { min-height: 56px; font-size: 1.1rem; }
}

/* Range slider (difficulty/max) — themed track + thumb */
#maxSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 240px; /* default, can be overridden inline */
  height: 6px;
  border-radius: 9999px;
  background: #e5e7eb; /* JS paints theme gradient inline */
  outline: none;
}

/* Inherit background gradient for WebKit track */
#maxSlider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: inherit;
}

/* WebKit thumb */
#maxSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-600);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  margin-top: -6px; /* centers thumb on 6px track */
}

/* Firefox track */
#maxSlider::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: inherit;
}

/* Firefox thumb */
#maxSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-600);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}