/* SLOT MACHINE gender reveal (theme reveal-slots, lane ARCADE). From BUILD/carnival-reveal/slots-photo.html. */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#2a211a;color:#fff;font-family:system-ui,sans-serif;overflow:hidden}
/* Blurred, darkened, scaled-up copy of the same photo so wide screens never show flat colour bars. */
body::before{display:none;content:"";position:fixed;inset:-40px;z-index:-1;background:#2a211a center/cover no-repeat;filter:blur(28px) brightness(.5) saturate(1.1);transform:scale(1.15)}
/* object-fit:cover behaviour: always fill the viewport height at the photo's 2:3 ratio, centred; on narrow phones the sides crop symmetrically. */
canvas{position:fixed;left:50%;top:0;height:100vh;height:100dvh;width:66.6667vh;width:66.6667dvh;transform:translateX(-50%);display:block;touch-action:none}
/* V2 (16/10): the machine canvas is drawn off screen and shown inside the 3D room (#world) */
#film{display:none}
#world{left:0;top:0;width:100vw;height:100vh;height:100dvh;transform:none}

footer{position:fixed;left:0;right:0;bottom:0;z-index:2;text-align:center;padding:90px 16px 20px;padding-bottom:max(20px,env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(28,19,13,.72) 0%,rgba(28,19,13,.45) 45%,rgba(28,19,13,0) 100%);pointer-events:none}
footer>*{pointer-events:auto}
button{border:1px solid #fff9;border-radius:30px;background:#fff9f0ed;color:#574e41;padding:13px 26px;cursor:pointer;font:500 14px system-ui;box-shadow:0 3px 18px #0006}
button:disabled{opacity:.6;cursor:wait}
button:focus-visible{outline:3px solid #e2b3c8;outline-offset:3px}
#status{font:18px Georgia;color:#fff;text-shadow:0 1px 8px #000a;margin:0 auto 12px;padding:0}
#loading{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:#2a211a;color:#f1e7da}
[hidden]{display:none!important}
#lever-hint{position:fixed;z-index:2;width:var(--d,80px);height:var(--d,80px);margin:calc(var(--d,80px)/-2) 0 0 calc(var(--d,80px)/-2);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .5s;box-shadow:0 0 0 2px #fff8,0 0 24px 6px #ffe7f3aa;animation:pulse 1.8s ease-in-out infinite}
#lever-hint.show{opacity:1}
#lever-hint span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:8px;font:600 12px system-ui;letter-spacing:.5px;color:#fff;background:#3b2a1fcc;padding:4px 10px;border-radius:12px;white-space:nowrap}
#lever-hint span:after{content:' \2193'}
@keyframes pulse{50%{box-shadow:0 0 0 2px #fff4,0 0 34px 12px #ffe7f366}}
@media(max-width:600px){#status{font-size:16px}}
#gallery{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:#1c130bd9;backdrop-filter:blur(6px);padding:18px}
#gallery .gcard{position:relative;width:min(92vw,440px);background:#fffaf1;color:#4a3a20;border-radius:20px;padding:16px 16px 14px;text-align:center;box-shadow:0 20px 60px #000a}
#gimg{display:block;width:100%;max-height:58vh;object-fit:contain;border-radius:12px;background:#f2e8d8}
#gwhen{margin-top:12px;font:600 11px 'Cinzel',serif;letter-spacing:.16em;color:#9c7a33}#gcap{font:italic 500 21px 'Cormorant Garamond',Georgia,serif;margin-top:4px}
#gwhen:empty,#gcap:empty{display:none}
.gnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}.gnav button{padding:6px 16px;font-size:20px;line-height:1;background:#f2e6cc;color:#6e5220;border:0;box-shadow:none}
#gdots{font:12px system-ui;color:#9c7a33}#gclose{position:absolute;top:8px;right:10px;padding:4px 12px;font-size:22px;background:none;border:0;box-shadow:none;color:#6e5220}
#loading{flex-direction:column;text-align:center;gap:6px;color:#fff0d5}#loading:not([hidden]){display:flex;align-items:center;justify-content:center}
#loading small{font:600 11px 'Cinzel',serif;letter-spacing:.22em;color:#d8bd8c}#loading h1{font:400 50px 'Great Vibes',cursive;margin:6px 0}#loading p{font:italic 18px 'Cormorant Garamond',Georgia,serif;margin:0}

/* ---- app port (lane ARCADE, 12 Oct 2026): personal eyebrow, result card, photo gallery (shared look with the claw) ---- */
header{position:fixed;top:0;left:0;right:0;z-index:2;text-align:center;padding:18px 60px 30px;pointer-events:none;background:linear-gradient(rgba(28,19,13,.55),rgba(28,19,13,0))}
header small{font:600 10px 'Cinzel',serif;letter-spacing:.2em;color:#f6e3c2;text-shadow:0 1px 6px #000a}
.amp{margin:0 .22em}
#result{position:fixed;left:50%;bottom:118px;transform:translateX(-50%);z-index:3;width:min(92%,400px);text-align:center;padding:16px 18px 18px;border-radius:22px;background:#3b261fe6;backdrop-filter:blur(10px);border:1px solid #d7b986;color:#fff0d5;font-family:'Cormorant Garamond',Georgia,serif}
#result h2{font:400 48px/1.1 'Great Vibes',cursive;margin:2px 0 6px}
#result-sub{font:italic 500 19px 'Cormorant Garamond',Georgia,serif;color:#f6e4c4;margin:0}
#result-love{font:600 11px 'Cinzel',serif;letter-spacing:.16em;color:#d8bd8c;margin:6px 0 0}
#result-sub:empty,#result-love:empty{display:none}
.rbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}.rbtns button{padding:10px 20px;font-size:13px}
#loading{flex-direction:column;text-align:center;gap:6px}#loading:not([hidden]){display:flex;align-items:center;justify-content:center}
#loading small{font:600 11px 'Cinzel',serif;letter-spacing:.22em;color:#d8bd8c}#loading h1{font:400 50px 'Great Vibes',cursive;margin:6px 0;color:#fff0d5}#loading p{font:italic 18px 'Cormorant Garamond',Georgia,serif;margin:0}
body.revealed footer #spin{display:none}
@media(max-width:600px){#result{bottom:96px}#result h2{font-size:42px}}