@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fredoka:wght@500;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#eaf8f7;background:#071d2b;--cyan:#55e0d1;--cyan-2:#7cf3e4;--gold:#ffd86b;--coral:#ff8a73;--muted:#8eb0b7;--ink:#06232d;--panel-bg:linear-gradient(180deg,#0a2333cc,#062031cc);--panel-border:#55e0d144;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}*{box-sizing:border-box}html,body,#app{height:100%;width:100%;margin:0;padding:0}html,body{overflow:hidden;overscroll-behavior:none;background:radial-gradient(circle at 85% 5%,#17495a 0,transparent 32rem),linear-gradient(135deg,#061824,#0b2f3a)}#app{display:flex}main.panel{width:min(420px,100%);margin:0 auto;padding:calc(10px + var(--safe-top)) calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left));display:grid;grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"topbar" "meta" "board" "play";height:100dvh;min-height:0;gap:8px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:18px;position:relative;box-shadow:0 0 0 1px #ffffff08 inset,0 18px 60px #0008}main.panel:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 0%,#55e0d122,transparent 70%);opacity:.7}.topbar{grid-area:topbar;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:0}.title{font:700 clamp(18px,5vw,22px)/1.1 "Fredoka";margin:0;text-align:center;letter-spacing:-.01em;color:#eaf8f7;text-shadow:0 2px 0 #04141a}.theme{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,#55e0d133,#7cf3e422);border:1px solid #55e0d155;color:var(--cyan);font:600 15px Fredoka;letter-spacing:.12em}.theme b{color:#fff;letter-spacing:.08em}.meta{grid-area:meta;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:0;padding:6px 10px;border-radius:12px;background:linear-gradient(135deg,#ffffff08,#ffffff02);border:1px solid #ffffff12}.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;color:var(--muted);font:500 15px Fredoka;letter-spacing:.02em;min-width:0}.rules li{display:flex;align-items:center;gap:5px;line-height:1.2}.rules .bullet{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 4px #55e0d199;flex:0 0 auto}.counter{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 10px;border-radius:10px;background:#0a233388;border:1px solid #55e0d133;color:var(--cyan);font:700 15px Fredoka;letter-spacing:.06em;min-width:64px}.counter small{color:var(--muted);font:500 15px Fredoka;letter-spacing:.1em;text-transform:uppercase}.counter strong{font:700 18px/1 Fredoka;color:var(--cyan);margin-top:1px}.board{grid-area:board;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));align-content:stretch;gap:6px;min-height:0;min-width:0;overflow:hidden}.row{position:relative;display:flex;align-items:center;gap:6px;padding:4px 7px;min-height:34px;border-radius:10px;border:1px solid #ffffff1c;background:linear-gradient(135deg,#ffffff0e,#ffffff03);min-width:0;transition:border-color .35s,background .35s,transform .35s;overflow:hidden}.row:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 20% 0%,#ffffff14,transparent 60%);opacity:.9}.row.row-placeholder{border:1px dashed #ffffff14;background:linear-gradient(135deg,#ffffff04,#ffffff01);opacity:.55;justify-content:center;gap:5px}.row.row-placeholder:before{opacity:.3}.placeholder-dot{width:6px;height:6px;border-radius:50%;background:#ffffff20}.row .slots{display:flex;gap:3px;flex:1;min-width:0;justify-content:center}.row .slots span{width:18px;height:20px;display:grid;place-items:center;border-radius:5px;background:#ffffff0a;border:1px dashed #6f9ba088;color:var(--cyan);font:700 15px Fredoka}.row .check{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#ffffff10;color:#6f9ba0;font:700 15px Fredoka;flex:0 0 auto}.row.solved{border-color:#55e0d166;background:linear-gradient(135deg,#55e0d122,#55e0d108);box-shadow:0 0 0 1px #55e0d133 inset,0 0 18px #55e0d133}.row.solved .check{background:var(--cyan);color:var(--ink)}.row.solved .slots span{background:#fff2;border:1px solid #ffffff33;animation:slotIn .55s cubic-bezier(.4,1.4,.5,1) both}.row.solved .slots span:nth-child(1){animation-delay:.05s}.row.solved .slots span:nth-child(2){animation-delay:.1s}.row.solved .slots span:nth-child(3){animation-delay:.15s}.row.solved .slots span:nth-child(4){animation-delay:.2s}.row.solved .slots span:nth-child(5){animation-delay:.25s}.row.pop{animation:pop .65s cubic-bezier(.34,1.56,.64,1)}.burst{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.burst i{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);opacity:0}.row.pop .burst i{animation:burst .9s ease-out forwards}.row.pop .burst i:nth-child(1){--tx:0;--ty:-30px;--c:var(--cyan);background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.row.pop .burst i:nth-child(2){--tx:24px;--ty:-18px;--c:var(--gold)}.row.pop .burst i:nth-child(3){--tx:-24px;--ty:-18px;--c:var(--coral);background:var(--coral);box-shadow:0 0 8px var(--coral)}.row.pop .burst i:nth-child(4){--tx:30px;--ty:8px;--c:var(--gold)}.row.pop .burst i:nth-child(5){--tx:-30px;--ty:8px;--c:var(--cyan-2);background:var(--cyan-2);box-shadow:0 0 8px var(--cyan-2)}.row.pop .burst i:nth-child(6){--tx:0;--ty:24px;--c:var(--gold)}.play{grid-area:play;container-type:size;background:linear-gradient(180deg,#061a27ee,#04111cdd);border:1px solid #ffffff18;border-radius:14px;padding:6px 8px;min-height:0;min-width:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"hint" "rack-wrap" "bank" "actions" "message";gap:4px 6px;row-gap:6px;overflow:hidden;position:relative}.hint-banner{grid-area:hint}.rack-wrap{grid-area:rack-wrap;display:flex;flex-direction:column;gap:3px;min-height:0}.bank{grid-area:bank}.actions{grid-area:actions}#message{grid-area:message}.hint-banner{text-align:center;padding:6px 10px;border-radius:8px;background:linear-gradient(135deg,#55e0d111,#7cf3e408);border:1px dashed #55e0d144;color:var(--cyan);font:600 15px Fredoka;letter-spacing:.04em}.rack-label{font:600 15px Fredoka;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0}.rack{position:relative;min-height:38px;border-radius:10px;background:repeating-linear-gradient(135deg,#ffffff08 0,#ffffff08 6px,#ffffff04 6px,#ffffff04 12px);border:1px solid #ffffff1c;padding:4px 8px;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}.rack:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;border:1px dashed #ffffff22;margin:3px}.slot-empty{width:22px;height:22px;border-radius:6px;border:1px dashed #6f9ba066;background:#ffffff04}.rack.shake{animation:shake .45s ease}.rack.fail-flash:before{border-color:var(--coral);box-shadow:0 0 0 2px #ff8a7344 inset,0 0 14px #ff8a7355}.chip{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#7cf3e4,#2da89b);color:var(--ink);font:700 15px Fredoka;box-shadow:inset 0 -2px #ffffff40,0 2px #1c5b58,0 4px 10px #00000050;animation:chipIn .35s cubic-bezier(.34,1.56,.64,1) both;position:relative}.chip.fail{background:linear-gradient(135deg,#ff9c87,#c54d3a);color:#fff;box-shadow:inset 0 -2px #ffffff40,0 2px #6c2418,0 0 14px #ff8a7377;animation:chipOut .5s ease-in forwards}.chip.fail:after{content:"✕";position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:#fff;color:#c54d3a;font:700 11px Fredoka;display:grid;place-items:center;box-shadow:0 1px 3px #00000050}.bank{grid-area:bank;position:relative;width:min(100%,100cqw);height:min(100%,100cqw);aspect-ratio:1;justify-self:center;align-self:start;margin-top:2px;min-height:0;min-width:0;max-height:100%;overflow:visible;padding:0}.tile{position:absolute;width:clamp(42px,11vw,56px);height:clamp(42px,11vw,56px);border:0;border-radius:0;display:grid;place-items:center;background:transparent;color:var(--tile-fg,#eaf8f7);font:700 clamp(28px,8.5vw,44px)/1 "Fredoka";cursor:pointer;padding:0;transform:translate(-50%,-50%);transition:transform .15s ease,opacity .2s ease,filter .2s ease,color .2s ease;text-shadow:0 2px 0 #04141a,0 4px 8px #00000066;letter-spacing:0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.tile:hover{transform:translate(-50%,-50%) scale(1.12);color:var(--cyan-2,#7cf3e4)}.tile:active{transform:translate(-50%,-50%) scale(.94);color:var(--cyan,#55e0d1)}.tile.chosen{opacity:.18;filter:grayscale(.7);transform:translate(-50%,-50%) scale(.7);pointer-events:none}.tile.just-picked{animation:tilePick .35s cubic-bezier(.34,1.56,.64,1)}.actions{display:flex;justify-content:center;gap:8px;flex:0 0 auto}button{font:inherit}.actions button{display:inline-flex;align-items:center;gap:5px;padding:9px 16px;border-radius:999px;cursor:pointer;font:600 15px Fredoka;border:1px solid #ffffff30;background:#ffffff0a;color:#d2e8e9;min-height:38px;transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;letter-spacing:.02em}.actions button:hover{transform:translateY(-2px);background:#ffffff18;border-color:#fff5}.actions button:active{transform:translateY(1px)}.actions button .ico{display:inline-grid;place-items:center;width:18px;height:18px;font-size:15px;line-height:1}.actions #clear{border-color:#ff8a7355;color:#ffd0c5}.actions #clear:hover{background:#ff8a7322;border-color:#ff8a73aa}.actions #hint{border-color:#55e0d155;color:#a9f0e5}.actions #hint:hover{background:#55e0d122;border-color:#55e0d1aa}.actions #hint.hint-action{font-weight:700}#message{text-align:center;min-height:18px;line-height:18px;color:var(--muted);margin:0;font:500 15px Fredoka;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;transition:color .25s ease,transform .25s ease,opacity .35s ease}#message .ico{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:15px;line-height:1;background:#ffffff14;color:var(--muted)}#message.success{color:var(--cyan)}#message.success .ico{background:var(--cyan);color:var(--ink);box-shadow:0 0 8px #55e0d199}#message.error{color:var(--coral);animation:msgShake .35s ease}#message.error .ico{background:var(--coral);color:#fff;box-shadow:0 0 8px #ff8a7377}#message.hint{color:var(--muted)}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes burst{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(calc(-50% + var(--tx,0)),calc(-50% + var(--ty,0))) scale(1);opacity:0}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes chipIn{0%{transform:translateY(8px) scale(.6) rotate(-15deg);opacity:0}60%{transform:translateY(-3px) scale(1.1) rotate(2deg);opacity:1}to{transform:translateY(0) scale(1) rotate(0);opacity:1}}@keyframes chipOut{0%{transform:translateY(0) scale(1) rotate(0);opacity:1}40%{transform:translateY(-12px) scale(1.15) rotate(8deg);opacity:1}to{transform:translateY(-30px) scale(.6) rotate(-12deg);opacity:0}}@keyframes slotIn{0%{transform:translateY(-12px) scale(.4) rotateY(90deg);opacity:0}60%{transform:translateY(2px) scale(1.1) rotateY(-5deg);opacity:1}to{transform:translateY(0) scale(1) rotateY(0);opacity:1}}@keyframes tileIn{0%{transform:translateY(-30px) scale(.4) rotate(-20deg);opacity:0}60%{transform:translateY(2px) scale(1.08) rotate(4deg);opacity:1}to{transform:translateY(0) scale(1) rotate(0);opacity:1}}@keyframes tilePick{0%{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}40%{transform:translate(-50%,-50%) scale(1.18);filter:brightness(1.4)}to{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}}@keyframes msgShake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}60%{transform:translate(4px)}}@keyframes pulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.rules .bullet{animation:none}}@media(max-width:650px){main.panel{gap:6px;padding:calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left))}.title{font-size:18px}.theme{font-size:15px;padding:3px 10px}.meta{padding:4px 8px;border-radius:10px}.rules{font-size:15px}.counter{padding:3px 8px;min-width:64px}.counter small{font-size:15px}.counter strong{font-size:18px}.board{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.row{padding:4px 6px;gap:5px;border-radius:8px;min-height:34px}.row .slots span{width:16px;height:19px;font-size:15px}.row .check{width:18px;height:18px;font-size:15px}.row.row-placeholder{gap:4px}.placeholder-dot{width:5px;height:5px}.play{padding:5px 6px;gap:5px;border-radius:11px;row-gap:5px}.rack-label{font-size:15px}.hint-banner{font-size:15px;padding:5px 8px}.rack{min-height:34px;padding:3px 6px;border-radius:8px;gap:3px}.slot-empty{width:18px;height:18px}.chip{width:26px;height:26px;font-size:15px;border-radius:6px}.bank{min-height:0;padding:0;margin-top:1px}.tile{width:clamp(44px,13vw,56px);height:clamp(44px,13vw,56px);font-size:clamp(26px,8.5vw,38px)}.actions{gap:8px;margin-top:4px}.actions button{padding:8px 14px;font-size:15px;min-height:36px;flex:1;justify-content:center}#message{font-size:15px;min-height:18px;line-height:18px}}@media(max-width:650px)and (max-height:720px){main.panel{gap:4px}.rules{display:none}.meta{padding:3px 6px}.board{gap:3px}.row{padding:3px 5px;gap:4px;min-height:30px}.row .slots span{width:15px;height:18px;font-size:15px}.row .check{width:16px;height:16px;font-size:15px}.hint-banner{font-size:15px;padding:4px 6px}.rack{min-height:32px}.chip{width:24px;height:24px;font-size:15px}.slot-empty{width:16px;height:16px}.tile{width:clamp(38px,11vw,48px);height:clamp(38px,11vw,48px);font-size:clamp(22px,7.5vw,30px)}.actions button{padding:7px 12px;min-height:32px;font-size:15px;margin-top:2px}#message{font-size:15px}}@media(orientation:landscape)and (max-height:500px){main.panel{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(220px,1fr);grid-template-rows:auto 1fr;grid-template-areas:"topbar topbar" "board play";gap:8px 12px}.topbar{grid-area:topbar;flex-direction:row;justify-content:space-between}.meta{grid-column:1/3}.board{grid-area:board;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.play{grid-area:play}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at 50% 40%,#0a2333cc,#04111cdd);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:overlayIn .18s ease-out both;padding-top:calc(16px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bottom))}.modal-overlay.anim{animation:overlayIn .22s ease-out both}.modal{position:relative;width:min(360px,100%);max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));overflow:auto;background:linear-gradient(180deg,#0d2c3dee,#062031ee);border:1px solid #55e0d155;border-radius:16px;box-shadow:0 24px 70px #000d,0 0 0 1px #ffffff14 inset,0 0 28px #55e0d133;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;color:#eaf8f7;animation:modalIn .26s cubic-bezier(.34,1.56,.64,1) both}.modal-overlay.anim .modal{animation:modalIn .26s cubic-bezier(.34,1.56,.64,1) both}.modal-title{margin:0;display:flex;align-items:center;gap:8px;font:700 16px/1.1 Fredoka;color:var(--cyan);letter-spacing:.01em}.modal-title .ico{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#7cf3e4,#2da89b);color:var(--ink);font-size:15px;line-height:1;box-shadow:0 0 8px #55e0d199}.modal-body{margin:0;font:500 15px/1.45 DM Sans,sans-serif;color:#d2e8e9;background:#ffffff08;border:1px solid #ffffff14;border-radius:10px;padding:12px 14px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}.modal-close{display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;border-radius:999px;font:700 15px/1 Fredoka;letter-spacing:.02em;cursor:pointer;color:var(--ink);background:linear-gradient(135deg,#7cf3e4,#55e0d1);border:1px solid #55e0d1aa;box-shadow:0 2px #1c5b58,0 6px 16px #0005;transition:transform .15s ease,filter .15s ease}.modal-close:hover{filter:brightness(1.08);transform:translateY(-1px)}.modal-close:active{transform:translateY(1px);filter:brightness(.95)}@keyframes modalIn{0%{opacity:0;transform:translateY(8px) scale(.94)}60%{opacity:1;transform:translateY(0) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:650px){.modal{padding:16px 14px 14px;border-radius:14px}.modal-title{font-size:16px}.modal-body{font-size:15px;padding:10px 12px}.modal-close{padding:9px 18px;font-size:15px}}@media(prefers-reduced-motion:reduce){.modal-overlay,.modal-overlay.anim,.modal,.modal-overlay.anim .modal{animation-duration:.001ms!important}}.victory-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#08101e8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;animation:overlayIn .25s ease-out both}.victory-modal{background:linear-gradient(180deg,#1a2a44,#0f1a2e);color:#e2e8f0;padding:22px 20px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 60px #00000073,0 0 0 1px #78c8ff0d inset;width:min(86vw,360px);text-align:center;animation:victoryIn .45s cubic-bezier(.2,.9,.3,1.2) both}.victory-modal h2{margin:0 0 8px;font-size:22px;letter-spacing:.2px;color:#7dd3fc;text-shadow:0 0 14px rgba(125,211,252,.4)}.victory-modal p{margin:0 0 16px;font-size:15px;line-height:1.4;color:#cbd5e1}#next-level{background:linear-gradient(180deg,#38bdf8,#0ea5e9);color:#00131f;border:none;border-radius:999px;padding:10px 22px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px #0ea5e959;transition:transform .12s ease,box-shadow .12s ease}#next-level:hover{transform:translateY(-1px);box-shadow:0 8px 22px #0ea5e980}#next-level:active{transform:translateY(0);box-shadow:0 4px 14px #0ea5e94d}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes victoryIn{0%{opacity:0;transform:translateY(12px) scale(.85) rotate(-2deg)}60%{opacity:1;transform:translateY(0) scale(1.05) rotate(0)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}.victory-confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.victory-confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;opacity:0;animation:confetti 1.6s ease-out forwards}@keyframes confetti{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(420px) rotate(540deg);opacity:0}}