:root { color-scheme: light; --page:#f6f7f5; --paper:#fff; --ink:#18211d; --muted:#606d65; --line:#d7ddd8; --claude:#c95f3e; --codex:#176d58; }
* { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0; min-height:100vh; background:var(--page); color:var(--ink); font-family:"Archivo",ui-sans-serif,system-ui,sans-serif; }
.site-shell { width:min(1080px,calc(100% - 48px)); min-height:100vh; margin:0 auto; display:flex; flex-direction:column; }
.topbar { height:60px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font-size:19px; line-height:1; font-weight:800; letter-spacing:-.06em; white-space:nowrap; }
.brand-mark { display:block; width:34px; height:34px; border-radius:4px; }
.brand-slash { color:#8d9990; padding:0 3px; font-weight:400; }
.live-pill { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#bc9255; }
.live-pill.connected .live-dot { background:var(--codex); animation:pulse 2s infinite; }
.live-pill.error .live-dot { background:#b64b48; }
main { width:100%; padding:24px 0 56px; }
h1 { margin:0 0 18px; font-family:Arial,Helvetica,sans-serif; font-size:clamp(38px,5vw,56px); line-height:1.05; font-weight:700; letter-spacing:-.07em; }
h1 span { padding:0 .06em; color:#7d8a80; font-family:Georgia,serif; font-size:.49em; font-style:italic; font-weight:400; letter-spacing:-.06em; vertical-align:.16em; }
.scoreboard { display:grid; grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr); margin-bottom:18px; border-top:1px solid #aeb9b0; border-bottom:1px solid #aeb9b0; }
.score-side { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 18px; }
.score-codex { align-items:flex-end; }
.score-identity { color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.1em; }
.score-number { max-width:100%; font-size:clamp(36px,5vw,56px); line-height:1; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.075em; white-space:nowrap; }
.score-claude .score-number { color:var(--claude); }
.score-codex .score-number { color:var(--codex); }
.score-middle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-left:1px solid var(--line); border-right:1px solid var(--line); background:#f9faf8; }
.draws-number { font-size:24px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.draws-label { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.11em; }
.arena { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.arena-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 20px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.09em; }
.round-countdown { color:var(--muted); }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr); gap:18px; align-items:center; padding:14px 22px 22px; }
.board-column { min-width:0; }
.model-panel { min-width:0; min-height:520px; display:flex; flex-direction:column; padding:18px 15px; border:1px solid var(--line); border-top:3px solid var(--model-color); border-radius:5px; background:#fbfcfa; }
.model-claude { --model-color:var(--claude); }
.model-codex { --model-color:var(--codex); }
.model-panel.active { background:#fff; box-shadow:0 5px 18px #18211d0d; }
.model-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; color:var(--model-color); font-size:12px; font-weight:800; letter-spacing:.1em; }
.color-badge { display:inline-flex; align-items:center; min-height:23px; padding:3px 7px; border:1px solid #aab7af; border-radius:3px; color:#263d33; background:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; }
.color-badge.black { background:#263d33; border-color:#263d33; color:#fff; }
.model-piece { height:145px; display:grid; place-items:center; margin:20px 0 4px; font-family:Georgia,"DejaVu Sans",serif; font-size:100px; line-height:1; user-select:none; }
.model-piece.white { color:#fffdf4; text-shadow:0 3px 3px #1e3028,2px 0 #1e3028,-2px 0 #1e3028,0 -2px #1e3028; }
.model-piece.black { color:#1f3028; text-shadow:0 1px 1px #fff9; }
.model-activity { min-height:24px; margin-bottom:auto; color:var(--model-color); font-size:12px; font-weight:800; letter-spacing:.09em; text-align:center; }
.model-panel.active .model-activity::before { content:""; display:inline-block; width:7px; height:7px; margin:0 7px 1px 0; border-radius:50%; background:currentColor; animation:pulse 2s infinite; }
.model-material { padding:14px 0 16px; border-top:1px solid var(--line); }
.model-material-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 8px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.07em; }
.model-material-heading strong { color:var(--model-color); font-size:10px; white-space:nowrap; }
.captured-pieces { min-height:27px; display:flex; flex-wrap:wrap; align-items:center; gap:0 2px; margin-top:5px; color:var(--muted); font-family:Georgia,"DejaVu Sans",serif; font-size:20px; line-height:1; }
.captured-piece { display:inline-block; font-size:20px; line-height:1; }
.model-last-label { padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.09em; }
.model-move { margin-top:7px; color:var(--model-color); font-size:24px; font-weight:800; letter-spacing:-.04em; }
.model-reason { min-height:80px; margin:8px 0 0; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.model-reason.is-typing::after { content:"▍"; margin-left:2px; color:var(--model-color); animation:cursor-blink .7s step-end infinite; }
.board-side-label { color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.07em; }
.board-top-label { margin-bottom:8px; text-align:right; }
.board-bottom-label { margin-top:8px; }
.board-frame { padding:5px; background:#24372f; box-shadow:0 5px 20px #18211d1a; }
.board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); aspect-ratio:1; width:100%; }
.square { position:relative; display:grid; place-items:center; min-width:0; min-height:0; }
.square.light { background:#e9e4d8; color:#527263; }
.square.dark { background:#87a595; color:#f3f0e8; }
.square.last.light { background:#e7dca4; }
.square.last.dark { background:#adad6b; }
.piece { position:relative; z-index:1; font-family:Georgia,"DejaVu Sans",serif; font-size:clamp(25px,5.7vw,59px); line-height:1; user-select:none; }
.white-piece { color:#fffdf4; text-shadow:0 2px 2px #1e3028,1px 0 #1e3028,-1px 0 #1e3028,0 -1px #1e3028; }
.black-piece { color:#1f3028; text-shadow:0 1px 1px #fff9; }
.side-coordinate,.bottom-coordinate { position:absolute; z-index:2; font-size:9px; font-weight:800; line-height:1; }
.side-coordinate { top:4px; left:4px; }
.bottom-coordinate { right:4px; bottom:3px; }
.match-status { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; padding:15px 22px; border-top:1px solid var(--line); background:#f9faf8; text-align:center; }
.turn-label,.history-header { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.11em; }
#turn-player { font-size:16px; }
.status-text { color:var(--muted); font-size:13px; line-height:1.4; }
.history-section { padding:22px 24px 24px; border-top:1px solid var(--line); }
.history-header { margin:0; }
.move-history { max-height:340px; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; margin:14px 0 0; padding:0; list-style:none; }
.move-history li { min-width:0; display:flex; flex-direction:column; gap:3px; padding:10px 0 12px; border-bottom:1px solid #edf0ed; font-size:13px; line-height:1.4; }
.move-history strong { font-size:14px; }
.move-history span { color:var(--muted); overflow-wrap:anywhere; }
.round-result { width:100%; min-height:52px; display:grid; place-items:center; margin:0; padding:13px 20px; border-top:1px solid var(--line); background:#f9faf8; font-size:15px; font-weight:700; text-align:center; }
.round-result.claude { color:var(--claude); }
.round-result.codex { color:var(--codex); }
footer { margin-top:auto; padding:20px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; }
@keyframes pulse { 50% { opacity:.35; } }
@keyframes cursor-blink { 50% { opacity:0; } }
@media(max-width:760px) {
  .site-shell { width:calc(100% - 28px); }
  .topbar { height:54px; }
  .brand { font-size:17px; }
  .brand-mark { width:34px; height:34px; }
  main { padding:18px 0 40px; }
  h1 { margin-bottom:14px; font-size:clamp(34px,8.8vw,54px); }
  .scoreboard { grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr); margin-bottom:12px; }
  .score-side { padding:9px; }
  .score-identity { font-size:11px; }
  .score-number { font-size:clamp(34px,9vw,48px); }
  .draws-number { font-size:22px; }
  .arena-topline { padding:10px 14px; }
  .game-layout { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; padding:10px 14px 22px; }
  .model-claude { grid-column:1; grid-row:2; }
  .model-codex { grid-column:2; grid-row:2; }
  .model-panel { min-height:205px; margin-top:0; padding:10px; }
  .model-heading { font-size:11px; }
  .color-badge { font-size:9px; }
  .model-piece { height:58px; margin:9px 0 2px; font-size:48px; }
  .model-activity { margin-bottom:14px; font-size:10px; }
  .model-material { padding:9px 0 10px; }
  .model-material-heading,.model-material-heading strong { font-size:9px; }
  .captured-pieces { min-height:21px; margin-top:3px; }
  .captured-piece { font-size:17px; }
  .model-last-label { padding-top:10px; font-size:9px; }
  .model-move { margin-top:4px; font-size:18px; }
  .model-reason { min-height:0; margin-top:4px; font-size:11px; line-height:1.35; }
  .board-column { grid-column:1 / -1; grid-row:1; width:min(100%,580px); margin:0 auto; }
  .piece { font-size:clamp(24px,10vw,59px); }
  .match-status { padding:12px 14px; }
  .history-section { padding:18px 14px 20px; }
  .move-history { grid-template-columns:1fr; max-height:300px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; } }