:root{
    --bg:#161012; --panel:#20171a; --panel2:#291d21;
    --sand:#e9dfca; --teal:#6d2a34;
    --gold:#c9a24b; --red:#d94a44;
    --ink:#efe6d6; --muted:#a79aa0; --line:#3a2b30;
    --sel:#c9a24b; --lastmove:rgba(201,162,75,.30); --check:#d94a44;
  }
  .ntx *{box-sizing:border-box}
  
  .ntx{background:radial-gradient(1200px 600px at 82% -8%, #33212a 0%, transparent 60%), var(--bg); color:var(--ink); font-family:Inter,system-ui,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; border-radius:16px;}
  .wrap{max-width:1060px; margin:0 auto; padding:28px 18px 64px}

  /* Masthead */
  header.mast{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:22px}
  .mast .eyebrow{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold)}
  .mast h1{font-family:Fraunces,serif; font-weight:900; font-size:clamp(30px,5vw,46px); margin:2px 0 0; letter-spacing:-.01em; line-height:1}
  .mast h1 em{font-style:italic; color:var(--gold)}
  .mast .sub{color:var(--muted); font-size:14px; margin-left:auto; max-width:230px; text-align:right}

  .game{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start}
  @media(max-width:860px){ .game{grid-template-columns:1fr} }

  /* Board */
  .board-frame{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:16px; box-shadow:0 24px 60px -30px #000;
  }
  .board{
    position:relative; width:100%; aspect-ratio:1/1;
    display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
    border-radius:8px; overflow:hidden; border:1px solid #0e1315;
    touch-action:manipulation; user-select:none;
  }
  .sq{position:relative; display:flex; align-items:center; justify-content:center}
  .sq.light{background:var(--sand)}
  .sq.dark{background:var(--teal)}
  /* faint coquina speckle on light squares */
  .sq.light::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
    background-image:radial-gradient(rgba(110,60,60,.16) .5px, transparent .6px);
    background-size:7px 7px;}
  .sq .coord{position:absolute; font-family:"JetBrains Mono",monospace; font-size:10px; opacity:.6}
  .sq .coord.file{right:3px; bottom:2px}
  .sq .coord.rank{left:3px; top:2px}
  .sq.light .coord{color:#8a5a52}
  .sq.dark .coord{color:#cfe0dc}

  .piece{
    font-size:min(8.4vw,58px); line-height:1; cursor:pointer; position:relative; z-index:2;
    transition:transform .12s ease;
  }
  .piece.w{color:#f7efe0; text-shadow:0 1px 0 #b9ae97, 0 2px 5px rgba(0,0,0,.45)}
  .piece.b{color:#232b2d; text-shadow:0 1px 0 rgba(255,255,255,.18), 0 2px 5px rgba(0,0,0,.5)}
  .board.thinking .piece{cursor:default}

  .sq.sel{box-shadow:inset 0 0 0 4px var(--sel)}
  .sq.last{background-color:var(--teal)}         /* overridden below via overlay */
  .sq .lastdot{position:absolute; inset:0; background:var(--lastmove); z-index:1}
  .sq.check .kingring{position:absolute; inset:8%; border-radius:50%;
    box-shadow:0 0 0 4px var(--check), 0 0 18px 2px rgba(178,58,53,.7); z-index:1}
  .hint{position:absolute; width:30%; height:30%; border-radius:50%;
    background:rgba(20,24,26,.32); z-index:1; pointer-events:none}
  .sq.dark .hint{background:rgba(230,213,184,.34)}
  .hint.cap{width:82%; height:82%; background:transparent;
    box-shadow:inset 0 0 0 4px rgba(20,24,26,.34); border-radius:50%}
  .sq.dark .hint.cap{box-shadow:inset 0 0 0 4px rgba(230,213,184,.4)}

  /* Side panel */
  .panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden}
  .sunny{display:flex; gap:12px; padding:16px; border-bottom:1px solid var(--line); background:var(--panel2)}
  .avatar{flex:0 0 46px; width:46px; height:46px; border-radius:12px;
    background:radial-gradient(circle at 32% 30%, #7c313d, #5a2530 55%, #3a1720);
    box-shadow:0 0 0 1px rgba(0,0,0,.4), inset 0 -6px 12px rgba(20,8,10,.5); position:relative}
  .avatar::after{content:"♟"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#3a230c; font-size:24px}
  .say{min-height:44px}
  .say .who{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
  .say .line{font-family:Fraunces,serif; font-size:16px; line-height:1.35}
  .say .line .mark{color:var(--gold); font-weight:600}
  .say .line .slip{color:var(--gold); font-weight:600; animation:slipin .3s ease}
  @keyframes slipin{from{opacity:0; letter-spacing:.1em} to{opacity:1; letter-spacing:normal}}
  .say .think{color:var(--muted); font-style:italic}
  .say .think::after{content:"…"; animation:dots 1.2s steps(4,end) infinite; width:1ch; display:inline-block; overflow:hidden; vertical-align:bottom}
  @keyframes dots{0%{width:0}100%{width:1.2ch}}

  .status{padding:12px 16px; border-bottom:1px solid var(--line); font-size:14px; display:flex; align-items:center; gap:8px}
  .status .dot{width:8px; height:8px; border-radius:50%; background:var(--gold)}
  .status.check .dot{background:var(--red)}
  .status.over .dot{background:#6fae7a}
  .status b{font-weight:600}

  .controls{padding:14px 16px; display:flex; flex-direction:column; gap:12px; border-bottom:1px solid var(--line)}
  .seg{display:flex; gap:6px}
  .seg .ntx button{flex:1; padding:8px 4px; font-size:12.5px}
  .row{display:flex; gap:8px}
  label.fld{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px}
  .ntx button{
    font-family:Inter,sans-serif; font-size:13px; color:var(--ink); cursor:pointer;
    background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:9px 12px;
    transition:border-color .15s, background .15s;
  }
  .ntx button:hover{border-color:var(--gold)}
  .ntx button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
  .ntx button.on{background:var(--gold); color:#231405; border-color:var(--gold); font-weight:600}
  .ntx button.primary{background:var(--gold); color:#231405; border-color:var(--gold); font-weight:600}
  .ntx button.ghost{background:transparent}
  .ntx button:disabled{opacity:.45; cursor:default}

  .sheet{padding:6px 8px 16px}
  .sheet h3{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:10px 8px 6px}
  .moves{font-family:"JetBrains Mono",monospace; font-size:12.5px; max-height:210px; overflow:auto}
  .moves table{width:100%; border-collapse:collapse}
  .moves td{padding:3px 8px}
  .moves .no{color:var(--muted); width:34px}
  .moves .mv{cursor:default}
  .moves tr:nth-child(even){background:rgba(255,255,255,.02)}

  /* Promotion picker */
  .promo{position:absolute; inset:0; background:rgba(12,16,18,.72); z-index:20; display:none;
    align-items:center; justify-content:center}
  .promo.show{display:flex}
  .promo .card{background:var(--panel); border:1px solid var(--gold); border-radius:12px; padding:14px; text-align:center}
  .promo .card p{margin:0 0 10px; font-size:13px; color:var(--muted)}
  .promo .opts{display:flex; gap:8px}
  .promo .opts .ntx button{font-size:34px; line-height:1; padding:6px 10px; color:#f7efe0}

  footer{margin-top:26px; color:var(--muted); font-size:12px; text-align:center}
  footer a{color:var(--gold); text-decoration:none}

  @media(prefers-reduced-motion:reduce){ .ntx *{animation:none!important; transition:none!important} }