*{box-sizing:border-box}html{background:#153b31;color-scheme:dark}body{margin:0;font-family:ui-serif,'Songti SC',serif;color:#ffe4a9;min-height:100dvh;background:linear-gradient(#12372f80,#0b2a24d9),url('assets/forest.webp') center/cover fixed}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #fff1bc;outline-offset:4px}button:disabled{cursor:default}.machine-page{width:min(100%,470px);margin:auto;padding:4px 5px max(15px,env(safe-area-inset-bottom))}.machine{position:relative;aspect-ratio:2/3;width:100%;isolation:isolate}.machine-body{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0;z-index:0}.machine-title{position:absolute;left:20%;top:6.3%;width:60%;margin:0;height:9.1%;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:clamp(30px,9.4vw,44px);font-weight:950;color:#49301b;letter-spacing:1px;text-shadow:0 2px #fff0b9}.machine-title span{color:#c24c26}.display-card{position:absolute;left:29%;top:22%;width:42%;aspect-ratio:2/3;z-index:1;border-radius:5px;overflow:hidden;box-shadow:0 0 18px #e9b13c4d}.display-card img{display:block;width:100%;height:100%;object-fit:contain}.slot-glow{position:absolute;left:30%;top:68%;width:40%;height:2.7%;border-radius:50%;background:#f7bd46;filter:blur(7px);opacity:0;pointer-events:none;z-index:2}.machine.opening .slot-glow{animation:slot-pulse .8s ease-out}.open-button{position:absolute;left:32%;top:76.2%;width:36%;height:9%;min-height:44px;border-radius:48%;border:2px solid #713b20;background:linear-gradient(#f8a250 0,#d15b2d 12%,#ab3e26 72%,#742d22 76%,#a34926);box-shadow:0 4px 0 #623a21,inset 0 0 0 3px #efb668,inset 0 -8px 0 #893521;z-index:3;transform:translateY(0);transition:transform .09s,box-shadow .09s;padding:5px}.open-button span{display:flex;justify-content:center;align-items:center;background:linear-gradient(#fff0ba,#dfb879);color:#4c2e19;border:1px solid #8d562c;border-radius:48%;height:83%;width:90%;margin:0 auto;font-size:clamp(17px,4.7vw,23px);font-weight:900;white-space:nowrap;text-shadow:0 1px #ffefb9}.open-button:active:not(:disabled),.open-button.pressed{transform:translateY(3px);box-shadow:0 1px 0 #623a21,inset 0 0 0 3px #efb668,inset 0 -5px 0 #893521}.machine-navigation{display:flex;justify-content:center;gap:7px;margin:6px 5px 0}.machine-navigation button,.reveal-actions button{min-height:46px;background:linear-gradient(#825534,#503523);border:1px solid #d0a565;border-radius:9px;box-shadow:inset 0 0 0 3px #613e25,0 3px 5px #071c1880;padding:8px 10px;color:#f5dfaa;font-size:14px}.machine-navigation button{flex:1}.machine-navigation button:first-child{flex:1.2;background:linear-gradient(#a4492d,#612f24)}#reveal{position:fixed;inset:0;margin:0;padding:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;border:0;background:radial-gradient(ellipse at 50% 28%,#365646,#102f29);color:#f6dfad;overflow:hidden}#reveal::backdrop{background:#09241de8}.reveal-scroll{height:100%;overflow-y:auto;padding:0 15px max(24px,env(safe-area-inset-bottom));overscroll-behavior:contain}.reveal-header{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:5;padding:8px 0;background:#14372ee8;font-size:13px}.reveal-header button{width:44px;height:44px;font-size:25px;background:none;color:#f6dfad;border:1px solid #a58d5c77;border-radius:50%}.revealed-card{width:min(67vw,280px);aspect-ratio:2/3;position:relative;margin:24px auto 0;perspective:1200px;filter:drop-shadow(0 12px 16px #041b1699);flex:0 0 auto}.reveal-turner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.3,1)}.reveal-turner.flipped{transform:rotateY(180deg)}.reveal-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;overflow:hidden}.reveal-face img{width:100%;height:100%;display:block;object-fit:contain}.reveal-back{transform:rotateY(180deg)}.reveal-foil{position:absolute;inset:8% 0 5%;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 23%,#a5f1ff4d 40%,#f2c9ff55 44%,#ffedaf4d 49%,transparent 64%);background-size:300% 100%;mix-blend-mode:screen}#reveal.ready .reveal-foil{opacity:.75;animation:foil 2.2s ease-in-out 2}.reveal-caption{text-align:center;padding:20px 0 0}.reveal-caption h2{font-size:25px;letter-spacing:2px;margin:0 0 8px}.reveal-caption p{font-size:12px;color:#bbbea0;margin:0}.reveal-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;width:min(100%,430px);margin:22px auto 0}.reveal-actions button{min-width:104px}.locked{overflow:hidden}.paused *{animation-play-state:paused!important}@keyframes slot-pulse{0%,100%{opacity:0}40%{opacity:.8}}@keyframes foil{from{background-position:150% 0}to{background-position:-150% 0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
