@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700;750&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,600,20,1;0,9..144,700,20,1;1,9..144,600,20,1&display=swap');
:root{color-scheme:dark;--ink:#190d25;--cream:#fff2dc;--pink:#ff91ae;--mint:#9effe5;--gold:#ffe3a1;--ease:cubic-bezier(.22,.8,.25,1);font:16px 'DM Sans',sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:300px;background:#140c1e;color:var(--cream);background-image:radial-gradient(ellipse at 50% 20%,#74213c88,transparent 65%)}button,input,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:4px}button{user-select:none}button,input{border-radius:0}.arcade{min-height:100svh;width:100%;display:flex;justify-content:center;overflow:hidden}.machine{position:relative;isolation:isolate;width:100%;max-width:880px;height:100svh;height:100dvh;min-height:620px;display:grid;grid-template-rows:clamp(145px,24svh,230px) minmax(150px,1fr) auto;padding:0 0 max(15px,env(safe-area-inset-bottom));}.cabinet-art{position:absolute;inset:17% 0 0;width:100%;height:83%;object-fit:fill;z-index:-2;user-select:none;pointer-events:none;filter:drop-shadow(0 0 16px #ffbe5940)}.edge-glow{position:absolute;inset:22% 3.4% 3%;border-radius:18px;box-shadow:-7px 0 18px -8px #ffd382,7px 0 18px -8px #ffd382;animation:casino-glow 3.6s ease-in-out infinite alternate;z-index:-1;pointer-events:none}.marquee{position:relative;width:min(100%,610px);height:100%;justify-self:center;z-index:4;margin:0;pointer-events:none}.sign-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 0 8px #ffd07777);animation:sign-glow 4s ease-in-out infinite alternate}.sign-copy{position:absolute;top:33%;left:15%;right:15%;height:46%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ad234b;text-align:center}.sign-kicker{font-size:clamp(.75rem,2.8vw,1rem);font-weight:750;letter-spacing:.28em;text-indent:.28em;line-height:1.15;text-shadow:0 0 6px #ff51635e}.sign-copy h1{margin:1px 0 0;display:flex;flex-direction:column;align-items:center;line-height:.98}.sign-copy h1>span{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(1.9rem,7.7vw,3.15rem);letter-spacing:-.045em;color:#d02a4e;text-shadow:0 0 8px #ff61745e}.sign-copy h1>strong{font-size:clamp(.875rem,3.5vw,1.35rem);font-weight:750;letter-spacing:.15em;text-indent:.15em;color:#225572;line-height:1.4;margin-top:3px}.tagline{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.875rem;line-height:1.4;font-weight:500;color:var(--gold);text-shadow:0 2px 3px #000;margin:0;padding:0 10px}.chamber{position:relative;min-height:0;margin:6px 10% 7px;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;align-self:stretch}.chamber-hint{position:absolute;left:0;right:0;top:5px;font-size:.75rem;letter-spacing:.015em;color:#ffc9d3b3;text-align:center;z-index:1;margin:0;pointer-events:none}.chamber-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 95%,#fd537c20,transparent 75%);pointer-events:none}.capsules{position:absolute;inset:0}.capsule{position:absolute;width:38%;height:auto;transform:translate(-50%,-50%) rotate(var(--tilt));filter:hue-rotate(var(--hue));transition:opacity .15s,filter .2s;pointer-events:none}.capsule.is-target{filter:hue-rotate(var(--hue)) drop-shadow(0 0 5px #ffe6a594)}.capsule.taken{opacity:0}.magic-prize{width:28%;aspect-ratio:1;height:auto;pointer-events:auto;border:0;background:transparent;padding:0;filter:drop-shadow(0 0 8px #9880ff8c);z-index:3;border-radius:50%;cursor:pointer}.magic-prize.is-target{filter:drop-shadow(0 0 11px #acd9ff);transform:translate(-50%,-50%) rotate(-7deg)}.ball-art{display:block;width:100%;height:100%;aspect-ratio:1;background-image:url('assets/magic-ball-sprite.png');background-size:200% 100%;background-position:0% 50%;background-repeat:no-repeat}.claw-rig{--depth:0%;position:absolute;left:50%;top:0;width:29%;height:100%;transform:translateX(-50%);pointer-events:none;z-index:4;transition:left .24s var(--ease)}.cable{position:absolute;left:calc(50% - 1.5px);top:0;width:3px;height:calc(var(--depth) + 10%);background:linear-gradient(90deg,#818491,#fff2d7,#848792);transition:height .65s var(--ease)}.claw-head{position:absolute;top:var(--depth);left:0;width:100%;transition:top .65s var(--ease)}.claw-head>img{position:relative;display:block;width:100%;height:auto;z-index:2}.caught-prize{position:absolute;top:17%;left:-11%;width:122%;aspect-ratio:1;opacity:0;transition:opacity .14s;z-index:1}.caught-prize img{display:block;width:100%;height:auto}.caught-prize.is-magic{width:89%;left:5.5%;top:33%}.claw-rig.has-prize .caught-prize{opacity:1}.control-panel{position:relative;z-index:5;margin:0 10%;padding:13px 0 0;display:grid;gap:8px;min-width:0;color:#fff2dc}.mood-picker{padding:0;margin:0;border:0;min-width:0}.mood-picker legend{width:100%;text-align:center;font-size:.75rem;letter-spacing:.1em;font-weight:750;color:#461729;margin:0 0 8px;text-shadow:0 1px 0 #ffb5c145}.mood-options{display:grid;grid-template-columns:1.15fr 1.1fr 1fr;gap:7px}.mood-option{position:relative;cursor:pointer;min-width:0}.mood-option input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.mood-option>span{display:flex;gap:4px;align-items:center;justify-content:center;flex-direction:column;padding:7px 5px;border:1px solid #59152b;border-top-color:#a45068;background:linear-gradient(#73334b,#44263b);border-radius:12px;box-shadow:0 4px 0 #63293c,inset 0 1px 2px #e9799e61;height:100%;min-height:62px;transition:background .15s,transform .15s}.mood-option b{font-size:22px;line-height:1;font-weight:400;color:#ffd1a2}.mood-option strong{font-weight:650;font-size:.875rem;text-align:center;line-height:1.18;letter-spacing:-.035em}.mood-option input:checked+span{color:#4a1b2d;background:linear-gradient(#fff9e7,#ffdaac);border-color:#fff3cf;box-shadow:0 4px 0 #a4653f,0 0 13px #ffe3a34a}.mood-option input:checked+span b{color:#bf3c65}.mood-option input:focus-visible+span{outline:3px solid var(--mint);outline-offset:3px}.mood-option input:disabled+span{opacity:.7;cursor:wait}.machine-status{text-align:center;font-size:.8125rem;font-weight:650;line-height:1.3;margin:5px 0 1px;min-height:1.3em;color:#3f1425}.control-row{display:grid;grid-template-columns:50px 1fr 50px;gap:9px}.move-button,.grab-button{border-radius:13px;min-height:51px;border:1px solid #6d2240;font-weight:750;box-shadow:0 5px 0 #6e2340;line-height:1.15}.move-button{font-size:26px;background:linear-gradient(#fff7db,#f0c99b);color:#722b48}.grab-button{font-size:.875rem;letter-spacing:.025em;padding:8px 5px;color:#f9ffe5;border-color:#073f49;background:linear-gradient(#197074,#0b414d);box-shadow:0 5px 0 #062d3a,0 0 15px #7dfdde33}.grab-button span{color:#a9ffdc;margin-left:4px}.move-button:active:not(:disabled),.grab-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #442138}.move-button:disabled,.grab-button:disabled{opacity:.7}.play-hint{text-align:center;color:#ffd8ca;font-size:.75rem;margin:4px 0 0;line-height:1.3;text-shadow:0 1px 2px #532536}.machine-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 2px;min-height:34px;font-size:.75rem;color:#ffe3c0}.sound-toggle{border:0;background:transparent;display:flex;align-items:center;gap:5px;font-size:.75rem;padding:8px 0 8px 8px;min-height:34px}.sound-toggle>span:first-child{font-size:20px;line-height:1;color:var(--mint)}.delivered-capsule{position:absolute;left:37%;bottom:0;width:26%;height:auto;animation:prize-in .25s var(--ease);pointer-events:none;z-index:6}.delivered-capsule.is-magic{width:18%;left:41%;bottom:1%;aspect-ratio:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{color:#362234;background:var(--cream);border:1px solid #ffe3c0;border-radius:25px;max-width:min(460px,calc(100vw - 28px));width:460px;max-height:calc(100dvh - 28px);padding:35px 29px 27px;text-align:center;box-shadow:0 25px 100px #000a;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#110b21cf;backdrop-filter:blur(8px)}dialog[open]{animation:prize-in .3s var(--ease)}.dialog-close{position:absolute;right:10px;top:6px;border:0;background:transparent;color:#85626e;min-width:44px;min-height:44px;font-size:30px;border-radius:50%}.dialog-close:hover{background:#f0dfc8}.prize-icon{font-size:45px;line-height:1.2;color:#b7415a;margin-bottom:17px}.prize-kicker{font-size:.75rem;letter-spacing:.12em;font-weight:700;color:#9a455d;margin:3px 0 13px;line-height:1.4}dialog h2{font-family:'Fraunces',Georgia,serif;font-size:2.35rem;letter-spacing:-.045em;line-height:1.1;font-weight:600;margin:0 0 17px}#prize-message{font-size:1.0625rem;line-height:1.7;color:#5a4e53;white-space:pre-line;margin:0 0 22px}.prize-signature{font-size:.8125rem;line-height:1.5;color:#8d6c71;margin:0 0 24px}.again-button{border:0;background:#225d59;color:#f6ffed;min-height:52px;border-radius:12px;padding:12px 19px;font-size:1rem;font-weight:650;width:100%;display:flex;justify-content:center;gap:14px;align-items:center;line-height:1.3}.again-button:hover{background:#2e756a}dialog button:focus-visible,dialog input:focus-visible{outline-color:#a54674}.bacon-prize{background:#fff1cb}.bacon-prize .prize-icon{font-size:60px}.bacon-prize .prize-kicker{color:#a4602c}.magic-dialog{background:radial-gradient(ellipse at 50% 30%,#342858,#171526 75%);border-color:#89719c;color:#ffefd3;padding-top:32px}.magic-dialog .prize-kicker{color:#ffcba7;font-size:.6875rem;letter-spacing:.1em;padding:0 12px}.magic-dialog h2{font-size:2rem;margin-bottom:3px}.magic-dialog .dialog-close{color:#d3badc}.magic-orb{width:170px;aspect-ratio:1;margin:0 auto 4px;filter:drop-shadow(0 0 16px #8aa1ff3b)}.magic-orb.revealed .ball-art{background-position:100% 50%}.magic-orb.shaking{animation:orb-shake .25s ease-in-out 4}.magic-dialog form{display:grid;gap:12px}.magic-dialog label{font-size:.9375rem;text-align:left;color:#e5d1e8;line-height:1.4}.magic-dialog input{width:100%;color:#ffefd3;background:#0a101f;border:1px solid #87628e;border-radius:10px;font:1rem 'DM Sans',sans-serif;line-height:1.4;padding:13px 12px;min-height:48px}.magic-dialog input::placeholder{color:#a69bb4}.magic-dialog .again-button{background:linear-gradient(#fbc785,#e89a85);color:#482137;box-shadow:0 3px 0 #73475d}.magic-dialog .again-button:hover{background:#ffe1a9}.magic-dialog button:disabled{opacity:.7}.text-button{border:0;background:transparent;color:#e6c6e9;min-height:44px;padding:12px 8px;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;margin-top:5px}.oracle-note{font-size:.75rem;color:#b6a1c0;line-height:1.4;margin:0}.magic-asked{font-size:.875rem;color:#c9b6d4;overflow-wrap:anywhere;line-height:1.5;margin:0 0 13px}.fortune{margin:0 0 22px}.fortune strong{font-family:'Fraunces',Georgia,serif;display:block;font-size:2rem;letter-spacing:-.035em;font-weight:600;line-height:1.12;color:#aeedff;margin:0 0 12px}.fortune span{display:block;font-size:1.0625rem;line-height:1.55;color:#f5d6e2}.magic-thinking{font-size:.9375rem;line-height:1.5;color:#d5c7ff;margin:5px 0 12px}#celebration{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}.confetti{position:absolute;top:-60px;left:var(--x);font-size:var(--size);animation:confetti-fall var(--duration) var(--delay) cubic-bezier(.15,.45,.6,1) forwards;line-height:1.5}.machine.bacon-burst .cabinet-art{animation:machine-bounce .3s ease-in-out 3}
@keyframes sign-glow{from{filter:drop-shadow(0 0 7px #ffd07780) brightness(1)}to{filter:drop-shadow(0 0 13px #ff739866) brightness(1.07)}}@keyframes casino-glow{from{opacity:.4}to{opacity:1}}@keyframes prize-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes confetti-fall{to{transform:translate(var(--drift),115vh) rotate(var(--rotation));opacity:.1}}@keyframes machine-bounce{0%,100%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}@keyframes orb-shake{0%,100%{transform:rotate(0)}25%{transform:translateX(-8px) rotate(-8deg)}75%{transform:translateX(8px) rotate(8deg)}}
@media(min-width:700px){.machine{padding-bottom:max(24px,env(safe-area-inset-bottom))}.control-panel{margin:0 13%;gap:8px}.mood-options{gap:12px}.mood-option>span{flex-direction:row;gap:9px;min-height:53px}.mood-option strong{font-size:1rem}.control-row{grid-template-columns:60px 1fr 60px;gap:14px}.machine-status{font-size:.875rem}.move-button,.grab-button{min-height:53px}.grab-button{font-size:1rem}.sign-copy{top:31%;height:48%}.chamber{margin-left:12%;margin-right:12%}.capsule{width:31%}.magic-prize{width:23%}.claw-rig{width:24%}.machine-footer{font-size:.8125rem}.cabinet-art{inset:13% 0 0;height:87%}}
@media(max-height:720px){.machine{min-height:580px;grid-template-rows:145px minmax(150px,1fr) auto;padding-bottom:8px}.marquee{width:min(92%,410px)}.sign-copy{top:31%;height:48%}.sign-kicker{font-size:.75rem}.sign-copy h1>span{font-size:1.9rem}.sign-copy h1>strong{font-size:.875rem}.tagline{font-size:.75rem;bottom:-2px}.control-panel{gap:5px;padding-top:8px}.mood-picker legend{font-size:.6875rem;margin-bottom:5px}.mood-option>span{min-height:55px;padding:5px 3px;gap:2px}.mood-option b{font-size:18px}.mood-option strong{font-size:.875rem}.machine-status{font-size:.75rem;margin:3px 0 0}.move-button,.grab-button{min-height:45px}.play-hint{margin-top:2px;font-size:.75rem}.machine-footer{min-height:28px;font-size:.6875rem}.sound-toggle{min-height:28px;padding-top:5px;padding-bottom:5px}.chamber-hint{font-size:.75rem;top:2px}.cabinet-art{inset:18% 0 0;height:82%}.magic-orb{width:130px}.magic-dialog{padding:29px 23px 18px}.magic-dialog h2{font-size:1.8rem}.magic-dialog form{gap:9px}.fortune strong{font-size:1.7rem}.fortune span{font-size:1rem}}
@media(max-width:360px){.control-panel{margin:0 9%}.mood-options{gap:5px}.mood-option strong{font-size:.875rem}.control-row{grid-template-columns:42px 1fr 42px;gap:6px}.grab-button{font-size:.875rem;letter-spacing:0}.machine-footer>span{font-size:.6875rem}.sound-label{font-size:.6875rem}.sign-copy h1>strong{letter-spacing:.08em}.chamber-hint{font-size:.6875rem}dialog{padding:30px 22px 22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.confetti{display:none}}
/* Match the actual illuminated sign face and cabinet fascia. */
.sign-copy{top:43%;height:34%;left:22%;right:22%}.sign-kicker{font-size:.75rem}.sign-copy h1>span{font-size:clamp(1.5rem,6.5vw,2rem)}.sign-copy h1>strong{font-size:clamp(.75rem,3.25vw,1.05rem);letter-spacing:.12em;margin-top:2px}.control-panel{margin-left:12%;margin-right:12%;padding:12px 10px 6px;background:linear-gradient(125deg,#f54876,#d9265c);border:1px solid #ffd9a077;border-radius:5px;box-shadow:inset 0 1px 0 #ffe8b38c,0 0 12px #30101f44}.delivered-capsule>img{display:block;width:100%;height:auto}.machine-footer>span{white-space:nowrap}
@media(max-height:720px){.control-panel{padding:8px 7px 3px}.sign-copy{top:43%;height:34%}.sign-copy h1>span{font-size:1.5rem}.sign-copy h1>strong{font-size:.75rem}.sign-kicker{font-size:.6875rem}}
@media(max-width:360px){.control-panel{margin-left:11%;margin-right:11%;padding-left:6px;padding-right:6px}.sign-copy h1>strong{font-size:.75rem;letter-spacing:.06em}}

/* Ryan’s birthday card, ready to read again from the machine. */
.card-toggle{border:0;background:transparent;text-align:left;color:#fff2dc;font-size:.875rem;line-height:1.3;min-height:44px;padding:6px 2px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#ffd3ba88;border-radius:5px}
.card-toggle:hover{color:#fff;text-decoration-color:currentColor}.card-toggle:disabled{opacity:.65}
.birthday-card{width:520px;max-width:calc(100vw - 28px);padding:38px 34px 28px;background:linear-gradient(155deg,#fff8e9 45%,#ffe5ed);border:2px solid #e7b26f;border-radius:22px;box-shadow:0 0 0 6px #fff1d51a,0 24px 100px #000b;color:#4b293a}
.birthday-card::backdrop{background:#180c25c9;backdrop-filter:blur(8px)}
.birthday-card-kicker{font-size:.75rem;font-weight:750;letter-spacing:.13em;line-height:1.5;margin:0 10px 17px;color:#9a3f5b}
.birthday-card h2{font-size:clamp(2.4rem,9vw,3.1rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 22px;outline:none}
.birthday-card h2 em{color:#b62857;font-weight:600}.birthday-card h2 span{color:#b62857;font-family:Georgia,serif;font-weight:400;font-size:.85em}
.birthday-card-message{font-size:1rem;line-height:1.65;color:#604253}.birthday-card-message p{margin:0 0 16px}
.birthday-card-message .birthday-card-address{padding:12px 0;border-block:1px solid #d98ba44d;color:#9a2950;font-size:1rem;font-weight:700;overflow-wrap:anywhere;line-height:1.4}
.birthday-card-signature{font-size:.875rem;line-height:1.6;margin:22px 0;color:#7a4f62}
.birthday-card-signature>span{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.85rem;line-height:1.4;color:#a62c56}.birthday-card-signature span span{font-style:normal}
.birthday-card .again-button{background:linear-gradient(#b52b59,#952045);color:#fff5df;box-shadow:0 3px 0 #6f193c}.birthday-card .again-button:hover{background:#922044}
@media(max-width:400px){.birthday-card{padding:36px 22px 24px}.birthday-card-kicker{letter-spacing:.07em}.birthday-card-message{line-height:1.55}}
@media(max-height:700px){.birthday-card{padding-top:30px;padding-bottom:22px}.birthday-card h2{font-size:2.3rem;margin-bottom:15px}.birthday-card-kicker{margin-bottom:12px}.birthday-card-message p{margin-bottom:12px}.birthday-card-signature{margin:16px 0}}