:root{--bg: #0b0b10;--fg: #f6f7fb;--muted: #cfd3e2;--grid: #1a1b22;--panel: #14151e;--accent: #6ee7ff;--good: #22d3ee;--near: #f59e0b;--far: #a78bfa;--bad: #ef4444;--key: #2a2d3a;--ring-thickness: 4px;--ring-blur: 10px;--shimmer-duration: 5.5s;--shimmer-angle: 135deg;--shimmer-size: 300% 300%;--shimmer-color: rgba(255,255,255,.6);--shimmer-color-light: rgba(255,255,255,.45)}.light{--bg: #fafafa;--fg: #0b0b10;--muted: #515568;--grid: #e8eaf1;--panel: #ffffff;--accent: #2563eb;--good: #16a34a;--near: #d97706;--far: #7c3aed;--bad: #dc2626;--key: #e5e7eb}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--fg)}header{width:100%;max-width:820px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;border-bottom:1px solid var(--grid)}.brand{display:flex;align-items:center;justify-content:center;gap:.6rem;font-weight:900;letter-spacing:.08em}.brand-centered .brand-text{font-size:clamp(1.8rem,5.2vw,2.6rem)}.logo{font-size:1.4rem}.ctl{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.ctl-under{justify-content:center}.btn{cursor:pointer;border:1px solid var(--grid);border-radius:.8rem;padding:.55rem .8rem;background:var(--panel);color:var(--fg);font-weight:700}.btn:hover{outline:2px solid var(--accent)}.tabs{display:flex;gap:.45rem}.tab{padding:.4rem .7rem;border-radius:.6rem;border:1px solid var(--grid);background:var(--panel);color:var(--fg);font-weight:750;cursor:pointer}.tab.active{outline:2px solid var(--accent)}.container{width:100%;max-width:820px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.board{display:flex;flex-direction:column;gap:.5rem;align-self:stretch}.row{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.tile{position:relative;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border:1px solid var(--grid);border-radius:.6rem;background:var(--panel);font-weight:900;font-size:1.35rem;color:var(--fg);overflow:hidden}.light .tile{background:#f3f4f6}.tile.down{background:var(--good);border-color:var(--good);color:#fff}.tile.left{background:var(--near);border-color:var(--near);color:#fff}.tile.right{background:var(--far);border-color:var(--far);color:#fff}.tile.x{background:var(--bad);border-color:var(--bad);color:#fff}.tile.typing{background:var(--panel);border:1px solid transparent;position:relative;overflow:visible}.light .tile.typing{background:#f3f4f6}.tile.typing:before{content:"";position:absolute;inset:calc(-1 * var(--ring-thickness));border-radius:.75rem;background:linear-gradient(var(--shimmer-angle),transparent 40%,var(--shimmer-color) 50%,transparent 60%),conic-gradient(from 0deg,#ff6b6b,#f59e0b,#22c55e,#06b6d4,#6366f1,#a855f7,#ec4899,#ff6b6b);background-size:var(--shimmer-size),cover;background-repeat:no-repeat,no-repeat;background-position:-200% -200%,center;filter:drop-shadow(0 0 var(--ring-blur) rgba(255,255,255,.12));animation:shimmer-slide var(--shimmer-duration) linear infinite;will-change:background-position;pointer-events:none;z-index:0}.light .tile.typing:before{background:linear-gradient(var(--shimmer-angle),transparent 40%,var(--shimmer-color-light) 50%,transparent 60%),conic-gradient(from 0deg,#ff6b6b,#f59e0b,#22c55e,#06b6d4,#6366f1,#a855f7,#ec4899,#ff6b6b);background-size:var(--shimmer-size),cover;background-repeat:no-repeat,no-repeat;background-position:-200% -200%,center}.tile.typing:after{content:"";position:absolute;inset:var(--ring-thickness);border-radius:.6rem;background:var(--panel);z-index:1}.light .tile.typing:after{background:#f3f4f6}.tile.typing .ch{position:relative;right:auto;bottom:auto;z-index:3;font-size:clamp(1.35rem,5.2vw,1.9rem);text-shadow:none}.tile .ch{position:absolute;right:6px;bottom:4px;z-index:3;font-size:clamp(1.05rem,3.6vw,1.35rem);line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.35)}.tile .mark-img{position:absolute;inset:0;margin:auto;width:clamp(44%,60%,70%);height:auto;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:2;object-fit:contain;opacity:1!important;mix-blend-mode:normal!important;filter:none!important}@keyframes shimmer-slide{0%{background-position:-200% -200%,center}50%{background-position:0% 0%,center}to{background-position:200% 200%,center}}@media (prefers-reduced-motion: reduce){.tile.typing:before{animation:none}}.kbd{display:flex;flex-direction:column;gap:.35rem;width:100%}.kbd-row{display:flex;justify-content:center;gap:.35rem}.key{padding:.7rem .55rem;min-width:2.1rem;border-radius:.6rem;text-align:center;background:var(--key);border:1px solid var(--grid);cursor:pointer;font-weight:800;color:var(--fg)}.key:active{transform:translateY(1px)}.key-wide{padding:.7rem .8rem;min-width:3.2rem}@media (min-width:480px){.key{min-width:2.3rem}}.key.down{background:var(--good);border-color:var(--good);color:#fff}.key.left{background:var(--near);border-color:var(--near);color:#fff}.key.right{background:var(--far);border-color:var(--far);color:#fff}.key.x{background:var(--bad);border-color:var(--bad);color:#fff}.legend{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.legend .lg{display:inline-flex;align-items:center;gap:.25rem}.legend .down{color:var(--good)}.legend .left{color:var(--near)}.legend .right{color:var(--far)}.legend .x{color:var(--bad)}.legend .legend-icon{width:1.1em;height:1.1em;vertical-align:-.15em;-webkit-user-select:none;user-select:none;pointer-events:none}.io{display:flex;flex-direction:column;gap:.75rem}.io input.btn{position:relative;background:color-mix(in oklab,var(--panel),#000 12%);border-color:color-mix(in oklab,var(--grid),#000 10%);outline:none;z-index:0}.io input.btn::placeholder{color:color-mix(in oklab,var(--muted),#000 22%)}.light .io input.btn{background:#eef1f6;border-color:#d7dbe6}.light .io input.btn::placeholder{color:#6b7280}.io input.btn:focus:before{content:"";position:absolute;inset:calc(-1 * var(--ring-thickness));border-radius:.9rem;background:linear-gradient(var(--shimmer-angle),transparent 40%,var(--shimmer-color) 50%,transparent 60%),conic-gradient(from 0deg,#ff6b6b,#f59e0b,#22c55e,#06b6d4,#6366f1,#a855f7,#ec4899,#ff6b6b);background-size:var(--shimmer-size),cover;background-repeat:no-repeat,no-repeat;background-position:-200% -200%,center;filter:drop-shadow(0 0 var(--ring-blur) rgba(255,255,255,.12));animation:shimmer-slide var(--shimmer-duration) linear infinite;will-change:background-position;pointer-events:none;z-index:-1}.light .io input.btn:focus:before{background:linear-gradient(var(--shimmer-angle),transparent 40%,var(--shimmer-color-light) 50%,transparent 60%),conic-gradient(from 0deg,#ff6b6b,#f59e0b,#22c55e,#06b6d4,#6366f1,#a855f7,#ec4899,#ff6b6b);background-size:var(--shimmer-size),cover;background-repeat:no-repeat,no-repeat;background-position:-200% -200%,center}.io input.btn:focus:after{content:"";position:absolute;inset:var(--ring-thickness);border-radius:.8rem;background:color-mix(in oklab,var(--panel),#000 12%);z-index:-1}.light .io input.btn:focus:after{background:#eef1f6}@media (prefers-reduced-motion: reduce){.io input.btn:focus:before{animation:none}}.muted{color:var(--muted)}.nav-muted{font-weight:600}.defCard{border:1px solid var(--grid);border-radius:1rem;padding:1rem;background:var(--panel)}.actions{display:flex;gap:.5rem;flex-wrap:wrap}.controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.accent{color:var(--accent);font-weight:900}.scoreline{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}.list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.35rem}.list-grid .tile{aspect-ratio:auto;padding:.4rem;font-size:.85rem;text-align:center;border-radius:.4rem}.toast{position:fixed;left:50%;bottom:16vh;transform:translate(-50%);background:var(--panel);border:1px solid var(--grid);padding:.6rem 1rem;border-radius:.8rem;box-shadow:0 10px 30px #00000040}.marquee-wrap{position:relative;overflow:hidden;width:100%;border-top:1px solid var(--grid);margin-top:1rem;background:color-mix(in oklab,var(--panel),#000 6%)}.light .marquee-wrap{background:color-mix(in oklab,var(--panel),#000 2%)}.marquee-track{display:inline-block;white-space:nowrap;will-change:transform;animation:marquee-slide 90s linear infinite;padding:.6rem 0}.marquee-item{display:inline-block;white-space:nowrap;max-width:none;color:var(--muted);font-size:clamp(.85rem,2.4vw,1rem)}.marquee-chunk{display:inline-block;white-space:nowrap}.marquee-chunk+.marquee-chunk:before{content:"🌈";color:var(--muted);margin:0 2.25rem}.marquee-word{color:var(--accent)}.marquee-wrap:hover .marquee-track{animation-play-state:paused}@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}.marquee-wrap.force-anim .marquee-track{animation:marquee-slide 90s linear infinite!important}@keyframes marquee-slide{0%{transform:translate(0)}to{transform:translate(-50%)}}.tile .ch{z-index:2}.tile.down .ch,.tile.left .ch,.tile.right .ch,.tile.x .ch{-webkit-text-stroke:1px #000}@media (min-width:640px){.tile{font-size:1.5rem}}