:root { --bg:#14171b; --card:#1f242b; --fg:#f3f4f6; --muted:#c3c8cf; --accent:#ffd34d; --light:#e9d8b4; --dark:#9a7451; --sel:#3b82f6; --target:#22c55e; --last:#f59e0b; }
* { box-sizing: border-box; }
html { font-size: 112.5%; }
body { margin:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height:1.5; }
header, main, footer { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
header { padding-top: 1rem; }
h1 { font-size: 2rem; margin: .5rem 0; }
h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
h3 { font-size: 1.1rem; margin: 1rem 0 .4rem; }
a { color: var(--accent); }
.card { background: var(--card); border-radius: 12px; padding: 1rem; margin: 1rem 0; }
.status { font-size: 1.2rem; font-weight: 600; }
.last-said, .hint { color: var(--muted); }
.row { display:flex; gap:.5rem; align-items:center; }
.row.wrap { flex-wrap: wrap; }
label { font-weight: 600; }
input[type=text], input[type=password], select, textarea { font: inherit; color: var(--fg); background:#0f1215; border:2px solid #5b6470; border-radius:8px; padding:.55rem .7rem; }
input[type=text], input[type=password] { flex: 1; min-width: 0; width: 100%; }
#move-input { font-size: 1.3rem; }
textarea { width: 100%; }
button { font: inherit; font-weight: 600; color:#111; background: var(--accent); border: 2px solid transparent; border-radius: 10px; padding: .6rem .9rem; min-height: 44px; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: not-allowed; }
.buttons { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0; }
.buttons button { background:#2d3440; color: var(--fg); border-color:#5b6470; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.board { display:flex; flex-direction:column; width: min(100%, 32rem); aspect-ratio: 1; border: 3px solid #5b6470; border-radius: 6px; overflow: hidden; margin-top:.5rem; }
.rank { display:grid; grid-template-columns: repeat(8, 1fr); flex:1; }
.sq { border-radius:0; min-height:0; padding:0; margin:0; border:0; font-size: clamp(1.4rem, 7vw, 2.4rem); line-height:1; display:flex; align-items:center; justify-content:center; position:relative; color:#111; }
.sq.light { background: var(--light); }
.sq.dark { background: var(--dark); }
.sq .pc-w { color:#fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 1px #000; }
.sq .pc-b { color:#111; text-shadow: 0 0 1px #fff; }
.sq.sel { box-shadow: inset 0 0 0 4px var(--sel); }
.sq.target::after { content:""; position:absolute; width:26%; height:26%; border-radius:50%; background: var(--target); opacity:.85; }
.sq.last { box-shadow: inset 0 0 0 3px var(--last); }
.sq.sel.last { box-shadow: inset 0 0 0 4px var(--sel); }
.sq:focus-visible { outline: 4px solid #fff; outline-offset: -4px; z-index: 1; }
.sq[data-coord]::before { content: attr(data-coord); position:absolute; left:3px; bottom:1px; font-size:.6rem; font-weight:700; color:#333; }
.history { columns: 2; padding-left: 1.8rem; }
fieldset { border: 2px solid #5b6470; border-radius: 8px; margin: 0 0 1rem; }
.radio, .check { display:flex; gap:.5rem; align-items:center; margin:.4rem 0; }
.radio input, .check input { width: 1.3rem; height: 1.3rem; }
.invite { margin-top: .5rem; }
.skip { position:absolute; left:-999px; top:0; background:var(--accent); color:#111; padding:.5rem; }
.skip:focus { left: .5rem; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
footer { padding-bottom: 2rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .sq.sel, .sq.last { outline: 3px solid Highlight; } }

pre { white-space: pre-wrap; word-break: break-word; font-size: .8rem; background:#0f1215; padding:.75rem; border-radius:8px; }
details { margin:.5rem 0; }
summary { cursor:pointer; font-weight:600; min-height:44px; display:list-item; padding:.5rem 0; }