:root{--cream:#F4E9D3;--paper:#FBF4E4;--maroon:#6B1E1E;--gold:#D9A441;--teal:#3E7C7B;--ink:#1C1712;}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#3a2a20,var(--ink) 70%);color:var(--ink);font-family:'Archivo',sans-serif;min-height:100vh}
.font-marquee{font-family:'Bungee',cursive}
.font-abril{font-family:'Abril Fatface',serif}
.font-script{font-family:'Courier Prime',monospace}
#root{position:relative;z-index:1}
#fx{position:fixed;inset:0;pointer-events:none;z-index:50}
#fx:not(.fx-on){display:none}
.grain{position:absolute;inset:-50%;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,5%)}80%{transform:translate(6%,2%)}100%{transform:translate(0,0)}}
.scratch{position:absolute;top:0;bottom:0;width:1px;left:30%;background:rgba(255,255,240,.25);animation:scratch 7s infinite}
@keyframes scratch{0%,88%{opacity:0;left:30%}90%{opacity:1;left:31%}93%{opacity:.6;left:68%}96%{opacity:0}100%{opacity:0}}
.vignette{position:absolute;inset:0;box-shadow:inset 0 0 180px rgba(0,0,0,.65)}
.sprockets{position:fixed;top:0;bottom:0;width:28px;z-index:2;background:var(--ink);background-image:repeating-linear-gradient(to bottom,transparent 0 14px,#e8dcc0 14px 30px,transparent 30px 44px);background-size:12px 44px;background-repeat:repeat-y;background-position:center}
.sprockets.left{left:0}.sprockets.right{right:0}
@media(max-width:900px){.sprockets{display:none}}
@media(min-width:901px){#root{padding:0 32px}}
.bulbs{background-image:radial-gradient(circle,#ffe7a0 3px,transparent 4px);background-size:22px 22px;animation:chase 1s linear infinite}
@keyframes chase{to{background-position:22px 0}}
.card{background:var(--cream);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink)}
.ticket{position:relative;border:3px solid var(--ink);background:var(--gold);clip-path:polygon(0 0,100% 0,100% 35%,96% 50%,100% 65%,100% 100%,0 100%,0 65%,4% 50%,0 35%)}
.ticket.active{background:var(--maroon);color:var(--cream)}
.btn{min-height:44px;border:3px solid var(--ink);border-radius:10px;font-weight:800;padding:8px 14px;box-shadow:3px 3px 0 var(--ink);transition:transform .1s, box-shadow .1s}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.5}
.chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);border-radius:999px;padding:3px 10px;font-weight:600;font-size:14px;background:var(--paper)}
.inp{width:100%;border:2px solid var(--ink);border-radius:8px;padding:10px 12px;background:#fffaf0;font-size:16px}
.inp:focus{outline:3px solid var(--gold)}
.paper{background:var(--paper);border:1px solid #c9b994;box-shadow:0 12px 30px rgba(0,0,0,.5);font-family:'Courier Prime',monospace;font-size:17px;line-height:1.6}
.polaroid{background:#fff;padding:8px 8px 14px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.5deg)}
.polaroid:nth-child(even){transform:rotate(1.5deg)}
.clapper{position:relative}
.clapper .top{display:block;height:14px;background:repeating-linear-gradient(45deg,var(--ink) 0 14px,#fff 14px 28px);border:3px solid var(--ink);border-bottom:none;border-radius:8px 8px 0 0;transform-origin:left bottom;transform:rotate(-12deg);transition:transform .15s}
.clapper.snap .top{transform:rotate(0)}
.reel{width:64px;height:64px;border-radius:50%;border:6px solid var(--gold);background:radial-gradient(circle,var(--ink) 8px,transparent 9px),conic-gradient(var(--ink) 0 20%,var(--gold) 20% 25%,var(--ink) 25% 45%,var(--gold) 45% 50%,var(--ink) 50% 70%,var(--gold) 70% 75%,var(--ink) 75% 95%,var(--gold) 95%);animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.countdown{animation:flick .15s infinite alternate}
@keyframes flick{from{opacity:1}to{opacity:.85}}
.fadein{animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vhs{background:linear-gradient(var(--ink) 0 18%,#2b2520 18% 82%,var(--ink) 82%);border-radius:8px;padding:30px 14px;color:var(--ink)}
.vhs .label{background:var(--cream);border-radius:4px;padding:10px;font-family:'Courier Prime',monospace;transform:rotate(-1deg)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{body{background:#fff}#fx,.sprockets,.noprint{display:none!important}.paper{box-shadow:none;border:none}}