/* styles/theme.css — shared design language for the whole app (Homepage, Learn,
   Game Review). Warm dark palette + Bricolage display font + reusable primitives. */
@font-face {
  font-family: "Bricolage";
  src: url("../assets/fonts/bricolage-var-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  --bg: #141310; --surf: #211f1b; --surf-2: #2a2722; --surf-3: #322e28;
  --line: #39342c; --line-2: #4a443b;
  --ink: #f4efe2; --dim: #b3ab97; --faint: #7c766b;
  --green: #93bd4f; --green-2: #6f9a37;
  --gold: #e7b34d; --coral: #e8845f; --teal: #54c1a2; --sky: #7d9bb5;
  --radius: 14px;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  --display: "Bricolage", system-ui, "Segoe UI", sans-serif;
  --body: system-ui, "Segoe UI", sans-serif;
}

/* checkerboard-textured hero band — the signature surface across entry screens */
.u-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 150% at 88% -30%, rgba(147, 189, 79, 0.22), transparent 52%),
    linear-gradient(158deg, #242a1c 0%, #17160f 62%);
}
.u-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.045;
  background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 76px 76px;
}
.u-kicker {
  font: 800 13px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--green);
}
.u-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; color: #fbf7ec;
}

/* pill buttons shared by both features' controls (settings, flip, etc.) */
.u-ctl {
  display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--body); cursor: pointer;
  padding: 8px 12px; border-radius: 10px; background: var(--surf); color: var(--ink);
  border: 1px solid var(--line); transition: border-color 0.14s, background 0.14s, transform 0.1s;
}
.u-ctl:hover { border-color: var(--green); }
.u-ctl:active { transform: translateY(1px); }
.u-ctl.on { background: var(--green); color: #141a08; border-color: var(--green); }

/* vertical icon rail sitting just right of a board's top-right corner (chess.com-style) */
.board-rail { display: flex; flex-direction: column; gap: 8px; }
.btbtn {
  width: 38px; height: 38px; display: grid; place-items: center; font-size: 17px; line-height: 1;
  border-radius: 10px; background: var(--surf); color: var(--ink); border: 1px solid var(--line);
  cursor: pointer; transition: border-color 0.14s, background 0.14s, transform 0.1s;
}
.btbtn:hover { border-color: var(--green); background: var(--surf-2); }
.btbtn:active { transform: translateY(1px); }
.btbtn.on { background: var(--green); color: #141a08; border-color: var(--green); }

/* primary call-to-action */
.u-cta {
  font: 800 15px/1 var(--body); cursor: pointer; padding: 13px 22px; border-radius: 12px; border: 0;
  background: linear-gradient(180deg, var(--green), var(--green-2)); color: #101806;
  box-shadow: 0 6px 18px rgba(147, 189, 79, 0.28); transition: transform 0.1s, box-shadow 0.14s;
}
.u-cta:hover { box-shadow: 0 8px 24px rgba(147, 189, 79, 0.4); transform: translateY(-1px); }
.u-cta:active { transform: translateY(0); }