/*
  Blind GPT Smackdown – refreshed UI
  - Clean, accessible dark theme
  - Consistent spacing, typography, and components
  - Responsive layout with subtle motion
*/

:root {
  --bg: #0b1020;
  --panel: #111731;
  --text: #e6ebff;
  --muted: #9aa4c7;
  --accent-a: #64b5ff;
  --accent-b: #5ee7c4;
  --ring: #2a355a;
  --elev: rgba(0,0,0,0.28);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html, body {
  background: radial-gradient(1200px 800px at 20% -10%, rgba(100,181,255,0.08), transparent),
              radial-gradient(1000px 700px at 80% -20%, rgba(94,231,196,0.06), transparent),
              var(--bg);
  color: var(--text);
}
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.5; }

/* Typography */
h1, h2, h3 { line-height: 1.2; margin: 0.25rem 0 0.5rem; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: 0.2px; }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p { margin: 0.25rem 0 1rem; }
a, a:visited { color: var(--accent-a); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.fine { font-size: 0.9rem; color: var(--muted); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

/* Layout */
.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
.site-header { padding: 1.25rem 1.25rem 0.25rem; }
.tagline { margin-top: 0; }
.site-footer { margin: 2rem 0; }

/* Components */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)), var(--panel);
  padding: 1.6rem 1.6rem;
  border-radius: 16px;
  box-shadow: 0 12px 28px var(--elev);
  border: 1px solid var(--ring);
}

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch; }
.row { display:flex; align-items:center; justify-content:center; gap: .75rem; flex-wrap:wrap; }
.row--spaced { margin-top: 1rem; }
.stack { display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.hint { display:flex; gap:1rem; justify-content:center; color:var(--muted); align-items:center; }

.card {
  cursor: pointer;
  border-radius: 14px;
  padding: 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)), var(--panel);
  border: 1px solid var(--ring);
  transition: transform .1s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  min-height: 240px;
  display:flex; flex-direction:column; gap:.75rem;
}
.card:hover { transform: translateY(-3px); border-color: #465589; box-shadow: 0 16px 34px var(--elev); }
.card:active { transform: translateY(0); }
.card:focus-within { outline: 2px solid transparent; border-color: var(--accent-a); box-shadow: 0 0 0 3px rgba(100,181,255,0.25); }

.pill { display:inline-flex; align-items:center; justify-content:center; width: 36px; height:36px; border-radius: 10px; font-weight: 800; letter-spacing: .5px; }
.pill.a { background: rgba(100,181,255,0.15); color: #b9dcff; border: 1px solid rgba(100,181,255,0.35); }
.pill.b { background: rgba(94,231,196,0.15); color: #c7f5e9; border: 1px solid rgba(94,231,196,0.35); }

.buttons { display:flex; gap:.5rem; margin-top: auto; }

/* Inputs + Buttons */
button, input, select { font: inherit; color: inherit; }
button {
  appearance: none; border: 1px solid var(--ring); background: #0d1329; color: var(--text);
  padding: .6rem .9rem; border-radius: .6rem; cursor: pointer; transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
button:hover { background: #0f1733; border-color: #3a4778; }
button:active { transform: translateY(1px); }
button.primary { background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); color: #041229; border: none; }
button.secondary { background: #0d1329; border-color: #2a355a; }

.setting { display:flex; gap:.75rem; align-items:center; justify-content:center; }
.setting--block { margin: 1rem 0 .35rem; }
.setting input[type=number] {
  width: 120px; font-size:1.05rem; padding:.45rem .6rem; background:#0d1329; color:#e6ebff; border:1px solid #1a2344; border-radius:.5rem;
}
.count-value { display:inline-flex; min-width: 2.25rem; justify-content:center; align-items:center; padding: .2rem .5rem; border-radius: .5rem; background:#0d1329; border:1px solid #1a2344; color:#cfe0ff; font-weight:600; }
.setting input[type=number]::-webkit-outer-spin-button,
.setting input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.setting input[type=number] { -moz-appearance: textfield; }

kbd { background:#0d1329; color:#cdd6ff; padding:.15rem .4rem; border-radius:.35rem; border:1px solid #1a2344; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85rem; }

/* Progress */
.progressline { height: 8px; width: 100%; background: #0d1329; border-radius: 999px; overflow: hidden; margin: .75rem 0 1.25rem; }
.progressbar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); transition: width .25s ease; }

/* Media */
canvas { max-width: 640px; margin: 0 auto; display:block; }
.icon { width: 18px; height: 18px; opacity:.9; }

/* Slider */
.slider { -webkit-appearance: none; width: min(720px, 100%); height: 22px; background: transparent; display:block; margin: .35rem auto 1.25rem; }
.slider:focus { outline: none; }
.slider::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, rgba(100,181,255,0.25), rgba(94,231,196,0.25)); border-radius: 999px; border: 1px solid #1a2344; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -8px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #cfe6ff, #9ad9c7); border: 2px solid #0f1733; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.slider::-moz-range-track { height: 6px; background: linear-gradient(90deg, rgba(100,181,255,0.25), rgba(94,231,196,0.25)); border-radius: 999px; border: 1px solid #1a2344; }
.slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #cfe6ff, #9ad9c7); border: 2px solid #0f1733; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.slider:active::-webkit-slider-thumb { transform: scale(0.98); }
.slider:active::-moz-range-thumb { transform: scale(0.98); }

/* Headings spacing inside panel */
.panel > h2 { margin: 0 0 .35rem; }
.panel > p.muted { margin: 0 0 1.1rem; }

/* Responsiveness tweaks */
@media (max-width: 560px) {
  .container { padding: 0.9rem; }
  .card { min-height: 180px; }
}