@font-face{font-family:Outfit;src:url(../fonts/outfit-var.woff2) format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:Geist Mono;src:url(../fonts/geist-mono.woff2) format("woff2");font-weight:500;font-display:swap}:root{--surface-base: #17181c;--surface-board: #1f2126;--surface-raised: #282b31;--surface-overlay: #32363d;--text-primary: #e8e9ec;--text-secondary: #9ba0aa;--text-tertiary: #6b707a;--accent: #4ade80;--accent-dim: #22c55e;--accent-glow: rgb(74 222 128 / .18);--state-error: #f87171;--state-hint: #fbbf24;--radius-panel: 16px;--radius-input: 10px}[data-theme=light]{--surface-base: #e6e3dd;--surface-board: #dcd8d0;--surface-raised: #f4f2ee;--surface-overlay: #ffffff;--text-primary: #24262b;--text-secondary: #5b606a;--text-tertiary: #8a8f99;--accent: #16a34a;--accent-dim: #15803d;--accent-glow: rgb(22 163 74 / .15)}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--surface-base: #e6e3dd;--surface-board: #dcd8d0;--surface-raised: #f4f2ee;--surface-overlay: #ffffff;--text-primary: #24262b;--text-secondary: #5b606a;--text-tertiary: #8a8f99;--accent: #16a34a;--accent-dim: #15803d;--accent-glow: rgb(22 163 74 / .15)}}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Outfit,Hiragino Sans,Hiragino Kaku Gothic ProN,Yu Gothic Medium,Yu Gothic,Meiryo,Noto Sans JP,system-ui,sans-serif;background:var(--surface-base);color:var(--text-primary);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.topbar{min-height:3.5rem;display:flex;align-items:center;gap:1.25rem;padding:0 1rem;flex:none}.topbar .stat{display:flex;align-items:baseline;gap:.35rem;color:var(--text-secondary);font-size:.85rem}.topbar .stat b{font-family:Geist Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:600;color:var(--text-primary)}.topbar .spacer{flex:1}.topbar .icon-btn+.icon-btn{margin-left:-.9rem}.icon-btn{appearance:none;border:none;background:none;color:var(--text-primary);min-width:48px;min-height:48px;border-radius:999px;cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .1s,opacity .15s}.icon-btn .ico{width:26px;height:26px;display:block}.icon-btn:hover{background:var(--surface-raised)}.icon-btn:active{transform:scale(.94)}.icon-btn:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}#btn-sound .ico-off{display:none}#btn-sound[aria-checked=false]{color:var(--text-tertiary)}#btn-sound[aria-checked=false] .ico-on{display:none}#btn-sound[aria-checked=false] .ico-off{display:block}.board-wrap{flex:1;position:relative;display:grid;place-items:center;padding:1.5rem;min-height:0;overflow:auto}.actionbar{flex:none;display:flex;justify-content:center;gap:.75rem;padding:.6rem 1rem calc(.6rem + 2px)}.action-btn{appearance:none;border:none;min-height:48px;padding:0 1.25rem;border-radius:999px;background:var(--surface-raised);color:var(--text-primary);font:inherit;font-size:.95rem;cursor:pointer;transition:background .15s,transform .1s}.action-btn:hover{background:var(--surface-overlay)}.action-btn:active{transform:translateY(1px) scale(.98)}.action-btn:disabled{opacity:.35;cursor:default}.action-btn .cost{font-size:.72rem;color:var(--text-tertiary);margin-left:.3rem}@media(max-width:430px){.board-wrap{padding:1.25rem}.actionbar{gap:.4rem;padding-left:.5rem;padding-right:.5rem}.action-btn{padding:0 .7rem;font-size:.88rem}.action-btn .cost{font-size:.62rem;margin-left:.18rem}}@media(orientation:landscape)and (max-height:560px){.app{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;grid-template-areas:"board topbar" "board actions"}.board-wrap{grid-area:board;padding:1.25rem}.topbar{grid-area:topbar;min-height:2.75rem;gap:.6rem;padding:0 .5rem}.topbar .stat{font-size:.78rem}.topbar .stat b{font-size:.95rem}.actionbar{grid-area:actions;flex-direction:column;justify-content:center;padding:0 .75rem}}.drawer-backdrop{position:fixed;inset:0;background:#00000073;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer{position:fixed;left:0;right:0;bottom:0;max-height:82vh;max-height:82dvh;overflow-y:auto;background:var(--surface-raised);border-radius:var(--radius-panel) var(--radius-panel) 0 0;padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));transform:translateY(100%);visibility:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),visibility 0s .25s;z-index:50}.drawer.open{transform:translateY(0);visibility:visible;transition:transform .25s cubic-bezier(.16,1,.3,1),visibility 0s}.drawer .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.drawer .drawer-head h2{margin-bottom:0}.drawer h2{font-size:1.05rem;margin-bottom:.75rem}.drawer section{margin-bottom:1.25rem}.drawer .row{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:1rem}.drawer .row>span{color:var(--text-secondary);font-size:.92rem}.seg{display:inline-flex;background:var(--surface-base);border-radius:999px;padding:3px;gap:2px}.seg button{appearance:none;border:none;background:none;color:var(--text-secondary);font:inherit;font-size:.85rem;min-height:36px;padding:0 .9rem;border-radius:999px;cursor:pointer}.seg button[aria-pressed=true]{background:var(--surface-overlay);color:var(--text-primary)}.seg button:disabled{opacity:.3;cursor:default}.switch{appearance:none;width:48px;height:28px;background:var(--surface-base);border-radius:999px;position:relative;cursor:pointer;transition:background .15s;border:none}.switch:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--text-secondary);transition:transform .15s,background .15s}.switch[aria-checked=true]{background:var(--accent-dim)}.switch[aria-checked=true]:after{transform:translate(20px);background:#fff}.stats-table{width:100%;border-collapse:collapse;font-size:.85rem}.stats-table td,.stats-table th{padding:.4rem .5rem;text-align:right;color:var(--text-secondary)}.stats-table th:first-child,.stats-table td:first-child{text-align:left}.stats-table b{font-family:Geist Mono,ui-monospace,monospace;color:var(--text-primary);font-variant-numeric:tabular-nums}.result{position:fixed;left:50%;bottom:-100%;transform:translate(-50%);width:min(92vw,380px);background:var(--surface-raised);border-radius:var(--radius-panel);padding:1.5rem;z-index:60;visibility:hidden;transition:bottom .35s cubic-bezier(.16,1,.3,1),visibility 0s .35s;text-align:center}.result.open{bottom:max(6vh,calc(env(safe-area-inset-bottom) + 2rem));bottom:max(6dvh,calc(env(safe-area-inset-bottom) + 2rem));visibility:visible;transition:bottom .35s cubic-bezier(.16,1,.3,1),visibility 0s}.result h2{font-size:1.3rem;margin-bottom:.25rem}.result .record{color:var(--state-hint);font-size:.9rem;margin-bottom:.5rem}.result .assisted-note{color:var(--text-tertiary);font-size:.8rem;margin-bottom:.5rem}.result .meta{color:var(--text-secondary);font-size:.9rem;margin-bottom:1.1rem}.result .meta b{font-family:Geist Mono,ui-monospace,monospace;color:var(--text-primary);font-variant-numeric:tabular-nums}.result .btns{display:flex;gap:.6rem;justify-content:center}.result .btns .action-btn.primary{background:var(--accent-dim);color:#fff}.toast{position:fixed;top:calc(env(safe-area-inset-top) + .75rem);left:50%;transform:translate(-50%) translateY(-8px);background:var(--surface-overlay);color:var(--text-primary);font-size:.88rem;border-radius:999px;padding:.5rem 1.1rem;opacity:0;transition:opacity .2s,transform .2s;z-index:70;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.win-band{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}.win-band:after{content:"";position:absolute;top:0;bottom:0;width:18%;left:-20%;background:linear-gradient(100deg,transparent,var(--accent-glow),transparent);animation:band .9s cubic-bezier(.4,0,.2,1) forwards}.win-band.record:after{background:linear-gradient(100deg,transparent,rgb(251 191 36 / .3),transparent);animation-duration:1.2s}@keyframes band{to{left:110%}}@media(prefers-reduced-motion:reduce){.win-band:after{animation:none;opacity:0}.drawer,.result,.toast,.action-btn,.switch:after{transition:none}}.board{position:relative;background:var(--surface-board);border-radius:var(--radius-panel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.tile-layer{position:absolute;inset:0}.tile-layer .row-c{display:contents}.tile{position:absolute;appearance:none;border:none;padding:0;width:var(--fw);height:var(--fh);background:transparent no-repeat url(../tiles.webp);background-size:100% 3400%;background-position:0 calc(var(--k) * 100% / 33);cursor:pointer;transition:transform .12s cubic-bezier(.16,1,.3,1),opacity .2s,filter .12s;will-change:transform}.tile:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}.tile.selected{transform:translateY(-4px);filter:drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 2px var(--accent)) drop-shadow(0 5px 5px rgb(0 0 0 / .45));z-index:2}.tile.hinted{z-index:2}.tile.hinted:not(.selected){animation:hintPulse .9s ease-in-out infinite}@keyframes hintPulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 1px var(--state-hint)) drop-shadow(0 0 1px var(--state-hint)) drop-shadow(0 0 3px var(--state-hint))}50%{transform:scale(1.12) translateY(-2px);filter:drop-shadow(0 0 2px var(--state-hint)) drop-shadow(0 0 2px var(--state-hint)) drop-shadow(0 0 14px var(--state-hint))}}.tile.illegal{animation:shake .12s ease-in-out 2}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.tile.removing{transform:translateY(-12px) scale(.85);opacity:0;pointer-events:none;transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .24s}.tile.recovering{animation:faceFlip .42s cubic-bezier(.34,1.56,.64,1)}@keyframes faceFlip{0%{transform:scaleX(1)}50%{transform:scaleX(.1)}to{transform:scaleX(1)}}.effects{position:absolute;pointer-events:none;z-index:3}@media(prefers-reduced-motion:reduce){.tile{transition:opacity .1s}.tile.selected{transform:none}.tile.removing{transform:none;transition:opacity .1s}.tile.hinted,.tile.illegal,.tile.recovering{animation:none}.tile.hinted{filter:drop-shadow(0 0 2px var(--state-hint)) drop-shadow(0 0 2px var(--state-hint)) drop-shadow(0 0 10px var(--state-hint))}}