:root {
  --bg: #1e2127; --panel: #2a2e36; --text: #e8e8e8; --muted: #9aa0aa;
  --accent: #4f9cf9; --good: #3fb950; --bad: #f85149;
  --light: #eed8b5; --dark: #b58863;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
.wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
h1 { margin: 8px 0 16px; font-size: 24px; }
button {
  background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  padding: 8px 14px; font-size: 15px; cursor: pointer;
}
button.secondary { background: #444a55; }
button:disabled { opacity: .5; cursor: default; }
.panel { background: var(--panel); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linkbox { flex: 1; min-width: 0; padding: 8px; border-radius: 6px; border: 1px solid #444; background: #15171b; color: var(--text); }
.status { font-size: 18px; font-weight: 600; margin: 8px 0; min-height: 24px; }
.players { display: flex; gap: 16px; color: var(--muted); font-size: 14px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #666; margin-right: 4px; }
.dot.on { background: var(--good); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.card { background: var(--panel); border-radius: 10px; padding: 20px; text-align: center; }
.card .icon { font-size: 64px; line-height: 1; }
.card button { margin-top: 12px; width: 100%; }
.hidden { display: none !important; }

/* Cờ vua */
.chessboard {
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto;
  container-type: inline-size; border-radius: 4px; overflow: hidden; user-select: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.sq {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; overflow: hidden; cursor: pointer;
  font-size: 10cqw; line-height: 1;
}
.sq.light { background: var(--light); } .sq.dark { background: var(--dark); }
.sq.last { box-shadow: inset 0 0 0 100px rgba(255, 235, 59, .35); }
.sq.sel { box-shadow: inset 0 0 0 100px rgba(79, 156, 249, .5); }
.sq.check { background-image: radial-gradient(circle, #ff4d4d 25%, transparent 72%); }
.sq.target::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(0,0,0,.25); }
.sq.target.capture::after { width: 88%; height: 88%; background: transparent; border: 5px solid rgba(0,0,0,.25); }
.piece { line-height: 1; z-index: 1; pointer-events: none; font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols 2', sans-serif; }
.piece.w { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 2px #000; }
.piece.b { color: #111; text-shadow: 0 0 1px #fff8; }
.coord { position: absolute; font-size: 2.2cqw; line-height: 1; font-weight: 600; opacity: .7; color: #333; }
.coord.file { right: 3px; bottom: 2px; } .coord.rank { left: 3px; top: 2px; }
.sq.light .coord { color: var(--dark); } .sq.dark .coord { color: var(--light); }
.promo { display: flex; gap: 8px; justify-content: center; }
.promo button { font-size: 36px; padding: 4px 12px; background: var(--light); color: #000; }
.history { color: var(--muted); font-size: 14px; margin-top: 8px; }

/* Caro */
.caro-wrap { position: relative; }
.caroboard {
  display: block; width: 100%; height: max(360px, calc(100vh - 290px));
  border: 2px solid #8b6b3d; border-radius: 6px; background: #f3e6c8;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); touch-action: none; cursor: crosshair;
}
.caro-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.caro-tools button { width: 40px; height: 40px; padding: 0; font-size: 20px; opacity: .9; }
.caro-hint { color: var(--muted); font-size: 13px; text-align: center; margin-top: 8px; }
.wrap.wide { max-width: 1100px; }