:root {
  --bg: #17130f;
  --bg2: #221b15;
  --card: #2a221b;
  --line: #3d3127;
  --text: #f1e6d4;
  --muted: #b3a38d;
  --accent: #d9a54a;
  --light: #ecd7b0;
  --dark: #a8774e;
  --sel: rgba(255, 214, 92, .55);
  --last: rgba(205, 210, 90, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(ellipse at top, #2c221a 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 15px/1.45 Inter, system-ui, sans-serif;
  min-height: 100vh;
}
header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
}
h1 { font: 800 26px Cinzel, serif; margin: 0; letter-spacing: .04em; display: flex; align-items: center; gap: 10px; }
h1 .logo { width: 38px; height: 38px; display: inline-block; }
h1 .logo svg { width: 100%; height: 100%; }
h2 { font: 700 22px Cinzel, serif; margin: 0 0 6px; }
h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

button, select {
  font: inherit; color: var(--text); background: #3a2f25; border: 1px solid #54453a;
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
button:hover { background: #47392d; }
button.primary { background: linear-gradient(#e2b25a, #b9862f); color: #22170b; border-color: #8a6222; font-weight: 600; }
button.primary:hover { background: linear-gradient(#ecc06b, #c4903a); }
button.ghost { background: transparent; }
button.ghost small { color: var(--muted); }
select { width: 100%; margin-top: 4px; }

main {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px;
  padding: 16px 20px; max-width: 1400px; margin: 0 auto; align-items: start;
}
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; padding: 12px 16px; }
  header { padding: 10px 16px; }
  h1 { font-size: 21px; }
}

.board-wrap {
  --bw: min(100%, calc((100vh - 150px) * var(--W) / var(--H)), 900px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
}
@media (max-width: 900px) { .board-wrap { --bw: 100%; } }
.player {
  width: var(--bw); max-width: 100%; display: flex; align-items: center; gap: 10px; min-height: 30px;
  font-weight: 600; color: var(--muted);
}
.player.active .name { color: var(--text); }
.player.active .name::before { background: #6fd36f; box-shadow: 0 0 8px #6fd36f; }
.player .name::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #555; margin-right: 8px; vertical-align: middle;
}
.player .caps { display: flex; flex-wrap: wrap; align-items: center; }
.player .caps svg { width: 24px; height: 24px; margin-right: -7px; }
.player .caps .adv { margin-left: 12px; font-size: 13px; color: var(--muted); }

.frame {
  width: var(--bw);
  padding: clamp(10px, 2.2%, 22px);
  border-radius: 10px;
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, #5a3a22, #3a2414 60%, #2a190d);
  box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 0 0 2px #6d4a2c, inset 0 0 0 5px #24160c;
}
.board {
  position: relative; width: 100%; aspect-ratio: var(--W) / var(--H);
  box-shadow: 0 0 0 2px #1b100a; touch-action: none; user-select: none; -webkit-user-select: none;
}
.squares { position: absolute; inset: 0; display: grid; }
.sq { position: relative; }
.sq.l { background: var(--light); background-image: linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.04)); }
.sq.d { background: var(--dark); background-image: linear-gradient(160deg, rgba(255,255,255,.08), rgba(0,0,0,.10)); }
.sq.last::after, .sq.sel::after, .sq.check::after, .sq.hover::after { content: ''; position: absolute; inset: 0; }
.sq.last::after { background: var(--last); }
.sq.sel::after { background: var(--sel); }
.sq.check::after { background: radial-gradient(circle, rgba(255,40,30,.95) 0%, rgba(230,30,20,.55) 45%, transparent 75%); }
.sq.hover::after { box-shadow: inset 0 0 0 4px rgba(255,255,255,.65); }
.sq .dot { position: absolute; inset: 36%; border-radius: 50%; background: rgba(30, 60, 20, .38); pointer-events: none; }
.sq .ring { position: absolute; inset: 4%; border-radius: 50%; border: max(3px, .55vmin) solid rgba(160, 20, 10, .55); pointer-events: none; }
.coord { position: absolute; font-size: clamp(8px, 1.1vmin, 12px); font-weight: 600; pointer-events: none; opacity: .85; }
.coord.f { right: 3px; bottom: 1px; }
.coord.r { left: 3px; top: 1px; }
.sq.l .coord { color: var(--dark); }
.sq.d .coord { color: var(--light); }

.pieces { position: absolute; inset: 0; pointer-events: none; }
.piece {
  position: absolute; display: flex; align-items: center; justify-content: center;
  transition: left .22s ease, top .22s ease, opacity .25s, transform .15s;
  will-change: left, top;
}
.piece svg { width: 94%; height: 94%; filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); overflow: visible; }
.piece.drag { transition: none; z-index: 10; transform: scale(1.12); }
.piece.drag svg { filter: drop-shadow(0 10px 6px rgba(0,0,0,.45)); }
.piece.gone { opacity: 0; transform: scale(.6); }

aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.card label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 4px; }
.status-card #status { font: 700 20px Cinzel, serif; }
.status-card #substatus { color: var(--muted); font-size: 13px; min-height: 18px; }
.status-card.over { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.thinking::after { content: ' …'; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

.info-card { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; }
.info-card .info-empty { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.info-card .art svg { width: 76px; height: 76px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.info-card .name { font: 700 18px Cinzel, serif; }
.info-card .meta { font-size: 12px; color: var(--accent); margin-bottom: 4px; }
.info-card .desc { font-size: 13.5px; color: #dfd2bf; }

.moves-card ol { margin: 0; padding: 0 0 0 30px; max-height: 260px; overflow: auto; font-variant-numeric: tabular-nums; font-size: 14px; }
.moves-card li { padding: 2px 0; }
.moves-card li span { display: inline-block; min-width: 92px; }
.moves-card li span.cur { color: var(--accent); font-weight: 600; }

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex;
  align-items: center; justify-content: center; z-index: 100; padding: 16px; backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.sheet {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  max-width: 560px; width: 100%; max-height: 92vh; overflow: auto; position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.sheet.wide { max-width: 1150px; }
.sheet .close { position: absolute; right: 12px; top: 12px; font-size: 22px; line-height: 1; padding: 4px 12px; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.promo-grid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: 12px; }
.promo-grid svg { width: 62px; height: 62px; }

.legend { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legend span { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.lg-move, .dg .mv { background: #4c8b3a; }
.lg-cap, .dg .cp { background: #c2412f; }
.lg-block { background: #8b7d6b; border-radius: 3px !important; }
.gal-cat { font: 700 15px Cinzel, serif; color: var(--accent); margin: 22px 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.gal-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 1fr 144px; gap: 10px; }
.gal-item .pair { display: flex; }
.gal-item .pair svg { width: 64px; height: 64px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.gal-item .name { font: 700 17px Cinzel, serif; }
.gal-item .meta { font-size: 12px; color: var(--accent); }
.gal-item .desc { font-size: 13px; color: #dfd2bf; margin-top: 4px; }
.dg { display: grid; width: 144px; height: 144px; border: 1px solid #000; align-self: center; }
.dg div { position: relative; }
.dg .l { background: var(--light); }
.dg .d { background: var(--dark); }
.dg .mv, .dg .cp { position: absolute; inset: 22%; border-radius: 50%; }
.dg .bl { position: absolute; inset: 14%; background: #8b7d6b; border-radius: 2px; }
.dg svg { position: absolute; inset: -20%; width: 140%; height: 140%; z-index: 1; }
.dg .me { background: #e8c35a; }
@media (max-width: 420px) {
  .gal-item { grid-template-columns: 1fr; }
  .gal-grid { grid-template-columns: 1fr; }
}