#chess-app{
  
  --ivory:#EFE6D3; --forest:#4E6B52; --bezel:#24282A; --brass:#C9A14A;
  --piece-w:#F8F4EB; --piece-w-line:#2A2622;
  --piece-b:#23272B; --piece-b-line:#0A0C0D;
  
  --page:#E6E3DC; --panel:#FBF9F5; --ink:#1E2124; --ink-soft:#6B6F73;
  --rule:#D9D5CC; --focus:#2F6F8F;
  --bez:clamp(13px,3.4cqw,20px);
  container-type:inline-size;
  box-sizing:border-box; max-width:600px; margin:0 auto; padding:16px;
  background:var(--page); color:var(--ink); border-radius:12px;
  font-family:var(--body,system-ui,sans-serif);
  -webkit-tap-highlight-color:transparent;
}
#chess-app[data-theme="dark"],
#chess-app[data-theme="auto"]{color-scheme:light dark}
@media (prefers-color-scheme:dark){
  #chess-app[data-theme="auto"]{
    --ivory:#D7CBB2; --forest:#43604A; --bezel:#111416; --brass:#D2A94F;
    --page:#15181A; --panel:#1C2023; --ink:#E7E4DD; --ink-soft:#9BA0A4;
    --rule:#2A2F33; --focus:#6FB2D2;
  }
}
#chess-app[data-theme="dark"]{
  --ivory:#D7CBB2; --forest:#43604A; --bezel:#111416; --brass:#D2A94F;
  --page:#15181A; --panel:#1C2023; --ink:#E7E4DD; --ink-soft:#9BA0A4;
  --rule:#2A2F33; --focus:#6FB2D2;
}
#chess-app *,#chess-app *::before,#chess-app *::after{box-sizing:border-box}


#chess-app .cg-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
#chess-app .cg-state{
  font-family:var(--head,Georgia,serif);
  font-size:clamp(17px,4cqw,21px); line-height:1.25; letter-spacing:.1px;
}
#chess-app .cg-note{display:block;font-family:inherit;font-size:12.5px;color:var(--ink-soft);margin-top:3px}
#chess-app .cg-turn{
  display:inline-block;width:.62em;height:.62em;border-radius:50%;margin-right:.5em;
  border:1px solid var(--piece-w-line);background:var(--piece-w);vertical-align:baseline;
}
#chess-app .cg-turn[data-c="b"]{background:var(--piece-b);border-color:var(--piece-b-line)}
#chess-app .cg-spin{
  width:14px;height:14px;border-radius:50%;flex:none;align-self:center;
  border:2px solid var(--rule);border-top-color:var(--brass);animation:cg-rot .7s linear infinite;
  opacity:0;transition:opacity .2s;
}
#chess-app .cg-spin.on{opacity:1}
@keyframes cg-rot{to{transform:rotate(360deg)}}


#chess-app .cg-tray{
  display:flex;align-items:center;gap:2px;min-height:26px;padding:2px 2px;
  font-size:12px;color:var(--ink-soft);
}
#chess-app .cg-tray svg{width:17px;height:17px;flex:none;margin-right:-5px}
#chess-app .cg-edge{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;margin-left:9px;color:var(--ink);font-variant-numeric:tabular-nums;
}
#chess-app .cg-who{
  font-family:var(--head,Georgia,serif);font-size:13px;color:var(--ink-soft);
  margin-right:8px;min-width:3.2em;
}


#chess-app .cg-frame{
  position:relative;padding:var(--bez);background:var(--bezel);border-radius:9px;
  box-shadow:0 1px 1px rgba(0,0,0,.18),0 10px 28px -12px rgba(0,0,0,.45);
}

#chess-app .cg-frame{width:fit-content;margin-inline:auto}
#chess-app .cg-board{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  aspect-ratio:1/1; width:100%;
  overflow:hidden;border-radius:2px;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
#chess-app .cg-sq{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:0;cursor:pointer;outline:none;
}
#chess-app .cg-sq.lt{background:var(--ivory)}
#chess-app .cg-sq.dk{background:var(--forest)}
#chess-app .cg-sq::before{
  content:"";position:absolute;inset:0;opacity:0;background:var(--brass);
  transition:opacity .14s ease;pointer-events:none;
}
#chess-app .cg-sq.last::before{opacity:.3}
#chess-app .cg-sq.sel::before{opacity:.46}
#chess-app .cg-sq.hover::before{opacity:.26}
#chess-app .cg-sq.chk::before{
  opacity:1;background:radial-gradient(circle closest-side,rgba(198,54,46,.92),rgba(198,54,46,0));
}
#chess-app .cg-sq:focus-visible{box-shadow:inset 0 0 0 3px var(--focus);z-index:4}
#chess-app .cg-hint{
  position:absolute;width:26%;height:26%;border-radius:50%;
  background:rgba(32,28,20,.3);pointer-events:none;
}
#chess-app .cg-sq.dk .cg-hint{background:rgba(10,14,10,.34)}
#chess-app .cg-take{
  position:absolute;inset:5%;border-radius:50%;
  box-shadow:inset 0 0 0 .34em rgba(32,28,20,.3);pointer-events:none;
}
#chess-app .cg-sq.dk .cg-take{box-shadow:inset 0 0 0 .34em rgba(10,14,10,.34)}


#chess-app .cg-p{
  position:relative;z-index:2;width:86%;height:86%;pointer-events:none;
  stroke-linejoin:round;stroke-linecap:round;stroke-width:1.15;
  filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.28));
}
#chess-app .cg-p.w{fill:var(--piece-w);stroke:var(--piece-w-line)}
#chess-app .cg-p.b{fill:var(--piece-b);stroke:var(--piece-b-line)}
#chess-app .cg-p.drag{opacity:0}
#chess-app .cg-ghost{
  position:absolute;z-index:30;pointer-events:none;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.4));transform-origin:50% 50%;
}


#chess-app .cg-ranks,#chess-app .cg-files{
  position:absolute;display:grid;pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(8px,1.85cqw,11px);color:rgba(236,230,214,.62);
}
#chess-app[data-theme="dark"] .cg-ranks,#chess-app[data-theme="dark"] .cg-files{color:rgba(222,216,200,.5)}
#chess-app .cg-ranks{left:0;top:var(--bez);bottom:var(--bez);width:var(--bez);grid-template-rows:repeat(8,1fr)}
#chess-app .cg-files{left:var(--bez);right:var(--bez);bottom:0;height:var(--bez);grid-template-columns:repeat(8,1fr)}
#chess-app .cg-ranks span,#chess-app .cg-files span{display:grid;place-items:center}


#chess-app .cg-veil{
  position:absolute;inset:0;z-index:40;display:none;place-items:center;
  background:rgba(14,16,17,.62);border-radius:9px;padding:12px;
}
#chess-app .cg-veil.on{display:grid}
#chess-app .cg-card{
  background:var(--panel);border-radius:10px;padding:14px 16px;text-align:center;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6);max-width:100%;
  animation:cg-rise .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes cg-rise{from{opacity:0;transform:translateY(7px) scale(.98)}}
#chess-app .cg-card h3{
  margin:0 0 10px;font-family:var(--head,Georgia,serif);
  font-size:17px;font-weight:600;letter-spacing:.1px;
}
#chess-app .cg-card p{margin:0 0 12px;font-size:13px;color:var(--ink-soft)}
#chess-app .cg-picks{display:flex;gap:7px;justify-content:center}
#chess-app .cg-picks button{
  width:clamp(46px,11cqw,58px);height:clamp(46px,11cqw,58px);padding:5px;
  display:grid;place-items:center;background:var(--ivory);border:1px solid var(--rule);
}
#chess-app .cg-picks button:hover,#chess-app .cg-picks button:focus-visible{background:var(--brass);border-color:var(--brass)}
#chess-app .cg-picks svg{width:100%;height:100%;stroke-linejoin:round;stroke-width:1.15;
  fill:var(--piece-w);stroke:var(--piece-w-line)}
#chess-app .cg-picks.b svg{fill:var(--piece-b);stroke:var(--piece-b-line)}


#chess-app .cg-moves{
  margin-top:12px;height:84px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:7px 4px 7px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  scrollbar-width:thin;
}
#chess-app .cg-row{display:grid;grid-template-columns:2.6em 1fr 1fr;gap:4px;padding:1.5px 8px;line-height:1.55}
#chess-app .cg-row:nth-child(odd){background:color-mix(in srgb,var(--ink) 3.5%,transparent)}
#chess-app .cg-no{color:var(--ink-soft);text-align:right;padding-right:6px}
#chess-app .cg-moves em{
  display:block;padding:10px 12px;font-style:normal;font-size:12.5px;color:var(--ink-soft);
  font-family:var(--head,Georgia,serif);
}
#chess-app .cg-row b{font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--brass) 34%,transparent);
  border-radius:3px;padding:0 3px;margin:0 -3px}


#chess-app .cg-acts{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
#chess-app button{
  font:inherit;font-size:13px;line-height:1;padding:9px 12px;cursor:pointer;color:var(--ink);
  background:var(--panel);border:1px solid var(--rule);border-radius:7px;
  transition:background .14s,border-color .14s,color .14s;
}
#chess-app button:hover{border-color:var(--brass)}
#chess-app button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#chess-app button:active{transform:translateY(.5px)}
#chess-app button[aria-pressed="true"]{color:var(--ink-soft)}
#chess-app .cg-sets{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#chess-app .cg-seg{display:flex;border:1px solid var(--rule);border-radius:7px;overflow:hidden;background:var(--panel)}
#chess-app .cg-seg button{border:0;border-radius:0;padding:8px 11px;color:var(--ink-soft);background:transparent}
#chess-app .cg-seg button+button{border-left:1px solid var(--rule)}
#chess-app .cg-seg button[aria-checked="true"]{background:var(--brass);color:#0d1b36}
#chess-app[data-theme="dark"] .cg-seg button[aria-checked="true"]{color:#0d1b36}
#chess-app .cg-seg button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
#chess-app .cg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  #chess-app *,#chess-app *::before{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================
   Chess Labs look - light, flat, no stacked panels
   ============================================================ */
#chess-app{
  --ivory:#eaf0f9;          /* light square  */
  --forest:#aec4e4;         /* dark square   */
  --bezel:transparent;
  --brass:#1f5fbf;          /* highlight     */
  --piece-w:#ffffff; --piece-w-line:#27395c;
  --piece-b:#17294b; --piece-b-line:#0b1630;
  --page:transparent; --panel:#ffffff;
  --ink:#0d1b36; --ink-soft:#5d6e8c;
  --rule:#dde5f1; --focus:#1f5fbf;
  --bez:0px;
  max-width:none; width:100%; padding:0; border-radius:0;
  font-family:var(--body,system-ui,sans-serif);
}
#chess-app .cg-frame{
  width:100%; margin:0; padding:0; border-radius:14px;
  background:transparent; box-shadow:none; overflow:hidden;
  border:1px solid var(--rule);
}
#chess-app .cg-board{width:100%!important;height:auto!important;aspect-ratio:1}
#chess-app .cg-ranks,#chess-app .cg-files{display:none}
#chess-app .cg-sq::before{background:var(--brass)}
#chess-app .cg-sq.last::before{opacity:.18}
#chess-app .cg-sq.sel::before{opacity:.30}
#chess-app .cg-hint{background:rgba(var(--accent-rgb),.30)}
#chess-app .cg-sq.dk .cg-hint{background:rgba(var(--ink-rgb),.26)}
#chess-app .cg-take{box-shadow:inset 0 0 0 .32em rgba(var(--accent-rgb),.34)}
#chess-app .cg-sq.dk .cg-take{box-shadow:inset 0 0 0 .32em rgba(var(--ink-rgb),.3)}
#chess-app .cg-p{filter:none}

/* status line */
#chess-app .cg-head{margin:0 0 10px;align-items:center}
#chess-app .cg-state{font-size:14px;font-weight:500;color:var(--ink)}
#chess-app .cg-note{font-size:12px;color:var(--ink-soft);margin-top:2px}
#chess-app .cg-turn{width:9px;height:9px;border-width:1px}

/* trays + moves */
#chess-app .cg-tray{min-height:0;margin:0;color:var(--ink-soft)}
#chess-app .cg-moves{
  background:transparent;border:0;border-top:1px solid var(--rule);
  border-radius:0;margin-top:14px;padding:12px 0 0;min-height:0;max-height:92px;
  font-size:13px;color:var(--ink-soft);
}

/* controls */
#chess-app .cg-acts,#chess-app .cg-sets{margin-top:12px;gap:8px}
#chess-app button{
  font-family:inherit;border-radius:8px;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .18s ease;
}
#chess-app .cg-acts button{
  background:var(--surface);border:1px solid var(--rule);color:var(--ink);
  font-size:13px;font-weight:500;padding:9px 14px;
}
#chess-app .cg-acts button:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-1px)}
#chess-app .cg-seg{background:var(--tint);border:1px solid var(--rule);border-radius:9px;padding:2px;gap:2px}
#chess-app .cg-seg button{
  background:transparent;border:0;color:var(--ink-soft);
  font-size:12.5px;font-weight:500;padding:7px 12px;
}
#chess-app .cg-seg button[aria-checked="true"]{background:var(--surface);color:var(--brass);box-shadow:none}
#chess-app button:active{transform:scale(.98)}

/* dialogs */
#chess-app .cg-veil{background:rgba(var(--ink-rgb),.55);backdrop-filter:blur(2px)}
#chess-app .cg-card{background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:none;color:var(--ink)}
#chess-app .cg-card h3{font-size:19px;color:var(--ink)}
#chess-app .cg-card #cgAgain{background:var(--brass);color:var(--surface);border:0;padding:11px 20px;font-weight:500}

/* decorative animation only - nothing here is interactive */
#chess-app{pointer-events:none;user-select:none}
#chess-app .cg-head,
#chess-app .cg-acts,
#chess-app .cg-sets,
#chess-app .cg-tray,
#chess-app .cg-moves,
#chess-app .cg-note,
#chess-app .cg-spin,
#chess-app .cg-veil{display:none!important}
#chess-app .cg-head{margin-bottom:12px}
#chess-app .cg-sq{cursor:default}

/* a travelling piece lifts off the board and sets back down */
#chess-app .cg-p{transition:filter .5s ease}
#chess-app .cg-p.cg-moving{
  z-index:6;
  filter:drop-shadow(0 10px 7px rgba(var(--ink-rgb),.32));
}

/* ---------- 3D: a real board on a table ---------- */
#chess-app{--tilt:30deg; --lift:12%;}
#chess-app .cg-frame{
  perspective:1500px; perspective-origin:50% 42%;
  border:0; border-radius:0; overflow:visible;
  padding:3% 7% 14%;
}
#chess-app .cg-board{
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--tilt) + var(--lean,0deg))) rotateZ(var(--spin,0deg));
  transition:transform .12s linear;
  border-radius:3px;
  box-shadow:
    0 0 0 7px var(--edge),
    0 7px 0 7px var(--edge-dark),
    0 14px 0 7px var(--ink),
    0 22px 26px 4px rgba(var(--ink-rgb),.28),
    0 46px 46px rgba(var(--ink-rgb),.18);
}
#chess-app .cg-sq{transform-style:preserve-3d}
#chess-app .cg-p{
  --cg-stand:rotateX(calc(-1 * (var(--tilt) + var(--lean,0deg))));
  transform:var(--cg-stand);
  transform-origin:50% 92%;
  transform-style:preserve-3d;
  margin-bottom:var(--lift);
  width:98%;height:98%;
  filter:drop-shadow(0 3px 3px rgba(var(--ink-rgb),.38));
}
/* a soft contact shadow so pieces sit on the board rather than hover */
#chess-app .cg-sq::after{
  content:"";position:absolute;left:18%;right:18%;bottom:10%;height:14%;
  border-radius:50%;background:rgba(var(--ink-rgb),.26);
  filter:blur(2.5px);opacity:0;transition:opacity .2s;z-index:1;
}
#chess-app .cg-sq:has(.cg-p)::after{opacity:1}

@media (max-width:781px){ #chess-app{--tilt:24deg}
  #chess-app .cg-board{box-shadow:0 0 0 5px var(--edge),0 5px 0 5px var(--edge-dark),0 10px 0 5px var(--ink),0 16px 18px 3px rgba(var(--ink-rgb),.26)} }
@media (prefers-reduced-motion:reduce){ #chess-app{--tilt:0deg;--lift:0} #chess-app .cg-board{box-shadow:0 0 0 1px var(--line)} }