/* === Monkeytype-inspired theme overrides === */
/* Keep your layout (no page scroll, moves-only scroll) from styles.css;
   this file only restyles the look & feel. */

:root{
  /* Palette close to Monkeytype */
  --bg:#0e0f11;             /* page background */
  --panel:#0b0c0e;          /* panel bg */
  --border:#15171a;         /* subtle borders */
  --text:#e5e5e5;           /* primary text */
  --muted:#8b8f98;          /* secondary text */
  --accent:#e2b714;         /* signature yellow */
  --accent-2:#5ac8fa;       /* soft blue for minor accents */
  --light:#1b1d22;          /* board light squares (dark theme twist) */
  --dark:#111317;           /* board dark squares (almost black) */
  --last:#1e2127;           /* last move overlay (subtle) */
  --check:#ff5f5f;          /* check overlay */
  --ring:rgba(226,183,20,.33);
  --dot:rgba(226,183,20,.22);

  --radius:10px;
  --shadow:0 6px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
}

/* Typography */
html,body{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color:var(--text); background:var(--bg);}

/* Header / Footer */
.site-header, .site-footer{
  background:linear-gradient(180deg, #0f1012 0%, #0c0d10 100%);
  border-color:var(--border);
  box-shadow:var(--shadow);
}
.logo{font-weight:700; letter-spacing:.4px}
.logo span{color:var(--accent)}
.tagline{color:var(--muted)}

/* Ads placeholders (keep minimal) */
.ad-header, .ad-rect{
  background:#0b0c0e;
  border:1px dashed #22262c;
  color:#48505b;
}

/* Main columns */
.side{background:var(--panel); border-left:1px solid var(--border); box-shadow:var(--shadow)}
.pad{padding:16px 18px}

/* Board */
.board{
  background:#090a0c;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.light{background:var(--light)}
.dark{background:var(--dark)}
.sq.last{box-shadow: inset 0 0 0 100vmax rgba(255,255,255,.03)}
.sq.select{box-shadow: inset 0 0 0 100vmax rgba(226,183,20,.12)}
.sq.in-check{box-shadow: inset 0 0 0 100vmax rgba(255,95,95,.16)}
.coord{color:#6f7682; font-size:.62rem}

/* Pieces remain crisp */
.piece-img{filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));}

/* Move dots / capture rings */
.dot{background:var(--dot)}
.cap{box-shadow: inset 0 0 0 6px var(--ring); border-radius:12px}

/* Buttons / Inputs */
.btn{
  background:#0f1114;
  border:1px solid #1c1f24;
  color:var(--text);
  border-radius:8px;
  transition:transform .06s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{border-color:#2a2f37; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.sm{font-size:.85rem; padding:.42rem .6rem}
.btn.ghost{
  background:transparent;
  border:1px dashed #2a2f37;
}
.input{
  background:#0f1114; color:var(--text);
  border:1px solid #1c1f24; border-radius:8px;
}
.input:focus{outline:none; border-color:#2a2f37; box-shadow:0 0 0 3px rgba(226,183,20,.18)}

/* Sidebar text elements */
.turn{color:#dcdcdc}
.label{color:#9da3ad}
.status{color:#cdd1d7}

/* Clocks */
.clock{
  background:#0f1114; border:1px solid #1c1f24;
  border-radius:10px; box-shadow:var(--shadow);
  font-weight:600; letter-spacing:.3px;
}
.dead{opacity:.4}

/* Table / Moves */
.moves{
  background:#0f1114; border:1px solid #1c1f24; border-radius:10px;
  box-shadow:var(--shadow);
}
table{color:#dfe3e8}
th{background:#101217; border-color:#15181d; color:#8e939c}
td{border-color:#14171b}
.tiny{color:var(--muted)}

/* Small cards in sidebar */
.card-lite{
  background:#0f1114; border:1px solid #1c1f24; border-radius:10px; box-shadow:var(--shadow);
}

/* Links */
a{color:#d7e5ff}
a:hover{color:#ffffff}

/* Premium badge idea (optional) */
.btn.premium{
  background:linear-gradient(180deg, #242015, #1a160d);
  border-color:#332a10;
  color:#f2e3a0;
}

/* Make the board controls float like Monkeytype toolbelt */
.board-controls{
  inset:auto 14px 14px 14px;
  gap:10px;
}
.board-controls .left .btn,
.board-controls .right .btn{background:#0f1114}

/* Keep no-scroll layout behavior already in your main CSS —
   these are just visual overrides; no layout changes below this line. */

/* === Micro-animations (Monkeytype vibe) === */

/* 1) Active clock pulse when the turn flips */
.clock.active{
  position: relative;
  border-color:#2a2f37;
}
.clock.active::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(226,183,20,.55);
  animation:clockPulse 900ms ease-out;
  pointer-events:none;
}
@keyframes clockPulse{
  0%   { box-shadow:0 0 0 0 rgba(226,183,20,.55); }
  100% { box-shadow:0 0 0 22px rgba(226,183,20,0); }
}

/* 2) Selected square subtle one-shot ring */
.sq.select::after{
  content:"";
  position:absolute; width:72%; height:72%;
  border-radius:12px;
  box-shadow:0 0 0 0 rgba(226,183,20,.18);
  animation:selectRing 1100ms ease-out 1;
  pointer-events:none;
}
@keyframes selectRing{
  0%   { box-shadow:0 0 0 0 rgba(226,183,20,.18); }
  100% { box-shadow:0 0 0 26px rgba(226,183,20,0); }
}

/* 3) New move row: soft slide-in */
.moves tbody tr.appear{
  animation:rowIn 220ms ease-out both;
}
@keyframes rowIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}

/* 4) Move dots & capture rings fade in */
.dot, .cap{ animation:fadeIn 120ms ease-out; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* 5) Buttons: neon-ish hover */
.btn:hover{
  border-color:#2a2f37;
  box-shadow:
    0 0 0 1px rgba(226,183,20,.35),
    0 0 14px rgba(226,183,20,.18);
  transform:translateY(-1px);
}
.btn:active{ transform:translateY(0); box-shadow:none; }