:root{
  --bg-deep:#1b130d;
  --panel:#241a12;
  --panel-2:#2d2117;
  --panel-line:#42311f;
  --board-light:#ecdfc6;
  --board-dark:#8a5e37;
  --board-dark-2:#7a5230;
  --brass:#c99a4b;
  --brass-bright:#e0b768;
  --brass-dim:#8a6c3a;
  --sage:#6fa287;
  --sage-glow:rgba(111,162,135,.55);
  --teal:#4fa89c;
  --rose:#c97575;
  --ivory:#f4ecdc;
  --muted:#b6a488;
  --danger:#c0453f;
  --font-display:'Fraunces', Georgia, serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse at top, #2a1d12 0%, var(--bg-deep) 55%),
    var(--bg-deep);
  color:var(--ivory);
  font-family:var(--font-body);
  min-height:100vh;
}

.app{max-width:1400px;margin:0 auto;padding:20px 24px 48px;}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 4px 20px;border-bottom:1px solid var(--panel-line);
  margin-bottom:22px;flex-wrap:wrap;gap:12px;
}
.brand{display:flex;align-items:center;gap:14px;}
.brand-glyph{
  font-size:38px;color:var(--brass-bright);
  text-shadow:0 0 18px rgba(201,154,75,.35);
}
.brand-text h1{
  font-family:var(--font-display);font-weight:600;font-size:26px;
  margin:0;letter-spacing:.3px;color:var(--ivory);
}
.brand-text p{
  margin:2px 0 0;font-size:12.5px;color:var(--muted);
  letter-spacing:1.5px;text-transform:uppercase;
}
.status-strip{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--panel-line);
  padding:9px 16px;border-radius:999px;font-family:var(--font-mono);
  font-size:13.5px;color:var(--ivory);
}
.status-dot{
  width:9px;height:9px;border-radius:50%;background:var(--sage);
  box-shadow:0 0 8px var(--sage-glow);flex:none;
  transition:background .2s, box-shadow .2s;
}
.status-dot.check{background:var(--danger);box-shadow:0 0 10px rgba(192,69,63,.6);}
.status-dot.over{background:var(--brass-bright);box-shadow:0 0 10px rgba(224,183,104,.6);}

/* ---------- layout ---------- */
.layout{
  display:grid;
  grid-template-columns:260px minmax(360px,640px) 300px;
  gap:22px;justify-content:center;align-items:start;
}
@media (max-width:1100px){
  .layout{grid-template-columns:1fr;justify-items:center;}
  .panel{width:100%;max-width:640px;}
  .board-column{order:-1;width:100%;max-width:640px;}
}
@media (max-width:640px){
  .app{padding:12px 12px 32px;}
  .board-frame{padding:8px;}
  .clock{padding:8px 12px;}
  .clock-time{font-size:19px;}
}

.panel{display:flex;flex-direction:column;gap:16px;}
.card{
  background:var(--panel);border:1px solid var(--panel-line);
  border-radius:14px;padding:16px 16px 18px;
}
.card-grow{flex:1;display:flex;flex-direction:column;min-height:0;}
.card-title{
  font-family:var(--font-display);font-size:15px;font-weight:600;
  margin:0 0 12px;color:var(--brass-bright);letter-spacing:.4px;
}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:12.5px;color:var(--muted);}
.field span{text-transform:uppercase;letter-spacing:1px;font-size:11px;}
.field select{
  background:var(--panel-2);border:1px solid var(--panel-line);color:var(--ivory);
  padding:9px 10px;border-radius:8px;font-family:var(--font-body);font-size:14px;
  outline:none;cursor:pointer;
}
.field select:focus-visible{border-color:var(--brass);}

.btn-row{display:flex;gap:8px;margin-top:4px;}
.btn{
  flex:1;background:var(--panel-2);border:1px solid var(--panel-line);
  color:var(--ivory);padding:10px 10px;border-radius:9px;font-family:var(--font-body);
  font-weight:600;font-size:13.5px;cursor:pointer;transition:border-color .15s, transform .1s;
}
.btn:hover{border-color:var(--brass-dim);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
.btn-primary{background:linear-gradient(180deg,#d8ac5f,var(--brass));color:#241a0d;border-color:transparent;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-hint{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--brass-dim);color:var(--brass-bright);
  padding:11px;border-radius:9px;font-weight:600;font-size:14px;cursor:pointer;margin-bottom:14px;
}
.btn-hint:hover{background:#372718;}
.btn-hint-arrow{display:inline-block;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:12px;user-select:none;}
.toggle input{display:none;}
.toggle-track{
  width:38px;height:22px;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--panel-line);position:relative;flex:none;transition:background .15s;
}
.toggle-thumb{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform .15s, background .15s;
}
.toggle input:checked + .toggle-track{background:var(--brass-dim);}
.toggle input:checked + .toggle-track .toggle-thumb{transform:translateX(16px);background:var(--brass-bright);}
.toggle-label{font-size:13px;color:var(--ivory);}

.hint-legend{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin:0 0 10px;}
.legend-swatch{width:11px;height:11px;border-radius:3px;display:inline-block;margin-left:8px;}
.legend-swatch:first-child{margin-left:0;}
.legend-white{background:var(--teal);}
.legend-black{background:var(--rose);}

.hint-copy{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;}

/* ---------- board column ---------- */
.board-column{display:flex;flex-direction:column;align-items:center;gap:10px;}

.clock{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:560px;background:var(--panel);border:1px solid var(--panel-line);
  border-radius:10px;padding:10px 16px;
}
.clock-name{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.clock-time{font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--ivory);letter-spacing:1px;}
.clock.active{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset;}
.clock.active .clock-time{color:var(--brass-bright);}
.clock.flag .clock-time{color:var(--danger);}

.board-wrap{width:100%;display:flex;justify-content:center;}
.board-frame{
  background:linear-gradient(160deg,#4a3016,#2e1c0c);
  border-radius:14px;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px #5c3d1c;
  width:100%;max-width:560px;
}
.coords{display:grid;grid-template-columns:repeat(8,1fr);font-family:var(--font-mono);font-size:11px;color:var(--brass-dim);text-align:center;}
.coords-files{padding:2px 0;}
.board-mid{display:flex;align-items:stretch;position:relative;}
.coords-ranks{
  display:flex;flex-direction:column;justify-content:space-around;
  width:16px;font-size:11px;color:var(--brass-dim);text-align:center;
}
.board{
  position:relative;flex:1;aspect-ratio:1/1;display:grid;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  border-radius:4px;overflow:hidden;box-shadow:0 0 0 3px #1c1108;
}
.overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.js-fallback{
  grid-column:1/-1;grid-row:1/-1;align-self:center;justify-self:center;
  color:var(--muted);font-family:var(--font-mono);font-size:12.5px;text-align:center;
  padding:24px;line-height:1.6;
}

.sq{position:relative;display:flex;align-items:center;justify-content:center;user-select:none;}
.sq.light{background:var(--board-light);}
.sq.dark{background:var(--board-dark);}
.sq .sq-label{
  position:absolute;top:2px;left:3px;font-family:var(--font-mono);font-size:9px;opacity:.45;pointer-events:none;
}
.sq.light .sq-label{color:var(--board-dark);}
.sq.dark .sq-label{color:var(--board-light);}

.piece{
  font-size:min(7vw,42px);line-height:1;cursor:grab;position:relative;z-index:3;
  transition:transform .12s ease;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.piece.white{color:#fbf5e8;-webkit-text-stroke:.6px #6b4a22;}
.piece.black{color:#231508;-webkit-text-stroke:.4px #0a0603;}
.piece:hover{transform:translateY(-2px) scale(1.05);}
.piece.dragging{opacity:.35;}
.board{touch-action:none;}
.drag-ghost{
  position:fixed;z-index:100;pointer-events:none;display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%) scale(1.15);transition:none!important;margin:0;cursor:grabbing;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));
}
.piece{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.ghost-fade{
  z-index:40;pointer-events:none;display:flex;align-items:center;justify-content:center;
  font-size:min(7vw,42px);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

.sq.selected{box-shadow:inset 0 0 0 3px var(--sage);}
.sq.last-from, .sq.last-to{background-image:linear-gradient(rgba(201,154,75,.28),rgba(201,154,75,.28));}
.sq.in-check{box-shadow:inset 0 0 0 3px var(--danger);}

.dot{
  position:absolute;width:26%;height:26%;border-radius:50%;
  background:var(--sage-glow);pointer-events:none;z-index:2;
}
.dot.capture{
  width:78%;height:78%;background:transparent;border-radius:50%;
  box-shadow:inset 0 0 0 4px var(--sage-glow);
}
.sq.hover-target{background-image:linear-gradient(rgba(111,162,135,.25),rgba(111,162,135,.25));}

.ring{position:absolute;border-radius:50%;pointer-events:none;z-index:1;}
.ring-w{width:60%;height:60%;box-shadow:inset 0 0 0 3px var(--teal);opacity:.7;}
.ring-b{width:42%;height:42%;box-shadow:inset 0 0 0 3px var(--rose);opacity:.75;}

.promo-modal{
  position:fixed;inset:0;background:rgba(15,10,6,.72);display:flex;align-items:center;justify-content:center;z-index:50;
}
.promo-modal[hidden]{display:none;}
.promo-box{background:var(--panel);border:1px solid var(--brass-dim);border-radius:14px;padding:22px 26px;text-align:center;}
.promo-box p{margin:0 0 12px;font-family:var(--font-display);color:var(--brass-bright);font-size:16px;}
.promo-choices{display:flex;gap:10px;}
.promo-choices button{
  font-size:34px;background:var(--panel-2);border:1px solid var(--panel-line);border-radius:10px;
  width:58px;height:58px;cursor:pointer;color:var(--ivory);
}
.promo-choices button:hover{border-color:var(--brass);}

/* ---------- right panel ---------- */
.captured-row{margin-bottom:10px;}
.captured-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);display:block;margin-bottom:4px;}
.captured-pieces{min-height:22px;font-size:20px;line-height:1;letter-spacing:1px;}
.material-diff{font-family:var(--font-mono);font-size:13px;color:var(--brass-bright);margin-top:4px;}

.movelist{
  flex:1;overflow-y:auto;max-height:420px;font-family:var(--font-mono);font-size:13px;
  display:grid;grid-template-columns:28px 1fr 1fr;row-gap:4px;column-gap:6px;
}
.movelist .mv-num{color:var(--brass-dim);}
.movelist .mv-white,.movelist .mv-black{color:var(--ivory);cursor:default;padding:1px 4px;border-radius:4px;}
.movelist .mv-white.current,.movelist .mv-black.current{background:rgba(201,154,75,.22);}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:var(--panel-line);border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}

@media (prefers-reduced-motion: reduce){
  .piece,.btn,.toggle-thumb{transition:none;}
}