:root{--paper:#fbf7ea;--ground:#e8dfc6;--ink:#3a2e28;--muted:#6b5d50;--accent:#d2574e;--water:#4a8fdc;--line:#d8ccaa;--felt:#5f9a5a;--felt-dark:#4b8047;--font:"Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--ground);color:var(--ink);font:15px/1.6 var(--font);margin:0}a{color:#1f6fbf}:focus-visible{outline:3px solid var(--water);outline-offset:2px}.sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}h1{margin:8px 0;font-size:22px}h2{margin:12px 0 6px;font-size:16px}button,.button{font:inherit;border:2px solid var(--ink);background:var(--paper);min-height:40px;color:var(--ink);cursor:pointer;border-radius:10px;padding:6px 14px;text-decoration:none;display:inline-block;box-shadow:0 2px #00000040}button:active{translate:0 1px;box-shadow:0 1px #00000040}.primary{background:var(--accent);color:#fff}.big{padding:8px 22px;font-size:17px}.row{flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;display:flex}.note{color:var(--muted);font-size:13px}.lead{margin:4px 0 12px}.ghead{padding:8px max(16px, env(safe-area-inset-right,0px)) 8px max(16px, env(safe-area-inset-left,0px));background:var(--paper);border-bottom:3px solid var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.ghead h1,.brand{color:var(--ink);margin:0;font-size:18px;font-weight:700;text-decoration:none}.ghead .row{margin:0}.langs{gap:4px;display:flex}.langs button,.iconbtn{min-height:32px;box-shadow:none;border-width:1px;padding:2px 10px;font-size:13px}.langs button[aria-pressed=true]{background:var(--ink);color:#fff}.gfoot{text-align:center;padding:16px;font-size:13px}main{max-width:760px;margin:0 auto;padding:12px 16px 24px}.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.card{background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:14px;box-shadow:0 4px #0003}.card h2{margin:4px 0}.card p{min-height:3em;font-size:14px}.card.off{opacity:.6}.cicon{font-size:34px;line-height:1.2}.tag{border:1px dashed var(--muted);color:var(--muted);border-radius:99px;padding:2px 10px;font-size:13px;display:inline-block}.setup,.records{background:var(--paper);border:3px solid var(--ink);border-radius:16px;margin:12px 0;padding:12px 16px}.choice{border:0;margin:10px 0;padding:0}.choice legend{margin-bottom:4px;font-weight:700}.opt{border:2px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;align-items:center;gap:6px;min-height:40px;margin:3px 6px 3px 0;padding:6px 12px;display:inline-flex}.opt:has(input:checked){border-color:var(--ink);background:#fff5d6;font-weight:700}.opt:has(input:focus-visible){outline:3px solid var(--water);outline-offset:2px}.records ul{margin:0;padding-left:1.2em}.reversi{justify-items:center;gap:8px;display:grid}.gtop{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;width:100%;max-width:560px;display:flex}.scores,.gbtns{flex-wrap:wrap;gap:6px;display:flex}.chip{border:2px solid var(--line);background:var(--paper);border-radius:99px;align-items:center;gap:4px;padding:4px 12px;font-weight:700;display:inline-flex}.chip.now{border-color:var(--ink);background:#fff5d6}.mini{border:2px solid var(--ink);border-radius:50%;width:14px;height:14px;display:inline-block}.mini.b{background:#2b2522}.mini.w{background:#fffdf6}.gstatus{text-align:center;min-height:1.6em;margin:0;font-weight:700}.rwrap{color:var(--muted);grid-template-rows:18px auto;grid-template-columns:18px min(88vw,520px);font-size:12px;display:grid}.rfiles{text-align:center;grid-template-columns:repeat(8,1fr);display:grid}.rranks{text-align:center;grid-template-rows:repeat(8,1fr);align-items:center;display:grid}.rboard{aspect-ratio:1;background:var(--felt);border:4px solid var(--ink);border-radius:10px;grid-template-rows:repeat(8,1fr);gap:2px;padding:4px;display:grid;box-shadow:0 5px #00000040}.rrow{grid-template-columns:repeat(8,1fr);gap:2px;display:grid}.rcell{min-height:0;box-shadow:none;background:var(--felt-dark);cursor:default;border:0;border-radius:3px;place-items:center;margin:0;padding:0;display:grid;position:relative}.rcell:active{translate:none}.rcell.can{cursor:pointer}.rcell.can:after{content:"";background:#fffdf68c;border:2px solid #2b252259;border-radius:50%;width:26%;height:26%}.rboard.busy .rcell.can:after{display:none}.rcell.last{box-shadow:inset 0 0 0 3px var(--accent)}.rcell:focus-visible{outline-offset:-3px;z-index:1;outline:3px solid #ffd84a}.stone{border:3px solid var(--ink);border-radius:50%;width:80%;height:80%;display:none;box-shadow:inset 0 -4px #0000002e}.stone[data-c=b]{background:#2b2522;display:block;box-shadow:inset 0 3px #ffffff2e}.stone[data-c=w]{background:#fffdf6;display:block}.rcell .stone[data-c]{grid-area:1/1}.stone.flip{animation:.32s ease-out rflip}@keyframes rflip{0%{transform:scaleX(.1)}to{transform:scaleX(1)}}.rboard.turned{animation:.35s ease-out rturn}@keyframes rturn{0%{opacity:.2;transform:rotate(-90deg)scale(.9)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.stone.flip,.rboard.turned{animation:none}}.gdialog{border:3px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:16px;max-width:min(92vw,420px);padding:16px 20px;box-shadow:0 6px #00000040}.gdialog::backdrop{background:#3a2e2873}.gdialog h2{margin-top:0;font-size:22px}.gdialog .big{font-size:18px;font-weight:700}
