:root{--bg:#f6f3ee;--surface:#fff;--ink:#23201c;--muted:#776f66;--line:#e4ddd2;--accent:#2f6f5e;--accent-ink:#fff;--accent-soft:#e3f0eb;--warn:#b5541c;--warn-soft:#fbeadf;--danger:#b3261e;--wood:#e9c98f;--wood-line:#6b4f2a;--felt:#2e7d4f;--felt-line:#1d5534;--highlight:#ffc40073;--target:#2f6f5e59;--radius:10px;--shadow:0 1px 2px #0000000f, 0 4px 16px #0000000d;color:var(--ink);background:var(--bg);font-family:Hiragino Sans,Noto Sans JP,Yu Gothic UI,system-ui,sans-serif;line-height:1.6}@media (prefers-color-scheme:dark){:root{--bg:#1b1a18;--surface:#262421;--ink:#eeeae4;--muted:#a39b90;--line:#3a3733;--accent:#5fb39b;--accent-ink:#10201b;--accent-soft:#23382f;--warn:#f0a070;--warn-soft:#3c2a1f;--danger:#f2827a;--wood:#c9a46a;--shadow:none}}*{box-sizing:border-box}body{background:var(--bg);margin:0}h1,h2,h3{margin:0 0 .5em;line-height:1.3}p{margin:0 0 .75em}a{color:var(--accent)}.topbar{border-bottom:1px solid var(--line);background:var(--surface);align-items:baseline;gap:12px;padding:12px 20px;display:flex}.brand{color:var(--ink);letter-spacing:.02em;font-size:1.15rem;font-weight:800;text-decoration:none}.page{max-width:1180px;margin:0 auto;padding:20px 16px 48px}.page-narrow{max-width:640px}.hero{margin:16px 0 20px}.hero h1{font-size:1.8rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;padding:18px 20px}.muted{color:var(--muted)}.small{font-size:.85rem}.error{color:var(--danger)}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-size:.95rem;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-quiet{color:var(--muted);background:0 0;border-color:#0000}.btn-small{padding:4px 10px;font-size:.85rem}.btn-large{justify-content:center;width:100%;padding:12px 20px;font-size:1.05rem}.link{appearance:none;color:var(--accent);cursor:pointer;font:inherit;background:0 0;border:0;padding:0;text-decoration:underline}.badge{border-radius:999px;padding:2px 10px;font-size:.8rem}.badge.is-warn{background:var(--warn-soft);color:var(--warn)}.form fieldset{border:0;margin:0 0 18px;padding:0}.form legend,.field>span{margin-bottom:8px;font-weight:700;display:block}.choices{flex-wrap:wrap;gap:8px;display:flex}.choice{border:1px solid var(--line);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;display:inline-flex}.choice.is-checked{border-color:var(--accent);background:var(--accent-soft)}.choice input{accent-color:var(--accent)}.field{margin-bottom:18px;display:block}.field select,.field textarea,.chat-input input{width:100%;font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 10px}.field textarea{resize:vertical}.turnstile{min-height:65px;margin:8px 0 16px}.waiting{max-width:720px;margin:0 auto}.participants{gap:6px;margin:0;padding:0;list-style:none;display:grid}.participants li{align-items:center;gap:8px;display:flex}.invite-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.invite-expiry{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem}.invite-expiry.is-expired{color:var(--danger)}.tabs{border-bottom:1px solid var(--line);gap:4px;margin-bottom:8px;display:flex}.tabs button{appearance:none;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:6px 12px}.tabs button.is-active{color:var(--ink);border-bottom-color:var(--accent);font-weight:700}.invite-text{border:1px solid var(--line);background:var(--bg);width:100%;color:var(--ink);resize:vertical;border-radius:8px;margin-bottom:8px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}.room-head{justify-content:space-between;align-items:baseline;margin-bottom:12px;display:flex}.room-head h1{font-size:1.3rem}.room-grid{grid-template-columns:minmax(0,1fr) minmax(280px,380px);align-items:start;gap:20px;display:grid}@media (width<=860px){.room-grid{grid-template-columns:minmax(0,1fr)}}.board-col{flex-direction:column;align-items:stretch;gap:10px;min-width:0;display:flex}.board-area{justify-content:center;display:flex}.side-col{flex-direction:column;gap:12px;display:flex;position:sticky;top:12px}.turn-line{flex-wrap:wrap;gap:12px;min-height:1.6em;font-size:.9rem;display:flex}.actions{justify-content:flex-start}.player{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px}.player.is-turn{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}.player-main{align-items:baseline;gap:10px;display:flex}.player-seat{color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 6px;font-size:.8rem}.player-name{font-weight:700}.player-clock{font-variant-numeric:tabular-nums;color:var(--muted);margin-left:auto;font-weight:700}.player-clock.is-running{color:var(--ink)}.player-status{align-items:center;gap:6px;margin-top:2px;font-size:.9rem;display:flex}.player-status.is-active{color:var(--accent)}.player-status.is-warn{color:var(--warn);font-weight:700}.player-recover{background:var(--warn-soft);border-radius:8px;margin-top:8px;padding:10px}.player-recover p{margin-bottom:6px}.dot{background:currentColor;border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite pulse;display:inline-block}.dot.is-waiting{color:var(--accent)}@keyframes pulse{50%{opacity:.25}}.bubble{background:var(--surface);border:2px solid var(--accent);border-radius:14px;min-height:64px;padding:10px 14px;transition:opacity .6s;position:relative}.bubble:after{content:"";border:8px solid #0000;border-top-color:var(--accent);border-bottom:0;position:absolute;bottom:-10px;left:24px}.bubble.is-faded{opacity:.45}.bubble.is-empty{border-style:dashed;border-color:var(--line)}.bubble.is-empty:after{display:none}.bubble-name{color:var(--accent);margin-right:8px;font-size:.8rem;font-weight:700}.bubble-move{color:var(--muted);font-size:.8rem}.bubble-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0 0}.chat-log{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:8px;height:340px;padding:10px 12px;display:flex;overflow-y:auto}.chat-empty{margin:auto}.chat-entry{max-width:92%}.chat-entry.is-user{text-align:right;align-self:flex-end}.chat-meta{color:var(--muted);align-items:baseline;gap:8px;font-size:.75rem;display:flex}.chat-entry.is-user .chat-meta{justify-content:flex-end}.chat-name{color:var(--ink);font-weight:700}.chat-text{background:var(--bg);white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;border-radius:10px;margin:2px 0 0;padding:6px 10px}.chat-entry.is-user .chat-text{background:var(--accent-soft)}.chat-input-foot{justify-content:space-between;margin-top:4px;display:flex}.chat-input-foot>:last-child{margin-left:auto}.chat-input input{flex:1;width:auto;min-width:0}.panel-overlay{z-index:10;background:#0006;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.panel{background:var(--surface);border-radius:var(--radius);width:100%;max-width:640px;max-height:90vh;padding:20px;overflow:auto}.panel .card{box-shadow:none}.panel-close{margin-top:12px}.result{text-align:center}.result h2{font-size:1.6rem}.result.is-win h2{color:var(--accent)}.result.is-lose h2{color:var(--warn)}.result-comment{color:var(--muted);font-style:italic}.replay-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.replay-controls input[type=range]{min-width:120px;accent-color:var(--accent);flex:1}.replay-ply{font-variant-numeric:tabular-nums;min-width:9em}.kifu{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);max-height:360px;margin:0;padding:4px;list-style:none;overflow-y:auto}.kifu button{all:unset;cursor:pointer;box-sizing:border-box;border-radius:6px;grid-template-columns:2.5em auto;gap:0 6px;width:100%;padding:4px 8px;display:grid}.kifu li.is-current button{background:var(--accent-soft)}.kifu-ply{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.kifu-comment{color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;grid-column:2;font-size:.85rem}.chat-details summary{cursor:pointer;margin-bottom:8px}.board-text{background:var(--surface);border-radius:8px;padding:12px}.shogi{--cell:min(calc((100vw - 64px) / 9.6), 44px);flex-direction:column;align-items:center;gap:8px;display:flex}.shogi-hand{min-height:calc(var(--cell) * .95);width:calc(var(--cell) * 9 + 24px);flex-wrap:wrap;align-items:center;gap:4px;display:flex}.shogi-hand.is-top{justify-content:flex-start}.shogi-hand.is-bottom{justify-content:flex-end}.shogi-hand-label{color:var(--muted);margin:0 6px;font-size:.8rem}.shogi-hand-empty{color:var(--muted);font-size:.8rem}.shogi-hand-piece{appearance:none;background:var(--wood);color:#1a1209;width:calc(var(--cell) * .85);height:calc(var(--cell) * .9);font:inherit;font-size:calc(var(--cell) * .5);cursor:default;border:1px solid #0000;border-radius:4px;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-weight:700;position:relative}.shogi-hand.is-top .shogi-hand-piece{transform:rotate(180deg)}.shogi-hand-piece:disabled{opacity:1}.shogi-hand-piece small{background:var(--ink);color:var(--bg);border-radius:999px;min-width:16px;font-family:system-ui;font-size:.7rem;line-height:16px;position:absolute;bottom:-6px;right:-6px;transform:none}.shogi-hand.is-top .shogi-hand-piece small{transform:rotate(180deg)}.shogi-hand-piece.is-selectable{cursor:pointer;box-shadow:0 0 0 2px var(--target)}.shogi-hand-piece.is-selected{box-shadow:0 0 0 3px var(--accent)}.shogi-board-wrap{position:relative}.shogi-files{grid-template-columns:repeat(9, var(--cell));color:var(--muted);text-align:center;font-size:.75rem;display:grid}.shogi-board-row{display:flex}.shogi-board{grid-template-columns:repeat(9, var(--cell));grid-template-rows:repeat(9, calc(var(--cell) * 1.08));background:var(--wood);border:2px solid var(--wood-line);display:grid}.shogi-ranks{grid-template-rows:repeat(9, calc(var(--cell) * 1.08));color:var(--muted);align-items:center;width:20px;padding-left:4px;font-size:.75rem;display:grid}.shogi-cell{appearance:none;border:0;border-right:1px solid var(--wood-line);border-bottom:1px solid var(--wood-line);cursor:default;color:#1a1209;background:0 0;place-items:center;padding:0;display:grid;position:relative}.shogi-cell:nth-child(9n){border-right:0}.shogi-cell:nth-last-child(-n+9){border-bottom:0}.shogi-cell.is-last{background:var(--highlight)}.shogi-cell.is-movable{cursor:pointer}.shogi-cell.is-selected{background:#2f6f5e73}.shogi-cell.is-target{cursor:pointer}.shogi-cell.is-target:after{content:"";background:var(--target);border-radius:50%;width:30%;height:30%;position:absolute}.shogi-piece{font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:calc(var(--cell) * .58);font-weight:700;line-height:1}.shogi-piece.is-opponent{transform:rotate(180deg)}.shogi-piece.is-promoted{color:#b3261e}.shogi-promote{background:var(--surface);border-radius:var(--radius);text-align:center;width:220px;height:fit-content;margin:auto;padding:16px;position:absolute;inset:0;box-shadow:0 8px 30px #0000004d}.shogi-promote>div{justify-content:center;gap:8px;margin-bottom:8px;display:flex}.othello{--cell:min(calc((100vw - 72px) / 8.4), 50px);flex-direction:column;align-items:center;gap:6px;display:flex}.othello-counts{font-variant-numeric:tabular-nums;gap:20px;font-weight:700;display:flex}.othello-counts span{border-radius:999px;align-items:center;gap:6px;padding:2px 10px;display:inline-flex}.othello-counts span.is-turn{background:var(--accent-soft)}.othello-counts .othello-stone{width:16px;height:16px}.othello-files{grid-template-columns:repeat(8, var(--cell));color:var(--muted);text-align:center;margin-left:20px;font-size:.75rem;display:grid}.othello-board-row{display:flex}.othello-ranks{grid-template-rows:repeat(8, var(--cell));width:20px;color:var(--muted);align-items:center;font-size:.75rem;display:grid}.othello-board{grid-template-columns:repeat(8, var(--cell));grid-template-rows:repeat(8, var(--cell));background:var(--felt);border:3px solid var(--felt-line);background-clip:padding-box;background:var(--felt-line);gap:1px;display:grid}.othello-cell{appearance:none;background:var(--felt);border:0;place-items:center;padding:0;display:grid;position:relative}.othello-cell:disabled{cursor:default;color:inherit}.othello-cell.is-target{cursor:pointer}.othello-cell.is-target:after{content:"";background:#ffffff59;border-radius:50%;width:26%;height:26%}.othello-cell.is-target:hover:after{background:#fff9}.othello-cell.is-last{box-shadow:inset 0 0 0 3px #ffc400cc}.othello-stone{border-radius:50%;width:82%;height:82%;display:inline-block}.othello-stone.is-black{background:radial-gradient(circle at 35% 30%,#555,#111 60%)}.othello-stone.is-white{background:radial-gradient(circle at 35% 30%,#fff,#d8d8d8 70%);border:1px solid #aaa}.othello-pass{text-align:center}