@layer components{.dbl-stage{touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(90% 70% at 50% 30%,#1e1a2c 0%,#0e0c15 60%,#08070c 100%);padding:0}.dbl-hud{z-index:3;gap:8px;width:min(100% - 24px,520px);display:flex;position:absolute;top:12px;left:50%;translate:-50%}.dbl-box{background:#ffffff12;border-radius:14px;flex-direction:column;flex:1;justify-content:center;height:58px;padding:0 14px;display:flex;position:relative;box-shadow:inset 0 0 0 1.5px #ffffff12}.dbl-box span{letter-spacing:.08em;color:#ffffff8c;font-size:11.5px;font-weight:600}.dbl-box b{font-family:var(--font-display), var(--font-sans);letter-spacing:-.03em;color:#fff;font-size:24px;font-weight:800;line-height:1.1}.dbl-box.is-best b{color:var(--rn)}.dbl-count{animation:dbl-tick .2s var(--ease-out)}@keyframes dbl-tick{40%{scale:1.08}}.dbl-gain{font-family:var(--font-display), var(--font-sans);color:var(--rn);pointer-events:none;animation:dbl-gain .65s var(--ease-out) forwards;font-size:18px;font-style:normal;font-weight:800;position:absolute;top:20px;right:14px}@keyframes dbl-gain{0%{opacity:1;translate:0}to{opacity:0;translate:0 -20px}}.dbl-undo{--key:#ffffff1a;--key-ink:#fff;--edge:#00000052;width:70px;height:58px;box-shadow:inset 0 -3px 0 var(--edge), inset 0 0 0 1.5px #ffffff24;flex:none;gap:5px;padding:0}.dbl-undo span{font-weight:800}.dbl-area{inset:86px 14px max(46px, calc(env(safe-area-inset-bottom) + 36px));place-items:center;display:grid;position:absolute;container-type:size}.dbl-board{--gap:2.4cqw;aspect-ratio:1;background:linear-gradient(#2a2638,#221f2e);border-radius:20px;width:min(100cqw,100cqh,520px);position:relative;box-shadow:inset 0 0 0 1.5px #ffffff0f,0 24px 48px -16px #000000b3;container-type:inline-size}.dbl-slot,.dbl-tile{left:var(--gap);top:var(--gap);width:calc((100% - 5 * var(--gap)) / 4);height:calc((100% - 5 * var(--gap)) / 4);transform:translate(calc(var(--x) * (100% + var(--gap))), calc(var(--y) * (100% + var(--gap))));border-radius:13px;position:absolute}.dbl-slot{background:#00000047;box-shadow:inset 0 2px 4px #0000004d}.dbl-tile{z-index:2;font-family:var(--font-display), var(--font-sans);letter-spacing:-.05em;color:var(--ink);background:linear-gradient(170deg, color-mix(in oklab, var(--bg) 82%, #fff) 0%, var(--bg) 55%, color-mix(in oklab, var(--bg) 88%, #000) 100%);place-items:center;font-size:11cqw;font-weight:800;transition:transform .11s ease-in-out;display:grid;box-shadow:inset 0 1.5px #ffffff73,inset 0 -4px #00000029,0 3px 8px #0000004d}.dbl-tile.is-hot{box-shadow:inset 0 1.5px 0 #ffffff73, inset 0 -4px 0 #00000029, 0 0 22px color-mix(in oklab, var(--bg) 60%, transparent)}.dbl-tile[data-len="3"]{font-size:8.6cqw}.dbl-tile[data-len="4"]{font-size:7cqw}.dbl-tile[data-len="5"]{font-size:5.6cqw}.dbl-tile.is-gone{z-index:1}.dbl-tile.is-merged{z-index:3;animation:dbl-merge .2s var(--ease-out) .1s both}.dbl-tile.is-born{animation:dbl-born .2s var(--ease-out) .1s both}@keyframes dbl-merge{0%{scale:.6}50%{scale:1.2}to{scale:1}}@keyframes dbl-born{0%{opacity:0;scale:0}}.dbl-over,.dbl-goal{z-index:4;border-radius:inherit;text-align:center;color:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:pop .36s var(--ease-pop) both;background:#0a0910b8;place-content:center;justify-items:center;gap:14px;display:grid;position:absolute;inset:0}.dbl-over .display,.dbl-goal .display{letter-spacing:-.04em;font-size:34px;font-weight:800}.dbl-goal .display{color:var(--rn);font-size:56px}.dbl-goal-sub{color:#ffffffb8;max-width:26ch;font-size:14px}.dbl-goal .confetti{top:30%}.dbl-over-keys{gap:10px;display:flex}.dbl-hint{left:0;right:0;bottom:max(14px, calc(env(safe-area-inset-bottom) + 6px));text-align:center;color:#ffffff80;pointer-events:none;font-size:13px;position:absolute}.dbl-mini{letter-spacing:-.045em;border-radius:14px;flex:none;place-items:center;width:72px;height:72px;font-size:30px;font-weight:700;display:grid}.dbl-mini[data-len="3"]{font-size:24px}.dbl-mini[data-len="4"]{font-size:19px}.dbl-mini[data-len="5"]{font-size:15px}@media (prefers-reduced-motion:reduce){.dbl-tile{transition:none}.dbl-tile.is-merged,.dbl-tile.is-born,.dbl-count,.dbl-over,.dbl-goal{animation:none}.dbl-gain{animation:.65s forwards dbl-fade}@keyframes dbl-fade{to{opacity:0}}}}
