:root{color-scheme:light;font-family:Inter,ui-rounded,Arial Rounded MT Bold,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f7f9ff;background:#aeb6c3;font-synthesis:none;text-rendering:optimizeLegibility;--navy-950: #071329;--navy-900: #0b1933;--navy-800: #142443;--navy-700: #213756;--orange: #ffad19;--aqua: #28d7f2;--marble: #f2efe8;--board-size: min( calc(100vw - 32px) , calc(100dvh - 300px) , 560px)}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;height:100%;min-height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background-color:#aeb6c3;background-image:linear-gradient(#5b687c1f,#5b687c1f),url(/assets/marble-bg.png);background-position:center;background-size:cover}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.game-screen{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100dvh;min-height:540px;padding:max(17px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));overflow:hidden;isolation:isolate}.game-screen:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#ffffff0f,#2c384d14);pointer-events:none}.game-hud{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;width:min(100%,720px);min-height:clamp(54px,8dvh,78px);padding:0 clamp(3px,1vw,10px)}.best-score{display:flex;align-items:center;gap:clamp(9px,2.3vw,16px);color:var(--orange);filter:drop-shadow(0 3px 2px rgba(38,46,66,.35))}.best-score svg{width:clamp(42px,10vw,62px);height:clamp(42px,10vw,62px);color:#173673;filter:drop-shadow(0 2px 0 #0c214f)}.best-score strong{font-size:clamp(1.58rem,6vw,2.55rem);font-weight:900;letter-spacing:.015em;line-height:1;text-shadow:0 2px 1px rgba(93,56,0,.25)}.leaderboard-button{display:grid;place-items:center;width:clamp(48px,11vw,66px);height:clamp(48px,11vw,66px);padding:clamp(8px,2vw,12px);color:#fff;background:transparent;border:0;border-radius:16px;filter:drop-shadow(0 3px 2px rgba(26,36,55,.38));cursor:pointer;transition:transform .16s ease,background .16s ease}.leaderboard-button:hover{background:#ffffff26;transform:translateY(-2px)}.leaderboard-button:active{transform:translateY(1px) scale(.96)}.leaderboard-button svg{width:100%;height:100%}.play-area{position:relative;display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:flex-start;width:min(100%,720px);min-height:0}.current-score{display:grid;place-items:center;flex:0 0 auto;min-height:clamp(64px,10dvh,104px);color:#fff;font-size:clamp(4rem,14vw,6.5rem);font-weight:650;letter-spacing:-.055em;line-height:.9;text-shadow:0 4px 3px rgba(34,43,60,.42)}.combo-pop{position:absolute;top:clamp(58px,9dvh,94px);z-index:3;padding:5px 12px;color:transparent;font-size:.76rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase;transform:translateY(7px) scale(.9);transition:color .18s ease,transform .18s ease;pointer-events:none}.combo-pop--visible{color:var(--orange);text-shadow:0 2px 1px rgba(85,55,0,.25);transform:translateY(0) scale(1)}.board-frame{display:grid;grid-template-columns:repeat(8,1fr);flex:0 0 auto;width:var(--board-size);height:var(--board-size);padding:clamp(4px,.75vw,7px);gap:clamp(2px,.48vw,4px);touch-action:none;background:var(--navy-950);border:clamp(3px,.7vw,5px) solid #1a2b47;border-radius:clamp(7px,1.8vw,13px);box-shadow:inset 0 0 0 2px #647ea38c,0 5px #15203359,0 12px 18px #19223133;user-select:none}.board-cell{position:relative;min-width:0;background:linear-gradient(145deg,#162746,#0e1c35);border:1px solid rgba(45,65,94,.65);border-radius:clamp(2px,.65vw,6px);box-shadow:inset 0 1px 2px #ffffff06;transition:background .09s ease,box-shadow .09s ease,transform .09s ease,opacity .12s ease}.board-cell--filled,.block{background-color:var(--marble);background-image:linear-gradient(145deg,#ffffffa3,#d0c9bc29),url(/assets/marble-bg.png);background-position:center;background-size:205px 205px;border:1px solid #c9c5bc;box-shadow:inset 2px 2px 2px #ffffffeb,inset -3px -4px 5px #7f796f33,0 2px 2px #030a168f}.board-cell--filled:after,.block:after{content:"";position:absolute;inset:7% 10% 55%;border-radius:999px;background:linear-gradient(180deg,#ffffff8a,#fff0);pointer-events:none}.board-cell--preview-valid{background:#f2efe8b8;border-color:#ffffffe0;box-shadow:inset 0 0 0 2px #ffffff42,0 0 9px #ffffff47}.board-cell--preview-invalid{background:#ec4a4f59;border-color:#ff9090cc}.board-cell--blast{animation:blast .28s ease both}@keyframes blast{0%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.18);filter:brightness(1.8)}to{transform:scale(.25);opacity:0}}.piece-tray{display:grid;grid-template-columns:repeat(3,1fr);flex:1 1 auto;width:var(--board-size);min-height:104px;max-height:175px;padding-top:clamp(12px,2.7dvh,29px);gap:clamp(8px,3vw,24px)}.piece-slot{display:grid;place-items:center;min-width:0;min-height:0;padding:4px;touch-action:none;background:transparent;border:0;border-radius:14px;cursor:grab;transition:transform .15s ease,opacity .12s ease,background .15s ease}.piece-slot:hover:not(:disabled){background:#ffffff14;transform:translateY(-3px)}.piece-slot:active:not(:disabled){cursor:grabbing}.piece-slot--dragging{opacity:.06;transform:scale(.9)}.piece-slot:disabled{opacity:.08;cursor:default}.piece-shape{--piece-cell: min(28px, calc(104px / var(--piece-rows)), calc(102px / var(--piece-cols)));--piece-gap: 3px;display:grid;grid-template-columns:repeat(var(--piece-cols),var(--piece-cell));grid-template-rows:repeat(var(--piece-rows),var(--piece-cell));gap:var(--piece-gap);filter:drop-shadow(2px 4px 2px rgba(28,34,45,.28));pointer-events:none}.block{position:relative;border-radius:clamp(3px,.7vw,7px)}.drag-ghost{position:fixed;z-index:50;transform:translate(-50%,-50%) scale(1.04);transform-origin:center;pointer-events:none;will-change:left,top}.piece-shape--dragging{filter:drop-shadow(5px 12px 6px rgba(6,14,29,.38))}.leaderboard-backdrop{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;background:#0710219e;backdrop-filter:blur(4px);animation:fade-in .18s ease both}.leaderboard-panel{width:min(100%,460px);height:100%;padding:max(24px,env(safe-area-inset-top)) clamp(20px,5vw,34px) max(26px,env(safe-area-inset-bottom));overflow-y:auto;color:#eef4ff;background:linear-gradient(#091730f0,#091730f7),url(/assets/marble-bg.png) center / cover;box-shadow:-18px 0 45px #040b184d;animation:slide-in .22s ease both}.leaderboard-header,.leaderboard-header>div{display:flex;align-items:center}.leaderboard-header{justify-content:space-between;gap:20px;margin-bottom:30px}.leaderboard-header>div{gap:13px}.leaderboard-header svg{width:36px;height:36px;color:var(--orange)}.leaderboard-header h2{margin:0;font-size:clamp(1.7rem,6vw,2.25rem);letter-spacing:-.03em}.leaderboard-close{display:grid;place-items:center;width:46px;height:46px;padding:11px;color:#fff;background:#ffffff17;border:1px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer}.leaderboard-close svg{width:100%;height:100%;color:currentColor}.leaderboard-columns,.leaderboard-entry{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:10px}.leaderboard-columns{padding:0 12px 12px;color:#87a1c7;border-bottom:1px solid rgba(163,184,216,.25);font-size:.72rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.leaderboard-list{margin:0;padding:0;list-style:none}.leaderboard-entry{min-height:58px;padding:0 12px;border-bottom:1px solid rgba(163,184,216,.14)}.leaderboard-entry>span:first-child{color:var(--orange);font-size:1.12rem;font-weight:900}.leaderboard-entry strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-entry>span:last-child{font-weight:800;font-variant-numeric:tabular-nums}.leaderboard-entry--new{background:#28d7f21f}.leaderboard-state{margin:24px 12px;color:#aebed6;line-height:1.5}.leaderboard-state--error{color:#ffaaa7}.gameover-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;min-height:100dvh;padding:max(22px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom));overflow-y:auto;color:#fff;background:radial-gradient(circle at 50% 62%,rgba(36,196,244,.35),transparent 42%),linear-gradient(180deg,#083dc2,#075bd5 48%,#0b99e8);animation:fade-in .24s ease both}.gameover-screen:before{content:"";position:absolute;inset:0;background-image:url(/assets/marble-bg.png);background-size:720px;mix-blend-mode:soft-light;opacity:.09;pointer-events:none}.gameover-content{position:relative;display:flex;flex-direction:column;align-items:center;width:min(100%,650px);margin:auto}.gameover-content h1{margin:0 0 clamp(22px,4dvh,42px);color:#20c6f3;font-size:clamp(3.4rem,12vw,6.3rem);font-weight:950;letter-spacing:-.055em;line-height:.92;text-align:center;text-shadow:0 5px 0 #047dbf,0 9px 8px rgba(1,36,105,.42)}.gameover-score-group{display:flex;flex-direction:column;align-items:center}.gameover-score-group p{margin:0 0 5px;color:#35d1ef;font-size:clamp(1rem,4vw,1.45rem);font-weight:850;letter-spacing:.07em}.gameover-score{font-size:clamp(4.5rem,19vw,7.5rem);font-weight:850;letter-spacing:-.06em;line-height:.9;text-shadow:0 5px 4px rgba(1,37,103,.44)}.gameover-score-group--best{margin-top:clamp(22px,3dvh,38px)}.gameover-best{color:var(--orange);font-size:clamp(2.8rem,12vw,5rem);font-weight:900;letter-spacing:-.045em;line-height:.98;text-shadow:0 4px 3px rgba(94,55,0,.38)}.score-save{display:grid;grid-template-columns:minmax(0,1fr) auto;width:min(100%,530px);margin-top:clamp(24px,4dvh,48px);gap:10px}.score-save input,.score-save button{height:clamp(50px,7dvh,64px);border-radius:11px;font-size:clamp(.88rem,3.6vw,1.05rem);font-weight:750}.score-save input{min-width:0;padding:0 15px;color:#fff;background:#0442aa8f;border:2px solid rgba(88,214,255,.58);box-shadow:inset 0 2px 4px #011e5f3d,0 3px 6px #011f5a33}.score-save input::placeholder{color:#e7f6ffa8}.score-save button{padding:0 16px;color:#fff;background:linear-gradient(180deg,#168fff,#0754e8);border:1px solid #0047cd;box-shadow:0 5px #0643a8,0 8px 10px #00216740;cursor:pointer}.score-save button:disabled{opacity:.66;cursor:wait}.form-error{grid-column:1 / -1;margin:2px 0 0;color:#fff0ee;font-size:.84rem;text-align:center}.save-success{margin-top:clamp(24px,4dvh,48px);padding:13px 22px;color:#fff;background:#05745159;border:1px solid rgba(171,255,214,.52);border-radius:11px;font-weight:850}.play-again-button{display:grid;place-items:center;width:min(100%,530px);min-height:clamp(65px,9dvh,84px);margin-top:18px;background:linear-gradient(180deg,#59e81c,#19bf0a);border:1px solid #159906;border-radius:13px;box-shadow:0 6px #0b9606,0 12px 16px #012f5357,inset 0 2px 1px #ffffff61;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.play-again-button:hover{transform:translateY(-2px);box-shadow:0 8px #0b9606,0 15px 20px #012f535c,inset 0 2px 1px #ffffff61}.play-again-button:active{transform:translateY(4px);box-shadow:0 2px #0b9606}.play-triangle{width:0;height:0;margin-left:8px;border-top:22px solid transparent;border-bottom:22px solid transparent;border-left:35px solid #fff;filter:drop-shadow(0 3px 2px rgba(40,80,30,.28))}.gameover-hint{margin:16px 0 0;color:#e3f6ffb8;font-size:clamp(.72rem,2.8vw,.86rem);text-align:center}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-in{0%{transform:translate(28px);opacity:.8}to{transform:translate(0);opacity:1}}@media(max-height:700px){:root{--board-size: min( calc(100vw - 32px) , calc(100dvh - 254px) , 470px)}.game-hud{min-height:48px}.current-score{min-height:56px;font-size:clamp(3.2rem,12vw,5rem)}.piece-tray{min-height:84px;padding-top:9px}.piece-shape{--piece-cell: min(23px, calc(82px / var(--piece-rows)), calc(85px / var(--piece-cols)))}.gameover-content h1{margin-bottom:16px;font-size:clamp(3rem,10vw,5rem)}.gameover-score{font-size:clamp(3.8rem,15vw,6rem)}.gameover-score-group--best{margin-top:14px}.score-save{margin-top:19px}.play-again-button{margin-top:14px}}@media(max-width:430px){.game-screen{padding-inline:12px}:root{--board-size: min( calc(100vw - 24px) , calc(100dvh - 286px) )}.piece-tray{gap:5px}.score-save{grid-template-columns:minmax(0,1fr) 112px}.score-save button{padding-inline:8px}}@media(min-width:431px)and (max-height:760px){:root{--board-size: min( calc(100vw - 32px) , calc(100dvh - 320px) , 470px)}.game-hud{min-height:48px}.current-score{min-height:64px;font-size:clamp(3.5rem,10dvh,5.2rem)}.piece-tray{min-height:96px;padding-top:8px}.piece-shape{--piece-cell: min(23px, calc(88px / var(--piece-rows)), calc(92px / var(--piece-cols)))}}@media(display-mode:standalone){.game-screen{padding-top:max(22px,env(safe-area-inset-top))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
