@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;--bg:#111b38;--surface:#1a2748;--muted:#8c9bbb;--text:#f5f7ff;--line:#304061;--cyan:#73e6ef;--lime:#c9f783;--unit:35px;--gap:4px;font-family:Manrope,system-ui,-apple-system,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{height:100%;overflow:hidden;overscroll-behavior:none;background:#0c142a}
body{position:fixed;inset:0;width:100%;height:100%;margin:0;min-width:300px;overflow:hidden;overscroll-behavior:none;touch-action:none;color:var(--text);background:radial-gradient(ellipse at 50% -22%,#26395f 0,#111b38 52%,#0d1730 100%)}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:none;filter:brightness(1.2)}
button:disabled{cursor:default}
[hidden]{display:none!important}
.app{--screen-height:var(--tg-viewport-stable-height,100dvh);--safe-top:max(14px,calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)),env(safe-area-inset-top,0px));--safe-bottom:max(14px,calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)),env(safe-area-inset-bottom,0px));width:min(100%,460px);height:var(--screen-height);min-height:0;margin:auto;overflow:hidden;padding:var(--safe-top) max(4.79vw,calc(var(--tg-safe-area-inset-right,0px) + var(--tg-content-safe-area-inset-right,0px)),env(safe-area-inset-right,0px)) var(--safe-bottom) max(4.79vw,calc(var(--tg-safe-area-inset-left,0px) + var(--tg-content-safe-area-inset-left,0px)),env(safe-area-inset-left,0px));display:flex;flex-direction:column;touch-action:none}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(8px,1.5dvh,14px);flex:none}
.brand{display:flex;align-items:center;gap:10px;font-family:'DM Sans',Manrope,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.065em;line-height:1;color:#fff}
.brand strong{color:var(--cyan)}
.brand small{display:block;margin-top:5px;font:800 7px Manrope,sans-serif;letter-spacing:.15em;color:#8193b7}
.brand-mark{display:grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:3px;transform:rotate(-8deg)}
.brand-mark i{border-radius:2px;background:#79ddea;box-shadow:inset 0 -2px #3aa2b1}
.brand-mark i:nth-child(2){background:#ddf9a3;box-shadow:inset 0 -2px #88b952}.brand-mark i:nth-child(3){background:#e998a9;box-shadow:inset 0 -2px #bb5b75}
.top-actions{display:flex;gap:8px}.icon-button{width:34px;height:34px;border:0;background:#1d2a48;border-radius:12px;color:#bdcae2;font-weight:800;font-size:15px}.icon-button span{font-size:22px;line-height:1}
.scorebar{display:flex;justify-content:space-between;align-items:end;margin-bottom:clamp(8px,1dvh,12px);flex:none}.eyebrow{display:block;color:#8f9dbc;font-size:9px;font-weight:800;letter-spacing:.16em}.score-main strong{display:block;font-family:'DM Sans',sans-serif;font-size:clamp(40px,6.2dvh,55px);line-height:.98;letter-spacing:-.07em;margin-top:5px}.score-right{display:flex;align-items:center;gap:9px;padding-bottom:3px}.score-right strong{display:block;margin-top:4px;color:#e4edfb;font:800 20px 'DM Sans',sans-serif;letter-spacing:-.04em}.record-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#3a3c50;color:#e5cc8b;font-size:17px}
.board-heading,.tray-heading{display:flex;align-items:center;justify-content:space-between;color:#98a7c4;font-size:9px;font-weight:800;letter-spacing:.17em}.board-heading{height:18px;margin-bottom:4px;flex:none}.combo{color:#b8e9a0;font-size:9px;letter-spacing:.1em}
.board-shell{width:min(100%,max(120px,calc(var(--screen-height) - var(--safe-top) - var(--safe-bottom) - 290px)));align-self:center;flex:none;padding:1.15%;border:0;border-radius:19px;background:linear-gradient(150deg,#273958,#192746);box-shadow:0 15px 35px #080e2066,inset 0 1px #7182a533}
.board{--gap:4px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--gap);width:100%;aspect-ratio:1;touch-action:none;user-select:none}
.cell{min-width:0;min-height:0;padding:0;border:0;border-radius:5px;background:#111d38;box-shadow:inset 0 2px 2px #080e2075}
.cell.filled,.mini-cell,.ghost-cell{background:var(--tile,#73d9e9);box-shadow:inset 0 2px #ffffff64,inset 0 -4px #00000022,0 2px 3px #080e203f}
.cell.preview-valid{background:#a8f3d1aa;box-shadow:none}.cell.preview-invalid{background:#e98594a8;box-shadow:none}.cell.preview-clear{background:var(--preview-color);box-shadow:inset 0 2px #ffffff99,inset 0 -3px #0002}
.tray-section{margin-top:auto;flex:none}.tray-heading{margin-bottom:6px}.tray-dots{display:flex;gap:4px}.tray-dots i{width:4px;height:4px;border-radius:50%;background:#526887}
.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.piece-slot{position:relative;height:clamp(65px,10dvh,92px);min-width:0;padding:5px;border-radius:16px;border:0;background:transparent;display:grid;place-items:center;touch-action:none;user-select:none}.piece-slot::before{content:'';position:absolute;inset:-4px -4px -35px}.tray.middle-empty .piece-slot:first-child,.tray.middle-empty .piece-slot:last-child{z-index:1}.tray.middle-empty .piece-slot:first-child::before{right:calc(-50% - 4px)}.tray.middle-empty .piece-slot:last-child::before{left:calc(-50% - 4px)}.piece-slot.selected{background:transparent;box-shadow:none}.piece-slot.empty{opacity:.3;cursor:default}
.mini-grid{--unit:clamp(12px,calc((100vw - 138px)/15),16px);display:grid;gap:3px;pointer-events:none}.mini-cell{width:var(--unit);height:var(--unit);border-radius:4px}.mini-cell.blank{visibility:hidden}
.hint{height:15px;text-align:center;color:#8b9bb9;font-size:10px;font-weight:600;margin:7px 0 0}
.footer{display:none}
.drag-ghost{position:fixed;left:0;top:0;z-index:20;will-change:transform;display:grid;gap:var(--gap);pointer-events:none}.ghost-cell{width:var(--unit);height:var(--unit);border-radius:5px}.ghost-cell.blank{visibility:hidden}.piece-slot.dragging .mini-grid{opacity:0}
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:24px;background:#071024c9;backdrop-filter:blur(8px)}.ad-overlay{z-index:50}.dialog{position:relative;width:min(100%,360px);padding:31px 28px 25px;text-align:center;background:#202e50;border:0;border-radius:28px;box-shadow:0 24px 80px #020712ae}.dialog-kicker{font-size:9px;font-weight:800;letter-spacing:.19em;color:#9edccf;margin:0 0 12px}.dialog h1,.dialog h2{font-family:'DM Sans',Manrope,sans-serif;font-size:34px;letter-spacing:-.055em;line-height:1.05;margin:0;color:#fff}.dialog h2{font-size:28px}.dialog-copy{font-size:13px;line-height:1.65;color:#b4c2dc;margin:14px auto 20px;max-width:270px}.dialog-art{display:flex;justify-content:center;gap:5px;margin:-8px auto 22px;transform:rotate(-6deg)}.dialog-art span{width:28px;height:28px;border-radius:7px;background:#f0a6b5;box-shadow:inset 0 3px #ffffff80,inset 0 -4px #94405540}.dialog-art span:nth-child(2){background:#b7ed8b;transform:translateY(-9px)}.dialog-art span:nth-child(3){background:#83dfe8}
.final-score{border:0;border-radius:16px;background:#192746;padding:12px;margin-bottom:16px}.final-score span{display:block;color:#a2b2cf;font-size:9px;font-weight:800;letter-spacing:.14em}.final-score strong{display:block;font:800 30px 'DM Sans',sans-serif;letter-spacing:-.06em}
.button{width:100%;min-height:52px;border:0;border-radius:14px;font-weight:800;font-size:14px}.button.primary{background:var(--lime);color:#1e342d;box-shadow:inset 0 -3px #7ea95b;transition:transform .12s,filter .12s}.button.primary:active{transform:translateY(2px)}.button.primary small{font-size:10px;font-weight:700;opacity:.68;margin-left:5px}.button.quiet{min-height:42px;background:transparent;color:#d1dcef;font-size:12px}.fineprint{font-size:10px;color:#92a1bc;margin:3px 0 0}
.ad-close{position:absolute;top:14px;right:17px;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff0f;color:#c3cee2;font-size:24px;line-height:1}.ad-graphic{height:120px;display:grid;place-items:center}.ad-orbit{width:100px;height:100px;border:0;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 12px #ffffff08,0 0 0 25px #ffffff05}.ad-orbit span{font-size:48px;color:#d1f496}.ad-track{height:7px;background:#111d36;border-radius:20px;overflow:hidden}.ad-track span{display:block;width:0;height:100%;background:#bdf38d;border-radius:inherit}.ad-timer{font-size:11px;color:#a9bbd4;margin:12px 0}.text-button{border:0;background:transparent;color:#a9bbd4;text-decoration:underline;text-underline-offset:3px;font-size:11px;padding:8px}
.help-list{text-align:left;list-style:none;padding:0;margin:24px 0}.help-list li{display:flex;gap:14px;color:#d1dbee;font-size:13px;line-height:1.5;margin:14px 0}.help-list b{color:#b9ed9c;font:800 11px 'DM Sans',sans-serif;padding-top:3px}
.toast{position:fixed;left:50%;bottom:max(25px,var(--tg-content-safe-area-inset-bottom,0px));z-index:60;transform:translate(-50%,15px);padding:10px 14px;max-width:90%;border:0;border-radius:12px;background:#273b5e;color:white;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:360px){.app{padding-left:max(15px,calc(var(--tg-safe-area-inset-left,0px) + var(--tg-content-safe-area-inset-left,0px)));padding-right:max(15px,calc(var(--tg-safe-area-inset-right,0px) + var(--tg-content-safe-area-inset-right,0px)))}.mini-grid{--unit:13px}}
@media(max-height:740px){.mini-grid{--unit:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.preview-beam,.clear-beam{position:fixed;z-index:19;pointer-events:none;display:block;color:var(--tile)}
.preview-beam::before,.preview-beam::after,.clear-beam::before,.clear-beam::after{content:'';position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,transparent,currentColor 15%,#fff 50%,currentColor 85%,transparent);mix-blend-mode:screen}
.preview-beam.col::before,.preview-beam.col::after,.clear-beam.col::before,.clear-beam.col::after{background:linear-gradient(0deg,transparent,currentColor 15%,#fff 50%,currentColor 85%,transparent)}
.clear-beam.rainbow::before,.clear-beam.rainbow::after{background:linear-gradient(90deg,#ff80b1,#ffd978,#d9ff95,#91edf4,#c1a2ff,#ff80b1)}.clear-beam.rainbow.col::before,.clear-beam.rainbow.col::after{background:linear-gradient(0deg,#ff80b1,#ffd978,#d9ff95,#91edf4,#c1a2ff,#ff80b1)}
.preview-beam::before{opacity:.2;animation:preview-pulse .7s ease-in-out infinite alternate}.preview-beam::after{opacity:.35;transform:scale(.99,.12)}.preview-beam.col::after{transform:scale(.12,.99)}
.clear-beam{animation:beam-life 1067ms linear forwards}.clear-beam::before{animation:beam-row 767ms cubic-bezier(.2,.8,.2,1) forwards}.clear-beam.col::before{animation-name:beam-col}.clear-beam::after{animation:beam-trail 1067ms ease-out forwards;opacity:.7}
@keyframes preview-pulse{from{opacity:.12}to{opacity:.38}}
@keyframes beam-life{0%,65%{opacity:1}100%{opacity:0}}
@keyframes beam-row{0%{opacity:1;transform:scale(.08,.18)}18%{opacity:1;transform:scale(.65,.8)}52%{opacity:.85;transform:scale(1,.42)}100%{opacity:0;transform:scale(1,.05)}}
@keyframes beam-col{0%{opacity:1;transform:scale(.18,.08)}18%{opacity:1;transform:scale(.8,.65)}52%{opacity:.85;transform:scale(.42,1)}100%{opacity:0;transform:scale(.05,1)}}
@keyframes beam-trail{0%,12%{opacity:0}25%{opacity:.65}72%{opacity:.25}100%{opacity:0}}
.clear-particle{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:2px;background:#fff;box-shadow:0 0 8px currentColor;animation:clear-particle var(--life) cubic-bezier(0,0,.5,1) 133ms both}
@keyframes clear-particle{0%{opacity:1;transform:translate(-50%,-50%) scale(.7)}30%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.25)}}
.combo-pop{position:fixed;z-index:25;display:flex;align-items:center;gap:6px;pointer-events:none;transform:translate(-50%,-50%);animation:combo-exit 1310ms linear forwards}
.combo-label,.combo-number{display:block;color:#fff6c9;font:900 clamp(30px,9vw,52px)/1 'DM Sans',sans-serif;letter-spacing:-.055em;text-shadow:0 3px #bc651f,0 7px 18px #4b1f4aaa;opacity:0}
.combo-label{animation:combo-label 1010ms cubic-bezier(.2,.8,.2,1) 300ms forwards}.combo-number{color:#fff;animation:combo-number 930ms cubic-bezier(.2,.8,.2,1) 380ms forwards}
@keyframes combo-exit{0%,99%{opacity:1}100%{opacity:0}}
@keyframes combo-label{0%{opacity:1;transform:scale(0)}17%{opacity:1;transform:scale(1.35)}25%,84%{opacity:1;transform:scale(1)}92%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:translateX(-20px) scale(0)}}
@keyframes combo-number{0%{opacity:1;transform:scale(0)}13%{opacity:1;transform:scale(2)}27%,83%{opacity:1;transform:scale(1)}91%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:translateX(80px) scale(0)}}
.board-shell{background:linear-gradient(145deg,#385275,#1a294b 55%,#263d60);box-shadow:0 18px 40px #060d2080,inset 0 1px #a0b7d955,0 0 30px #62d5e912}
.cell.filled,.mini-cell,.ghost-cell{background-image:linear-gradient(145deg,#ffffff33,transparent 55%,#17345420)}

@media(prefers-reduced-motion:reduce){.preview-beam,.clear-beam,.combo-pop{display:none}}

/* Continue-game dialog */
.gameover-dialog{padding:30px 24px 20px;background:#243f87;border:0;border-radius:22px;box-shadow:none}
.gameover-dialog h1{font-size:30px;letter-spacing:-.03em}
.revive-scores{display:flex;justify-content:center;gap:48px;margin:22px 0 0}
.revive-scores span{display:block;color:#c7d9ff;font-size:11px;font-weight:800;letter-spacing:.08em}
.revive-scores strong{display:block;margin-top:3px;font-size:30px;line-height:1.1;color:#fff}
.gameover-dialog .dialog-copy{margin:20px auto 12px;color:#fff;font-size:15px;font-weight:700;line-height:1.35}
.revive-pieces{min-height:96px;display:flex;align-items:center;justify-content:space-evenly;gap:12px;margin-bottom:16px;background:#193670;border-radius:16px}
.revive-pieces[hidden]{display:none}
.revive-piece{--unit:20px;display:grid;gap:2px;align-content:center;justify-content:center}
.revive-cell{width:var(--unit);height:var(--unit);border-radius:4px;background:var(--tile)}
.revive-cell.blank{visibility:hidden}
.gameover-dialog .button.primary{background:#ffdc47;color:#593707;font-size:17px;box-shadow:none}
.gameover-dialog .button.quiet{color:#fff;font-size:13px}
.gameover-dialog .fineprint{color:#c7d9ff}

/* Classic layout follows the original field and score arrangement. */
.topbar{height:38px;margin-bottom:0;align-items:center}
.record{display:flex;align-items:center;gap:4px;color:#ffce36;font:800 23px 'DM Sans',sans-serif;text-shadow:0 2px #80580b66}
.record span{font-size:30px;line-height:1}
.settings-wrap{position:relative;z-index:30}
.settings-toggle{width:38px;height:38px;background:transparent;color:#f6f8ff;font-size:31px;line-height:1;text-shadow:0 2px 3px #0008}
.settings-menu{position:absolute;right:0;top:42px;min-width:150px;padding:6px;border-radius:12px;background:#253757;box-shadow:0 8px 24px #0006}
.settings-menu button{display:block;width:100%;padding:10px;border:0;border-radius:8px;background:transparent;text-align:left;white-space:nowrap}
.settings-menu button:focus-visible{background:#395173}
.scorebar{height:clamp(80px,15dvh,140px);margin:0;justify-content:center;align-items:center}
.score-main strong{margin:0;color:#fff;font-size:clamp(45px,8dvh,76px);letter-spacing:-.05em;text-shadow:0 3px 3px #060d2080}
.board-heading,.tray-heading{display:none}
.cell{border-radius:1px}
.cell.filled,.mini-cell,.ghost-cell{border-radius:1px;background-image:linear-gradient(135deg,#ffffff44,transparent 45%,#13213a33);box-shadow:inset 3px 3px #ffffff55,inset -3px -4px #0003,0 2px 2px #080e2055}
.mini-grid{gap:1px}
.hint{visibility:hidden}

.board{--gap:2px;background:#182641}
.cell{background:#263858;box-shadow:none}
.tray-section{margin-bottom:clamp(25px,8dvh,75px)}