:root{--color-bg:#faf6ef;--color-surface:#fff;--color-surface-2:#f3eadc;--color-text:#2b2622;--color-muted:#6b625a;--color-accent:#d9772b;--color-link:#a8521a;--color-border:#e7ded2;--color-ink:#3b2416;--color-shadow:#3b2416;--color-dot:#3b241612;--color-wood:#7a4220;--color-wood-hi:#a35a2a;--color-felt:#2e6a4c;--color-felt-hi:#3a7d5b;--color-felt-line:#1d4532;--color-stone-black:#211c18;--color-stone-black-hi:#4a3f37;--color-stone-white:#fbf6ec;--color-stone-white-lo:#d8c7ad;--color-legal:#ffd36b;--color-error:#b4361f;--space-1:.25rem;--space-2:.5rem;--space-3:1rem;--space-4:2rem;--space-5:4rem;--gutter:clamp(1rem, .6rem + 1.8vw, 2rem);--px:3px;--font-pixel:"DotGothic16", "PixelMplus12", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", system-ui, sans-serif;--font-body:"Hiragino Sans", "BIZ UDPGothic", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;--font-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--text-title:clamp(2rem, 1.3rem + 3.2vw, 3.5rem);--duration-fast:.14s;--duration-normal:.28s;--ease-pop:cubic-bezier(.34, 1.56, .64, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#1c1916;--color-surface:#26221e;--color-surface-2:#2f2a25;--color-text:#ece6de;--color-muted:#a89e93;--color-accent:#f0954a;--color-link:#ffb172;--color-border:#3a342e;--color-ink:#0f0c0a;--color-shadow:#5a3018;--color-dot:#ffd2a00d;--color-wood:#5a3018;--color-wood-hi:#7a4220;--color-felt:#245a40;--color-felt-hi:#2f6e50;--color-felt-line:#143526;--color-legal:#ffc24a;--color-error:#ff8a6b}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background-color:var(--color-bg);background-image:radial-gradient(var(--color-dot) 1.2px, transparent 1.4px);min-height:100svh;color:var(--color-text);font-family:var(--font-body);overflow-wrap:anywhere;background-size:14px 14px;flex-direction:column;margin:0;line-height:1.7;display:flex}[hidden]{display:none!important}a{color:var(--color-link);text-underline-offset:.2em}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px dashed var(--color-accent);outline-offset:3px}code{font-family:var(--font-mono);font-size:.92em}.masthead{align-items:center;gap:var(--space-3);width:100%;max-width:72rem;padding:var(--space-5) var(--gutter) var(--space-4);flex-wrap:wrap;margin:0 auto;display:flex}.masthead.is-compact{padding-block:var(--space-3);gap:var(--space-2) var(--space-3)}.masthead.is-match{max-width:96rem}.masthead-beaver svg,.home-link svg{image-rendering:pixelated;display:block}.masthead-beaver{animation:2.4s steps(2,end) infinite bob}.home-link{transition:transform var(--duration-fast) ease-out;border-radius:4px;display:inline-block}.home-link:hover{transform:translateY(-2px)rotate(-4deg)}.title{font-family:var(--font-pixel);font-size:var(--text-title);letter-spacing:.04em;text-shadow:var(--px) var(--px) 0 var(--color-accent);margin:0;line-height:1.15}.title.is-small{text-shadow:2px 2px 0 var(--color-accent);font-size:clamp(1.25rem,1rem + 1vw,1.75rem)}.tagline{margin:var(--space-2) 0 0;color:var(--color-muted)}.crumb{color:var(--color-muted);margin:0;font-size:.8rem}.banner{font-family:var(--font-pixel);color:var(--color-accent);margin:0 0 0 auto}.page{width:100%;max-width:72rem;padding:0 var(--gutter) var(--space-5);flex:1;margin:0 auto}.footer{padding:var(--space-4) var(--gutter);text-align:center;font-family:var(--font-mono);letter-spacing:.12em;color:var(--color-muted);font-size:.75rem}.section-label{margin:0 0 var(--space-3);font-family:var(--font-pixel);letter-spacing:.12em;color:var(--color-muted);font-size:.95rem;font-weight:400}.section-label:before{content:"■ ";color:var(--color-accent)}.sub-heading{margin:var(--space-4) 0 var(--space-2);font-family:var(--font-pixel);font-size:1.05rem;font-weight:400}.note{color:var(--color-muted);font-size:.85rem}.panel,.game-card,.player,.kifu,.invite{background:var(--color-surface);border:var(--px) solid var(--color-ink);box-shadow:5px 5px 0 var(--color-shadow)}.panel{padding:var(--space-4) var(--gutter)}.panel p{margin:0 0 var(--space-2)}.game-list{gap:var(--space-3);max-width:40rem;margin:0;padding:0;list-style:none;display:grid}.game-card{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);color:inherit;transition:transform var(--duration-fast) ease-out, box-shadow var(--duration-fast) ease-out;text-decoration:none;display:flex}.game-card:hover{box-shadow:8px 8px 0 var(--color-accent);transform:translate(-2px,-2px)}.game-card:active{box-shadow:1px 1px 0 var(--color-shadow);transform:translate(3px,3px)}.game-card-icon{background:var(--color-felt);border:var(--px) solid var(--color-wood);grid-template-columns:repeat(2,1.5rem);gap:3px;padding:6px;display:grid}.game-card-icon .mini-stone:first-child{grid-area:1/1}.game-card-icon .mini-stone:nth-child(2){grid-area:1/2}.mini-stone{aspect-ratio:1;border-radius:50%;width:1.5rem}.mini-stone.is-black,.disc.is-black{background:var(--color-stone-black);box-shadow:inset -2px -2px 0 #00000080, inset 2px 2px 0 var(--color-stone-black-hi)}.mini-stone.is-white,.disc.is-white{background:var(--color-stone-white);box-shadow:inset -2px -2px 0 var(--color-stone-white-lo)}.game-card-body{flex:1;display:grid}.game-card-name{font-family:var(--font-pixel);font-size:1.6rem;line-height:1.3}.game-card-desc{color:var(--color-muted);font-size:.88rem}.game-card-arrow{color:var(--color-accent);transition:transform var(--duration-fast) steps(2);font-size:1.2rem}.game-card:hover .game-card-arrow{transform:translate(4px)}.reversi-top{gap:var(--space-4);align-items:start;display:grid}@media (width>=960px){.reversi-top{grid-template-columns:1.15fr 1fr}.panel-connect{grid-row:span 2}.form-status{grid-column:1/-1}}.copy-row{align-items:stretch;gap:var(--space-2);flex-wrap:wrap;min-width:0;display:flex}.code-chip{min-width:0;padding:var(--space-2) var(--space-3);background:var(--color-surface-2);border:2px solid var(--color-border);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;flex:14rem;font-size:.85rem}.code-chip.is-big{font-family:var(--font-pixel);letter-spacing:.18em;flex:0 auto;font-size:1.6rem}.steps{margin:0;padding-left:1.4rem}.prompt-example{padding:var(--space-3);background:var(--color-surface-2);border-left:6px solid var(--color-accent);font-weight:600}.play-form{gap:var(--space-3);display:grid}.join-form{margin-top:var(--space-4);padding-top:var(--space-4);border-top:2px dashed var(--color-border)}fieldset{gap:var(--space-2);border:0;flex-wrap:wrap;margin:0;padding:0;display:flex}legend,.field-label{width:100%;margin-bottom:var(--space-2);font-family:var(--font-pixel);font-size:.95rem}.choice{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:2px solid var(--color-ink);background:var(--color-surface);cursor:pointer;transition:background var(--duration-fast), transform var(--duration-fast);display:inline-flex;position:relative}.choice:hover{background:var(--color-surface-2)}.choice:has(input:checked){background:var(--color-accent);color:#2b1608;box-shadow:var(--px) var(--px) 0 var(--color-shadow);transform:translate(-1px,-1px)}.choice:has(input:focus-visible){outline:3px dashed var(--color-accent);outline-offset:3px}.choice input{accent-color:var(--color-ink);margin:0}.text-input{min-width:0;padding:var(--space-2) var(--space-3);border:2px solid var(--color-ink);background:var(--color-surface);color:var(--color-text);font:1.1rem/1.4 var(--font-mono);letter-spacing:.12em;flex:10rem}.text-input::placeholder{letter-spacing:0;color:var(--color-muted)}.btn{justify-content:center;align-items:center;gap:var(--space-2);border:var(--px) solid var(--color-ink);background:var(--color-surface-2);color:var(--color-text);font:1rem/1.3 var(--font-pixel);letter-spacing:.04em;cursor:pointer;box-shadow:4px 4px 0 var(--color-shadow);transition:transform var(--duration-fast) ease-out, box-shadow var(--duration-fast) ease-out, background var(--duration-fast);padding:.7rem 1.4rem;text-decoration:none;display:inline-flex}.btn:hover{box-shadow:6px 6px 0 var(--color-shadow);transform:translate(-2px,-2px)}.btn:active{box-shadow:1px 1px 0 var(--color-shadow);transform:translate(3px,3px)}.btn:disabled{opacity:.6;cursor:progress;transform:none}.btn-primary{background:var(--color-accent);color:#2b1608;font-size:1.1rem}.btn-small{box-shadow:3px 3px 0 var(--color-shadow);padding:.35rem .9rem;font-size:.85rem}.form-status{min-height:1.7em;font-family:var(--font-pixel);margin:0}.form-status.is-error{color:var(--color-error)}.match{width:100%;max-width:96rem;padding:0 var(--gutter) var(--space-4);gap:var(--space-3);grid-template-columns:minmax(0,1fr);grid-template-areas:"board""black""white""kifu";align-items:start;margin:0 auto;display:grid}@media (width>=640px){.match{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"board board""black white""kifu kifu"}}.side-black{grid-area:black}.side-white{grid-area:white}.board-area{justify-items:center;gap:var(--space-2);grid-area:board;min-width:0;display:grid}.kifu{padding:var(--space-3);grid-area:kifu;min-width:0}@media (width>=1024px){.match{gap:var(--space-3) var(--space-4);grid-template:"black board white""black board kifu"1fr/minmax(12rem,1fr) minmax(0,46rem) minmax(12rem,1fr)}}.turn{font-family:var(--font-pixel);margin:0;font-size:clamp(1.1rem,.9rem + .8vw,1.6rem)}.match.is-my-turn .turn{color:var(--color-accent);animation:1.2s steps(2,end) infinite blink}.result{padding:var(--space-2) var(--space-4);background:var(--color-accent);color:#2b1608;border:var(--px) solid var(--color-ink);box-shadow:5px 5px 0 var(--color-shadow);font-family:var(--font-pixel);letter-spacing:.06em;animation:pop var(--duration-normal) var(--ease-pop);margin:0;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem)}.board-frame{grid-template-rows:1.4rem auto;grid-template-columns:1.4rem minmax(0,1fr);width:min(100%,100svh - 9rem);min-width:min(100%,20rem);display:grid}.board-labels{font-family:var(--font-pixel);color:var(--color-muted);text-align:center;place-items:center;font-size:.85rem;display:grid}.board-labels.is-cols{grid-area:1/2;grid-template-columns:repeat(8,1fr);padding-inline:8px}.board-labels.is-rows{grid-area:2/1;grid-template-rows:repeat(8,1fr);padding-block:8px}.board{aspect-ratio:1;background:var(--color-felt-line);border:6px solid var(--color-wood);outline:var(--px) solid var(--color-ink);box-shadow:inset 0 0 0 2px var(--color-wood-hi), 7px 7px 0 var(--color-shadow);grid-area:2/2;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);gap:2px;padding:2px;display:grid}.cell{background:var(--color-felt);min-width:0;color:inherit;font:inherit;cursor:default;border:0;border-radius:0;padding:0;position:relative}.cell:disabled{opacity:1}.cell[data-coord=b2]:before,.cell[data-coord=g2]:before,.cell[data-coord=b7]:before,.cell[data-coord=g7]:before{content:"";background:var(--color-felt-line);z-index:1;width:8px;height:8px;position:absolute}.cell[data-coord=b2]:before{bottom:-5px;right:-5px}.cell[data-coord=g2]:before{bottom:-5px;left:-5px}.cell[data-coord=b7]:before{top:-5px;right:-5px}.cell[data-coord=g7]:before{top:-5px;left:-5px}.cell.is-legal{cursor:pointer}.cell.is-legal:after{content:"";background:var(--color-legal);box-shadow:0 0 0 2px var(--color-felt-line);animation:1.4s steps(3,end) infinite pulse;position:absolute;inset:38%}.cell.is-legal:hover,.cell.is-legal:focus-visible{background:var(--color-felt-hi)}.match[data-me=black] .cell.is-legal:hover:after,.match[data-me=white] .cell.is-legal:hover:after{opacity:.55;border-radius:50%;animation:none;inset:12%}.match[data-me=black] .cell.is-legal:hover:after{background:var(--color-stone-black)}.match[data-me=white] .cell.is-legal:hover:after{background:var(--color-stone-white)}.cell:focus-visible{outline:3px solid var(--color-legal);outline-offset:-3px}.stone{z-index:2;border-radius:50%;position:absolute;inset:11%}.stone.is-black{background:var(--color-stone-black);box-shadow:inset -4px -4px 0 #00000073, inset 4px 4px 0 var(--color-stone-black-hi), 2px 3px 0 #00000059}.stone.is-white{background:var(--color-stone-white);box-shadow:inset -4px -4px 0 var(--color-stone-white-lo), 2px 3px 0 #00000059}.stone.is-placed{animation:place var(--duration-normal) var(--ease-pop)}.stone.is-flipping{animation:.36s steps(6,end) flip}.cell.is-last .stone:after{content:"";background:var(--color-accent);position:absolute;inset:40%}.playback{justify-content:center;align-items:center;gap:var(--space-2) var(--space-3);width:min(100%,36rem);margin-top:var(--space-1);flex-wrap:wrap;display:flex}.pb-buttons{gap:var(--space-2);display:flex}.pb-btn{min-width:2.75rem;min-height:2.75rem;padding:0 var(--space-2);border:var(--px) solid var(--color-ink);background:var(--color-surface);color:var(--color-text);font:1.05rem/1 var(--font-pixel);cursor:pointer;box-shadow:3px 3px 0 var(--color-shadow);transition:transform var(--duration-fast) ease-out, box-shadow var(--duration-fast) ease-out}.pb-btn.is-last{padding-inline:var(--space-3);font-size:.9rem}.pb-btn.is-toggle.is-paused{background:var(--color-accent);color:#2b1608}.pb-btn:hover:not(:disabled){box-shadow:4px 4px 0 var(--color-shadow);transform:translate(-1px,-1px)}.pb-btn:active:not(:disabled){box-shadow:1px 1px 0 var(--color-shadow);transform:translate(2px,2px)}.pb-btn:focus-visible{outline:3px dashed var(--color-accent);outline-offset:3px}.pb-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:1px 1px 0 var(--color-shadow)}.pb-count{min-width:6.5em;font-family:var(--font-pixel);font-variant-numeric:tabular-nums;text-align:center;margin:0;font-size:1.05rem}.pb-past{padding:2px var(--space-2);text-align:center;color:var(--color-accent);font-family:var(--font-pixel);letter-spacing:.04em;flex-basis:100%;margin:0;font-size:.9rem}.pb-past[hidden]{display:none}.undo-btn{margin:var(--space-2) auto 0;justify-self:center}.undo-btn[hidden]{display:none}.move-error{min-height:1.5em;color:var(--color-error);font-family:var(--font-pixel);text-align:center;margin:0}.invite{padding:var(--space-3);width:min(100%,36rem)}.side{min-width:0}.player{padding:var(--space-3);transition:box-shadow var(--duration-normal), transform var(--duration-normal)}.player.is-turn{box-shadow:5px 5px 0 var(--color-accent);transform:translate(-2px,-2px)}.player.is-winner .player-name:after{content:" ★";color:var(--color-accent)}.player-head{align-items:center;gap:var(--space-3);display:flex}.disc{aspect-ratio:1;border-radius:50%;flex-shrink:0;width:2.4rem;display:inline-block}.disc.is-tiny{width:.9rem}.player-name{font-family:var(--font-pixel);margin:0;font-size:1.4rem;line-height:1.2}.player-kind{color:var(--color-muted);margin:0;font-size:.85rem}.player-count{font-family:var(--font-pixel);font-variant-numeric:tabular-nums;white-space:nowrap;margin:0 0 0 auto;font-size:clamp(1.8rem,1.4rem + 1.6vw,3rem);line-height:1}.you-tag{margin:var(--space-2) 0 0;padding:0 var(--space-2);background:var(--color-ink);color:var(--color-bg);font-family:var(--font-pixel);font-size:.8rem;display:inline-block}@media (prefers-color-scheme:dark){.you-tag{background:var(--color-accent);color:#2b1608}}.bubble{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--color-surface-2);border:var(--px) solid var(--color-ink);position:relative}.bubble:before{content:"";background:var(--color-surface-2);border-left:var(--px) solid var(--color-ink);border-top:var(--px) solid var(--color-ink);width:12px;height:12px;position:absolute;top:-12px;left:1.6rem;transform:translateY(5px)rotate(45deg)}.bubble.is-new{animation:pop var(--duration-normal) var(--ease-pop)}.bubble-meta{font-family:var(--font-mono);color:var(--color-muted);margin:0;font-size:.75rem}.bubble-text{margin:0;font-size:clamp(.95rem,.85rem + .4vw,1.2rem);line-height:1.55}.kifu-list{gap:2px;max-height:18rem;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow-y:auto}@media (width>=1024px){.kifu-list{max-height:26rem}}.kifu-item{align-items:center;column-gap:var(--space-2);padding:2px var(--space-2);font-family:var(--font-mono);grid-template-columns:2.2rem auto 1fr auto;font-size:.85rem;display:grid}.kifu-item:nth-child(odd){background:var(--color-surface-2)}.kifu-item.is-shown{outline:2px solid var(--color-accent);outline-offset:-2px}.kifu-item.is-undone{color:var(--color-muted);opacity:.6;text-decoration:line-through;text-decoration-thickness:1px}.kifu-undone{padding:0 var(--space-2);border:1px dashed var(--color-muted);font-family:var(--font-pixel);grid-column:4;font-size:.75rem;text-decoration:none}.kifu-num{color:var(--color-muted);text-align:right}.kifu-comment{font-family:var(--font-body);color:var(--color-muted);grid-column:3;font-size:.8rem}.gone{justify-items:center;gap:var(--space-3);padding:var(--space-5) var(--gutter);text-align:center;display:grid}.gone svg{display:block;transform:rotate(-8deg)}.gone-text{font-family:var(--font-pixel);margin:0;font-size:clamp(1.1rem,.9rem + 1vw,1.6rem)}@keyframes bob{50%{transform:translateY(-4px)}}@keyframes blink{50%{opacity:.7}}@keyframes pulse{50%{transform:scale(.75)}}@keyframes place{0%{opacity:0;transform:scale(.3)}}@keyframes flip{50%{transform:scaleX(0)}}@keyframes pop{0%{opacity:0;transform:translateY(6px)scale(.92)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (prefers-color-scheme:dark){.mini-stone.is-black,.disc.is-black{box-shadow:inset -2px -2px 0 #00000080, inset 2px 2px 0 var(--color-stone-black-hi), 0 0 0 2px var(--color-muted)}}