:root{
    --bg: #17140f;
    --panel: #201b14;
    --panel-2: #262019;
    --ivory: #ece3ce;
    --espresso: #3b2a20;
    --dark-sq: #4a3527;
    --light-sq: #d9cbb0;
    --sage: #7ea083;
    --sage-dim: #4d6152;
    --amber: #c98a3e;
    --red: #b5533a;
    --muted: #9c917d;
    --line: #382f24;
    /* Piece colours (overridable by piece themes) */
    --wp-fill:#f7f1e3; --wp-stroke:#17110b; --wp-sw:1.2px;
    --bp-fill:#1b140d; --bp-stroke:#cdbfa6; --bp-sw:1.1px;
  }
  /* ---- Board colour themes (swap the square colours) ---- */
  body[data-board="green"]{  --light-sq:#eeeed2; --dark-sq:#6f9150; }
  body[data-board="blue"]{   --light-sq:#dbe6ef; --dark-sq:#587a9a; }
  body[data-board="slate"]{  --light-sq:#cfd6dd; --dark-sq:#63757f; }
  body[data-board="coffee"]{ --light-sq:#d5b892; --dark-sq:#6b4a33; }
  body[data-board="rose"]{   --light-sq:#efdfe1; --dark-sq:#9a6a74; }
  /* ---- Piece colour themes ---- */
  body[data-pieces="bold"]{   --wp-fill:#ffffff; --wp-stroke:#0d0d0d; --wp-sw:1.7px; --bp-fill:#0b0b0b; --bp-stroke:#eeeeee; --bp-sw:1.5px; }
  body[data-pieces="wood"]{   --wp-fill:#ecd6ab; --wp-stroke:#3a2a1c; --wp-sw:1.1px; --bp-fill:#6b4327; --bp-stroke:#ecd6ab; --bp-sw:1.0px; }
  body[data-pieces="marble"]{ --wp-fill:#eef1f4; --wp-stroke:#2b3138; --wp-sw:1.1px; --bp-fill:#3a4048; --bp-stroke:#eef1f4; --bp-sw:1.0px; }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--ivory);
    font-family:'Source Serif 4', Georgia, serif;
    padding:16px 12px 60px;
  }
  @media (min-width:600px){ body{ padding:28px 18px 60px; } }
  h1,h2,h3{font-family:'Source Serif 4', Georgia, serif; margin:0;}
  .mono{font-family:'JetBrains Mono', ui-monospace, monospace;}
  .wrap{max-width:1040px; margin:0 auto;}
  .header{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; border-bottom:1px solid var(--line); padding-bottom:12px; flex-wrap:wrap; gap:8px;}
  .header .eyebrow{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber);}
  .header h1{font-size:20px; font-weight:700; line-height:1.25;}
  @media (min-width:600px){ .header h1{font-size:28px;} .header{margin-bottom:22px; padding-bottom:16px;} }
  .rating-badge{font-family:'JetBrains Mono',monospace; text-align:right; font-size:11px; color:var(--muted);}
  .rating-badge .num{display:block; font-size:20px; color:var(--sage); font-weight:700;}

  .tabs{display:flex; gap:2px; margin-bottom:16px; border-bottom:1px solid var(--line); overflow-x:auto;}
  .tab{
    padding:12px 14px; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:12px;
    letter-spacing:.04em; color:var(--muted); border-bottom:2px solid transparent; user-select:none; white-space:nowrap;
  }
  .tab.active{color:var(--ivory); border-bottom-color:var(--amber);}
  .tab:hover{color:var(--ivory);}

  .layout{display:flex; gap:24px; flex-wrap:wrap;}
  .board-col{flex:0 0 auto; width:100%; max-width:432px;}
  .side-col{flex:1 1 300px; min-width:0; width:100%;}
  @media (min-width:760px){ .board-col{width:auto;} .side-col{min-width:280px;} }

  #board, #pboard{
    display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr));
    width:min(92vw, 432px); height:min(92vw, 432px); aspect-ratio:1/1;
    border:3px solid var(--espresso); box-shadow:0 12px 32px rgba(0,0,0,.5);
  }
  .sq{ width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; line-height:1; font-size:clamp(20px, 8.5vw, 36px); position:relative; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
  /* Filled, high-contrast pieces: solid glyph + outline so the fill reads on any square */
  .sq.wp, .mini-sq.wp, .promo-row button.wp{ color:var(--wp-fill); -webkit-text-stroke:var(--wp-sw) var(--wp-stroke); paint-order:stroke fill; text-shadow:0 1px 2px rgba(0,0,0,.35); }
  .sq.bp, .mini-sq.bp, .promo-row button.bp{ color:var(--bp-fill); -webkit-text-stroke:var(--bp-sw) var(--bp-stroke); paint-order:stroke fill; text-shadow:0 1px 1px rgba(255,255,255,.15); }
  .sq.light{background:var(--light-sq);}
  .sq.dark{background:var(--dark-sq);}
  .sq.selected{outline:3px solid var(--amber); outline-offset:-3px;}
  .sq.lastmove{box-shadow:inset 0 0 0 999px rgba(201,138,62,0.22);}
  .sq.legal::after{
    content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:rgba(126,160,131,0.65);
  }
  .sq.legal.hascapture::after{
    width:48px; height:48px; border-radius:50%; background:none; border:4px solid rgba(181,83,58,0.7);
  }
  .sq.check{box-shadow:inset 0 0 0 999px rgba(181,83,58,0.35);}
  .sq.hint{outline:3px dashed var(--sage); outline-offset:-3px; background:rgba(126,160,131,0.18);}
  .file-labels, .rank-labels{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted);}
  .coord-cell{flex:1; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted);}

  .theory-section{margin-bottom:10px;}
  .theory-header{
    padding:14px 16px; background:var(--panel-2); border:1px solid var(--line); cursor:pointer;
    font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.03em; color:var(--ivory);
    display:flex; justify-content:space-between; align-items:center; user-select:none;
  }
  .theory-header:hover{border-color:var(--amber); color:var(--amber);}
  .theory-header .chev{transition:transform .2s ease; color:var(--amber);}
  .theory-header.open .chev{transform:rotate(90deg);}
  .theory-body{display:none; padding:18px 20px; border:1px solid var(--line); border-top:none; background:var(--panel);}
  .theory-body.open{display:block;}
  .theory-body p{font-size:14px; line-height:1.65; color:var(--ivory); margin:0 0 14px;}
  .theory-body p:last-child{margin-bottom:0;}
  .theory-body strong{color:var(--amber);}

  .diagram-wrap{display:flex; flex-direction:column; align-items:center; margin:16px 0; gap:8px;}
  .mini-board{
    display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr));
    width:min(70vw, 220px); height:min(70vw, 220px); aspect-ratio:1/1;
    border:2px solid var(--espresso); box-shadow:0 6px 18px rgba(0,0,0,.4);
  }
  .mini-sq{display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; overflow:hidden; line-height:1; font-size:clamp(14px,5vw,22px); position:relative;}
  .mini-sq.light{background:var(--light-sq);}
  .mini-sq.dark{background:var(--dark-sq);}
  .mini-sq.hi{box-shadow:inset 0 0 0 999px rgba(201,138,62,0.4);}
  .diagram-caption{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); text-align:center; max-width:280px;}
  .board-shell{display:flex; flex-direction:column; align-items:center; gap:8px;}

  .status-line{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--amber); min-height:18px; margin-top:6px;}
  .controls{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
  button{
    font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.03em; background:var(--panel-2);
    color:var(--ivory); border:1px solid var(--line); padding:11px 14px; cursor:pointer; border-radius:2px;
    min-height:40px;
  }
  button:hover{border-color:var(--amber); color:var(--amber);}
  button.primary{background:var(--sage-dim); border-color:var(--sage-dim); color:var(--ivory);}
  button.primary:hover{border-color:var(--sage); color:var(--sage);}
  button:disabled{opacity:.35; cursor:default;}
  button:disabled:hover{border-color:var(--line); color:var(--ivory);}

  select{
    font-family:'JetBrains Mono',monospace; background:var(--panel-2); color:var(--ivory);
    border:1px solid var(--line); padding:9px 10px; font-size:12.5px; min-height:40px;
  }

  .panel{background:var(--panel); border:1px solid var(--line); padding:18px; margin-bottom:16px;}
  .panel h3{font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--amber); font-family:'JetBrains Mono',monospace; margin-bottom:10px;}
  .panel p{font-size:13.5px; line-height:1.5; color:var(--muted); margin:0 0 8px;}

  .movelist{font-family:'JetBrains Mono',monospace; font-size:13px; max-height:260px; overflow-y:auto; color:var(--ivory);}
  .mv-entry{padding:6px 0; border-bottom:1px solid var(--line);}
  .mv-entry:last-child{border-bottom:none;}
  .mv-label{color:var(--muted); margin-right:4px;}
  .mv-not{color:var(--amber); font-weight:700;}
  .mv-gloss{display:block; font-family:'Source Serif 4', Georgia, serif; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.35;}

  .puzzle-nav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
  .puzzle-dot{
    width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace;
    font-size:11px; border:1px solid var(--line); cursor:pointer; color:var(--muted);
  }
  .puzzle-dot.current{border-color:var(--amber); color:var(--amber);}
  .puzzle-dot.solved{background:var(--sage-dim); color:var(--ivory); border-color:var(--sage-dim);}

  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
  .stat-box{background:var(--panel-2); padding:12px; border:1px solid var(--line);}
  .stat-box .label{font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
  .stat-box .value{font-family:'JetBrains Mono',monospace; font-size:20px; color:var(--sage); margin-top:4px;}

  .sparkline{width:100%; height:60px;}
  .disclaimer{font-size:11.5px; color:var(--muted); border-top:1px solid var(--line); margin-top:10px; padding-top:10px; line-height:1.5;}
  /* Show-me-why preview line — its own labelled row above the action buttons */
  .preview-caption-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; }
  .preview-label{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); white-space:nowrap; }
  #previewCaption{ font-size:13px; color:var(--amber); line-height:1.5; word-break:break-word; }

  /* Move Coach detail layout + theory block */
  .coach-line{ margin-bottom:4px; }
  .coach-line .k{ display:inline-block; min-width:76px; color:var(--muted); }
  .coach-detail{ margin:10px 0 0; font-family:'Source Serif 4', Georgia, serif; font-size:13.5px; line-height:1.55; color:var(--ivory); }
  .opp-note{ font-family:'Source Serif 4', Georgia, serif; font-size:13px; line-height:1.5; color:var(--ivory); background:var(--panel-2); border-left:3px solid var(--sage); padding:8px 10px; border-radius:2px; margin-bottom:10px; }
  .opp-note .opp-threat{ display:block; margin-top:5px; color:var(--red); }
  .coach-consequence{ margin:10px 0 0; font-family:'Source Serif 4', Georgia, serif; font-size:13.5px; line-height:1.55; color:var(--ivory); background:rgba(181,83,58,0.10); border-left:3px solid var(--red); padding:8px 10px; border-radius:2px; }
  .coach-conseq-h{ display:block; font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--red); margin-bottom:4px; }
  .coach-theory{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
  .coach-theory-h{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--sage); margin-bottom:7px; }
  .coach-theory ul{ margin:0; padding-left:16px; }
  .coach-theory li{ font-family:'Source Serif 4', Georgia, serif; font-size:13px; line-height:1.5; color:var(--muted); margin-bottom:7px; }
  .coach-theory li:last-child{ margin-bottom:0; }

  /* ---- Kids mode: strip the noise, big friendly encouragement ---- */
  .kid-cheer{ font-family:'Source Serif 4', Georgia, serif; font-size:22px; line-height:1.35; text-align:center; color:var(--ivory); background:var(--panel-2); border:2px solid var(--sage); border-radius:12px; padding:16px 14px; margin:12px 0; min-height:32px; }
  @media (min-width:600px){ .kid-cheer{ font-size:26px; } }
  .kid-toggle{ order:-1; }
  .kid-voice{ display:none; }
  body.kids-mode .kid-voice{ display:inline-block; }
  body.kids-mode .tabs{ display:none; }
  body.kids-mode .rating-badge{ display:none; }
  body.kids-mode .header .eyebrow{ display:none; }
  body.kids-mode #engineBadge{ display:none; }
  body.kids-mode #evalBarContainer{ display:none; }
  body.kids-mode .side-col{ display:none; }
  body.kids-mode #tab-puzzles, body.kids-mode #tab-progress, body.kids-mode #tab-theory{ display:none !important; }
  body.kids-mode #coachControls, body.kids-mode #appearanceControls{ display:none; }
  body.kids-mode #botDifficulty, body.kids-mode #redoBtn, body.kids-mode #resignBtn{ display:none; }
  body.kids-mode .header h1{ font-size:22px; }

  .app-version{ text-align:center; margin-top:30px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; letter-spacing:.06em; color:var(--muted); }
  .hidden{display:none !important;}
  .promo-row{display:flex; gap:6px; margin-top:8px;}
  .promo-row button{font-size:20px; padding:6px 12px;}