/* The actual interactive objects use light CSS 3D, not a full-time renderer. */
.box-stage{position:relative;width:100%;max-width:360px;margin-inline:auto;padding:2px 2px 8px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;isolation:isolate}
.walnut-box{position:relative;overflow:hidden;padding:8px 8px 0;border:7px solid transparent;border-radius:20px;background-color:#281e18;background-image:linear-gradient(115deg,#ffffff0c,transparent 36%,#00000030),url('assets/frame-v2/walnut.webp');background-size:100% 100%,cover;background-position:center;background-origin:border-box;box-shadow:0 18px 32px #0008,0 2px 3px #0008,inset 0 0 0 1px #b39a6b50,inset 0 2px 2px #fff2,inset 0 -4px 7px #090705a0}
.box-rail{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:9px;margin:0 0 8px;padding:0 4px;color:#ceb88e;font:500 8px Georgia,serif;letter-spacing:.28em;text-shadow:0 1px 1px #090705}
.box-rail i{flex:1;height:1px;width:auto;background:linear-gradient(90deg,#c4a97855,transparent);box-shadow:none}
.flap-rack{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 4px;padding:0 0 13px;perspective:850px}
.flap-rack::before,.flap-rack::after{position:absolute;z-index:2;left:-5px;right:-5px;content:'';height:5px;border-radius:8px;background:linear-gradient(#f6dda0,#967338 43%,#443014 62%,#c5a05e);box-shadow:0 2px 3px #000a;pointer-events:none}
.flap-rack::before{top:calc((100% - 25px)/2 - 4px)}.flap-rack::after{bottom:9px}
.number-flap{position:relative;height:clamp(54px,16cqw,66px);min-width:0;padding:0;border:0;border-radius:8px;background:linear-gradient(90deg,#221810,#3a2418 45%,#160f0c);box-shadow:inset 0 2px 6px #000b,0 1px #d6af6b44;cursor:pointer;touch-action:manipulation;perspective:450px;color:#ead6b0}
.number-flap:disabled{cursor:default;opacity:1}
.flap-slot{position:absolute;inset:0;display:grid;place-items:center;font:500 clamp(17px,5cqw,23px) Georgia,serif;color:#b59b6c;opacity:.3;text-shadow:0 -1px #000}
.flap-leaf{position:absolute;z-index:1;inset:1px 0 7px;transform-origin:50% 100%;transform:rotateX(var(--fold,0deg));transform-style:preserve-3d;border-radius:7px}
.flap-front,.flap-back{position:absolute;display:grid;place-items:center;inset:0;border-radius:7px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-front{border:1px solid #e8d3a8;background:radial-gradient(ellipse at 22% 5%,#fffbee 0,#f3e4c2 54%,#bea477 100%);color:#3c2a1a;box-shadow:inset 0 1px 1px #fff, inset 0 -5px 0 #9a784b,0 4px 3px #0005;font:600 clamp(24px,7.5cqw,32px) Georgia,serif;text-shadow:0 1px 0 #fff4df}
.flap-front::after{content:'';position:absolute;inset:5px;border:1px solid #a68a5438;border-radius:4px;pointer-events:none}
.flap-back{transform:rotateX(180deg);background:linear-gradient(95deg,#3b281b,#7c5431 45%,#4e311e);box-shadow:inset 0 0 0 1px #bd915633}
.flap-hinge{position:absolute;z-index:3;bottom:4px;left:18%;right:18%;height:6px;border-radius:3px;background:linear-gradient(#f3d38d,#775623 45%,#d8b16b);pointer-events:none}
.number-flap.is-selected .flap-front{outline:3px solid #eac369;outline-offset:2px;background:radial-gradient(ellipse at 20% 5%,#fff5cf,#e6c168 75%,#b28739)}
.number-flap.is-closed .flap-leaf{--fold:-94deg}.number-flap.is-closed .flap-slot{opacity:.78}
.number-flap:focus-visible{outline:3px solid #fff0b5;outline-offset:4px}
.number-flap:not(:disabled):active .flap-leaf{filter:brightness(1.05)}
.felt-tray{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:clamp(108px,31cqw,124px);margin:2px -2px 0;border:4px solid #191f1b;border-top-color:#111b18;border-radius:12px 12px 7px 7px;background-color:#073a38;background-image:radial-gradient(ellipse at 50% 0%,#79bda215,transparent 70%),linear-gradient(180deg,#001e2410,#000f1760),url('assets/frame-v2/felt.webp');background-size:100% 100%,100% 100%,cover;background-position:center;box-shadow:inset 0 0 0 1px #b8aa6e38,inset 0 5px 13px #001014a0,0 1px 1px #ccb38535;perspective:850px;overflow:hidden}
.tray-stitch{position:absolute;inset:9px;border:1px solid #c7bb8e20;border-radius:9px;pointer-events:none}
.tray-monogram{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font:italic 21px Georgia,serif;color:#a5bfa425;letter-spacing:.1em;pointer-events:none}
.die-space{position:relative;width:clamp(84px,26cqw,104px);height:clamp(84px,26cqw,104px);z-index:1;flex:0 0 auto}
.die-space .closed-die{display:block;width:100%;height:100%;touch-action:pan-y}
.box-lip{position:relative;height:12px;margin:2px -8px 0;background-color:#201914;background-image:linear-gradient(180deg,#e8c59215,#00000024 45%,#00000060),url('assets/frame-v2/walnut.webp');background-size:100% 100%,cover;background-position:center 74%;border-radius:0 0 12px 12px;box-shadow:inset 0 1px #e0c18d22,inset 0 -3px 4px #08060560}
.box-message{display:grid;place-items:center;min-height:40px;margin:8px 0 6px;padding:6px 8px;box-sizing:border-box;border:1px solid #91723c44;border-radius:14px;background:#080d16b3;color:#e0d5c0;text-align:center;font-size:13px;line-height:1.4}
.box-actions{display:grid;grid-template-columns:1fr 1.7fr;gap:6px}.box-actions button{min-height:44px;padding:7px 9px;font-size:13px;line-height:1.2;touch-action:manipulation}.box-actions [hidden]{display:none!important}
.box-stage.is-paused *{animation-play-state:paused!important}
@container gf-page (max-width:350px){.walnut-box{padding:8px 8px 0;border-width:7px;border-radius:18px}.flap-rack{gap:12px 4px}.felt-tray{gap:6px}.box-message{font-size:12px}.box-actions{gap:6px}.box-actions button{font-size:13px;padding-inline:8px}}
@container gf-page (min-width:600px){.box-stage{max-width:480px;padding:6px}.walnut-box{padding:12px 14px 0;border-width:9px}.flap-rack{gap:16px 6px}.number-flap{height:78px}.flap-rack::before{top:calc((100% - 29px)/2 - 4px)}.felt-tray{height:156px}.die-space{width:132px;height:132px}.box-message{font-size:14px;min-height:44px}.box-actions button{font-size:14px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.number-flap,.closed-die{scroll-behavior:auto}}

/* Restrained brass bead and light-catching cabinet edges, with real material assets. */
.walnut-box::before{content:'';position:absolute;z-index:0;inset:3px;border:1px solid #cbb58b42;border-radius:15px;box-shadow:inset 0 1px #fff1;pointer-events:none}
.box-rail::before{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#c4a97855)}
.box-rail span{flex:0 0 auto;white-space:nowrap}
.box-lip::before{content:'';position:absolute;top:3px;right:14px;left:14px;height:1px;background:linear-gradient(90deg,transparent,#c0a67b45,transparent);pointer-events:none}
@container gf-page (max-width:350px){.walnut-box::before{inset:3px;border-radius:13px}.box-lip{margin-inline:-8px}}
@container gf-page (min-width:600px){.walnut-box::before{inset:4px}.box-lip{margin-inline:-14px}}
/* Short phone windows retain reachable controls above a lower banner. */
@media (max-height:740px){.box-stage{padding-block:0 6px}.number-flap{height:54px}.felt-tray{height:104px}.die-space{width:84px;height:84px}.box-message{min-height:36px;margin-top:6px}}

/* Display-sized materials for the phone/desktop portrait column. */
@container gf-page (max-width:599px){
.walnut-box{background-image:linear-gradient(115deg,#ffffff0c,transparent 36%,#00000030),url('assets/frame-mobile/walnut.webp')}
.box-lip{background-image:linear-gradient(180deg,#e8c59215,#00000024 45%,#00000060),url('assets/frame-mobile/walnut.webp')}
.felt-tray{background-image:radial-gradient(ellipse at 50% 0%,#79bda215,transparent 70%),linear-gradient(180deg,#001e2410,#000f1760),url('assets/frame-mobile/felt.webp')}
}