@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&family=Special+Elite&display=swap');
:root{--paper:#faf5eb;--ink:#482319;--red:#bb3521;--line:#dd7055;--mono:'Special Elite','Courier New',monospace;--serif:'DM Serif Display',Georgia,serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px 'DM Sans',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:7px}button{border:0;background:none}a{color:inherit}header{max-width:1440px;margin:auto;padding:32px 5%;display:flex;align-items:center;justify-content:space-between}.brand{font:34px var(--serif);text-decoration:none;letter-spacing:-1.8px}.brand span{color:var(--red);margin-left:3px;font-size:20px}.text-button{font:15px var(--mono);padding:8px 2px;text-underline-offset:6px}.text-button:hover{text-decoration:underline}#saved-count{font:11px 'DM Sans',sans-serif;border:1px solid #bea894;border-radius:50%;padding:3px 6px;margin-left:5px}main{max-width:1320px;margin:auto;padding:24px 6% 0}#chooser{min-height:720px;position:relative}.intro{position:relative;z-index:3;width:55%}.eyebrow{font:11px 'DM Sans',sans-serif;letter-spacing:2.1px}h1{font:clamp(45px,5.5vw,78px)/1.06 var(--serif);font-weight:400;letter-spacing:-2px;margin:22px 0 20px}.intro p{font:17px var(--mono)}.mode-switch{display:inline-flex;gap:18px;margin-top:7px}.mode-switch button{font:12px 'DM Sans',sans-serif;padding:8px 0;opacity:.6}.mode-switch [aria-pressed=true]{opacity:1;border-bottom:1px solid var(--red)}.composition{position:relative;min-height:420px;margin-top:-125px}.popcorn-wrap{position:absolute;width:340px;right:13%;top:0;transform:rotate(-7deg);isolation:isolate}.popcorn{display:block;width:100%;height:auto;position:relative;z-index:2;pointer-events:none}.draw-tab{position:absolute;z-index:1;left:80%;top:28%;white-space:nowrap;padding:20px 24px 20px 48px;background:#f7e6c9;border:1px solid var(--red);outline:5px solid #f7e6c9;transform:rotate(-9deg);font:17px var(--mono);box-shadow:0 2px 2px #4823190b;transition:translate .25s}.draw-tab:after{content:'';position:absolute;inset:5px;border:1px solid #b45a4155;pointer-events:none}.draw-tab:hover{translate:8px -3px}.draw-tab span{margin-left:12px}#bucket-stickers{position:absolute;z-index:3;inset:0;pointer-events:none}.bucket-sticker{position:absolute;top:63%;left:33%;font-size:38px;background:#fff5df;padding:4px;border-radius:50%;box-shadow:0 1px 3px #48231925;transform:rotate(15deg);animation:stick .35s ease-out}.bucket-sticker:nth-child(2){left:59%;top:74%;transform:rotate(-7deg)}.mood-area{position:relative;width:48%;padding-top:133px}#moods{position:relative;min-height:250px}.mood{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;width:90px;padding:6px;transition:transform .2s}.mood:hover{transform:translateY(-5px) rotate(-5deg)!important}.mood .emoji{display:grid;place-items:center;font:38px/1.2 Arial,sans-serif;background:#fff5df;border:1px solid #edddc0;border-radius:48% 52% 51% 49%;width:58px;height:58px;box-shadow:1px 2px 2px #48231912}.mood .mood-name{font-size:10px;line-height:1.2;max-width:90px;color:#67473a}.mood[aria-pressed=true] .emoji{outline:2px solid var(--red);outline-offset:3px}.mood[aria-pressed=true]:after{content:'✓';position:absolute;top:0;right:12px;color:white;background:var(--red);border-radius:50%;width:18px;height:18px;font:12px/18px Arial}.mood:nth-child(1){left:13%;top:6px;transform:rotate(-8deg)}.mood:nth-child(2){left:63%;top:-30px;transform:rotate(8deg)}.mood:nth-child(3){left:0;top:116px;transform:rotate(-5deg)}.mood:nth-child(4){left:48%;top:90px;transform:rotate(4deg)}.mood:nth-child(5){left:24%;top:218px;transform:rotate(-8deg)}.mood:nth-child(6){left:77%;top:199px;transform:rotate(8deg)}.mood:nth-child(n+7){position:relative;display:inline-flex;left:auto;top:auto;margin-top:0;width:25%;vertical-align:top}.expanded #moods{min-height:465px;padding-top:330px}.more{display:block;position:relative;margin:92px auto 0;font-size:12px}.expanded .more{margin:12px auto}.selection-copy{font:13px/1.6 var(--mono);margin:20px 0 0 12%;max-width:330px;min-height:42px}.person-label{font:13px var(--mono);margin:-20px 0 28px 15%}.message{font-size:14px;line-height:1.6;max-width:620px;background:#f1e7d7;padding:0 18px;border-radius:3px;margin:24px auto}.message:not(:empty){padding:15px 18px}.message button{color:var(--red);text-decoration:underline;font-weight:600;margin:8px 12px 0 0;padding:3px}.drawing .popcorn-wrap{animation:shake .7s ease-in-out}.drawing .draw-tab{translate:35px -5px;transition:translate .7s}.back{margin-bottom:110px}.result-scene{position:relative;max-width:920px;margin:auto}.result-popcorn{position:absolute;width:210px;top:-130px;left:-65px;transform:rotate(-13deg);z-index:0}.ticket{display:grid;grid-template-columns:minmax(0,1fr) 23%;position:relative;background:#f8e6c6;border:1px solid #dfbd85;border-radius:25px;box-shadow:0 3px 4px #48231912;min-height:420px;isolation:isolate}.ticket:before{content:'';position:absolute;inset:13px;border:2px solid var(--red);border-radius:18px;pointer-events:none;z-index:-1}.ticket:after{content:'';position:absolute;inset:19px;border:1px solid #c83c2b;border-radius:12px;pointer-events:none;z-index:-1}.ticket-main{padding:54px 42px 40px 55px}.ticket .eyebrow{font:14px var(--mono);letter-spacing:1.2px}.ticket h2{font:clamp(28px,3.5vw,48px)/1.06 var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:-.6px;margin:30px 0 20px;overflow-wrap:break-word}.metadata{font:15px/1.6 var(--mono);margin:0}.film-line{font:17px/1.6 var(--mono);margin:28px 0 0;min-height:32px}.typing:after{content:'│';color:var(--red);animation:blink 1s steps(2) infinite}details{font-size:12px;margin-top:20px;line-height:1.6;max-width:530px}details summary{cursor:pointer;color:#775340}details p{margin-bottom:0}.stub{position:relative;border-left:2px dashed var(--line);margin:1px 0;padding:45px 12px 38px;display:flex;align-items:center;justify-content:space-between;flex-direction:column;font:12px var(--mono);letter-spacing:.6px;text-align:center}.stub:before,.stub:after{content:'';position:absolute;width:31px;height:16px;background:var(--paper);left:-17px;border:1px solid #dfbd85}.stub:before{top:-2px;border-top:0;border-radius:0 0 30px 30px}.stub:after{bottom:-2px;border-bottom:0;border-radius:30px 30px 0 0}#ticket-stickers{display:flex;flex-direction:column;gap:12px;padding:18px 0;font:45px Arial}#ticket-stickers span{background:#fff2d6;border:1px solid #e5c78a;box-shadow:1px 2px 1px #48231912;border-radius:50%;padding:5px;transform:rotate(-8deg)}#ticket-stickers span:nth-child(2){margin-left:28px;transform:rotate(10deg)}.result-actions{margin:37px auto 20px;text-align:center}#watch-toggle{color:var(--red);font:22px var(--mono);padding:8px 3px;border-bottom:1px solid var(--red)}#watch-toggle span{margin-left:12px}.result-actions>div{display:flex;justify-content:center;gap:60px;margin-top:25px}.result-actions .text-button{text-decoration:underline}.paper-panel{max-width:820px;margin:26px auto 0;background:#f7e9d1;border:1px solid #dfbd85;border-radius:5px 5px 22px 22px;padding:28px 36px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}.panel-heading h3{font:28px var(--serif);margin:0}.region{font:13px var(--mono);border-top:1px solid var(--line);padding-top:20px}.watch-row{display:flex;justify-content:space-between;align-items:center;gap:30px;text-decoration:none;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.watch-row>span:first-child{font:21px var(--serif)}.watch-row small{display:block;font:12px 'DM Sans',sans-serif;margin-top:6px}.watch-row>span:last-child{font-size:30px}.watch-row:hover{color:var(--red)}.fine-print{font:12px/1.7 'DM Sans',sans-serif;color:#775b49}.paper-panel .fine-print{margin:15px 0 0}#result{padding-bottom:70px;animation:appear .6s ease both}dialog{background:var(--paper);color:var(--ink);border:1px solid #d4b89f;border-radius:8px;width:min(650px,90vw);max-height:80vh;padding:30px}dialog::backdrop{background:#321b1455;backdrop-filter:blur(3px)}dialog h2{font:30px var(--serif);margin:0}.saved-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 0;border-top:1px solid #d9c8b2}.saved-item h3{font:22px var(--serif);margin:0 0 5px}.saved-item p{font:12px var(--mono);margin:0}.saved-controls{display:flex;gap:12px}.saved-controls button{font-size:12px;text-decoration:underline}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:12px 22px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;z-index:20;border-radius:3px;max-width:90vw;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}footer{max-width:1320px;margin:20px auto 0;padding:25px 6%;font-size:10px;color:#81685b;display:flex;justify-content:space-between;border-top:1px solid #e8ddce}button:active{translate:0 1px}[hidden]{display:none!important}
@keyframes stick{from{scale:1.5;opacity:0}to{scale:1;opacity:1}}@keyframes shake{0%,100%{transform:rotate(-7deg)}30%{transform:rotate(-11deg)}65%{transform:rotate(-3deg)}}@keyframes appear{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{50%{opacity:0}}
@media(min-width:1500px){#chooser{padding-top:40px;min-height:790px}.composition{margin-top:-95px}.popcorn-wrap{width:380px}}
@media(max-width:900px){header{padding:22px 6%}main{padding-top:16px}.intro{width:70%}h1{font-size:58px}.eyebrow{font-size:9px}.popcorn-wrap{right:8%;width:280px;top:50px}.draw-tab{font-size:14px;padding:18px 14px 18px 33px}.mood-area{width:46%;padding-top:175px}.mood{width:70px}.mood .emoji{width:48px;height:48px;font-size:31px}.mood .mood-name{font-size:9px}#chooser{min-height:810px}.ticket-main{padding:42px 28px}.ticket{min-height:380px}.ticket h2{font-size:34px}.stub{padding:35px 8px;font-size:10px}.film-line{font-size:15px}#ticket-stickers{font-size:32px}.metadata{font-size:13px}.result-popcorn{left:-15px;width:165px;top:-105px}}
@media(max-width:600px){header{padding:20px 22px}.brand{font-size:29px}.text-button{font-size:12px}main{padding:10px 22px 0}.intro{width:100%}.intro .eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:48px;margin:17px 0 14px}.intro p{font-size:13px}.mode-switch{margin-top:0;gap:20px}.composition{margin-top:0;min-height:550px}.popcorn-wrap{width:195px;right:10%;top:28px}.draw-tab{font-size:11px;left:74%;top:29%;padding:15px 11px 15px 25px;transform:rotate(-12deg)}.draw-tab span{margin-left:3px}.bucket-sticker{font-size:23px;padding:3px}.mood-area{width:100%;padding-top:335px}#moods{display:flex;flex-wrap:wrap;gap:10px 0;min-height:0;justify-content:center}.mood,.mood:nth-child(n){position:relative;left:auto;top:auto;width:16.66%;padding:5px 1px;transform:rotate(0deg);margin:0}.mood:nth-child(even){translate:0 7px}.mood .emoji{font-size:26px;width:40px;height:40px}.mood .mood-name{font-size:8px;max-width:53px;min-height:20px;line-height:1.25}.mood[aria-pressed=true]:after{width:14px;height:14px;line-height:14px;font-size:10px;right:0}.more{margin:22px auto 0;font-size:11px}.selection-copy{font-size:11px;text-align:center;margin:17px auto 0;max-width:280px}.expanded #moods{min-height:0;padding-top:0}.expanded .more{margin-top:20px}.person-label{margin:-25px 0 15px;text-align:center;font-size:11px}#chooser{min-height:830px}.intro{z-index:0}.message{margin:10px auto 25px;font-size:12px}.back{margin-bottom:110px}.result-scene{margin:0 -8px}.ticket{grid-template-columns:minmax(0,1fr) 21%;min-height:365px;border-radius:16px}.ticket:before{inset:8px;border-radius:12px}.ticket:after{inset:12px;border-radius:8px}.ticket-main{padding:32px 18px 28px 25px}.ticket .eyebrow{font-size:9px;letter-spacing:.6px}.ticket h2{font-size:28px;margin:28px 0 18px;letter-spacing:-.5px}.metadata{font-size:10px;line-height:1.7}.film-line{font-size:12px;line-height:1.7;margin-top:27px}.stub{font-size:8px;padding:30px 4px;letter-spacing:0}.stub:before,.stub:after{width:23px;height:12px;left:-13px}#ticket-stickers{font-size:25px;gap:14px;padding:10px 0}#ticket-stickers span{padding:3px}#ticket-stickers span:nth-child(2){margin-left:8px}.result-popcorn{width:135px;top:-95px;left:0}details{font-size:10px;margin-top:18px}.result-actions{margin-top:28px}#watch-toggle{font-size:18px}.result-actions>div{gap:45px;margin-top:20px}.paper-panel{padding:23px 18px;margin:28px -4px 0}.panel-heading h3{font-size:23px}.region{font-size:11px}.watch-row{gap:15px;padding:17px 0}.watch-row>span:first-child{font-size:18px}.watch-row small{font-size:10px;line-height:1.5}.fine-print{font-size:10px}footer{display:block;padding:20px 22px;margin-top:0;line-height:1.8}footer span{display:block}dialog{padding:22px}dialog h2{font-size:24px}.saved-item h3{font-size:18px}.saved-controls{gap:8px}}
.mood-area{pointer-events:none}.mood-area button{pointer-events:auto}
.flying-sticker{position:fixed;z-index:50;pointer-events:none;display:grid;place-items:center;font:36px Arial;background:#fff5df;border-radius:50%;box-shadow:0 2px 5px #48231918;will-change:transform}
.bucket-sticker{animation:none}
.mood .emoji{transition:transform .22s,box-shadow .22s,outline-color .22s}
.mood:hover .emoji,.mood:focus-visible .emoji{transform:rotate(6deg) scale(1.07);box-shadow:1px 4px 5px #48231920}
.draw-tab{transition:translate .35s,background-color .25s}
.draw-tab:hover{translate:12px -4px;background:#fae3bb}
.drawing .popcorn-wrap{animation:draw-shake .78s ease-in-out both}
.drawing .draw-tab{animation:ticket-pull .78s cubic-bezier(.22,1,.36,1) both}
.drawing .mood-area{opacity:.45;transition:opacity .25s}
#result{animation:none}
.reveal-in .result-scene{animation:ticket-unfold .65s cubic-bezier(.22,1,.36,1) both;transform-origin:50% 15%}
.reveal-in .result-actions{animation:ink-arrive .35s .25s both}
.reveal-in .stub #ticket-stickers{animation:stamp-arrive .3s .25s both}
.paper-panel:not([hidden]){animation:paper-open .35s cubic-bezier(.22,1,.36,1) both;transform-origin:top}
.saved-item{animation:ink-arrive .25s both}
#save.saved-pulse{animation:stamp-arrive .3s both}
@keyframes draw-shake{0%,100%{transform:rotate(-7deg)}20%{transform:rotate(-10deg) translateY(-2px)}45%{transform:rotate(-4deg)}65%{transform:rotate(-8deg)}}
@keyframes ticket-pull{0%,25%{transform:rotate(-9deg) translate(0,0);opacity:1}80%{transform:rotate(-4deg) translate(65px,-8px);opacity:1}100%{transform:rotate(-2deg) translate(95px,-12px);opacity:0}}
@keyframes ticket-unfold{0%{opacity:0;transform:perspective(1100px) rotateX(-10deg) translateY(25px) scale(.94)}100%{opacity:1;transform:perspective(1100px) rotateX(0) translateY(0) scale(1)}}
@keyframes ink-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes stamp-arrive{from{opacity:0;transform:scale(1.13) rotate(-4deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes paper-open{from{opacity:0;transform:scaleY(.94) translateY(-10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}
@media(max-width:600px){.popcorn-wrap{right:22%}}
/* Calm at rest; motion follows an intentional action. */
.has-picks:not(.drawing) .draw-tab{translate:10px -2px}
.has-picks:not(.drawing) .draw-tab:hover{translate:17px -4px}
.drawing .popcorn-wrap{animation-duration:1.25s}
.drawing .draw-tab{animation:ticket-pull-slow 1.25s ease-in-out both}
.reveal-in .result-scene{animation-duration:.7s}
.reveal-in .ticket h2{animation:ink-arrive .42s .25s both}
.reveal-in .metadata{animation:ink-arrive .35s .42s both}
.reveal-in .result-actions{animation:ink-arrive .4s .95s both}
.reveal-in .stub #ticket-stickers{animation-delay:.45s;animation-duration:.35s}
.quick-reveal .result-scene{animation-duration:.5s}
.quick-reveal .ticket h2{animation-delay:.12s;animation-duration:.28s}
.quick-reveal .metadata{animation-delay:.2s;animation-duration:.28s}
.quick-reveal .result-actions{animation-delay:.55s;animation-duration:.3s}
.paper-panel:not([hidden]){animation-duration:.5s}
@keyframes ticket-pull-slow{0%,28%{transform:rotate(-9deg) translate(0,0);opacity:1}70%{transform:rotate(-4deg) translate(60px,-9px);opacity:1}85%,100%{transform:rotate(-3deg) translate(67px,-10px);opacity:1}}
@media(min-width:901px){
 header{padding-top:22px;padding-bottom:22px}
 main{padding-top:10px;max-width:1200px}
 #chooser{min-height:605px;padding-top:0}
 .intro{width:53%}
 h1{font-size:clamp(48px,4.8vw,66px);margin-top:17px;margin-bottom:17px}
 .intro p{font-size:15px}
 .composition{margin-top:-105px;min-height:365px}
 .popcorn-wrap{width:300px;right:16%;top:18px}
 .mood-area{width:48%;padding-top:87px}
 #moods{min-height:239px}
 .mood:nth-child(1){left:17%;top:0}
 .mood:nth-child(2){left:65%;top:-18px}
 .mood:nth-child(3){left:3%;top:93px}
 .mood:nth-child(4){left:48%;top:70px}
 .mood:nth-child(5){left:26%;top:174px}
 .mood:nth-child(6){left:77%;top:155px}
 .mood .emoji{width:52px;height:52px;font-size:34px}
 .more{margin-top:27px}
 .selection-copy{margin-top:15px;font-size:12px}
 .expanded #moods{padding-top:270px;min-height:370px}
 .expanded .mood:nth-child(n+7){left:auto;top:auto;margin-top:0}
 .expanded .more{margin-top:20px}
}
@media(max-width:600px){
 #chooser{min-height:700px}
 h1{font-size:44px;margin-top:14px;margin-bottom:12px}
 .composition{min-height:490px}
 .popcorn-wrap{width:175px;right:23%;top:20px}
 .mood-area{padding-top:292px}
 .intro p{font-size:12px}
 .more{margin-top:18px}
 .selection-copy{margin-top:14px}
 .draw-tab{padding-left:22px;font-size:10px}
 .expanded .mood:nth-child(n){margin-top:0}
}
#film-why{font-size:13px;line-height:1.7;color:var(--ink)}
#about .film-context{border-top:1px solid #d8ba8e;padding-top:12px;margin-top:14px;color:#775340;font-size:11px;line-height:1.7}
.result-actions #feedback{max-width:500px;margin:24px auto 0;text-align:center}
#feedback summary{font:12px var(--mono);text-decoration:underline;text-underline-offset:4px;color:#775340;list-style:none;cursor:pointer;padding:8px}
#feedback summary::-webkit-details-marker{display:none}
.feedback-options{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:10px 0}
.feedback-options button{font:12px 'DM Sans',sans-serif;border:1px solid #d7c2a9;border-radius:18px;padding:9px 13px;background:#f5ead7;transition:border-color .2s}
.feedback-options button:hover{border-color:var(--red);color:var(--red)}
.feedback-help{font:10px/1.6 'DM Sans',sans-serif;color:#806452;margin:10px auto;max-width:360px}
.feedback-message{font:12px/1.7 'DM Sans',sans-serif;max-width:470px;margin:13px auto 0;color:#76513f}
.feedback-message:empty{display:none}
.feedback-message button{color:var(--red);text-decoration:underline;text-underline-offset:3px;font-size:12px;margin:0 5px;padding:3px}
#watched-drawer{font-size:13px;margin-top:22px;border-top:1px solid #d9c8b2;padding-top:18px;max-width:none}
#watched-drawer summary{cursor:pointer;padding:7px 0}
#seen-count{font-size:11px;margin-left:8px}
.seen-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid #e2d2bb;font-size:12px}
.seen-item button{font-size:12px;color:var(--red);text-decoration:underline;padding:6px}
@media(max-width:600px){#film-why{font-size:11px}#about .film-context{font-size:10px}.feedback-message{font-size:11px}.feedback-options{gap:7px}.feedback-options button{font-size:11px;padding:9px 11px}}
.result-actions .reroll-control{position:relative;display:inline-flex;align-items:center;gap:5px}
.result-actions .reroll-control #feedback{position:relative;width:auto;max-width:none;margin:0;text-align:left;line-height:1}
.reroll-control #feedback summary{display:grid;place-items:center;width:30px;height:32px;padding:0;font:19px/1 Georgia,serif;text-decoration:none;list-style:none;border-radius:3px;color:var(--ink)}
.reroll-control #feedback summary:hover,.reroll-control #feedback[open] summary{background:#eee0cd}
.reroll-control #feedback .feedback-options{position:absolute;z-index:6;right:0;top:37px;display:flex;flex-direction:column;align-items:stretch;gap:0;width:205px;margin:0;padding:5px;background:#faf1e2;border:1px solid #d4b99a;border-radius:5px;box-shadow:0 5px 14px #48231912;animation:ink-arrive .18s both}
.reroll-control #feedback .feedback-options button{text-align:left;background:transparent;border:0;border-radius:2px;padding:11px 12px;font:13px/1.3 'DM Sans',sans-serif}
.reroll-control #feedback .feedback-options button:hover{background:#f0dfc8;color:var(--ink)}
.feedback-options button small{display:block;margin-top:4px;font:10px/1.4 'DM Sans',sans-serif;color:#806452}
@media(max-width:600px){.result-actions>.secondary-actions{gap:30px}.reroll-control #feedback .feedback-options{width:190px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}