:root{color-scheme:dark;font-family:"Trebuchet MS","Segoe UI",sans-serif;color:#f3dfbd;background:#241825;--lavender:#b497e0;--mint:#8bcdb4;--orange:#ee9b55;--yellow:#edcb70;--cream:#f3dfbd}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100svh;padding:28px 20px;display:grid;place-items:center;background:radial-gradient(ellipse at 17% 55%,#5b3c423b,transparent 45%),radial-gradient(ellipse at 85% 15%,#6c4b602b,transparent 50%),radial-gradient(ellipse at 50% 100%,#432531 0%,#241825 70%);overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible{outline:3px solid #fae5a0;outline-offset:4px}button:disabled{cursor:default}button,h1,h2,p{margin:0}button{touch-action:manipulation}[hidden]{display:none!important}
.cabinet{position:relative;width:min(100%,960px);padding:23px 25px 15px;border:2px solid #ae7549;border-bottom:7px solid #382019;border-radius:36px;background:repeating-linear-gradient(3deg,transparent 0px,transparent 7px,#ecb97a06 8px,transparent 9px,transparent 16px,#1d0a060b 17px,transparent 21px),linear-gradient(100deg,#774327,#98603b 25%,#744226 55%,#945f39 80%,#6e3d26);box-shadow:inset 0 3px 0 #e4a66b6b,inset 0 -3px 0 #522c23,0 28px 75px #100913a3,0 3px 9px #0008}
.topbar{display:flex;align-items:center;gap:21px;padding:0 2px 20px}.brand{flex:1}.eyebrow{display:block;font-size:9px;font-weight:700;letter-spacing:2.1px;color:#d9b58f;margin-bottom:7px}h1{font-size:clamp(22px,3vw,36px);letter-spacing:1.5px;line-height:1;color:#f2c990;text-shadow:0 2px 1px #361808,0 -1px 0 #ffe6b7}.scores{display:flex;background:linear-gradient(#2a1921,#382128);border:1px solid #ae744e77;border-radius:13px;padding:12px 18px;gap:26px;box-shadow:inset 0 2px 6px #0004}.scores>div{display:flex;flex-direction:column;gap:4px}.scores span{font-size:10px;font-weight:bold;letter-spacing:1.2px;color:#d7b99d}.scores strong{font-size:24px;line-height:1;color:#f0ce79;font-variant-numeric:tabular-nums}.icon-button{width:47px;height:47px;flex-shrink:0;border-radius:13px;border:1px solid #c38b56;background:linear-gradient(#955e37,#633821);box-shadow:0 3px 0 #3a2019,inset 0 1px 0 #e0a96b77;font-size:26px;font-weight:bold;text-shadow:0 2px #32180e}
.play-area{display:grid;grid-template-columns:minmax(0,1fr) 187px;gap:20px;align-items:stretch}.board-column{min-width:0}.board-frame{padding:12px;border-radius:20px;border:2px solid #4f2a1e;background:linear-gradient(135deg,#45251c,#784a30 55%,#4c2a20);box-shadow:inset 0 5px 8px #27120c99,0 1px 0 #ce915e88}.board{position:relative;aspect-ratio:1;width:100%;padding:0;border:3px solid #1c141c;border-radius:9px;background:#271d29;overflow:hidden;touch-action:none;box-shadow:0 0 0 2px #a66c4c44,inset 0 0 20px #0006}.grid,.board-layer{position:absolute;inset:0;display:grid;grid-template:repeat(8,minmax(0,1fr))/repeat(8,minmax(0,1fr))}.cell{padding:0;margin:1px;border:1px solid #72546144;border-bottom:2px solid #171119;border-radius:5px;background:linear-gradient(140deg,#352733,#2a1e2b);min-width:0;min-height:0}.cell:focus-visible{outline-offset:-4px;z-index:4}.board-layer{pointer-events:none}.block,.ghost,.place-cell{position:absolute;width:12.5%;height:12.5%;padding:2px;left:calc(var(--x)*12.5%);top:calc(var(--y)*12.5%)}.block{transition:left .29s cubic-bezier(.35,0,.3,1),top .29s cubic-bezier(.35,0,.3,1);z-index:2}.tile{position:absolute;inset:2px;border-radius:6px;background:linear-gradient(145deg,#ffffff2b,transparent 55%,#0000000c),var(--color);border:1px solid color-mix(in srgb,var(--color),#fff 30%);box-shadow:inset 2px 2px 1px #fff5,inset -2px -3px 2px #0002,0 2px 3px #0006}.tile:after{content:"";position:absolute;inset:3px;border-radius:3px;border:1px solid #ffffff13}.ghost{z-index:1}.ghost:after{content:"";position:absolute;inset:4px;border-radius:5px;border:2px dashed var(--color);background:color-mix(in srgb,var(--color) 13%,transparent);opacity:.65}.block.preview-source{opacity:.78}.block.clearing{animation:clear-flash .34s ease-in forwards}.place-cell:after{content:"";position:absolute;inset:3px;border:2px solid #b9e5bd;background:#98dfb855;border-radius:5px}.place-cell.invalid:after{border-color:#f29680;background:#db766c44}.board.invalid{animation:invalid-flash .25s ease-out;outline:3px solid transparent;outline-offset:-3px}.turns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.turn-button{display:flex;align-items:center;justify-content:center;gap:13px;padding:10px 12px;min-height:76px;border:2px solid #bc8552;border-bottom:4px solid #45251b;border-radius:40px;background:linear-gradient(#a56d40,#754326);box-shadow:inset 0 2px 0 #e6b17b66,0 2px 3px #0005;text-align:left;transition:filter .15s,box-shadow .15s,opacity .15s}.turn-icon{font-size:53px;line-height:1;color:#f4ce7f;text-shadow:0 2px 0 #4a271c}.turn-button strong{font-size:14px;letter-spacing:.6px;display:block}.turn-button small{display:block;margin-top:6px;font-size:12px;color:#e9c6a3}.turn-button:disabled{opacity:.43;filter:saturate(.6)}.turn-button:not(:disabled):hover,.turn-button.previewing{border-color:#f6d27e;box-shadow:0 0 0 2px #f1c75b33,0 0 21px #f9bc4b55,inset 0 1px 8px #ffd77f44}.turn-button:not(:disabled):active{transform:translateY(1px)}
.side-panel{border:2px solid #ac764e;border-bottom-color:#4e2a22;border-radius:20px;background:linear-gradient(120deg,#38252e,#281c26);padding:18px 15px;display:flex;flex-direction:column;align-items:stretch;gap:17px;box-shadow:inset 0 2px 6px #170c1888,0 2px 2px #26141288;text-align:center}h2{font-size:11px;letter-spacing:1.05px;font-weight:700;color:#dfc3aa}.gravity-panel{background:#1e151e66;border-radius:11px;padding:12px 4px}.gravity-arrow{font-size:61px;color:#eed4a7;line-height:1.05;margin:7px 0 3px;text-shadow:0 3px #0004}.gravity-panel strong{font-size:16px}.progress-panel{padding-bottom:16px;border-bottom:1px solid #85583d}.dots{display:flex;justify-content:center;gap:10px;margin:13px 0 10px}.dots i{display:block;width:15px;height:15px;border-radius:50%;background:#19131b;box-shadow:inset 0 2px 2px #0008;border:1px solid #795348}.dots i.filled{background:linear-gradient(#ffe7a2,#d6a23e);border-color:#ebc16b;box-shadow:0 0 8px #efb74b26}.progress-panel p{font-size:14px;margin-bottom:7px}.secondary{font-size:11px;color:#c6aaa4;line-height:1.4}.piece-panel h2,.next-panel h2{margin-bottom:9px}.piece-tray,.mini-tray{background:linear-gradient(145deg,#211722,#291c27);border:1px solid #64445555;border-radius:9px;box-shadow:inset 0 2px 7px #0003;display:grid;place-items:center}.piece-tray{width:100%;height:99px;touch-action:none;position:relative}.piece-tray:hover:not(:disabled),.piece-tray.selected{outline:1px solid #b6957188;background:#392737}.piece-tray:disabled{opacity:.55}.piece-panel .secondary{display:block;margin-top:7px}.shape{display:grid;grid-template-columns:repeat(var(--w),var(--unit,26px));grid-template-rows:repeat(var(--h),var(--unit,26px));position:relative;pointer-events:none}.shape .shape-cell{position:relative;margin:1px;border-radius:4px;background:linear-gradient(145deg,#ffffff33,transparent 70%),var(--color);box-shadow:inset 1px 1px 1px #fff6,inset -1px -2px 1px #0002,0 1px 2px #0005;border:1px solid #ffffff33}.next-trays{display:flex;gap:7px}.mini-tray{flex:1;height:70px;min-width:0}.mini-tray .shape{--unit:19px}.legend{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px;font-size:8px;color:#d9c4b4}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:15px;height:15px;border-radius:3px;display:inline-block;flex-shrink:0}.solid-key{background:var(--lavender);box-shadow:inset 0 1px 1px #fff5}.ghost-key{border:1px dashed #ccb7cc;background:#b497e019}
footer{text-align:center;padding-top:15px;line-height:1.5}#status{font-size:14px;min-height:21px;color:#ffe4ac}.help{font-size:12px;color:#e0ba98;margin-top:2px}.text-button{background:none;padding:5px 7px 0;font-size:10px;color:#d1ac90;text-decoration:underline;text-underline-offset:3px}.text-button:hover{color:#ffe5b8}.footer-dot{font-size:10px;color:#ad8065}.overlay{position:absolute;inset:0;z-index:20;background:#160f1ed9;backdrop-filter:blur(7px);border-radius:33px;display:grid;place-items:center;padding:25px}.dialog{width:min(100%,400px);text-align:center;border:1px solid #aa754d;border-radius:22px;padding:30px;background:linear-gradient(140deg,#49303a,#2b1d2b);box-shadow:0 20px 50px #0006}.dialog h2{font-size:29px;letter-spacing:0;color:#f3d6a2;margin:10px 0 15px}.dialog p{font-size:14px;line-height:1.7;color:#dfc7b8;margin-bottom:12px}.dialog ol{text-align:left;padding-left:19px;font-size:13px;line-height:1.65;color:#dfc7b8}.dialog li{margin:8px 0}.dialog strong{color:#f1d493}.dialog-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.dialog button{border:1px solid #bc8657;border-radius:10px;padding:12px 20px;margin:10px 5px 0;background:linear-gradient(#a26a3f,#75452e);font-size:14px}.dialog button.quiet{background:transparent;color:#d8bda8}.dialog .big-score{display:block;font-size:44px;color:#f1cf83;margin:15px 0}.cabinet.has-overlay .play-area,.cabinet.has-overlay .topbar,.cabinet.has-overlay footer{pointer-events:none}#drag-piece{position:fixed;z-index:30;pointer-events:none;display:none;filter:drop-shadow(0 7px 5px #0005);opacity:.9}.dragging #current-piece{opacity:.32}.dragging{cursor:grabbing}.board.resolving .cell{cursor:default}
@keyframes clear-flash{0%{filter:brightness(1)}35%{filter:brightness(1.85);transform:scale(1.03)}100%{opacity:0;transform:scale(.65)}}@keyframes invalid-flash{0%,100%{outline-color:transparent}40%{outline-color:#ed9687}}
@media(min-width:761px) and (max-height:850px){body{padding:14px}.cabinet{width:min(100%,850px);padding:17px 21px 11px}.topbar{padding-bottom:14px}.side-panel{gap:12px;padding:13px}.gravity-arrow{font-size:48px}.play-area{grid-template-columns:minmax(0,1fr) 174px;gap:16px}.piece-tray{height:80px}.mini-tray{height:57px}.turn-button{min-height:66px;padding:7px 12px}.turn-icon{font-size:45px}.turns{margin-top:12px}footer{padding-top:10px}}
@media(max-width:760px){body{padding:12px 10px;display:block}.cabinet{max-width:600px;margin:auto;padding:17px 13px 13px;border-radius:24px}.topbar{gap:10px;padding:0 2px 16px}.eyebrow{font-size:7px;letter-spacing:1.3px}.brand h1{font-size:clamp(17px,4.4vw,28px);letter-spacing:.6px}.scores{padding:9px 10px;gap:13px;border-radius:10px}.scores strong{font-size:19px}.scores span{font-size:8px}.icon-button{width:37px;height:39px;border-radius:10px;font-size:23px}.play-area{display:flex;flex-direction:column;gap:13px}.board-frame{padding:8px;border-radius:14px}.board{border-width:2px}.block .tile{inset:1.5px;border-radius:4px}.cell{border-radius:4px}.tile:after{inset:2px}.turns{gap:9px;margin-top:12px}.turn-button{min-height:64px;padding:7px 9px;gap:8px}.turn-icon{font-size:41px}.turn-button strong{font-size:12px}.turn-button small{font-size:10px;margin-top:4px}.side-panel{display:grid;grid-template-columns:1fr 1.05fr 1.05fr;gap:9px;padding:12px 10px;border-radius:14px;position:relative}.gravity-panel{grid-column:1;grid-row:1;background:transparent;padding:0}.gravity-panel h2{font-size:8px;letter-spacing:.5px}.gravity-arrow{font-size:35px;margin:3px 0 0}.gravity-panel strong{font-size:12px}.progress-panel{grid-column:1;grid-row:2;border:0;padding:0}.progress-panel h2{display:none}.dots{gap:7px;margin:3px 0 6px}.dots i{width:10px;height:10px}.progress-panel p{font-size:10px;margin:0}.progress-panel .secondary{display:none}.piece-panel{grid-column:2;grid-row:1/3}.next-panel{grid-column:3;grid-row:1/3}h2{font-size:9px;letter-spacing:.6px}.piece-panel h2,.next-panel h2{margin-bottom:6px}.piece-tray{height:76px}.shape{--unit:23px}.next-trays{flex-direction:column;gap:4px}.mini-tray{height:34px;min-height:34px}.mini-tray .shape{--unit:12px}.piece-panel .secondary{font-size:9px;margin-top:5px}.legend{grid-column:1/4;justify-content:center;gap:20px;margin:0;padding:3px 0 0;font-size:9px}.legend i{width:12px;height:12px}footer{padding-top:12px}#status{font-size:12px;line-height:1.4}.help{font-size:10px;margin-top:5px}.overlay{border-radius:21px;padding:18px}.dialog{padding:22px}.ghost:after{inset:3px;border-width:1px}.place-cell:after{inset:2px}}
@media(max-width:370px){body{padding:8px 5px}.cabinet{padding:13px 9px 11px}.scores{padding:8px;gap:10px}.scores strong{font-size:16px}.topbar{gap:7px}.eyebrow{font-size:6px}.board-frame{padding:6px}.turn-button strong{font-size:10px}.turn-button small{font-size:9px}.turn-icon{font-size:35px}}
.block.preview-source{opacity:.93}
.board-frame{position:relative;transform-origin:50% 50%}
.board-frame:before{content:"";position:absolute;top:3px;left:calc(50% - 9px);width:18px;height:4px;border-radius:3px;background:#edc780;box-shadow:0 1px 2px #29180d;pointer-events:none}
.board.rebasing .block{transition:none!important}
.board-frame.turning{z-index:5;box-shadow:inset 0 5px 8px #27120c99,0 0 0 2px #f2cb7988,0 8px 30px #0006}
.turn-cue{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;pointer-events:none;border-radius:18px;background:radial-gradient(ellipse at center,#201424b3,transparent 66%);color:#ffe2a1;text-shadow:0 3px 10px #100711,0 0 20px #291423}
.turn-cue>span{font-size:clamp(70px,12vw,124px);line-height:1}.turn-cue strong{font-size:13px;letter-spacing:1.6px;padding:5px 10px;border-radius:8px;background:#241825c9}
@media(min-width:761px) and (min-height:541px){.cabinet{width:min(100%,960px,calc(100svh - 120px))}}
@media(min-width:761px) and (max-height:540px){.cabinet{width:min(100%,760px)}body{display:block}.cabinet{margin:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}