/* Desktop live chess notebook — only present while an actual match is in progress or reviewed. */
@media(min-width:901px){
  /* The board keeps exactly the idle width/height during play.
     The notebook is out of the board's layout flow, so it cannot shrink squares. */
  :root{--chess-notebook-width:clamp(250px,20vw,640px);--chess-notebook-gap:6px;--notebook-index-width:46px;--notebook-grid-line:rgba(188,219,209,.30);--notebook-row-height:28px;--notebook-title-height:54px;--notebook-columns-height:30px;--notebook-header-gold:rgba(224,181,103,.30)}
  /* The notation is mounted on document.body; no game-state rule touches
     desktop-board-stage or the approved chessboard position and dimensions. */
  .desktop-move-notebook{
    position:fixed;
    /* Board stage is z-index:30. Keep it visually above the notebook
       as a final safeguard even if a stale stylesheet sets a wrong width. */
    z-index:29;
    left:var(--notebook-docked-left,12px);
    top:var(--notebook-board-top,6px);
    transform:none;
    direction:rtl;
    width:var(--notebook-docked-width,var(--chess-notebook-width));
    height:var(--notebook-board-height,calc(100dvh - 16px));
    /* Match the board's real bottom, even when its box exceeds the viewport. */
    max-height:none;
    min-height:0;
    display:flex;flex-direction:column;gap:0;
    /* Only one 1px frame per top row, not a doubled parent + child border. */
    border:0;
    border-radius:0;
    background:linear-gradient(170deg,rgba(5,55,59,.98),rgba(2,42,49,.99));
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    overflow:hidden;pointer-events:auto;
    color:#f4efe6;
    font-family:Arial,Tahoma,sans-serif;
    box-sizing:border-box;
  }
  /* A full-size notation table is shown throughout every desktop game.
     No automatically collapsed hamburger strip exists. */
  /* Shorter viewports keep all three columns visible, never a hamburger.
     Width is clamped to the real space beside the chessboard by JS. */
  .desktop-move-notebook[data-narrow="true"]{--notebook-index-width:30px}
  .desktop-move-notebook[data-narrow="true"] .move-notebook-header{
    padding:4px 5px;min-height:46px;flex-basis:46px;gap:5px;
  }
  .desktop-move-notebook[data-narrow="true"] .move-notebook-header strong{font-size:12px}
  .desktop-move-notebook[data-narrow="true"] .move-notebook-header small{font-size:9px}
  .desktop-move-notebook[data-narrow="true"] .move-notebook-emblem{font-size:14px}
  .desktop-move-notebook[data-narrow="true"] .move-notebook-columns{font-size:10px;min-height:28px;flex-basis:28px;height:28px}
  .desktop-move-notebook[data-narrow="true"] .move-notebook-move{font-size:11px}
  .desktop-move-notebook[data-narrow="true"] .move-notebook-rows{
    background-image:linear-gradient(to right,transparent calc(50% - 15.5px),var(--notebook-grid-line) calc(50% - 15.5px),var(--notebook-grid-line) calc(50% - 14.5px),transparent calc(50% - 14.5px)),linear-gradient(to right,transparent calc(100% - 30.5px),var(--notebook-grid-line) calc(100% - 30.5px),var(--notebook-grid-line) calc(100% - 29.5px),transparent calc(100% - 29.5px)),repeating-linear-gradient(to bottom,transparent 0px,transparent 27px,var(--notebook-grid-line) 27px,var(--notebook-grid-line) 28px);
  }
  .move-notebook-header{padding:5px 11px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--notebook-header-gold);min-height:var(--notebook-title-height);flex:0 0 var(--notebook-title-height);background:linear-gradient(100deg,rgba(1,99,99,.54),rgba(2,57,63,.92));box-sizing:border-box}
  .move-notebook-emblem{color:#e6c58c;font:normal 24px/1 serif;opacity:.90;flex:0 0 auto}
  .move-notebook-header>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:3px;flex:1 1 auto;text-align:center}
  .move-notebook-header strong{font-size:17px;color:#f5ebd4;line-height:1.2;font-weight:900}
  .move-notebook-header small{font-size:12px;color:#b6d5d0;line-height:1.45}
  .move-notebook-columns,.move-notebook-row{display:grid;grid-template-columns:var(--notebook-index-width) minmax(0,1fr) minmax(0,1fr);direction:rtl;align-items:stretch}
  .move-notebook-columns{position:relative;z-index:2;flex:0 0 var(--notebook-columns-height);height:var(--notebook-columns-height);min-height:var(--notebook-columns-height);padding:0;border:1px solid var(--notebook-header-gold);border-top:0;background:rgba(12,76,83,.82);font-size:12px;font-weight:900;color:#f5e9ce;text-align:center;box-sizing:border-box}
  .move-notebook-rows{overflow-y:auto;min-height:0;flex:1 1 auto;border-inline:1px solid var(--notebook-grid-line);scrollbar-width:thin;scrollbar-color:rgba(185,177,136,.45) transparent;overscroll-behavior:contain;background-color:rgba(4,72,84,.62);background-image:linear-gradient(to right,transparent calc(50% - 23.5px),var(--notebook-grid-line) calc(50% - 23.5px),var(--notebook-grid-line) calc(50% - 22.5px),transparent calc(50% - 22.5px)),linear-gradient(to right,transparent calc(100% - 46.5px),var(--notebook-grid-line) calc(100% - 46.5px),var(--notebook-grid-line) calc(100% - 45.5px),transparent calc(100% - 45.5px)),repeating-linear-gradient(to bottom,transparent 0px,transparent 27px,var(--notebook-grid-line) 27px,var(--notebook-grid-line) 28px)}
  .move-notebook-row{height:var(--notebook-row-height);min-height:var(--notebook-row-height);padding:0;border:0;font-variant-numeric:tabular-nums;box-sizing:border-box}
  .move-notebook-row:nth-child(even){background:rgba(255,255,255,.025)}
  .move-notebook-columns>span,.move-notebook-row>span{min-width:0;display:flex;align-items:center;justify-content:center;padding:0 3px;border-inline-end:1px solid var(--notebook-grid-line)}
  .move-notebook-columns>span:last-child,.move-notebook-row>span:last-child{border-inline-end:0}
  .move-notebook-columns>span:not(:last-child){border-inline-end-color:var(--notebook-header-gold)}
  .move-notebook-row:last-child{background:rgba(229,189,111,.15);box-shadow:inset 3px 0 0 rgba(232,181,103,.68)}
  .move-notebook-index{font-size:12px;color:#d3ded8;text-align:center;direction:ltr}
  .move-notebook-move{font-size:14px;font-weight:750;letter-spacing:.1px;color:#f0eee7;text-align:center;direction:ltr;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .move-notebook-empty{margin:12px 8px;padding:9px 7px;text-align:center;font-size:12px;line-height:1.6;color:#d8e8e2;background:rgba(4,60,70,.90);border:1px solid rgba(188,219,209,.28)}
  .move-notebook-review{flex:0 0 auto;max-height:43%;overflow-y:auto;padding:12px 13px;border:1px solid var(--notebook-grid-line);border-top:1px solid rgba(224,181,103,.48);background:rgba(2,51,59,.92);color:#c7ded5;font-size:12px;line-height:1.7;scrollbar-width:thin}
  .move-notebook-review-title{display:block;margin-bottom:7px;font-size:12px;color:#f0d39b}
  .move-notebook-accuracy{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:7px 0}
  .move-notebook-accuracy>div{padding:7px 4px;background:rgba(255,255,255,.035);border:1px solid rgba(224,181,103,.25);border-radius:0;text-align:center}
  .move-notebook-accuracy small{display:block;font-size:10px;color:#abbebb}
  .move-notebook-accuracy strong{display:block;font-size:19px;color:#f2d393;direction:ltr}
  .move-notebook-note{font-size:10px;color:#aec0c1;margin:7px 0;line-height:1.6}
  .move-notebook-key-title{font-weight:800;color:#e9d0a0;display:block;margin:7px 0 4px}
  .move-notebook-key{padding:5px 0;border-bottom:1px solid rgba(224,181,103,.1);font-size:10px}
  .desktop-board-square .board-coordinate{
    position:absolute;z-index:8;display:block;font:800 clamp(8px,.65vw,11px)/1 Arial,sans-serif;
    color:rgba(35,55,52,.72);text-shadow:0 1px rgba(255,255,255,.15);
    pointer-events:none;user-select:none;
  }
  .desktop-board-square.dark .board-coordinate{color:rgba(255,245,219,.82);text-shadow:0 1px 1px rgba(0,0,0,.23)}
  .desktop-board-square .board-coordinate-rank{top:3px;left:4px}
  .desktop-board-square .board-coordinate-file{bottom:3px;right:4px}
}
@media(min-width:901px) and (max-width:1170px){
  :root{--chess-notebook-width:250px;--chess-notebook-gap:6px}
  .desktop-move-notebook{border-radius:0}
  .move-notebook-header{min-height:46px;flex-basis:46px;padding:4px 6px}
  .move-notebook-header strong{font-size:15px}
  .move-notebook-columns,.move-notebook-row{grid-template-columns:var(--notebook-index-width) 1fr 1fr}
  .move-notebook-move{font-size:12px}
}