:root {
    --bg: #0b0b10;
    --bg-soft: #12121a;
    --square-dark: #16161f;
    --square-light: #21212e;
    --line: rgba(212, 175, 55, 0.14);
    --gold: #d4af37;
    --gold-soft: #e8c96a;
    --cream: #ece5d3;
    --muted: #8f8a7d;
    --text-body: #c9c3b4;
    --piece-w: #ece5d3;
    --piece-b: #55516a;
    --nav-bg: 11, 11, 16;
    --btn-text: #0b0b10;
    --shadow: rgba(0, 0, 0, 0.55);
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', -apple-system, sans-serif;
    --mono: 'JetBrains Mono', Consolas, monospace;
  }

  /* ---------- marble board theme: white marble + green onyx ---------- */
  html[data-theme="marble"] {
    --bg: #eef0ec;
    --bg-soft: #f7f8f5;
    --square-dark: #a3b3a6;
    --square-light: #f4f5f1;
    --line: rgba(56, 96, 80, 0.30);
    --gold: #3f6b5a;
    --gold-soft: #2f5446;
    --cream: #1f2b26;
    --muted: #64756d;
    --text-body: #3a4841;
    --piece-w: #ffffff;
    --piece-b: #2e3b35;
    --nav-bg: 238, 240, 236;
    --btn-text: #f4f5f1;
    --shadow: rgba(40, 60, 50, 0.20);
  }

  /* ---------- wooden board theme: classic tournament wood ---------- */
  html[data-theme="wood"] {
    --bg: #f0e0c4;
    --bg-soft: #f8eed9;
    --square-dark: #b58863;
    --square-light: #f0d9b5;
    --line: rgba(122, 82, 34, 0.32);
    --gold: #8b5a2b;
    --gold-soft: #6f4518;
    --cream: #2e1f10;
    --muted: #7d6547;
    --text-body: #4a3722;
    --piece-w: #fdf6e8;
    --piece-b: #3a2a18;
    --nav-bg: 240, 224, 196;
    --btn-text: #fdf6e8;
    --shadow: rgba(90, 60, 20, 0.25);
  }

  body, nav, .skill-card, .project-card, .movelist, .trophy-card, .dev-piece,
  .contact-form input, .contact-form textarea {
    transition: background-color 0.45s, background 0.45s, color 0.45s, border-color 0.45s;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--cream);
    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.7;
    overflow-x: hidden;
  }
  ::selection { background: var(--gold); color: var(--btn-text); }

  /* ---------- checkered ambient background ---------- */
  .board-bg {
    position: fixed; inset: 0; z-index: -2;
    background-image:
      linear-gradient(45deg, var(--square-dark) 25%, transparent 25%, transparent 75%, var(--square-dark) 75%),
      linear-gradient(45deg, var(--square-dark) 25%, transparent 25%, transparent 75%, var(--square-dark) 75%);
    background-size: 160px 160px;
    background-position: 0 0, 80px 80px;
    opacity: 0.35;
  }
  .board-bg::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, transparent 0%, var(--bg) 75%);
  }

  /* ---------- nav ---------- */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 2.5rem;
    background: linear-gradient(to bottom, rgba(var(--nav-bg),0.92), rgba(var(--nav-bg),0.75) 70%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s;
  }
  nav.scrolled { border-bottom-color: var(--line); }
  .nav-logo {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
    color: var(--cream); text-decoration: none; letter-spacing: 0.08em;
  }
  .nav-logo span { color: var(--gold); }
  .nav-moves { display: flex; gap: 1.6rem; list-style: none; }
  .nav-moves a {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em;
    color: var(--muted); text-decoration: none; transition: color 0.25s;
  }
  .nav-moves a:hover, .nav-moves a.active { color: var(--gold); }
  .nav-moves a .mv { color: var(--gold); opacity: 0.6; margin-right: 0.3em; }
  @media (max-width: 900px) { .nav-moves { display: none; } }

  .nav-actions { display: flex; align-items: center; gap: 0.6rem; }
  .resume-btn {
    display: flex; align-items: center; gap: 0.45em;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--btn-text); background: var(--gold);
    border: 1px solid var(--gold); border-radius: 999px;
    padding: 0.45rem 1rem; text-decoration: none;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  }
  .resume-btn:hover {
    background: var(--gold-soft); border-color: var(--gold-soft);
    transform: translateY(-1px); box-shadow: 0 8px 22px rgba(212,175,55,0.3);
  }
  .resume-btn .icon { font-size: 0.9rem; line-height: 1; }
  .theme-toggle {
    display: flex; align-items: center; gap: 0.5em;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted); background: transparent;
    border: 1px solid var(--line); border-radius: 999px;
    padding: 0.45rem 1rem; cursor: pointer;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
  }
  .theme-toggle:hover { color: var(--gold); border-color: var(--gold); background: rgba(212,175,55,0.06); }
  .theme-toggle .icon { font-size: 1rem; line-height: 1; color: var(--gold); }
  html[data-theme="marble"] .board-bg,
  html[data-theme="wood"] .board-bg { opacity: 0.22; }

  /* ---------- move progress rail ---------- */
  .move-rail {
    position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%);
    z-index: 90; display: flex; flex-direction: column; gap: 1rem;
  }
  .move-rail a {
    width: 8px; height: 8px; border-radius: 1px;
    background: var(--muted); opacity: 0.35; transform: rotate(45deg);
    transition: all 0.3s; display: block;
  }
  .move-rail a.active { background: var(--gold); opacity: 1; transform: rotate(45deg) scale(1.5); }
  @media (max-width: 700px) { .move-rail { display: none; } }

  /* ---------- shared section chrome ---------- */
  section { position: relative; padding: 7.5rem 2rem; max-width: 1100px; margin: 0 auto; }
  .move-tag {
    font-family: var(--mono); font-size: 0.8rem; color: var(--gold);
    letter-spacing: 0.25em; text-transform: uppercase;
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem;
  }
  .move-tag::after { content: ''; height: 1px; width: 70px; background: var(--line); }
  .move-tag .notation {
    border: 1px solid var(--line); padding: 0.2rem 0.65rem; border-radius: 2px;
    background: rgba(212,175,55,0.05); letter-spacing: 0.1em;
  }
  h2 {
    font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 3.4rem);
    font-weight: 600; line-height: 1.15; margin-bottom: 1rem; color: var(--cream);
  }
  h2 .piece-icon { color: var(--gold); margin-right: 0.35rem; }
  .section-sub { color: var(--muted); max-width: 640px; font-size: 1.02rem; margin-bottom: 3rem; }
  .section-sub em { color: var(--gold-soft); font-style: italic; font-family: var(--serif); font-size: 1.1em; }

  /* ---------- reveal animations ---------- */
  .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s cubic-bezier(.2,.7,.3,1), transform 0.9s cubic-bezier(.2,.7,.3,1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; }
  .reveal-d3 { transition-delay: 0.3s; } .reveal-d4 { transition-delay: 0.4s; }

  /* ================= HERO / OPENING ================= */
  .hero {
    min-height: 100vh; max-width: none; padding: 6rem 2rem 4rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
  }
  .hero-king {
    font-size: clamp(3.4rem, 8vw, 5.5rem); color: var(--gold); line-height: 1;
    text-shadow: 0 0 60px rgba(212,175,55,0.35);
    animation: kingFloat 5s ease-in-out infinite;
  }
  @keyframes kingFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .hero h1 {
    font-family: var(--serif); font-weight: 700;
    font-size: clamp(2.2rem, 6.5vw, 5rem); letter-spacing: 0.14em;
    margin: 0.5rem 0 0.2rem; text-indent: 0.14em;
    max-width: 95vw;
  }
  .hero .role {
    font-family: var(--mono); color: var(--gold); font-size: clamp(0.78rem, 1.8vw, 0.95rem);
    letter-spacing: 0.16em; text-indent: 0.16em; margin-bottom: 2rem;
    max-width: 92vw;
  }
  .hero .quote {
    font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 3vw, 1.7rem);
    color: var(--muted); max-width: 560px;
  }
  .hero .quote strong { color: var(--cream); font-weight: 600; }

  /* mini board in hero */
  .mini-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);   /* equal rows — squares stay square even with pieces in them */
    width: min(300px, 70vw); aspect-ratio: 1; margin: 2.6rem 0 2.2rem;
    border: 1px solid var(--line); box-shadow: 0 30px 80px var(--shadow), 0 0 0 6px rgba(212,175,55,0.04);
    border-radius: 4px; overflow: hidden;
  }
  .mini-board .sq {
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(14px, 3.4vw, 24px); line-height: 1;
    position: relative; min-width: 0; min-height: 0; overflow: hidden;
  }
  .mini-board .sq.l { background: var(--square-light); }
  .mini-board .sq.d { background: var(--square-dark); }
  .mini-board .sq .pc { position: relative; z-index: 2; transition: transform 1.1s cubic-bezier(.4,0,.2,1); }
  .mini-board .sq .pc.w { color: var(--piece-w); text-shadow: 0 2px 8px rgba(0,0,0,0.55); }
  .mini-board .sq .pc.b { color: var(--piece-b); text-shadow: 0 2px 8px rgba(0,0,0,0.35); }
  .mini-board .sq.hl::after {
    content: ''; position: absolute; inset: 0; background: rgba(212,175,55,0.22);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
  /* animated piece layer (hero board plays a real opening) */
  .mini-board { position: relative; }
  .piece-layer { position: absolute; inset: 0; z-index: 2; transition: opacity 0.55s; }
  .piece-layer.fading { opacity: 0; }
  .piece-layer.snap .apiece { transition: none; }
  .apiece {
    position: absolute; width: 12.5%; height: 12.5%;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(14px, 3.4vw, 24px); line-height: 1;
    transition: top 0.5s cubic-bezier(.5,0,.3,1), left 0.5s cubic-bezier(.5,0,.3,1);
    pointer-events: none;
  }
  .apiece.w { color: var(--piece-w); text-shadow: 0 2px 8px rgba(0,0,0,0.55); }
  .apiece.b { color: var(--piece-b); text-shadow: 0 2px 8px rgba(0,0,0,0.35); }
  .apiece.moving { z-index: 3; animation: pieceLift 0.9s ease; }
  @keyframes pieceLift {
    0%, 100% { transform: scale(1); filter: none; }
    45% { transform: scale(1.3); filter: drop-shadow(0 6px 6px rgba(0,0,0,0.5)); }
  }

  /* the fallen king — resignation at checkmate */
  .mini-board .sq .pc.topple {
    display: inline-block; transform-origin: 72% 92%;
    animation: kingTopple 1.7s cubic-bezier(.35,.6,.3,1) 0.7s forwards;
  }
  @keyframes kingTopple {
    0%   { transform: rotate(0deg); }
    12%  { transform: rotate(-7deg); }          /* a last wobble of defiance */
    55%  { transform: rotate(82deg) translate(4%, 4%); }
    68%  { transform: rotate(72deg) translate(3%, 3%); }  /* bounce */
    80%  { transform: rotate(80deg) translate(4%, 4%); }
    100% { transform: rotate(78deg) translate(4%, 4%); }
  }

  /* typewriter cursor for the hero quote */
  .type-cursor {
    display: inline-block; width: 2px; height: 1em; margin-left: 3px;
    background: var(--gold); vertical-align: -0.12em;
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  /* section-title pieces drop onto the board with a bounce */
  h2 .piece-icon { display: inline-block; }
  h2.reveal.in .piece-icon { animation: pieceDrop 0.9s cubic-bezier(.3,.9,.4,1.2) 0.15s both; }
  @keyframes pieceDrop {
    0%   { transform: translateY(-42px) rotate(-14deg); opacity: 0; }
    55%  { transform: translateY(0) rotate(0); opacity: 1; }
    70%  { transform: translateY(-9px); }
    85%  { transform: translateY(0) scaleY(0.92) scaleX(1.06); } /* squash on landing */
    100% { transform: none; opacity: 1; }
  }

  /* parallax pieces drifting behind everything */
  .float-pieces { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .float-pieces span {
    position: absolute; color: var(--gold); opacity: 0.05; line-height: 1;
    animation: drift 14s ease-in-out infinite;
    will-change: transform;
  }
  .float-pieces span:nth-child(even) { animation-duration: 19s; animation-delay: -6s; }
  @keyframes drift {
    0%, 100% { rotate: -6deg; }
    50% { rotate: 7deg; }
  }

  /* knight-hop pop when a rail square becomes active */
  .move-rail a.active { animation: railPop 0.5s cubic-bezier(.5,1.9,.4,1); }
  @keyframes railPop {
    0% { transform: rotate(45deg) scale(0.6); }
    60% { transform: rotate(45deg) scale(2); }
    100% { transform: rotate(45deg) scale(1.5); }
  }

  /* pawn promotion on the submit button */
  .btn-gold .promo { display: inline-block; }
  .btn-gold .promo.flip { animation: promoFlip 0.55s cubic-bezier(.3,.8,.4,1.2); }
  @keyframes promoFlip {
    0% { transform: rotateY(0) scale(0.5); }
    100% { transform: rotateY(360deg) scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .float-pieces { display: none; }
    .hero-king, .scroll-cue .arrow { animation: none; }
  }

  /* ---------- ♞ chess cursor: solid glyphs (♞/♛) — the "white" glyphs (♘/♕) are hollow and invisible when filled.
     dark + marble: white-filled piece with a dark outline; wood: dark piece with a light outline. ---------- */
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ctext x='2' y='22' font-size='22' fill='%23ffffff' stroke='%23111111' stroke-width='2' paint-order='stroke' stroke-linejoin='round'%3E%E2%99%9E%3C/text%3E%3C/svg%3E") 4 4, auto;
  }
  a, button, input, textarea, .skill-card, .project-card, .trophy-card, .dev-piece {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='2' y='25' font-size='25' fill='%23ffffff' stroke='%23111111' stroke-width='2.2' paint-order='stroke' stroke-linejoin='round'%3E%E2%99%9B%3C/text%3E%3C/svg%3E") 5 5, pointer;
  }

  html[data-theme="wood"] body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ctext x='2' y='21' font-size='21' fill='%231a1a1a' stroke='%23fff' stroke-width='0.8'%3E%E2%99%9E%3C/text%3E%3C/svg%3E") 4 4, auto;
  }
  html[data-theme="wood"] a, html[data-theme="wood"] button, html[data-theme="wood"] input,
  html[data-theme="wood"] textarea, html[data-theme="wood"] .skill-card, html[data-theme="wood"] .project-card,
  html[data-theme="wood"] .trophy-card, html[data-theme="wood"] .dev-piece {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext x='2' y='24' font-size='24' fill='%231a1a1a' stroke='%23fff' stroke-width='0.9'%3E%E2%99%9B%3C/text%3E%3C/svg%3E") 5 5, pointer;
  }

  /* ---------- ♔ loading screen: setting up the board ---------- */
  .loader {
    position: fixed; inset: 0; z-index: 999;
    background: var(--bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.6rem;
    transition: opacity 0.65s ease, visibility 0.65s;
  }
  .loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
  .loader-pieces { display: flex; gap: 0.9rem; border-bottom: 2px solid var(--line); padding: 0 0.6rem 0.7rem; }
  .loader-pieces span {
    font-size: clamp(1.7rem, 5vw, 2.4rem); color: var(--gold); line-height: 1;
    opacity: 0; animation: ldDrop 0.55s cubic-bezier(.3,1.4,.4,1) forwards;
  }
  .loader-pieces span:nth-child(1) { animation-delay: 0.15s; }
  .loader-pieces span:nth-child(2) { animation-delay: 0.33s; }
  .loader-pieces span:nth-child(3) { animation-delay: 0.51s; }
  .loader-pieces span:nth-child(4) { animation-delay: 0.69s; }
  .loader-pieces span:nth-child(5) { animation-delay: 0.87s; }
  .loader-pieces span:nth-child(6) { animation-delay: 1.05s; }
  @keyframes ldDrop {
    0% { opacity: 0; transform: translateY(-46px) rotate(-12deg); }
    62% { opacity: 1; transform: translateY(0) rotate(0); }
    78% { transform: translateY(-7px); }
    90% { transform: translateY(0) scaleY(0.93) scaleX(1.05); }
    100% { opacity: 1; transform: none; }
  }
  .loader-text {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--muted);
  }
  .loader-text .ld-dots::after {
    content: ''; animation: ldDots 1.2s steps(4) infinite;
  }
  @keyframes ldDots {
    0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; }
  }

  /* ---------- ⏱ chess clock (top-right) ---------- */
  .chess-clock {
    position: fixed; top: 4.4rem; right: 1.1rem; z-index: 90;
    font-family: var(--mono); font-size: 0.68rem;
    background: rgba(var(--nav-bg), 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line); border-radius: 4px;
    padding: 0.55rem 0.8rem; min-width: 150px;
  }
  .chess-clock .clk {
    display: flex; justify-content: space-between; gap: 1.2rem;
    color: var(--muted); padding: 0.15rem 0; letter-spacing: 0.08em;
  }
  .chess-clock .clk .tm { font-weight: 600; }
  .chess-clock .clk.active { color: var(--cream); }
  .chess-clock .clk.active .tm { color: var(--gold); }
  .chess-clock .clk.active .nm::after { content: ' ●'; color: var(--gold); animation: blink 1s steps(1) infinite; }
  .chess-clock .clk.flag .tm { color: #c0392b; animation: blink 0.6s steps(1) infinite; }
  .chess-clock .captured {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--line);
    min-height: 1.3em;
  }
  .chess-clock .cap-label { color: var(--muted); font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; }
  .chess-clock .cap-list { font-size: 1rem; letter-spacing: 0.15em; color: var(--piece-b); }
  .chess-clock .cap-list span { display: inline-block; animation: capPop 0.55s cubic-bezier(.3,1.6,.4,1) both; }
  @keyframes capPop {
    0% { transform: translateY(-14px) rotate(-40deg) scale(0); opacity: 0; }
    100% { transform: none; opacity: 1; }
  }

  /* ---------- 📜 move history (bottom-left) ---------- */
  .move-history {
    position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 90;
    font-family: var(--mono); font-size: 0.7rem; min-width: 110px;
    background: rgba(var(--nav-bg), 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line); border-radius: 4px; padding: 0.6rem 0.85rem;
  }
  .move-history .mh-title {
    color: var(--gold); font-size: 0.58rem; letter-spacing: 0.2em;
    text-transform: uppercase; margin-bottom: 0.35rem;
  }
  .move-history ol { list-style: none; }
  .move-history li {
    color: var(--muted); padding: 0.08rem 0; letter-spacing: 0.06em;
    animation: mhSlide 0.4s ease both;
  }
  .move-history li:last-child { color: var(--cream); }
  .move-history li.mate { color: var(--gold); font-weight: 600; }
  .move-history li .dots { opacity: 0.55; }
  .move-history .mh-empty { color: var(--muted); opacity: 0.6; font-style: italic; }
  @keyframes mhSlide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

  /* ---------- ♘ the walking knight (left rail) ---------- */
  .knight-rail {
    position: fixed; left: 1rem; top: 50%; transform: translateY(-50%);
    z-index: 90; width: 28px;
    border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  }
  .knight-rail .ksq { width: 28px; height: 28px; }
  .knight-rail .ksq.l { background: var(--square-light); }
  .knight-rail .ksq.d { background: var(--square-dark); }
  .knight-rail .krail-knight {
    position: absolute; left: 0; top: 0; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; color: var(--gold); line-height: 1;
    text-shadow: 0 0 10px rgba(212,175,55,0.5);
    transition: top 0.75s cubic-bezier(.4,1.4,.4,1);
  }
  @media (max-width: 1250px) { .knight-rail { display: none; } }

  /* ---------- 👑 king project + hover glow ---------- */
  .project-card .head .pc { transition: transform 0.35s, text-shadow 0.35s; }
  .project-card:hover .head .pc {
    transform: scale(1.2) translateY(-2px);
    text-shadow: 0 0 20px rgba(212,175,55,0.95), 0 0 45px rgba(212,175,55,0.5);
  }
  .project-card:hover { box-shadow: 0 24px 60px var(--shadow), 0 0 35px rgba(212,175,55,0.12); }
  .king-card { border-color: rgba(212,175,55,0.45); background: linear-gradient(150deg, rgba(212,175,55,0.07), var(--bg-soft) 55%); }
  .king-card::before {
    content: '★ BEST PROJECT'; position: absolute; top: 0.9rem; right: -2.1rem;
    transform: rotate(38deg); z-index: 1;
    font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.2em;
    background: var(--gold); color: var(--btn-text); padding: 0.22rem 2.4rem;
  }

  /* ================= MOBILE ================= */
  @media (max-width: 700px) {
    section { padding: 4.5rem 1.2rem; }
    .hero { padding: 5.5rem 1.2rem 3rem; min-height: 100svh; }

    nav { padding: 0.85rem 1.1rem; }
    .nav-logo { font-size: 1.15rem; }
    .theme-toggle { padding: 0.35rem 0.85rem; font-size: 0.6rem; letter-spacing: 0.12em; }
    .nav-actions { gap: 0.45rem; }
    .resume-btn { padding: 0.35rem 0.85rem; font-size: 0.6rem; letter-spacing: 0.12em; }

    /* keep the section rail on mobile, just smaller and tighter */
    .move-rail { display: flex; right: 0.55rem; gap: 0.8rem; }
    .move-rail a { width: 6px; height: 6px; }

    .mini-board { width: min(260px, 78vw); }
    .hero .quote { font-size: 1.1rem; padding: 0 0.5rem; }
    .hero .role { letter-spacing: 0.1em; text-indent: 0.1em; }

    .move-tag { font-size: 0.68rem; letter-spacing: 0.18em; flex-wrap: wrap; }
    .move-tag::after { width: 40px; }
    .section-sub { font-size: 0.92rem; margin-bottom: 2.2rem; }

    .about-grid { gap: 2.2rem; }
    .dev-piece { padding: 1.1rem 0.8rem; }
    .dev-piece .g { font-size: 1.6rem; }

    .skills-board { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .skill-card { padding: 1.3rem 1rem 1.2rem; }
    .skill-card h3 { font-size: 1.15rem; }

    .project-card { padding: 1.5rem 1.3rem 1.3rem; }
    .project-card .bg-piece { font-size: 7rem; }

    .movelist-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .move-row { padding: 1.2rem 1.1rem; }
    .move-row .num { padding-top: 0; }

    .endgame-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .trophy-card { padding: 1.4rem 0.9rem; }
    .trophy-card h3 { font-size: 1.1rem; }
    .trophy-card p { font-size: 0.75rem; }

    .checkmate .mate-board { width: min(210px, 62vw); }
    .contact-form { padding: 0 0.2rem; }
    .btn-gold { align-self: stretch; text-align: center; padding: 1rem 1.5rem; }
    .contact-links { gap: 1.2rem; }

    /* background pieces: smaller so they don't crowd a narrow screen */
    .float-pieces span { font-size: 3.5rem !important; opacity: 0.045; }

    /* HUD: compact clock, no floating history panel on small screens */
    .chess-clock { top: 3.7rem; right: 0.7rem; min-width: 118px; font-size: 0.6rem; padding: 0.4rem 0.6rem; }
    .chess-clock .cap-list { font-size: 0.85rem; }
    .move-history { display: none; }

    footer { font-size: 0.6rem; padding: 2rem 0.8rem; }
  }

  @media (max-width: 380px) {
    .skills-board, .endgame-grid { grid-template-columns: 1fr; }
    .dev-pieces { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    .hero h1 { letter-spacing: 0.1em; text-indent: 0.1em; }
  }

  .scroll-cue {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--muted); text-decoration: none;
    display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
    transition: color 0.3s;
  }
  .scroll-cue:hover { color: var(--gold); }
  .scroll-cue .arrow { animation: bob 1.8s ease-in-out infinite; color: var(--gold); font-size: 1rem; }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

  /* ================= ABOUT / DEVELOPMENT ================= */
  .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3.5rem; align-items: center; }
  @media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
  .about-text p { margin-bottom: 1.2rem; color: var(--text-body); }
  .about-text p strong { color: var(--cream); font-weight: 500; }
  .dev-pieces {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  }
  .dev-piece {
    border: 1px solid var(--line); border-radius: 4px; padding: 1.4rem 1rem;
    text-align: center; background: rgba(255,255,255,0.015);
    transition: transform 0.35s, border-color 0.35s, background 0.35s;
  }
  .dev-piece:hover { transform: translateY(-6px); border-color: var(--gold); background: rgba(212,175,55,0.05); }
  .dev-piece .g { font-size: 2rem; color: var(--gold); display: block; margin-bottom: 0.4rem; }
  .dev-piece .t { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }

  /* ================= SKILLS / CASTLING ================= */
  .skills-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.1rem; }
  .skill-card {
    position: relative; border: 1px solid var(--line); border-radius: 4px;
    padding: 1.8rem 1.4rem 1.5rem; overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), transparent);
    transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
  }
  .skill-card:nth-child(even) { background: linear-gradient(135deg, rgba(212,175,55,0.045), transparent); }
  .skill-card:hover { transform: translateY(-7px); border-color: var(--gold); box-shadow: 0 18px 45px var(--shadow); }
  .skill-card .glyph { font-size: 1.7rem; color: var(--gold); }
  .skill-card h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 0.5rem 0 0.2rem; }
  .skill-card p { font-size: 0.8rem; color: var(--muted); }
  .skill-card::after {
    content: attr(data-sq); position: absolute; right: 0.7rem; bottom: 0.4rem;
    font-family: var(--mono); font-size: 0.65rem; color: var(--gold); opacity: 0.35;
  }

  /* ================= PROJECTS / MIDDLEGAME ================= */
  .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.4rem; }
  .project-card {
    border: 1px solid var(--line); border-radius: 6px; padding: 2rem 1.8rem 1.7rem;
    background: var(--bg-soft); position: relative; overflow: hidden;
    transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
    display: flex; flex-direction: column;
  }
  .project-card:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 24px 60px var(--shadow); }
  .project-card .bg-piece {
    position: absolute; right: -1.2rem; bottom: -2.4rem; font-size: 9.5rem;
    color: var(--gold); opacity: 0.055; pointer-events: none; line-height: 1;
    transition: opacity 0.4s, transform 0.4s;
  }
  .project-card:hover .bg-piece { opacity: 0.11; transform: rotate(-8deg); }
  .project-card .head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
  .project-card .head .pc { font-size: 2rem; color: var(--gold); }
  .project-card .head .label {
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
  }
  .project-card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
  .project-card > p { font-size: 0.9rem; color: var(--text-body); margin: 0.5rem 0 1.2rem; flex: 1; }
  .project-card > p a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .project-card > p a:hover { color: var(--gold); border-bottom-color: var(--gold); }
  .tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .tags span {
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
    border: 1px solid var(--line); border-radius: 2px; padding: 0.2rem 0.55rem;
    color: var(--gold-soft); background: rgba(212,175,55,0.04);
  }

  /* ================= EXPERIENCE / STRATEGY ================= */
  .movelist { border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); overflow: hidden; }
  .movelist-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.9rem 1.6rem; border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
  }
  .movelist-head .eval { color: var(--gold); }
  .move-row {
    display: grid; grid-template-columns: 90px 200px 1fr; gap: 1.5rem;
    padding: 1.6rem; border-bottom: 1px solid rgba(212,175,55,0.07);
    transition: background 0.3s;
  }
  .move-row:last-child { border-bottom: none; }
  .move-row:hover { background: rgba(212,175,55,0.035); }
  .move-row .num { font-family: var(--mono); color: var(--gold); font-size: 0.85rem; padding-top: 0.2rem; }
  .move-row .period { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); padding-top: 0.3rem; letter-spacing: 0.04em; }
  .move-row h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
  .move-row .org { color: var(--gold-soft); font-size: 0.85rem; font-family: var(--mono); margin-bottom: 0.4rem; display: block; }
  .move-row p { font-size: 0.88rem; color: var(--text-body); }
  @media (max-width: 760px) {
    .move-row { grid-template-columns: 1fr; gap: 0.3rem; }
  }

  /* ================= ACHIEVEMENTS / ENDGAME ================= */
  .endgame-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.3rem; }
  .trophy-card {
    border: 1px solid var(--line); border-radius: 6px; padding: 2rem 1.6rem;
    text-align: center; background: rgba(255,255,255,0.015);
    transition: transform 0.35s, border-color 0.35s;
  }
  .trophy-card:hover { transform: translateY(-6px); border-color: var(--gold); }
  .trophy-card .g { font-size: 2.4rem; color: var(--gold); display: block; margin-bottom: 0.8rem; text-shadow: 0 0 30px rgba(212,175,55,0.3); }
  .trophy-card h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.4rem; }
  .trophy-card p { font-size: 0.83rem; color: var(--muted); }
  .trophy-card a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid var(--line); }

  /* ================= CONTACT / CHECKMATE ================= */
  .checkmate { text-align: center; padding-bottom: 5rem; }
  .checkmate .mate-board { margin: 0 auto 2.5rem; width: min(240px, 60vw); }
  .checkmate h2 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
  .checkmate .hash { font-family: var(--mono); color: var(--gold); font-size: 1rem; letter-spacing: 0.3em; margin-bottom: 0.6rem; }
  .contact-form {
    max-width: 520px; margin: 3rem auto 0; text-align: left;
    display: flex; flex-direction: column; gap: 1rem;
  }
  .contact-form label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
  .contact-form input, .contact-form textarea {
    width: 100%; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px;
    color: var(--cream); font-family: var(--sans); font-size: 0.95rem;
    padding: 0.85rem 1rem; margin-top: 0.35rem; outline: none; transition: border-color 0.3s;
    resize: vertical;
  }
  .contact-form input:focus, .contact-form textarea:focus { border-color: var(--gold); }
  .btn-gold {
    margin-top: 0.6rem; align-self: flex-start;
    font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--btn-text); background: var(--gold); border: none; border-radius: 3px;
    padding: 1rem 2.4rem; cursor: pointer; transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  }
  .btn-gold:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 12px 35px rgba(212,175,55,0.25); }
  .contact-links { display: flex; justify-content: center; gap: 2rem; margin-top: 3rem; flex-wrap: wrap; }
  .contact-links a {
    font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.15em;
    color: var(--muted); text-decoration: none; text-transform: uppercase; transition: color 0.3s;
  }
  .contact-links a:hover { color: var(--gold); }

  footer {
    text-align: center; padding: 2.5rem 1rem; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em; color: var(--muted);
  }
  footer .k { color: var(--gold); }