/* The board, cube positions, and all faces share one 3D coordinate system. */
.board-wrap{perspective:1100px;padding:36px 12px 4px 4px}
.board{position:relative;grid-template-rows:repeat(4,minmax(0,1fr));padding:16px;gap:12px;transform:rotateX(27deg) rotateY(-9deg);transform-origin:50% 58%;transform-style:preserve-3d;border-radius:15px;background:linear-gradient(145deg,#315441,#1a372b);border:1px solid #75957b55;box-shadow:1px 2px 0 #142d23,2px 4px 0 #142d23,3px 6px 0 #142d23,4px 8px 0 #10271e,5px 10px 0 #10271e,16px 31px 35px #03150c66}
.board-cell{min-width:0;min-height:0;aspect-ratio:1;border:1px solid #739f7140;border-radius:8px;background:#173425;box-shadow:inset 0 3px 8px #061c1566;transform:translateZ(.1px)}
.piece{--cube-color:#ecefdb;--cube-ink:#253e2c;position:absolute;top:0;left:0;display:block;margin:0;padding:0;border:0;background:transparent;color:var(--cube-ink);font:650 clamp(25px,3.4vw,42px)/1 var(--display);letter-spacing:-1.5px;transform-style:preserve-3d;transition:none;overflow:visible;touch-action:none;cursor:default;will-change:transform}
.piece::before{content:'';position:absolute;inset:9%;border-radius:5px;transform:translate3d(7px,10px,1px);background:#031b1166;box-shadow:6px 10px 13px #031b1177;pointer-events:none}
.cube{position:absolute;inset:8%;display:block;transform-style:preserve-3d}
.cube-face{position:absolute;display:block;backface-visibility:hidden;background-color:var(--cube-color);border:1px solid #00000014}
.cube-top{inset:0;display:grid;place-items:center;transform:translateZ(var(--cube-depth));background-image:linear-gradient(145deg,#ffffff2b,transparent 70%);border:1px solid #ffffff62;border-radius:5px;box-shadow:inset 0 0 0 1px #ffffff25;text-shadow:0 1px 0 #ffffff33}
.cube-front{top:100%;left:0;width:100%;height:var(--cube-depth);transform-origin:top;transform:translateZ(var(--cube-depth)) rotateX(-90deg);background-image:linear-gradient(#00000025,#0000004d);border-radius:0 0 3px 3px}
.cube-right{top:0;left:100%;height:100%;width:var(--cube-depth);transform-origin:left;transform:translateZ(var(--cube-depth)) rotateY(90deg);background-image:linear-gradient(90deg,#00000042,#00000061);border-radius:0 3px 3px 0}
.cube-back{top:0;left:0;width:100%;height:var(--cube-depth);transform-origin:top;transform:rotateX(90deg);background-image:linear-gradient(#00000020,#00000035)}
.cube-left{top:0;left:0;height:100%;width:var(--cube-depth);transform-origin:left;transform:rotateY(-90deg);background-image:linear-gradient(#00000035,#00000045)}
.piece[data-value="4"]{--cube-color:#dce6b7}.piece[data-value="8"]{--cube-color:#bedb8e}.piece[data-value="16"]{--cube-color:#96c575}.piece[data-value="32"]{--cube-color:#6aab6b;--cube-ink:#0b301f}.piece[data-value="64"]{--cube-color:#448b5e;--cube-ink:#f6f2d8}.piece[data-value="128"]{--cube-color:#d8ce80}.piece[data-value="256"]{--cube-color:#e8bf6b}.piece[data-value="512"]{--cube-color:#e0a455}.piece[data-value="1024"]{--cube-color:#ea9163}.piece.high{--cube-color:#f2da75}.piece[data-value="1024"],.piece.high{font-size:clamp(20px,2.6vw,32px)}
.board.selecting .piece{cursor:pointer}.board.selecting .piece .cube-top{outline:2px solid #ffffff80;outline-offset:-3px}.board.selecting .piece:hover .cube-top{outline-color:white}.piece.selected .cube-top{outline:4px solid #f5a955!important;outline-offset:-3px}.piece:focus-visible{outline:0}.piece:focus-visible .cube-top{outline:3px solid #f5a955;outline-offset:2px}
.new-piece .cube{animation:cube-arrive .26s cubic-bezier(.2,.8,.3,1)}.merged-piece .cube{animation:cube-merge .28s ease-out}
@keyframes cube-arrive{from{transform:translateZ(14px) scale(.88)}to{transform:translateZ(0) scale(1)}}
@keyframes cube-merge{0%,100%{transform:translateZ(0) scale(1)}45%{transform:translateZ(10px) scale(1.07)}}
.end-panel{z-index:20;inset:25px 0 0;transform:translateZ(130px)}
@media(max-width:650px){.board-wrap{perspective:950px;padding:28px 9px 3px 5px}.board{padding:12px;gap:9px;transform:rotateX(25deg) rotateY(-8deg);border-radius:13px}.piece{font-size:clamp(24px,8vw,37px)}.piece[data-value="1024"],.piece.high{font-size:clamp(19px,6vw,29px)}.board-caption{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.piece .cube{animation:none!important}}