/* Chess Arena - theme-aware, responsive. Board is pure CSS grid; pieces are
   filled Unicode glyphs colour-differentiated for both sides. */
:root {
  --bg: #0f1216; --panel: #181c22; --ink: #e8eaed; --muted: #9aa4b2;
  --light: #ebecd0; --dark: #779556; --sel: #f6f66980; --last: #f6f66940;
  --dot: #00000040; --check: #e35b5b; --accent: #6ea8fe; --line: #2a2f37;
  --wp: #f7f9fc; --wp-edge: #1a1a1a; --bp: #202428; --bp-edge: #05070a;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f3f4f6; --panel:#ffffff; --ink:#1b1f24; --muted:#5b6572; --line:#e3e6ea;
          --bp:#2a2f36; --bp-edge:#000; --wp:#ffffff; --wp-edge:#3a3f47; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.boot, .arena { padding: 16px; }
.boot { color: var(--muted); }

.topbar h1 { font-size: 1.35rem; margin: 0 0 12px; font-weight: 650; }
.topbar .sub { color: var(--muted); font-weight: 400; font-size: .95rem; }

.layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.board-wrap { position: relative; }

/* ---- board ---- */
.board {
  width: min(76vw, 560px); aspect-ratio: 1; display: grid;
  grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border-radius: 8px; overflow: hidden; box-shadow: 0 8px 30px #0006;
  user-select: none; touch-action: manipulation;
}
.board.over { filter: saturate(.7) brightness(.9); }
.sq { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sq.light { background: var(--light); }
.sq.dark  { background: var(--dark); }
.sq.selected { box-shadow: inset 0 0 0 4px var(--accent); }
.sq.lastmove::after { content: ""; position: absolute; inset: 0; background: var(--last); }
.sq.check { background: radial-gradient(circle, var(--check) 0%, var(--check) 40%, transparent 72%); }

.piece { position: relative; z-index: 2; font-size: min(9.2vw, 68px); line-height: 1; }
.piece.white { color: var(--wp); text-shadow: 0 0 1px var(--wp-edge), 0 1px 2px #0007,
  1px 0 0 var(--wp-edge), -1px 0 0 var(--wp-edge), 0 1px 0 var(--wp-edge), 0 -1px 0 var(--wp-edge); }
.piece.black { color: var(--bp); text-shadow: 0 0 1px var(--bp-edge), 0 1px 2px #0009,
  1px 0 0 var(--bp-edge), -1px 0 0 var(--bp-edge), 0 1px 0 var(--bp-edge), 0 -1px 0 var(--bp-edge); }

.dot { position: absolute; z-index: 1; width: 30%; height: 30%; border-radius: 50%; background: var(--dot); }
.ring { position: absolute; z-index: 1; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 5px var(--dot); }
.coord { position: absolute; font-size: 10px; font-weight: 700; opacity: .55; z-index: 3; }
.coord.file { bottom: 2px; right: 3px; }
.coord.rank { top: 2px; left: 3px; }
.sq.light .coord { color: var(--dark); }
.sq.dark  .coord { color: var(--light); }

/* ---- promotion ---- */
.promo-overlay { position: absolute; inset: 0; background: #0008; display: flex;
  align-items: center; justify-content: center; z-index: 10; border-radius: 8px; }
.promo { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.promo-title { color: var(--muted); font-size: .85rem; margin-bottom: 8px; text-align: center; }
.promo-row { display: flex; gap: 8px; }
.promo-btn { width: 56px; height: 56px; font-size: 34px; background: var(--dark); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.promo-btn:hover { outline: 2px solid var(--accent); }

/* ---- side panel ---- */
.panel { flex: 1 1 260px; min-width: 240px; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.status { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.status.final { color: var(--accent); }
.spinner { width: 13px; height: 13px; border: 2px solid var(--muted); border-top-color: transparent;
  border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.evalrow { display: flex; align-items: center; gap: 10px; }
.evalbar { width: 22px; height: 120px; background: #111; border: 1px solid var(--line);
  border-radius: 4px; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.evalfill { width: 100%; background: linear-gradient(#fff, #dfe3e8); transition: height .35s ease; }
.evalnum { font-variant-numeric: tabular-nums; font-weight: 700; }

.controls { display: flex; flex-direction: column; gap: 8px; }
.ctl-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.controls button, .export button { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 11px; cursor: pointer; font-size: .9rem; }
.controls button:hover:not(:disabled), .export button:hover { border-color: var(--accent); }
.controls button:disabled { opacity: .45; cursor: default; }
.controls label { color: var(--muted); font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.controls select { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px; }

.scoresheet { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.scoresheet-head { padding: 8px 12px; font-weight: 600; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.moves { max-height: 220px; overflow-y: auto; padding: 4px 0; }
.mrow { display: grid; grid-template-columns: 42px 1fr 1fr; padding: 3px 12px; font-variant-numeric: tabular-nums; }
.mrow:nth-child(odd) { background: #ffffff06; }
.mrow.empty { display: block; color: var(--muted); font-size: .85rem; }
.mno { color: var(--muted); }

.export { display: flex; flex-direction: column; gap: 8px; }
.copied { color: var(--accent); font-size: .8rem; }
.engine-note { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.engine-note code { background: #ffffff10; padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: #b33; color: #fff; padding: 8px 12px; z-index: 100; }
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color: #fff; margin-left: 8px; cursor: pointer; }

@media (max-width: 620px) {
  .layout { gap: 14px; } .board { width: 92vw; } .panel { max-width: none; }
}