:root {
  color-scheme: light dark;
  --bg: #f4f1ea; --fg: #222; --line: #8884;
  --board: #2b5fb3; --hole: #f4f1ea;
  --light: #ecdcb8; --dark: #a57b52; --felt: #2f7d4f;
  --p0: #d63a3a; --p1: #f2c230; --accent: #ffffff; --hint: #ffffff99;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #17181c; --fg: #e8e6e1; --hole: #17181c; --light: #b9a785; --dark: #6d4f33; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.4 system-ui, sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 16px; }
h1 { margin: 0 0 16px; font-size: 1.4rem; }
h2 { font-size: 1rem; margin: 24px 0 4px; }
button { font: inherit; padding: 8px 14px; cursor: pointer; }
.row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
ul.matches { list-style: none; padding: 0; margin: 0; }
ul.matches li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.status { margin: 12px 0 2px; font-weight: 600; }
.note { min-height: 1.4em; margin-bottom: 8px; opacity: .8; }

.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; }
.sq { min-width: 0; aspect-ratio: 1; padding: 0; display: grid; place-items: center; position: relative; font-size: 1.6rem; font-weight: 700; color: inherit; background: var(--hole); border: 1px solid var(--line); }
.sq:disabled { cursor: default; color: inherit; }
.sq.win { outline: 3px solid var(--accent); }
.sq.sel { outline: 3px solid var(--p1); outline-offset: -3px; }
.sq.target::after { content: ''; width: 28%; height: 28%; border-radius: 50%; background: var(--hint); position: absolute; }
.sq.light { background: var(--light); } .sq.dark { background: var(--dark); }
.chk, .chs, .rev { gap: 0; border: 2px solid var(--line); }
.chk .sq, .chs .sq, .rev .sq { border: 0; border-radius: 0; font-size: min(7vw, 2.6rem); }

.piece { width: 76%; height: 76%; border-radius: 50%; box-shadow: inset 0 -3px 0 #0004; }
.piece.p0 { background: var(--p0); } .piece.p1 { background: #f1ede4; }
.piece.king::after { content: '♛'; display: grid; place-items: center; height: 100%; color: #0007; font-size: 1.1rem; }

.rev { background: var(--felt); gap: 1px; }
.rev .sq { background: var(--felt); }
.rev .sq.hint::after { content: ''; width: 24%; height: 24%; border-radius: 50%; background: var(--hint); position: absolute; }
.disc { width: 80%; height: 80%; border-radius: 50%; }
.disc.p0 { background: #111; } .disc.p1 { background: #f5f5f5; }

.glyph { line-height: 1; }
.glyph.w { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 1px #000; }
.glyph.b { color: #111; }

.ult { gap: 8px; }
.sub { padding: 4px; position: relative; border: 2px solid var(--line); border-radius: 6px; opacity: .55; }
.sub.live { opacity: 1; border-color: var(--p1); }
.sub .sq { font-size: 1.2rem; }
.sub.done .sq { opacity: .25; }
.claim { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4rem; font-weight: 800; pointer-events: none; }
.claim.p0 { color: var(--p0); } .claim.p1 { color: var(--board); } .claim.pD { color: var(--fg); }

.board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: var(--board); padding: 8px; border-radius: 10px; }
.col { display: grid; gap: 6px; background: none; border: 0; padding: 0; }
.col:disabled { cursor: default; }
.cell { aspect-ratio: 1; border-radius: 50%; background: var(--hole); }
.cell.p0 { background: var(--p0); } .cell.p1 { background: var(--p1); }
.cell.win { outline: 3px solid #fff; }

.chat { margin-top: 20px; }
.chat-log { height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.chat-msg { margin-bottom: 6px; overflow-wrap: anywhere; }
.chat-img { display: block; max-width: 100%; max-height: 200px; border-radius: 4px; margin-top: 4px; }
.chat-send { margin: 8px 0 0; flex-wrap: nowrap; }
.chat-send input[type=text] { flex: 1; min-width: 0; font: inherit; padding: 8px; }
.chat-body { display: inline; }
.chat-sys { opacity: .6; font-style: italic; margin-bottom: 6px; }
.chat-only .chat-log { height: 55vh; }
.chat-only .chat { margin-top: 0; }
.toggle { display: flex; align-items: center; gap: 6px; margin-left: auto; }
input[type=text] { font: inherit; padding: 8px; }
label input { margin-left: 4px; }