:root{--bg:#faf7f2;--surface:#fff;--board:#e6c88c;--board-line:#8b6b3e;--ink:#1c1917;--ink-soft:#6b6560;--tile:#f6e2b8;--tile-edge:#c49a5a;--promoted:#b91c1c;--accent:#2563eb;--accent-soft:#dbeafe;--flip:#f97316;--danger:#dc2626;--shadow:0 1px 2px #1c19172e;--radius:10px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#16130f;--surface:#241f19;--board:#6b5231;--board-line:#2a1f12;--ink:#f5f0e8;--ink-soft:#a8a099;--tile:#d8bd8a;--tile-edge:#7a5c30;--promoted:#dc2626;--accent:#60a5fa;--accent-soft:#1e3a5f;--flip:#fb923c;--danger:#f87171;--shadow:0 1px 3px #00000080;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{background:var(--bg);color:var(--ink);overscroll-behavior:none;margin:0;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,system-ui,sans-serif;font-size:15px;line-height:1.5}#app{max-width:460px;padding:max(8px, env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));flex-direction:column;gap:8px;min-height:100dvh;margin:0 auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:8px;display:flex}.topbar__buttons{flex:none;align-items:center;gap:0;display:flex}button.ghost.icon{text-align:center;min-width:30px;padding:6px 4px;font-size:13px}.topbar h1{letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;margin:0;font-size:16px;overflow:hidden}.topbar .subtitle{color:var(--ink-soft);letter-spacing:.02em;font-size:11px;font-weight:400;display:block}button{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--tile-edge);border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow);min-height:40px;padding:8px 12px}button:disabled{opacity:.4;cursor:default;box-shadow:none}button.ghost{box-shadow:none;min-height:32px;color:var(--ink-soft);background:0 0;border-color:#0000;padding:6px 8px;font-size:12px}.modes{grid-template-columns:repeat(5,1fr);gap:5px;display:grid}.modes button{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;min-height:34px;padding:6px 2px;font-size:clamp(10px,3.1vw,13px);line-height:1.2}.modes button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:#0000;font-weight:700}.actions{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.actions button{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;padding:8px 4px;font-size:clamp(11px,3.4vw,15px);line-height:1.2}.actions .danger{color:var(--danger)}.hand{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:8px;min-height:54px;padding:6px 8px;display:flex}.hand__label{color:var(--ink-soft);white-space:pre-line;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;flex:none;width:4.5em;max-width:30%;font-size:11px;line-height:1.2}.hand__pieces{flex-wrap:wrap;flex:auto;gap:6px;display:flex}.hand__empty{color:var(--ink-soft);font-size:12px}.clock{font-variant-numeric:tabular-nums;background:var(--bg);color:var(--ink-soft);text-align:center;border-radius:8px;flex:none;min-width:58px;padding:4px 8px;font-size:15px;font-weight:700}.clock[data-active=true]{background:var(--accent);color:#fff}.banner{border-radius:var(--radius);background:var(--accent-soft);color:var(--ink);text-align:center;margin:0;padding:8px 10px;font-size:13px}.banner[data-danger=true]{background:var(--danger);color:#fff;font-weight:700}.modes{grid-template-columns:repeat(5,1fr)}.chip{background:var(--tile);border:1px solid var(--tile-edge);color:#1c1917;align-items:baseline;gap:2px;min-height:38px;padding:4px 8px;display:inline-flex}.chip__kanji{font-size:20px;font-weight:600;line-height:1}.chip__count{color:#6b5231;font-size:12px}.chip[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:1px}.hand--gote .chip{transform:rotate(180deg)}.board-wrap{position:relative}.board{background:var(--board-line);border:2px solid var(--board-line);aspect-ratio:1;border-radius:4px;gap:1px;width:100%;display:grid;overflow:hidden}.cell{all:unset;background:var(--board);cursor:pointer;aspect-ratio:1;justify-content:center;align-items:center;display:flex;position:relative}.cell__piece{background:var(--tile);border:1px solid var(--tile-edge);color:#1c1917;border-radius:3px;justify-content:center;align-items:center;width:84%;height:84%;font-size:clamp(18px,6.4vw,30px);font-weight:600;transition:transform .14s;display:flex;box-shadow:0 1px 1px #00000040}.cell__piece[data-owner=gote]{transform:rotate(180deg)}.cell__piece[data-roman]:after,.chip__kanji[data-roman]:after,.tut__piece[data-roman]:after{content:attr(data-roman);letter-spacing:.02em;text-align:center;opacity:.7;font-size:.34em;font-weight:700;line-height:1;position:absolute;bottom:1px;left:0;right:0}.cell__piece[data-roman],.chip__kanji[data-roman],.tut__piece[data-roman]{position:relative}.cell__piece[data-promoted=true]{color:var(--promoted)}.cell__piece[data-guarded=true]{box-shadow:0 1px 1px #00000040,inset 0 0 0 2px #2563eb73}.cell[data-selected=true]{background:var(--accent-soft)}.cell[data-target=true]:after{content:"";background:var(--accent);opacity:.55;pointer-events:none;border-radius:50%;width:26%;height:26%;position:absolute}.cell[data-target=true][data-occupied=true]:after{border:3px solid var(--accent);opacity:.9;background:0 0;border-radius:4px;width:84%;height:84%}.cell[data-flip]:before{content:attr(data-flip);z-index:2;background:var(--flip);color:#fff;text-align:center;pointer-events:none;border-radius:8px;min-width:15px;height:15px;padding:0 3px;font-size:10px;font-weight:700;line-height:15px;position:absolute;top:2px;right:2px}.cell[data-flip] .cell__piece{outline:3px solid var(--flip);outline-offset:-1px;animation:.9s ease-in-out infinite flip-pulse}@keyframes flip-pulse{50%{opacity:.55}}.cell[data-gain]:before{content:attr(data-gain);z-index:2;background:var(--flip);color:#fff;text-align:center;pointer-events:none;border-radius:8px;min-width:15px;height:15px;padding:0 3px;font-size:10px;font-weight:700;line-height:15px;position:absolute;top:2px;right:2px}.cell[data-just-flipped=true] .cell__piece{animation:.2s ease-out flip-in}@keyframes flip-in{0%{transform:scaleX(.1) rotate(var(--spin,0deg))}}.cell[data-just-flipped=true] .cell__piece[data-owner=gote]{--spin:180deg}.cell[data-check=true]{background:#fecaca}.cell[data-check=true] .cell__piece{outline:3px solid var(--danger);outline-offset:-1px;animation:1.1s ease-in-out infinite check-pulse}@keyframes check-pulse{50%{outline-color:#0000}}@media (prefers-color-scheme:dark){.cell[data-check=true]{background:#7f1d1d}}.cell[data-last=true]{box-shadow:inset 0 0 0 3px #2563eb59}@media (prefers-reduced-motion:reduce){.cell__piece,.cell[data-flip] .cell__piece,.cell[data-just-flipped=true] .cell__piece{transition:none;animation:none}}.balance{background:var(--accent);opacity:.85;border-radius:3px;height:6px;overflow:hidden}.balance__fill{background:var(--flip);height:100%;transition:width .22s;display:block}.status{background:var(--surface);border-radius:var(--radius);min-height:42px;box-shadow:var(--shadow);flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:6px 10px;font-size:13px;display:flex}.status__turn{flex:none;font-weight:700}.status__turn[data-turn=gote]{color:var(--accent)}.status__turn[data-thinking=true]:after{content:"";background:var(--flip);border-radius:50%;width:8px;height:8px;margin-left:6px;animation:.9s ease-in-out infinite thinking;display:inline-block}@keyframes thinking{50%{opacity:.2}}.status__hint{color:var(--ink-soft);flex:120px;min-width:0}.status__counts{font-variant-numeric:tabular-nums;color:var(--ink-soft);background:var(--accent-soft);border-radius:6px;flex:none;margin-left:auto;padding:2px 6px;font-size:12px}.confirm{background:var(--accent);color:#fff;border-color:#0000;flex:none;font-weight:700}.chain-banner{pointer-events:none;z-index:20;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.chain-banner span{color:var(--flip);text-shadow:0 2px #00000040;font-size:clamp(40px,16vw,88px);font-weight:800;animation:.7s ease-out forwards chain-pop}@keyframes chain-pop{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1.15)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}.overlay{z-index:30;background:#1c191799;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.overlay__card{background:var(--surface);text-align:center;border-radius:16px;width:100%;max-width:320px;padding:24px;box-shadow:0 8px 32px #0000004d}.overlay__title{margin:0 0 6px;font-size:26px;font-weight:800}.overlay__reason{color:var(--ink-soft);margin:0 0 6px;font-size:13px}.overlay__stats{color:var(--ink-soft);margin:0 0 18px;font-size:12px}[hidden]{display:none!important}.tut__card{text-align:left;max-width:340px;padding:20px}.tut__title{text-align:center;margin:0 0 12px;font-size:19px}.tut__figures{flex-direction:column;align-items:center;gap:2px;display:flex}.tut__figures figure{width:100%;max-width:190px;margin:0}.tut__figures figcaption{color:var(--ink-soft);text-align:center;margin-bottom:4px;font-size:11px}.tut__arrow{color:var(--ink-soft);margin:2px 0;font-size:13px;line-height:1}.tut__chain{background:var(--flip);color:#fff;border-radius:6px;margin-left:4px;padding:0 5px;font-weight:700;display:inline-block}.tut__board{background:var(--board-line);border:2px solid var(--board-line);aspect-ratio:1;border-radius:3px;gap:1px;display:grid}.tut__cell{background:var(--board);aspect-ratio:1;justify-content:center;align-items:center;display:flex;position:relative}.tut__piece{background:var(--tile);border:1px solid var(--tile-edge);color:#1c1917;border-radius:2px;justify-content:center;align-items:center;width:84%;height:84%;font-size:14px;font-weight:600;display:flex}.tut__piece[data-owner=gote]{transform:rotate(180deg)}.tut__piece[data-promoted=true]{color:var(--promoted)}.tut__cell[data-mark=drop]{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}.tut__cell:not([data-mark=drop])[data-mark]:after{content:attr(data-mark);background:var(--flip);color:#fff;text-align:center;border-radius:6px;min-width:12px;height:12px;font-size:9px;font-weight:700;line-height:12px;position:absolute;top:0;right:0}.tut__cell:not([data-mark=drop])[data-mark] .tut__piece{outline:2px solid var(--flip);outline-offset:-1px}.tut__body{color:var(--ink);margin:14px 0 0;font-size:13px;line-height:1.7}.tut__dots{justify-content:center;gap:6px;margin:16px 0 12px;display:flex}.tut__dot{background:var(--tile-edge);opacity:.4;border-radius:50%;width:7px;height:7px}.tut__dot[data-on=true]{opacity:1;background:var(--accent)}.tut__buttons{justify-content:space-between;align-items:center;gap:8px;display:flex}.tut__buttons .confirm{flex:auto}.rank__card{text-align:left;max-width:340px}.rank__tabs{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;display:grid}.rank__tab[aria-pressed=true]{background:var(--accent);color:#fff;border-color:#0000;font-weight:700}.rank__body{min-height:180px;max-height:46vh;font-size:13px;overflow-y:auto}.rank__list{margin:0;padding:0;list-style:none}.rank__row{border-radius:6px;align-items:baseline;gap:8px;padding:6px 8px;display:flex}.rank__row:nth-child(odd){background:var(--bg)}.rank__row[data-me=true]{background:var(--accent-soft);font-weight:700}.rank__no{text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:0 0 2em}.rank__name{text-overflow:ellipsis;white-space:nowrap;flex:auto;overflow:hidden}.rank__value{font-variant-numeric:tabular-nums;flex:none}.rank__empty,.rank__me{color:var(--ink-soft);text-align:center;margin:12px 0;font-size:12px}