@import url('assets/fonts/outfit.css');
:root{color-scheme:dark;--accent:#a8e7c8;--accent-rgb:168,231,200;--bg:#102c35;--panel:#183842;--sprite:url('assets/tile-mint.png');--gap:5px;--text:#f2faf4;--muted:#9dbabd;font-family:'Outfit',system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);overflow:hidden;overscroll-behavior:none}
body{-webkit-tap-highlight-color:transparent;transition:background 1s}
.ambient{position:fixed;inset:0;pointer-events:none;background:url('assets/atmosphere.png') center/cover;opacity:.055;transition:filter 1.1s}
.game{position:relative;display:grid;grid-template-rows:58px minmax(0,1fr) 54px;gap:10px;width:100%;max-width:490px;height:var(--view-height,100dvh);margin:auto;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));user-select:none;-webkit-user-select:none;isolation:isolate}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 5px}
.label{display:block;color:var(--muted);font-size:12px;line-height:1.3;font-weight:400}
.score{min-width:0;font-variant-numeric:tabular-nums}
.score strong{display:block;font-size:30px;line-height:1.1;font-weight:500;letter-spacing:-.5px}
.next{display:flex;align-items:center;gap:7px}
#next-piece{position:relative;width:68px;height:42px}
.mini-tile{position:absolute;display:grid;place-items:center;border-radius:3px;font:600 12px 'Outfit',sans-serif;color:#143439;background:var(--accent)}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,#board:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.icon-btn,.tool-btn{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--text);padding:10px;border-radius:8px}
.icon-btn{justify-self:end}
.icon-btn svg,.tool-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover,.tool-btn:hover{background:#ffffff09}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.board-shell{min-height:0;position:relative;padding:7px;border:1px solid rgba(var(--accent-rgb),.16);border-radius:12px;background:var(--panel);transition:background 1s,border-color 1s;overflow:hidden}.board{position:relative;width:100%;height:100%;touch-action:none;outline-offset:-2px!important}.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));gap:var(--gap)}.slot{position:relative;min-width:0;min-height:0;background:#041b2445;border:1px solid #b7e8d108;border-radius:8px}.tile{position:relative;display:grid;place-items:center;width:100%;height:100%;font:600 clamp(18px,5.1vw,28px)/1 'Outfit',sans-serif;color:#11323b;isolation:isolate;border-radius:8px;background:var(--accent);box-shadow:inset 0 1px 0 #fff4,inset 0 -3px 0 #0002;pointer-events:none}.tile:before{content:'';position:absolute;inset:-3%;background:var(--sprite) center/100% 100% no-repeat;z-index:0}.tile .value{position:relative;z-index:1;text-shadow:0 1px 0 #fff4;line-height:1}.baked .tile{background:transparent;box-shadow:none}.piece{position:absolute;left:0;top:0;pointer-events:none}.piece>.tile{position:absolute}.falling{z-index:4;transition:transform 95ms linear;filter:brightness(1.1)}.falling .tile:after{content:'';position:absolute;inset:1px;border:1px solid #effff287;border-radius:9px}.ghost{z-index:2}.ghost>.tile{background:rgba(var(--accent-rgb),.08);color:rgba(var(--accent-rgb),.5);border:1px dashed rgba(var(--accent-rgb),.44);box-shadow:none}.ghost .tile:before{display:none}.ghost .value{opacity:.65;font-size:.85em}.danger-line{position:absolute;top:8px;left:9px;right:9px;border-top:1px dashed #eab39d22;pointer-events:none;z-index:6}.board-shell.danger{border-color:#f3a69077}.board-shell.danger .danger-line{border-color:#f3a690aa}.slot.burst .tile{animation:tile-burst .27s forwards}.slot.enter .tile{animation:tile-enter .45s both;animation-delay:var(--delay,0ms)}

.controls{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:8px;min-height:0}
.controls.easy{grid-template-columns:1fr 1fr 1.3fr}
.controls.easy .rotate-control{display:none}
.control{display:grid;place-items:center;border:0;border-radius:9px;background:#ffffff08;color:#d2e6df;touch-action:none;min-width:0}
.control>span{font:400 28px 'Outfit',sans-serif}
.control:active{background:rgba(var(--accent-rgb),.2);transform:translateY(1px)}
.drop-control{background:var(--accent);color:#103c3e;transition:background .8s}
.control:disabled{opacity:.35;cursor:default}
.celebration{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;opacity:0;padding:15px;background:radial-gradient(ellipse,#092935d9,transparent 72%)}.celebration.visible{animation:celebration-in .4s forwards}.celebration .burst-label{color:#fff7df;font:700 clamp(29px,8.3vw,43px)/1.03 'Outfit';letter-spacing:-1px;text-shadow:0 0 30px rgba(var(--accent-rgb),.8),0 4px 9px #00131c}.celebration .burst-score{color:var(--accent);font:500 27px 'Outfit';margin-top:14px}.shockwave{position:absolute;z-index:12;left:50%;top:50%;width:40px;height:40px;border:3px solid var(--accent);border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 35px 20px rgba(var(--accent-rgb),.25)}.shockwave.go{animation:shockwave 1s ease-out both}.wave-sweep{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;background:linear-gradient(0deg,transparent 25%,rgba(var(--accent-rgb),.3) 50%,transparent 75%);transform:translateY(100%)}.wave-sweep.go{animation:sweep 1.1s ease-in-out}.shake{animation:board-shake .36s}#effects{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}.score-pop{animation:score-pop .2s}

dialog{max-width:320px;width:calc(100% - 40px);max-height:calc(100dvh - 32px);overflow-y:auto;border:1px solid #ffffff12;border-radius:16px;padding:0;background:var(--panel);color:var(--text);box-shadow:0 16px 60px #00161b50}
dialog::backdrop{background:#08191fd9;backdrop-filter:blur(4px)}
.dialog-content{padding:26px;text-align:center}
.dialog-content h1{font-size:26px;font-weight:500;line-height:1.1;letter-spacing:-.5px;margin:0 0 24px}
.dialog-content h1.wordmark{font-size:34px;font-weight:600;margin-bottom:26px;letter-spacing:-1.2px}
.equation{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 28px;font-size:24px;color:var(--accent)}
.equation span{display:grid;place-items:center;background:var(--accent);color:#143439;width:38px;height:42px;border-radius:6px;font-weight:500}
.equation i{font-style:normal;font-size:19px;color:var(--muted)}
.equation b{font-weight:500}
.mode-choices{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:20px 0 14px;padding:4px;background:#08191f45;border-radius:9px}
.mode-choice{display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:6px;background:transparent;color:var(--muted);height:43px;font-size:16px}
.mode-choice svg{width:22px;height:22px;fill:currentColor;opacity:.8}
.mode-choice.selected{color:var(--text);background:#ffffff12}
.primary,.secondary{display:block;width:100%;padding:14px;border-radius:9px;font-size:17px;font-weight:500;margin-top:10px;min-height:49px}
.primary{background:var(--accent);color:#14383c;border:0}
.secondary{background:transparent;color:var(--muted);border:0}
.primary:active,.secondary:active{transform:translateY(1px)}
.best-score{font-size:13px;color:var(--muted);margin:15px 0 2px;font-variant-numeric:tabular-nums}
.menu-tools{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.tool-btn{color:var(--muted)}
.help-btn{font-size:22px;font-weight:400}
.sound-off{display:none}
.tool-btn[aria-pressed=false] .sound-off{display:block}
.tool-btn[aria-pressed=false] .sound-waves{display:none}
.tool-btn[aria-pressed=false]{opacity:.55}
.help{text-align:left;padding:6px 0 0}
.help p{font-size:14px;line-height:1.55;color:var(--muted);margin:12px 0 0}
.end-score{font-size:52px;line-height:1;font-weight:500;margin:2px 0 12px;font-variant-numeric:tabular-nums}
.paused .falling,.paused .ghost{opacity:.4}
@keyframes tile-burst{25%{filter:brightness(1.8);transform:scale(1.12)}100%{opacity:0;transform:scale(.35)}}@keyframes tile-enter{from{opacity:0;transform:translateY(22px) scale(.7)}to{opacity:1;transform:none}}@keyframes shockwave{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(20)}}@keyframes board-shake{20%{transform:translate(3px,-2px)}40%{transform:translate(-3px,2px)}60%{transform:translate(2px,0)}80%{transform:translate(-1px,1px)}}@keyframes celebration-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes sweep{0%{opacity:0;transform:translateY(90%)}30%,65%{opacity:1}100%{opacity:0;transform:translateY(-90%)}}@keyframes score-pop{50%{transform:scale(1.08)}}

@media(min-width:600px){.game{padding-left:18px;padding-right:18px}.ambient{background-size:auto 130%;background-repeat:no-repeat}}
@media(max-width:360px){:root{--gap:4px}.game{gap:8px}.topbar{padding:0 3px}.score strong{font-size:28px}}
@media(max-height:650px){.game{grid-template-rows:49px minmax(0,1fr) 48px;gap:8px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}.tile{font-size:clamp(15px,4.4vw,23px)}.dialog-content{padding:22px}.dialog-content h1{margin-bottom:18px}.menu-tools{margin-top:10px}}
@media(orientation:landscape) and (max-height:550px){.game{max-width:850px;grid-template-columns:minmax(0,1fr) 195px;grid-template-rows:58px minmax(0,1fr) 54px;padding:8px}.board-shell{grid-column:1;grid-row:1/-1}.topbar{grid-column:2;grid-row:1;gap:2px;padding:0}.score strong{font-size:25px}.next{gap:0}.next .label{display:none}.controls{grid-column:2;grid-row:3;gap:5px}.control>span{font-size:25px}.tile{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.shake,.shockwave.go,.wave-sweep.go{animation:none!important}}

.brand-icon{display:block;width:92px;height:92px;margin:0 auto 20px;border-radius:21px}.dialog-content h1.wordmark{font-size:32px;letter-spacing:-1px;margin-bottom:24px}
.menu-links{display:flex;justify-content:center;flex-wrap:wrap;gap:0 16px;margin-top:12px;font-size:14px;line-height:1.5}.menu-links a{display:inline-flex;align-items:center;min-height:40px;color:var(--muted);text-decoration:none}.menu-links a:hover{text-decoration:underline}.menu-links a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}