/* A warmer cabinet, deeper sockets and brighter, tactile pieces. */
:root{--lavender:#ba9aed;--mint:#83dcc1;--orange:#ffa05e;--yellow:#f6d576}
body{background:radial-gradient(ellipse at 13% 70%,#9b5c4038,transparent 42%),radial-gradient(ellipse at 88% 20%,#77599c30,transparent 44%),radial-gradient(ellipse at 50% 100%,#452838,#211526 75%)}
.cabinet{background:repeating-linear-gradient(2deg,transparent 0 8px,#f2c49a06 9px,transparent 10px 20px,#30120c0b 21px,transparent 23px),linear-gradient(105deg,#653c2a,#96653e 24%,#754b31 55%,#946641 82%,#62402e);border-color:#ba8a58;border-bottom-color:#3e251f;box-shadow:inset 0 3px 0 #ffd09a55,inset 0 -3px 0 #4c2b20,0 30px 80px #100913a3,0 0 70px #d0944a0c}
.board-frame{background:linear-gradient(145deg,#42261f,#845438 45%,#45271f);border-color:#41241c;box-shadow:inset 0 5px 8px #25120c99,0 1px 0 #dca06eaa,0 0 0 1px #4b2a20}
.board{background:#211a29;border-color:#201522;box-shadow:inset 0 0 23px #100c20b3,0 0 0 2px #e0a66c27}
.cell{background:radial-gradient(ellipse at 50% 5%,#3e3045,#2a2030 85%);border-color:#80617a38;border-bottom-color:#17121d;box-shadow:inset 0 2px 4px #140e1e88,inset 0 -1px 0 #84607715}
.tile{background:linear-gradient(150deg,#ffffff3d,transparent 48%,#00000012 82%),var(--color);border-color:color-mix(in srgb,var(--color),#fff 42%);box-shadow:inset 2px 3px 1px #fff7,inset -2px -4px 2px #0003,0 3px 3px #0c0819a6,0 0 9px color-mix(in srgb,var(--color) 12%,transparent)}
.tile:after{inset:4px;border-top:1px solid #fff5;border-left:1px solid #fff2;border-right:1px solid #ffffff0c;border-bottom:0}
.side-panel{background:radial-gradient(ellipse at top right,#51344355,transparent 65%),linear-gradient(120deg,#342532,#211a28);border-color:#b38258;border-bottom-color:#4b2b28}
.gravity-panel{border:1px solid #e9be7815;background:radial-gradient(ellipse at 50% 15%,#e6b6660e,transparent 70%),#1e172566}.gravity-arrow{color:#f9dca2;text-shadow:0 2px #0006,0 0 20px #f1c96a26}
.scores{border-color:#bd8b5d88;background:linear-gradient(#271a27,#34212c);box-shadow:inset 0 2px 6px #0004,0 1px 0 #e5ac6e33}.scores strong{color:#f7d982;text-shadow:0 0 14px #eabb5b25}
.piece-tray{background:radial-gradient(ellipse,#6d547e22,transparent 75%),#201724;border-color:#b08bc44d;box-shadow:inset 0 2px 7px #0005,0 1px 0 #cfb4d312}.piece-tray .shape{--unit:30px}.shape .shape-cell{box-shadow:inset 1px 2px 1px #fff7,inset -1px -3px 1px #0003,0 2px 2px #0005}
.turn-button{background:linear-gradient(#a2764c,#744a31);border-top-color:#dfac72}.turn-button:not(:disabled){box-shadow:inset 0 2px 0 #ffe2a155,0 3px 7px #1e102355,0 0 18px #e8b64c19}.turn-button strong{color:#ffe5b5}.turn-button:disabled{opacity:.47}
.board.mouse-ready .cell{cursor:crosshair}
.place-cell{z-index:8}.place-cell:after{border:2px solid color-mix(in srgb,var(--color),#fff 40%);background:linear-gradient(145deg,#ffffff38,transparent 60%),color-mix(in srgb,var(--color) 65%,transparent);box-shadow:inset 1px 2px 0 #ffffff44,0 0 10px color-mix(in srgb,var(--color) 30%,transparent);border-radius:6px}
.place-cell.invalid:after{background:#d9756b42;border:2px dashed #ed9687;box-shadow:none}
.block.landed .tile{animation:piece-land .22s ease-out}
.score-pop{animation:score-pop .25s ease-out}
.board-feedback{position:absolute;pointer-events:none;z-index:12}
.clear-beam{left:0;right:0;top:calc(var(--row)*12.5%);height:12.5%;background:linear-gradient(90deg,transparent,#fff4cbbf 30%,#fff5e5ee 50%,#fff4cbbf 70%,transparent);box-shadow:0 0 22px #f7cf7c;animation:row-beam .4s ease-out forwards}
.clear-reward{left:5%;right:5%;top:36%;text-align:center;font-size:clamp(14px,2.5vw,24px);font-weight:bold;letter-spacing:1px;color:#ffebae;text-shadow:0 2px 5px #160b20,0 0 14px #120b19;padding:12px 5px;border-radius:12px;background:radial-gradient(ellipse,#251327d9,transparent 73%);animation:clear-reward .95s ease-out forwards}
@keyframes piece-land{0%{transform:scale(.78);filter:brightness(1.4)}60%{transform:scale(1.04)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes score-pop{40%{transform:scale(1.15);color:#fff0bf}}
@keyframes row-beam{0%{opacity:0;transform:scaleX(.2)}35%{opacity:.85;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.08)}}
@keyframes clear-reward{0%{opacity:0;transform:translateY(10px) scale(.92)}18%,65%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-22px)}}
@media(max-width:760px){.piece-tray .shape{--unit:24px}.tile:after{inset:3px}.place-cell:after{border-width:1px;border-radius:4px}.clear-reward{font-size:15px}}
@media(prefers-reduced-motion:reduce){.block.landed .tile,.score-pop{animation:none}.board-feedback{animation-duration:1ms}}

/* Footer controls remain easy to recognize and tap at every viewport. */
.footer-actions{display:flex;justify-content:center;gap:12px;margin-top:13px}
.footer-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;min-width:140px;padding:10px 17px;border:1px solid #c69b6b;border-radius:12px;background:linear-gradient(#47313a,#2b202c);color:#ffe6bd;font-size:13px;font-weight:700;line-height:1.2;box-shadow:inset 0 1px 0 #ffe2b820,0 3px 0 #3b211d,0 4px 8px #150d1433;transition:background .15s,box-shadow .15s}
.footer-button svg{width:19px;height:19px;flex-shrink:0;color:#edc888}
.help-icon{display:grid;place-items:center;width:19px;height:19px;border:1.5px solid #edc888;border-radius:50%;font-size:13px;color:#edc888}
.footer-button:hover{background:linear-gradient(#60414a,#382734);border-color:#f2d096}
.footer-button:active{box-shadow:inset 0 2px 5px #130c1666,0 1px 0 #3b211d;background:#2b202c}
@media(max-width:760px){.footer-actions{gap:10px;margin-top:14px}.footer-button{flex:1;min-width:0;min-height:48px;padding:11px 9px;font-size:13px}}