@font-face{font-family:Titan One;src:url(./TitanOne-Regular-xv9-ylzg.ttf)format("truetype");font-display:swap}#app{--field:#f4efff;--pattern:#e4d9ff;--ink:#2d2250;--deep:#1c1535;--tile:#ffd84d;--tile-shade:#e8b400;--band:#ff6fae;--right:#3ddc97;--wrong:#ff4d4d;--paper:#fffaf0;--muted:#3d3168;--ol:4px;--drop:6px;--r:12px;--font:"Titan One", system-ui, sans-serif}#app [hidden]{display:none!important}#app .cut{background:var(--paper);border:var(--ol) solid var(--ink);border-radius:var(--r);box-shadow:0 var(--drop) 0 var(--deep)}#app .outlined{color:var(--paper);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--deep)}#app .btn{font:inherit;color:var(--paper);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;background:var(--right);border:var(--ol) solid var(--ink);border-radius:var(--r);box-shadow:0 var(--drop) 0 var(--deep);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:7px 18px 10px;font-size:18px}#app .btn.pink{background:var(--band)}#app .btn.plain{background:var(--paper);color:var(--ink);-webkit-text-stroke:0}#app .btn:active{box-shadow:0 2px 0 var(--deep);translate:0 4px}#app .btn:disabled{opacity:.45;cursor:default}#app .btn:focus-visible{outline:3px solid var(--band);outline-offset:3px}#app .stat{border:var(--ol) solid var(--ink);border-radius:var(--r);box-shadow:0 var(--drop) 0 var(--deep);flex-direction:column;min-width:84px;display:inline-flex;overflow:hidden}#app .stat .lab{background:var(--band);color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-align:center;letter-spacing:1px;padding:2px 8px 4px;font-size:12px}#app .stat .val{background:var(--ink);color:var(--tile);text-align:center;font-variant-numeric:tabular-nums;padding:2px 8px 5px;font-size:22px}#app .band{z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='44' viewBox='0 0 400 44'%3E%3Cpath d='M0 22 Q100 0 200 22 T400 22 V44 H0 Z' fill='%23ff6fae'/%3E%3C/svg%3E") 0 0/400px 44px repeat-x;height:44px;animation:14s linear infinite yap-drift;position:absolute;bottom:0;left:0;right:0}@keyframes yap-drift{0%{background-position-x:0}to{background-position-x:-400px}}#app .spark{background:var(--band);opacity:0;z-index:0;pointer-events:none;border-radius:50%;width:9px;height:9px;animation:7s linear infinite yap-rise;position:absolute}@keyframes yap-rise{0%{opacity:0;transform:translateY(0)}15%{opacity:.65}to{opacity:0;transform:translateY(-300px)}}@media (prefers-reduced-motion:reduce){#app .band,#app .spark{animation:none}#app .spark{display:none}}#app,#app *{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}#app{background-color:var(--field);background-image:radial-gradient(circle at 20px 20px, var(--pattern) 3px, transparent 4px), radial-gradient(circle at 60px 60px, var(--pattern) 2px, transparent 3px);height:100%;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none;background-size:80px 80px;flex-direction:column;display:flex;position:relative;overflow:hidden}#app #bar{z-index:3;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;display:flex;position:relative}#app .brand{-webkit-text-stroke-width:5px;margin-right:auto;font-size:26px;line-height:1}#app .modes{gap:6px;display:flex}#app .mode{font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:0 4px 0 var(--deep);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px;padding:4px 10px 6px;font-size:14px}#app .mode[aria-selected=true]{background:var(--tile)}#app .bar-btn{font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--ink);width:38px;height:34px;box-shadow:0 4px 0 var(--deep);cursor:pointer;border-radius:10px;font-size:15px}#app #stage{z-index:1;flex-direction:column;flex:1;align-items:center;min-height:0;display:flex;position:relative;container-type:size}#app .phrase-mode{flex-direction:column;flex:1;justify-content:space-evenly;align-items:center;gap:12px;width:100%;min-height:0;padding:4px 10px 64px;display:flex}#app .phrase-mode .hud{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;display:flex}#app .misses{gap:6px;display:flex}#app .pip{border:3px solid var(--ink);background:var(--paper);width:20px;height:20px;box-shadow:0 3px 0 var(--deep);border-radius:50%}#app .pip.on{background:var(--wrong)}#app .label{opacity:.7;font-size:13px}#app .phrase{flex-wrap:wrap;justify-content:center;gap:12px 24px;max-width:900px;display:flex}#app .phrase .word{gap:6px;display:flex}#app .phrase .cell{perspective:400px;width:46px;height:54px}#app .phrase .face{border:var(--ol) solid var(--ink);width:100%;height:100%;box-shadow:0 var(--drop) 0 var(--deep);background:var(--paper);border-radius:10px;place-items:center;font-size:30px;line-height:1;display:grid}#app .phrase .cell.shown .face{background:var(--tile)}#app .phrase .cell.slang.done .face{background:var(--band);color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}#app .phrase .cell.gave .face{background:var(--pattern)}#app .play{gap:10px;width:min(640px,100%);display:grid}#app .keys{gap:6px;width:100%;display:grid}#app .krow{justify-content:center;gap:5px;display:flex}#app .key{max-width:52px;height:48px;font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:0 4px 0 var(--deep);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:9px;flex:1;place-items:center;padding:0;font-size:20px;display:grid}#app .key.hit{background:var(--right)}#app .key.miss{background:var(--muted);color:var(--field)}#app .key:disabled{cursor:default}#app .actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}#app .solve{gap:8px;width:min(640px,100%);display:flex}#app .solve input{min-width:0;font:inherit;color:var(--ink);background:var(--paper);border:var(--ol) solid var(--ink);border-radius:var(--r);box-shadow:0 4px 0 var(--deep);text-transform:lowercase;user-select:text;flex:1;padding:8px 12px;font-size:18px}#app .solve input:focus{outline:3px solid var(--band);outline-offset:2px}#app .card{text-align:center;gap:10px;width:min(560px,100%);padding:14px 18px 18px;display:grid}#app .card .eyebrow{opacity:.7;font-size:14px}#app .card .meaning{font-size:21px;line-height:1.25}#app .chips{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}#app .chip{font:inherit;color:var(--ink);background:var(--tile);border:3px solid var(--ink);box-shadow:0 3px 0 var(--deep);cursor:pointer;border-radius:999px;padding:3px 12px 5px;font-size:14px}#app .chip b{font-weight:400}#app .chip .m{display:none}#app .chip.open .m{display:inline}#app .chip.open{background:var(--paper)}#app #toast{z-index:6;text-align:center;max-width:90vw;padding:8px 16px 10px;font-size:16px;position:absolute;top:58px;left:50%;translate:-50%}@media (width<=440px){#app #bar{flex-wrap:nowrap;gap:6px;padding:8px}#app .brand{-webkit-text-stroke-width:4px;font-size:17px}#app .modes{gap:4px}#app .mode{padding:3px 6px 5px;font-size:12px}#app .bar-btn{width:32px;height:30px;font-size:12px}}@media (width<=560px){#app .phrase .cell{width:32px;height:40px}#app .phrase .face{box-shadow:0 4px 0 var(--deep);border-width:3px;border-radius:8px;font-size:21px}#app .phrase{gap:9px 16px}#app .phrase .word{gap:4px}#app .key{height:44px;font-size:18px}}@media (height<=640px){#app .phrase .cell{width:32px;height:38px}#app .phrase .face{font-size:20px}#app .key{height:38px}#app .phrase-mode{gap:8px}}#app .tiles-mode{--cell:clamp(16px, min(calc((100cqw - 48px) / 15), calc((100cqh - 330px) / 15)), 40px);z-index:1;font-family:var(--font);color:var(--ink);flex-direction:column;align-items:center;gap:16px;padding:14px 12px 28px;display:flex;position:relative}#app .tiles-mode .hud{align-items:center;gap:16px;display:flex;position:relative}#app .tiles-mode .board-wrap{max-width:100%;overflow:visible}#app .tiles-mode .board{grid-template-columns:repeat(15, var(--cell));grid-template-rows:repeat(15, var(--cell));background:var(--ink);border:var(--ol) solid var(--ink);border-radius:var(--r);box-shadow:0 var(--drop) 0 var(--deep);gap:2px;padding:2px;display:grid}#app .tiles-mode .cell{background:var(--paper);place-items:center;display:grid;position:relative;overflow:visible}#app .tiles-mode .cell.sq-dw{background:var(--band)}#app .tiles-mode .cell.sq-tw{background:var(--wrong)}#app .tiles-mode .cell.sq-dl{background:var(--pattern)}#app .tiles-mode .cell.sq-tl{background:var(--right)}#app .tiles-mode .cell.sq-start{background:var(--tile)}#app .tiles-mode .cell .sq-label{color:var(--paper);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;pointer-events:none;font-size:clamp(7px,1.6vw,10px)}#app .tiles-mode .cell.filled .sq-label{display:none}#app .tiles-mode .cell .face{place-items:center;display:grid;position:absolute;inset:1px}#app .tiles-mode .cell.filled{background:var(--tile);border:2px solid var(--ink);box-shadow:0 3px 0 var(--deep);border-radius:4px}#app .tiles-mode .cell.filled .face{font-size:calc(var(--cell) * .52);font-weight:400;inset:0}#app .tiles-mode .cell.filled .pt{font-size:calc(var(--cell) * .2);position:absolute;bottom:1px;right:3px}#app .tiles-mode .cell.placed{cursor:pointer}#app .tiles-mode .cell.lift{z-index:2}#app .tiles-mode .cell:not(.filled){cursor:default}#app .tiles-mode .float-score{color:var(--right);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;pointer-events:none;z-index:3;font-size:13px;position:absolute;top:-6px;left:50%;transform:translate(-50%)}#app .tiles-mode .rack{gap:6px;display:flex}#app .tiles-mode .rack-slot{border:3px dashed var(--muted);opacity:.35;border-radius:8px;width:40px;height:46px}#app .tiles-mode .rack-slot:not(.empty){opacity:1;border-style:solid;border-width:0}#app .tiles-mode .rack-tile{background:var(--tile);border:3px solid var(--ink);width:40px;height:46px;box-shadow:0 4px 0 var(--deep);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:8px;place-items:center;font-size:22px;display:grid;position:relative}#app .tiles-mode .rack-tile.selected{background:var(--right);transform:translateY(-4px)}#app .tiles-mode .rack-tile .pt{font-size:10px;position:absolute;bottom:1px;right:3px}#app .tiles-mode .controls{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}#app .tiles-mode .loading{padding:10px 18px 14px;font-size:15px}#app .tiles-mode .toast{text-align:center;z-index:6;max-width:min(340px,88vw);padding:10px 18px 14px;font-size:15px;position:fixed;bottom:90px;left:50%;transform:translate(-50%)}#app .tiles-mode .bubble{white-space:nowrap;z-index:4;padding:6px 14px 8px;font-size:13px;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}@media (width>=640px){#app .tiles-mode .rack-slot,#app .tiles-mode .rack-tile{width:52px;height:58px;font-size:26px}}
