:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#20201f;color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}[hidden]{display:none!important}html,body{min-width:320px;min-height:100%;margin:0}body{min-height:100vh;overflow-x:hidden;background:#20201f}button{min-height:44px;border:0;border-radius:8px;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}#app{display:grid;min-height:100vh;place-items:center;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}.blast-card{position:relative;display:grid;grid-template-rows:18% 59% 23%;width:min(94vw,calc((100vh - 20px)*.75),750px);min-width:300px;max-width:750px;aspect-ratio:750 / 1000;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 24%),linear-gradient(180deg,#496fbd,#5f8bd3);box-shadow:0 22px 60px #00000061}.hud{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:42% 58%;align-items:start;padding:4% 15.5% 0}.best-score{display:inline-flex;grid-column:1;grid-row:1;align-items:center;justify-self:start;gap:8px;min-width:118px;color:#fff51e;font-size:clamp(19px,4.1vw,32px);font-weight:950;line-height:1;text-shadow:0 3px 3px rgba(42,53,91,.34)}.crown{display:inline-grid;width:clamp(34px,6.4vw,54px);height:clamp(28px,5.4vw,45px);place-items:center;color:#ffd500;font-size:clamp(33px,6.6vw,56px);line-height:1;filter:drop-shadow(0 4px 2px rgba(77,75,37,.32))}.score{grid-column:1 / 4;grid-row:2;align-self:start;justify-self:center;color:#fff;font-size:clamp(38px,8.2vw,62px);font-weight:950;line-height:.9;text-shadow:0 4px 3px rgba(25,38,79,.42)}.settings-button{display:grid;grid-column:3;grid-row:1;width:clamp(42px,7vw,61px);min-height:clamp(42px,7vw,61px);place-items:center;justify-self:end;padding:0;background:transparent;color:#f7fffff0;font-size:clamp(36px,6.8vw,58px);line-height:1;text-shadow:0 4px 4px rgba(24,45,92,.28)}.settings-button:focus-visible,.control-pad button:focus-visible,.settings-panel button:focus-visible{outline:3px solid rgba(255,255,255,.76);outline-offset:3px}.board-area{position:relative;display:grid;align-content:start;justify-items:center;min-height:0;padding-top:8%}.board{position:relative;z-index:2;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));gap:clamp(1px,.3vw,3px);width:47%;aspect-ratio:8 / 12;padding:clamp(4px,.8vw,7px);border:1px solid rgba(25,36,82,.62);border-radius:4px;background:#1a2554;box-shadow:0 5px 6px #232d625c,inset 0 2px #ffffff14}.board.is-over,.board.is-paused{filter:saturate(.78) brightness(.86)}.board-cell{position:relative;display:grid;min-width:0;min-height:0;place-items:stretch;border-radius:2px}.board-cell.empty{background:#253062;box-shadow:inset 0 1px 1px #ffffff0a,inset 0 -1px 1px #0b12376b}.board-cell.ghost-cell:after{position:absolute;inset:12%;border:2px solid rgba(255,255,255,.28);border-radius:3px;content:""}.board-cell.active-cell .tile{animation:fallingPulse .74s ease-in-out infinite;box-shadow:inset 0 4px 1px #fff3,inset -7px -8px color-mix(in srgb,var(--tile-dark),transparent 18%),inset 4px 0 #ffffff1f,0 8px 9px #101b4861}.tile{position:relative;display:block;width:100%;height:100%;overflow:hidden;border:1px solid color-mix(in srgb,var(--tile-high),white 20%);border-radius:4px;background:linear-gradient(135deg,rgba(255,255,255,.45) 0 15%,transparent 15% 100%),linear-gradient(180deg,var(--tile-high) 0%,var(--tile-main) 48%,var(--tile-main) 100%);box-shadow:inset 0 4px 1px #ffffff29,inset -7px -8px color-mix(in srgb,var(--tile-dark),transparent 18%),inset 4px 0 #ffffff1a,0 3px 5px #101b4859}.tile:after{position:absolute;right:7%;bottom:6%;left:7%;height:16%;border-radius:999px;background:#0000001f;content:""}.status-pill{position:absolute;z-index:5;top:.5%;left:50%;min-width:88px;transform:translate(-50%);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;background:#202b5bd6;color:#ffffffc7;font-size:12px;font-weight:900;letter-spacing:0;text-align:center;box-shadow:0 10px 18px #17234f38}.spark-layer{position:absolute;inset:0;z-index:4;pointer-events:none}.spark{position:absolute;width:7px;height:7px;border-radius:999px;background:#fff327;box-shadow:0 0 10px #fff632eb;transform:translate(-50%,-50%) scale(.2);animation:sparkPop .82s ease-out forwards}.play-footer{--mini-cell: clamp(18px, 4.1vw, 34px);z-index:6;display:grid;grid-template-columns:34% 66%;gap:10px;align-items:center;width:80%;margin:0 auto;padding-bottom:8%}.next-panel{display:grid;grid-template-rows:auto 1fr;align-items:center;justify-items:center;min-height:112px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:#1f2f6359}.next-panel span{color:#ffffffc7;font-size:12px;font-weight:900;text-transform:uppercase}.next-piece{display:grid;min-width:calc(var(--mini-cell) * 4.3);min-height:calc(var(--mini-cell) * 2.6);place-items:center}.mini-piece{display:grid;gap:2px}.mini-piece>span{width:var(--mini-cell);height:var(--mini-cell)}.mini-tile{border-radius:4px}.control-pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;align-items:center}.control-pad button{display:grid;min-height:clamp(48px,8.5vw,64px);place-items:center;padding:0;border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.18),transparent),#1d2b5cb8;color:#fffffff0;font-size:clamp(20px,4.6vw,34px);font-weight:950;line-height:1;box-shadow:0 9px 16px #19295b3d}.settings-panel{position:absolute;z-index:20;top:10%;right:7%;display:grid;gap:8px;width:min(190px,42%);padding:10px;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:#213160eb;box-shadow:0 14px 28px #11193b4d;backdrop-filter:blur(8px)}.settings-panel button,.settings-panel span{display:grid;min-height:42px;place-items:center;border-radius:7px;background:#ffffff21;color:#fff;font-size:14px;font-weight:850}.settings-panel span{color:#ffffffb8}@keyframes fallingPulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.15)}}@keyframes sparkPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-155%) scale(1)}}@media(max-width:520px){#app{padding:0}.blast-card{width:100vw;min-height:100vh;border:0;border-radius:0}.hud{padding-inline:14%}.play-footer{width:92%}}@media(max-height:720px)and (min-width:521px){.blast-card{width:min(94vw,540px)}}
