:root { --berry:#7b2d58; --gold:#d4af6a; --paper:#fffaf7; --bg-image:none; --reel-bg:rgba(0,0,0,.48); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-height:100%; }
body { margin:0; overflow-x:hidden; color:var(--paper); background:#1f1720; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(31,23,32,.28),rgba(31,23,32,.48)),var(--bg-image) center/cover no-repeat; }
button,a { font:inherit; }
.keepsake-app { width:min(960px,100%); min-height:100vh; margin:auto; padding:24px 20px 130px; }
.hero { text-align:center; text-shadow:0 3px 18px #000; }
.eyebrow { margin:0 0 8px; color:#f7d788; font-size:.78rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
h1 { margin:0 0 10px; font-size:clamp(2rem,8vw,4rem); }
.couple-name-button { border:0; background:transparent; color:inherit; cursor:pointer; font-weight:800; text-shadow:inherit; }
.couple-name-button span,.couple-name-button small { display:block; }
.couple-name-button small { margin-top:4px; color:#f7d788; font-size:.65rem; font-style:italic; }
.closed-note { opacity:.8; font-size:.82rem; }
.slot-machine { --lever:clamp(58px,14vw,76px); position:relative; width:min(94vw,760px); margin:34px auto 16px; padding-right:var(--lever); }
.slot-wrapper { width:100%; margin:0 auto; border:10px solid #fff; background-color:var(--reel-bg); background-image:var(--reel-image,none); background-position:center; background-size:cover; background-repeat:no-repeat; box-shadow:0 14px 40px rgba(0,0,0,.4); transition:border-color 200ms ease; }
.slot-wrapper2 { width:100%; margin:0 auto; border:2px solid #000; display:flex; justify-content:center; gap:0; }
.slot-wrapper.is-win { animation:win-border 2s ease; }
@keyframes win-border { 0%,100%{border-color:#fff} 25%,65%{border-color:goldenrod} 45%,85%{border-color:#fff} }
.reel-window { position:relative; width:calc(100% / 3); aspect-ratio:1; min-width:0; min-height:76px; flex:1 1 0; padding:0; overflow:hidden; border:1px solid #fff; background:transparent; cursor:pointer; }
.reel-window img { width:100%; height:100%; display:block; object-fit:contain; }
/* Match the live Photo Slots game exactly: blur the complete reel window,
   including its contents, with no keepsake-only zoom. */
.reel-window.is-spinning { filter:blur(3px) brightness(1.05); }
.reel-window.is-protected-result img { outline:4px solid goldenrod; outline-offset:-4px; }
.reel-window.is-settling { box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.keepsake-revision { margin:8px 0 100px; color:#b9acbc; font-size:10px; text-align:center; }
.protected-keepsake-text { max-width:720px; margin:0; padding:clamp(24px,7vw,58px); font-size:clamp(1.5rem,6vw,3rem); font-weight:900; line-height:1.18; text-align:center; }
#protectedWinVideo { width:min(90vw,720px); max-height:80vh; object-fit:contain; }
.slot-lever { position:absolute; top:4px; right:0; width:clamp(56px,13vw,72px); height:clamp(132px,31vw,180px); padding:0; border:0; background:transparent; transform-origin:50% 86%; cursor:pointer; perspective:180px; }
.slot-lever-arm { position:absolute; left:42%; top:18%; width:18%; height:76%; border-radius:8px; background:linear-gradient(90deg,#5b5b5b,#f1f1f1 45%,#777); box-shadow:2px 3px 6px #0008; }
.slot-lever-knob { position:absolute; z-index:1; left:14%; top:0; width:72%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 28%,#ffb4b4,#d31628 48%,#6b0010 78%); box-shadow:inset -4px -5px 8px #0005,0 5px 8px #0006; }
.slot-lever.is-pulling { animation:pull .72s cubic-bezier(.28,.04,.18,1); }
@keyframes pull { 0%,100%{transform:none} 42%{transform:rotateX(-58deg) rotateZ(6deg) translateY(20px) scale(.94)} 65%{transform:rotateX(-48deg) rotateZ(4deg) translateY(16px) scale(.96)} }
.game-status { min-height:24px; text-align:center; font-weight:800; text-shadow:0 2px 8px #000; }
.keepsake-dock { position:fixed; z-index:20; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); display:flex; gap:12px; transform:translateX(-50%); }
.keepsake-dock button,.keepsake-dock a { width:54px; height:54px; display:grid; place-items:center; border:1px solid #fff9; border-radius:50%; background:#241a28dd; color:#fff; text-decoration:none; font-size:1.45rem; box-shadow:0 8px 24px #0007; cursor:pointer; }
.keepsake-dock svg { width:30px; height:30px; fill:currentColor; }
.media-modal,.message-modal,.gallery-modal { position:fixed; inset:0; z-index:100; padding:20px; background:rgba(12,8,14,.94); }
.media-modal { display:grid; place-items:center; opacity:0; transition:opacity 1s ease; background-position:center; background-size:cover; }
.media-modal.is-visible { opacity:1; }
.media-modal.is-closing { opacity:0; }
.media-modal video,.media-modal img { max-width:100%; max-height:88vh; object-fit:contain; border-radius:12px; }
#welcomeVideo { opacity:0; transition:opacity 500ms ease; }
#welcomeVideo.visible { opacity:1; }
.modal-close { position:absolute; z-index:5; top:12px; right:14px; width:46px; height:46px; border:2px solid #fff; border-radius:50%; background:#241a28dd; color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
.modal-close.dark { color:#241725; border-color:#241725; background:#fffaf7; }
.message-modal { display:grid; place-items:center; }
.message-box { position:relative; width:min(520px,100%); max-height:88vh; overflow:auto; padding:40px 28px 28px; border:3px solid var(--gold); border-radius:18px; background:#fffaf7; color:#241725; text-align:center; box-shadow:0 24px 80px #000a; }
.message-box>button:not(.modal-close) { min-height:46px; padding:0 22px; border:0; border-radius:9px; background:var(--berry); color:#fff; font-weight:800; }
.win-kicker { margin:0; color:var(--berry); font-size:1.5rem; font-weight:950; }
.lightbox-content { display:grid; place-items:center; gap:10px; max-width:100%; max-height:90vh; }
.lightbox-content figure { margin:0; display:grid; gap:10px; text-align:center; }
.lightbox-content figcaption { font-weight:800; }
.share-box label,.share-box input,.share-box output { display:block; width:100%; }
.share-box input { margin:8px 0 16px; padding:11px; border:1px solid #8f7f88; border-radius:8px; }
.share-keepsake-qr { display:grid; place-items:center; width:min(288px,100%); min-height:288px; margin:0 auto 16px; padding:16px; border-radius:12px; background:#fff; }
.share-keepsake-qr img,.share-keepsake-qr canvas { display:block; max-width:100%; height:auto; }
.share-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.share-box output { min-height:24px; margin-top:12px; }
.gallery-modal { z-index:80; display:grid; place-items:center; overflow:hidden; cursor:pointer; }
.gallery-backdrop { position:absolute; inset:0; opacity:.32; background:center/cover no-repeat; }
.gallery-stage { position:relative; width:100%; height:82vh; touch-action:pan-y; user-select:none; }
.gallery-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 1s ease; pointer-events:none; -webkit-user-drag:none; }
.gallery-stage img.is-current { opacity:1; }
.gallery-caption { position:absolute; z-index:2; left:50%; bottom:6vh; width:min(90%,700px); margin:0; padding:10px 14px; transform:translateX(-50%); border-radius:999px; background:#150f18cc; text-align:center; font-weight:800; }
.calendar-box { text-align:left; }
.calendar-box h2 { text-align:center; }
.calendar-box ul { list-style:none; padding:0; }
.calendar-box li { padding:12px 0; border-top:1px solid #ddd; }
.calendar-box strong,.calendar-box span,.calendar-box a { display:block; }
.calendar-box span { margin-top:4px; font-size:.86rem; opacity:.75; }
@media(max-width:560px){ .keepsake-app{padding-inline:10px}.slot-frame{border-width:7px}.slot-machine{margin-top:24px}.media-modal,.message-modal,.gallery-modal{padding:12px} }
@media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} }