:root{color-scheme:light;--ink: #202322;--ink-soft: #5f6761;--paper: #f4f6ed;--paper-deep: #dfe6d7;--graphite: #262a28;--graphite-2: #171a19;--line: rgba(32, 35, 34, .14);--accent: #ec5f4f;--mint: #52b99c;--cyan: #58b7d7;--amber: #edb73f;--violet: #8f73d8;--rose: #ec7692;--pearl: #e7ecec;--ease-heavy: cubic-bezier(.16, 1, .3, 1);--cell-gap: clamp(3px, .8vw, 6px)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;min-height:100dvh;overflow-x:hidden;background:linear-gradient(135deg,rgba(32,35,34,.04) 25%,transparent 25%) 0 0 / 22px 22px,linear-gradient(225deg,rgba(32,35,34,.035) 25%,transparent 25%) 0 0 / 22px 22px,linear-gradient(160deg,#f8f8f1,#e7eedf 48%,#f2e4dd);color:var(--ink);font-family:Avenir Next,Trebuchet MS,Verdana,sans-serif;letter-spacing:0}button{font:inherit}.game-shell{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,620px);min-height:100dvh;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) clamp(14px,4vw,26px) max(18px,env(safe-area-inset-bottom))}.game-shell:before{position:fixed;inset:0;z-index:-1;pointer-events:none;content:"";opacity:.36;background-image:linear-gradient(rgba(32,35,34,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(32,35,34,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;min-height:clamp(92px,15dvh,118px);padding-top:clamp(8px,2dvh,24px)}.best-chip,.icon-button,.combo-chip,.run-strip,.restart-button{border:1px solid rgba(32,35,34,.12);box-shadow:inset 0 1px #ffffff80,0 14px 34px #4552461f}.best-chip{display:inline-flex;align-items:center;justify-self:start;gap:6px;min-height:34px;padding:0 10px;border-radius:8px;background:#ffffff80;color:#c79b21;font-size:clamp(.84rem,2.6vw,1rem);font-weight:800}.best-chip svg{width:24px;height:24px;filter:drop-shadow(0 4px 8px rgba(199,155,33,.24))}.score-stack{position:relative;display:grid;justify-items:center;min-width:168px;line-height:.92;text-align:center}.score-value,.score-shadow{grid-area:1 / 1;font-family:Avenir Next,Trebuchet MS,Verdana,sans-serif;font-size:clamp(3.4rem,16vw,6.7rem);font-weight:900;letter-spacing:0}.score-value{color:#fbfbf8;text-shadow:0 2px 0 rgba(32,35,34,.12),0 22px 42px rgba(32,35,34,.22)}.score-shadow{transform:translate(10px,8px) rotate(-8deg);color:#52b99c5c}.combo-chip{margin-top:10px;padding:5px 10px 6px;border-radius:999px;background:#ec5f4f1f;color:#b64235;font-size:.78rem;font-weight:900;text-transform:uppercase}.hud-actions{display:flex;justify-self:end;gap:8px}.icon-button{display:inline-grid;width:38px;height:38px;place-items:center;border-radius:8px;background:#ffffff8f;color:var(--graphite);cursor:pointer;transition:transform .42s var(--ease-heavy),background .42s var(--ease-heavy),box-shadow .42s var(--ease-heavy)}.icon-button svg{width:20px;height:20px}.icon-button:hover{transform:translateY(-2px);background:#ffffffbd}.icon-button:active,.restart-button:active,.piece-button:active{transform:translateY(1px) scale(.98)}.playfield{display:grid;align-content:center;gap:clamp(12px,3dvh,24px)}.board-bezel{position:relative;width:min(100%,540px,max(300px,calc(100dvh - 315px)));margin:0 auto;padding:clamp(6px,1.5vw,9px);border:1px solid rgba(32,35,34,.24);border-radius:8px;background:linear-gradient(180deg,#ffffff42,#ffffff05),#3b403d;box-shadow:inset 0 1px #ffffff52,inset 0 -3px 10px #0000002e,0 28px 72px #2023223d}.board-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--cell-gap);aspect-ratio:1;padding:var(--cell-gap);border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent),var(--graphite-2);box-shadow:inset 0 2px 4px #0000006b,inset 0 -1px #ffffff14}.board-cell{position:relative;display:grid;aspect-ratio:1;place-items:stretch;overflow:hidden;border-radius:5px;background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 42%),#ffffff0b;box-shadow:inset 0 0 0 1px #00000021}.board-cell-ghost-valid:after,.board-cell-ghost-invalid:after{position:absolute;inset:8%;border-radius:5px;content:"";animation:ghostPulse .52s var(--ease-heavy) infinite alternate}.board-cell-ghost-valid:after{background:#52b99c6b;box-shadow:0 0 0 2px #76e1c3b3}.board-cell-ghost-invalid:after{background:#ec5f4f61;box-shadow:0 0 0 2px #ec5f4fb3}.board-cell-clearing{animation:clearFlash .52s var(--ease-heavy)}.cube{position:relative;display:block;width:100%;height:100%;border-radius:5px;background:var(--cube-bg, var(--pearl));box-shadow:inset 0 2px #ffffff61,inset 0 -4px #00000029,0 6px 12px #0003}.cube:before{position:absolute;inset:10% 11% auto;height:28%;border-radius:4px;content:"";background:#ffffff38}.board-cube{animation:cubeLand .36s var(--ease-heavy)}.cube-amber{--cube-bg: linear-gradient(145deg, #ffd85a 0%, #edb73f 50%, #d88d22 100%)}.cube-rose{--cube-bg: linear-gradient(145deg, #ff9cb2 0%, #ec7692 54%, #ca516f 100%)}.cube-cyan{--cube-bg: linear-gradient(145deg, #81d9ef 0%, #58b7d7 54%, #337fa8 100%)}.cube-violet{--cube-bg: linear-gradient(145deg, #bba7ff 0%, #8f73d8 52%, #684bb2 100%)}.cube-jade{--cube-bg: linear-gradient(145deg, #75dcb8 0%, #52b99c 55%, #2f8472 100%)}.cube-coral{--cube-bg: linear-gradient(145deg, #ff9d85 0%, #ec5f4f 55%, #bf3d37 100%)}.cube-pearl,.cube-test,.cube-occupied,.cube-blocked{--cube-bg: linear-gradient(145deg, #f6fbfa 0%, #dfe8e8 52%, #aebcbc 100%)}.notice{position:absolute;left:50%;top:50%;z-index:3;display:grid;grid-template-columns:auto auto;align-items:center;gap:3px 8px;padding:10px 14px;border:1px solid rgba(255,255,255,.32);border-radius:8px;background:#ffffffdb;color:var(--ink);box-shadow:0 18px 44px #0000003d;transform:translate(-50%,-50%);animation:noticePop .9s var(--ease-heavy) forwards;pointer-events:none}.notice svg{grid-row:span 2;width:22px;height:22px;color:var(--accent)}.notice span{font-size:clamp(1.15rem,5vw,2rem);font-weight:950;line-height:.9}.notice small{color:var(--ink-soft);font-size:.78rem;font-weight:800;text-transform:uppercase}.notice-combo{background:#fff3bf}.notice-blocked{background:#ffe5df}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,3vw,18px);width:min(100%,540px,max(300px,calc(100dvh - 315px)));margin:0 auto}.piece-slot{display:grid;min-height:clamp(74px,14dvh,112px);place-items:center;border:1px solid rgba(32,35,34,.1);border-radius:8px;background:linear-gradient(180deg,#ffffff70,#fff3),#ffffff47;box-shadow:inset 0 1px #fff6,0 18px 38px #4d5a4f1a}.piece-slot-empty{opacity:.42}.piece-button{display:grid;width:100%;min-height:72px;place-items:center;border:0;border-radius:8px;background:transparent;cursor:grab;touch-action:none;transition:transform .42s var(--ease-heavy),filter .42s var(--ease-heavy)}.piece-button:hover{transform:translateY(-4px);filter:saturate(1.08)}.piece-button:disabled{cursor:default;opacity:.55}.piece-preview{display:grid;grid-template-columns:repeat(var(--piece-width),var(--piece-cell));grid-template-rows:repeat(var(--piece-height),var(--piece-cell));gap:max(2px,calc(var(--piece-cell) * .13));filter:drop-shadow(0 12px 16px rgba(32,35,34,.18))}.piece-preview-drag{opacity:.98;transform:rotate(-2deg) scale(1.05);filter:drop-shadow(0 24px 30px rgba(32,35,34,.24))}.piece-cube{min-width:0}.piece-spent{width:46px;height:7px;border-radius:999px;background:#2023222e}.drag-avatar{position:fixed;left:0;top:0;z-index:4;pointer-events:none;transition:filter .18s var(--ease-heavy)}.drag-avatar-invalid{filter:grayscale(.25) saturate(.7)}.run-strip{display:flex;justify-content:center;gap:clamp(8px,3vw,18px);width:min(100%,540px,max(300px,calc(100dvh - 315px)));margin:clamp(14px,3dvh,22px) auto 0;padding:8px 12px;border-radius:8px;background:#ffffff6b;color:#202322ad;font-size:clamp(.72rem,2.4vw,.86rem);font-weight:850;text-transform:uppercase}.game-over{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:#181b1a61}.game-over-panel{display:grid;justify-items:center;gap:12px;width:min(100%,330px);padding:26px;border:1px solid rgba(255,255,255,.4);border-radius:8px;background:#fafaf4f0;box-shadow:inset 0 1px #ffffff8a,0 30px 90px #00000047;animation:panelIn .54s var(--ease-heavy)}.game-over-panel span{color:var(--ink-soft);font-size:.82rem;font-weight:900;text-transform:uppercase}.game-over-panel strong{color:var(--ink);font-size:clamp(3rem,15vw,5rem);line-height:.95}.restart-button{display:inline-flex;align-items:center;gap:12px;margin-top:4px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--graphite);color:#f8f8f1;cursor:pointer;transition:transform .42s var(--ease-heavy),background .42s var(--ease-heavy)}.restart-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:999px;background:#ffffff1f;color:#fff}@keyframes cubeLand{0%{opacity:0;transform:translateY(-18%) scale(.82)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ghostPulse{0%{opacity:.48;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@keyframes clearFlash{0%,to{box-shadow:inset 0 0 0 1px #00000021}45%{background:#ffffffdb;box-shadow:inset 0 0 0 2px #ffffffe6,0 0 28px #58b7d7e0}}@keyframes noticePop{0%{opacity:0;transform:translate(-50%,-42%) scale(.82)}18%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-76%) scale(.92)}}@keyframes panelIn{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:480px){.game-shell{padding-inline:10px}.hud{min-height:108px}.best-chip{padding-inline:7px}.hud-actions{gap:6px}.icon-button{width:34px;height:34px}.tray{gap:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}