:root { color-scheme: dark; --light:#ebd5b3; --dark:#7a5233; --accent:#f5c451; --move:#b6e28c88; --check:#ff4d4d88; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #2a1a4a 0%, transparent 60%), #0b0b12;
  color: #eaeaf0;
}
header { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid #ffffff12; }
header h1 { margin: 0; font-size: 1.3rem; }
a.home { color: #aaa; text-decoration: none; font-size: .9rem; }
a.home:hover { color: #fff; }

.card { max-width: 520px; margin: 3rem auto; padding: 1.5rem; background: #ffffff08; border: 1px solid #ffffff12; border-radius: 14px; }
.row { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap; }
.row.buttons { gap: .75rem; }
label { display: flex; flex-direction: column; gap: .3rem; flex: 1; font-size: .85rem; opacity: .8; }
input, button { font: inherit; padding: .55rem .8rem; border-radius: 8px; border: 1px solid #ffffff1a; background: #ffffff10; color: inherit; }
input:focus { outline: 2px solid var(--accent); }
button { background: var(--accent); color: #111; border: none; cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.08); }
button.tiny { padding: .2rem .5rem; font-size: .75rem; background: #ffffff18; color: inherit; }
.or { opacity: .5; }
.msg { min-height: 1.2em; opacity: .8; margin: .5rem 0 0; font-size: .9rem; }
.msg.err { color: #ff9090; }

#game { display: grid; grid-template-columns: 1fr auto 280px; gap: 1.5rem; padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
.info { display: flex; flex-direction: column; gap: .75rem; font-size: .9rem; }
.info b { opacity: .6; font-weight: 500; }
.board-wrap { display: grid; place-items: center; }
#board {
  width: min(80vw, 640px); aspect-ratio: 1/1;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 3px solid #222; border-radius: 6px; overflow: hidden;
  box-shadow: 0 20px 60px -20px #000;
  user-select: none;
}
.sq { position: relative; display: grid; place-items: center; font-size: clamp(2rem, 6vw, 3.2rem); cursor: pointer; }
.sq.light { background: var(--light); }
.sq.dark { background: var(--dark); }
.sq.sel { outline: 3px solid var(--accent); outline-offset: -3px; }
.sq.move::after { content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: var(--move); }
.sq.move.cap::after { width: 86%; height: 86%; background: transparent; border: 4px solid var(--move); }
.sq.last { background: #d8c45ecc !important; }
.sq.check { background: var(--check) !important; }
.sq .piece { line-height: 1; filter: drop-shadow(0 2px 2px #0006); pointer-events: none; }
.sq .piece.w { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.sq .piece.b { color: #111; }
.sq .coord { position: absolute; font-size: .65rem; opacity: .5; font-weight: 600; }
.sq .coord.f { bottom: 2px; right: 4px; }
.sq .coord.r { top: 2px; left: 4px; }
.sq.light .coord { color: #6a4828; }
.sq.dark .coord { color: #e0cca4; }

.side { display: flex; flex-direction: column; gap: .5rem; }
.side h3 { margin: .8rem 0 .3rem; font-size: .85rem; opacity: .6; text-transform: uppercase; letter-spacing: .08em; }
.actions { display: flex; gap: .5rem; }
.actions button { flex: 1; }
#moves { margin: 0; padding: 0 0 0 1.5rem; max-height: 180px; overflow: auto; font-variant-numeric: tabular-nums; font-size: .9rem; }
#moves li { padding: .1rem 0; }
#chat { flex: 1; min-height: 120px; max-height: 220px; overflow: auto; background: #0008; border-radius: 8px; padding: .5rem; font-size: .85rem; display: flex; flex-direction: column; gap: .25rem; }
#chat .line b { opacity: .7; margin-right: .3rem; }
#chatForm { display: flex; gap: .4rem; }
#chatForm input { flex: 1; }

dialog { background: #1a1a22; color: inherit; border: 1px solid #ffffff1a; border-radius: 12px; padding: 1.2rem; }
dialog::backdrop { background: #000a; }
.promo-row { display: flex; gap: .4rem; }
.promo-row button { font-size: 1.1rem; }

@media (max-width: 900px) {
  #game { grid-template-columns: 1fr; }
  .side { max-width: 640px; margin: 0 auto; width: 100%; }
}