/* MOONTAGE: movie posters on a black wall */
:root{
  --wall:#0c0c0c; --paper:#f4ecd8; --paper2:#e9dfc6; --ink:#101010;
  --acid:#c8ff3a; --pink:#ff2fa0; --gold:#ffc83d; --txt:#f2ecdf; --dim:#a39c8c;
  --disp:'Anton',Impact,sans-serif; --mark:'Permanent Marker',cursive; --body:'Space Grotesk',sans-serif;
  --shadow:7px 7px 0 #000;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--wall);color:var(--txt);font:16px/1.55 var(--body);overflow-x:hidden;min-height:100vh;min-height:100svh;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:14px 14px}

/* marquee */
.marquee{position:relative;z-index:3;background:#1a1a1a;border-bottom:3px solid #000}
.bulbs{height:14px;background:radial-gradient(circle,var(--gold) 3px,transparent 3.6px) 0 0/22px 14px repeat-x;animation:blink 1.1s steps(2) infinite}
.bulbs:nth-child(3){animation-delay:.55s}
@keyframes blink{50%{opacity:.35}}
.tape{background:var(--acid);color:#000;overflow:hidden;white-space:nowrap;font:26px/1.3 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.tape-track{display:inline-block;animation:tape 32s linear infinite}
.tape-track span{margin:0 34px}
/* Was nth-child(16n), which silently mis-highlighted the moment the number of
   tokens changed -- and it now changes on every refresh. */
.tape-track .tape-label{background:#000;color:var(--acid);padding:0 12px}
@keyframes tape{to{transform:translateX(-50%)}}

header{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:18px 5vw 6px}
.logo{font:34px var(--disp);letter-spacing:.04em;cursor:pointer;display:flex;align-items:center;gap:8px}
.logo b{font-weight:400}.logo span{color:var(--acid)}
.logo-m{width:44px;height:44px}
.head-right{display:flex;gap:12px;align-items:center}
.hidden{display:none!important}

/* stickers, markers, tickets */
.sticker{display:inline-block;background:var(--pink);color:#000;font:18px/1 var(--disp);letter-spacing:.08em;padding:8px 14px;border:3px solid #000;box-shadow:4px 4px 0 #000;text-transform:uppercase}
.sticker.small{font-size:13px;padding:6px 10px;box-shadow:3px 3px 0 #000}
.rot-l{transform:rotate(-4deg)}.rot-r{transform:rotate(3deg)}.rot-l2{transform:rotate(-2deg)}.rot-r2{transform:rotate(4deg)}
.marker{font:20px var(--mark);color:var(--gold)}
.ticket-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--acid);color:#000;border:3px solid #000;box-shadow:var(--shadow);font:24px/1 var(--disp);letter-spacing:.08em;padding:16px 30px;cursor:pointer;text-decoration:none;text-transform:uppercase;transition:.12s;
  -webkit-mask:radial-gradient(circle at left center,transparent 9px,#000 9.5px) left center/51% 100% no-repeat,radial-gradient(circle at right center,transparent 9px,#000 9.5px) right center/51% 100% no-repeat;mask:radial-gradient(circle at left center,transparent 9px,#000 9.5px) left center/51% 100% no-repeat,radial-gradient(circle at right center,transparent 9px,#000 9.5px) right center/51% 100% no-repeat}
.ticket-btn small{font:14px var(--mark);letter-spacing:0;text-transform:none;opacity:.8}
.ticket-btn:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 #000}
.ticket-btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #000}
.ticket-btn.small{font-size:15px;padding:10px 20px;box-shadow:4px 4px 0 #000}
.ticket-btn.big{font-size:34px;padding:22px 44px;margin-top:26px}
.ticket-btn.huge{width:100%;font-size:44px;padding:26px;margin-top:10px}
.ticket-btn.alt{background:var(--paper)}
.ticket-btn:disabled{filter:grayscale(1);cursor:wait}
.ticket-btn{-webkit-mask:none;mask:none;box-shadow:7px 7px 0 var(--pink)}
.ticket-btn:hover{box-shadow:9px 9px 0 var(--pink)}
.ticket-btn.small{box-shadow:4px 4px 0 var(--pink)}
.sheet .ticket-btn{box-shadow:var(--shadow)}.sheet .ticket-btn:hover{box-shadow:9px 9px 0 #000}

.view{display:none;position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 5vw 80px}
.view.active{display:block;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(14px)}}

/* ============ billboard ============ */
/* Sized against the first screen so COOK A VIDEO cannot fall below the fold:
   the hero is the pitch, and a pitch with its button cut off is a poster. */
.billboard{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;
  padding:clamp(10px,2.2vh,30px) 0 10px;min-height:calc(100svh - 190px)}
h1{font:clamp(52px,min(8.6vw,12vh),132px)/.92 var(--disp);letter-spacing:.01em;text-transform:uppercase;margin:14px 0 18px;color:var(--paper);text-shadow:6px 6px 0 #000}
h1 em{font-style:normal;color:var(--acid);display:inline-block;transform:rotate(-2deg);text-shadow:6px 6px 0 var(--pink)}
.lede{max-width:520px;color:var(--paper);opacity:.85;font-size:clamp(16px,1.9vh,19px)}
.scribbles{display:flex;gap:22px;flex-wrap:wrap;margin-top:clamp(12px,2vh,22px)}
.scribbles .marker{position:relative;padding-left:18px}
.scribbles .marker::before{content:"↳";position:absolute;left:0;top:-2px;color:var(--pink)}
.bill-art{position:relative;text-align:center}
.chair-mascot{width:100%;max-width:520px;filter:drop-shadow(10px 10px 0 #000);animation:sway 6s ease-in-out infinite;transform-origin:bottom center}
@keyframes sway{50%{transform:rotate(1.5deg) translateY(-6px)}}
.tag{position:absolute;background:var(--paper);color:#000;padding:6px 12px;border:3px solid #000;box-shadow:4px 4px 0 #000;font-size:18px;white-space:nowrap}
.tag-a{top:8%;left:-4%;transform:rotate(-6deg)}
.tag-b{bottom:10%;right:-6%;transform:rotate(4deg);max-width:70%}

.wall-h{font:30px var(--disp);letter-spacing:.08em;text-transform:uppercase;margin:60px 0 26px;color:var(--dim);display:flex;align-items:center;gap:16px}
.wall-h span{background:var(--gold);color:#000;padding:6px 14px;border:3px solid #000;box-shadow:4px 4px 0 #000}
.wall-h.center{justify-content:center;margin-top:20px}

/* posters on the wall */
.posters{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:10px 10px 30px}
.poster{position:relative;background:var(--paper);border:4px solid #000;box-shadow:var(--shadow);cursor:pointer;transition:.18s;padding:8px 8px 0}
.poster:hover{transform:rotate(0) translateY(-10px) scale(1.03);box-shadow:12px 14px 0 #000;z-index:2}
.poster img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border:3px solid #000}
.title-block{padding:12px 4px 14px;color:#000;text-align:center}
.title-block b{display:block;font:26px/1 var(--disp);letter-spacing:.06em}
.title-block i{display:block;font:15px var(--mark);color:#444;margin-top:5px}
.tape-corner{position:absolute;top:-12px;left:50%;width:90px;height:24px;background:rgba(255,255,255,.55);transform:translateX(-50%) rotate(-2deg);border:1px solid rgba(0,0,0,.15)}

.howbar{display:grid;grid-template-columns:repeat(4,1fr);border:3px solid #000;background:var(--paper);color:#000;box-shadow:var(--shadow);margin-top:20px}
.howbar div{padding:16px 18px;font:18px var(--disp);letter-spacing:.06em;text-transform:uppercase;border-right:3px solid #000;display:flex;gap:12px;align-items:center}
.howbar div:last-child{border-right:0}
.howbar b{background:#000;color:var(--acid);padding:2px 8px;font-size:15px}

/* ============ studio: call sheet ============ */
.clapper{margin:26px 0 30px;border:4px solid #000;box-shadow:var(--shadow);transform:rotate(-1deg)}
.clap-stripes{height:26px;background:repeating-linear-gradient(-45deg,#000 0 22px,var(--paper) 22px 44px)}
.clap-body{background:#111;color:var(--paper);display:flex;justify-content:space-between;align-items:center;padding:14px 22px;font:16px var(--body);letter-spacing:.12em;text-transform:uppercase}
.clap-body b{font:30px var(--disp);letter-spacing:.08em;color:var(--acid)}
.sheet{background:var(--paper);color:#000;border:4px solid #000;box-shadow:var(--shadow);padding:30px 30px 26px;margin-bottom:34px;position:relative}
.sheet:nth-child(odd){transform:rotate(.4deg)}
.sheet:nth-child(even){transform:rotate(-.4deg)}
.take{position:absolute;top:-16px;left:22px;background:var(--pink);border:3px solid #000;box-shadow:3px 3px 0 #000;font:16px var(--disp);letter-spacing:.1em;padding:5px 12px;transform:rotate(-3deg)}
.sheet h3{font:34px var(--disp);letter-spacing:.04em;margin-bottom:16px;text-transform:uppercase}
.hint{font:17px var(--mark);color:#666;text-transform:none;letter-spacing:0;margin-left:8px}
input,textarea{width:100%;background:#fff;border:3px solid #000;color:#000;padding:14px 16px;font:16px var(--body);outline:none;box-shadow:inset 3px 3px 0 rgba(0,0,0,.08)}
input:focus,textarea:focus{background:#fffde8;box-shadow:4px 4px 0 #000}
textarea{resize:vertical;font-family:var(--mark);font-size:19px}
.ca-row{display:flex;gap:12px}
.manual{margin-top:16px;color:#555}
.manual summary{cursor:pointer;font:17px var(--mark)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}

.token-card{margin-top:16px;display:flex;gap:16px;align-items:center;background:#fff;border:3px solid #000;box-shadow:5px 5px 0 var(--acid);padding:14px 18px;animation:flipIn .4s ease}
@keyframes flipIn{from{opacity:0;transform:rotateX(50deg) translateY(-8px)}}
.token-card img{width:58px;height:58px;border-radius:50%;border:3px solid #000}
.token-card .t-name{font:26px/1 var(--disp);letter-spacing:.04em}
.token-card .t-name span{color:#0a8f00}
.token-card .t-meta{color:#555;font-size:13.5px;margin-top:4px}
.token-card .t-up{color:#0a8f00;font-weight:700}.token-card .t-down{color:#d11}
.token-card.err{box-shadow:5px 5px 0 var(--pink);color:#a00}

.types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.type{background:#fff;border:3px solid #000;cursor:pointer;transition:.15s;text-align:center;padding:6px 6px 0}
.type img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border:2px solid #000;filter:grayscale(.85) contrast(.9);transition:.15s}
.type b{display:block;font:17px var(--disp);letter-spacing:.06em;padding:8px 0}
.type:hover{transform:translateY(-4px)}
.type.sel{box-shadow:6px 6px 0 var(--acid);transform:rotate(-1.5deg) scale(1.03)}
.type.sel img,.type:hover img{filter:none}
.opts{display:flex;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:#fff;border:3px solid #000;color:#000;padding:8px 14px;font:18px var(--disp);letter-spacing:.05em;cursor:pointer;display:flex;gap:8px;align-items:baseline;transition:.12s}
.chip small{font:13px var(--mark);color:#666}
.chip.sel{background:#000;color:var(--acid);box-shadow:4px 4px 0 var(--pink)}
.chip.sel small{color:var(--gold)}

.drop{margin-top:16px;border:3px dashed #000;padding:26px 22px 22px;text-align:center;position:relative;background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(0,0,0,.03) 12px 24px);transition:.2s}
.drop.over{background:#fff9c4}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .sticker{position:absolute;top:-16px;right:18px}
.drop p{font:19px var(--mark);color:#333}
.drop small{font:14px var(--body);color:#777}
.thumbs{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.thumbs img{width:58px;height:58px;object-fit:cover;border:3px solid #000;transform:rotate(-3deg)}
.thumbs img:nth-child(even){transform:rotate(3deg)}
.fine{color:var(--dim);font-size:13.5px;text-align:center;margin-top:14px}
#send-err{color:var(--pink);font:18px var(--mark)}

/* ============ cooking ============ */
.cooking{text-align:center;padding:40px 0}
.cooking .sticker{margin-bottom:-30px;position:relative;z-index:2}
.cook-img{width:min(360px,70vw);filter:drop-shadow(8px 8px 0 #000);animation:cookbob 3s ease-in-out infinite}
@keyframes cookbob{50%{transform:translateY(-10px) rotate(1.5deg)}}
.cooking h2{font:64px var(--disp);letter-spacing:.06em;margin:10px 0 4px;color:var(--paper);text-shadow:5px 5px 0 var(--pink)}
.status-line{min-height:30px;margin-bottom:18px;font-size:22px}

/* the REC dot on the ROLLING sticker */
.rec{display:inline-block;width:10px;height:10px;margin-left:8px;border-radius:50%;background:#e00;
  vertical-align:middle;box-shadow:0 0 8px #e00;animation:rec 1.2s steps(2) infinite}
@keyframes rec{50%{opacity:.15}}

/* call sheet: which department currently has the job */
.stage-rail{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px;margin:0 auto 18px}
.stage-rail li{font:13px/1 var(--disp);letter-spacing:.08em;color:var(--dim);background:#141414;
  border:2px solid #2a2a2a;padding:7px 11px;transform:rotate(-1deg);transition:all .35s ease}
.stage-rail li:nth-child(even){transform:rotate(1deg)}
.stage-rail li.done{color:var(--ink);background:var(--acid);border-color:#000;box-shadow:3px 3px 0 #000}
.stage-rail li.active{color:var(--ink);background:var(--pink);border-color:#000;box-shadow:3px 3px 0 #000;
  animation:chip 1.4s ease-in-out infinite}
@keyframes chip{50%{transform:rotate(-1deg) translateY(-3px)}}

.filmstrip{max-width:600px;margin:0 auto 12px;background:#000;border:3px solid #333;padding:0 10px;position:relative}
/* the perforations run while the camera does -- the one part of this screen that
   moves even when the server's stage percentage has not changed for six minutes. */
.holes{height:14px;background:radial-gradient(circle,#fff 0 3px,transparent 3.5px) 0 0/24px 14px repeat-x;opacity:.7;
  animation:film 1.1s linear infinite}
@keyframes film{to{background-position:-24px 0}}
.reel{height:40px;position:relative;background:#111;overflow:hidden}
.reel::before{content:"";position:absolute;inset:0;width:var(--p,0%);background:repeating-linear-gradient(90deg,var(--acid) 0 22px,#7ad000 22px 24px);transition:width 1.2s cubic-bezier(.22,.61,.36,1)}
/* a projector gleam travelling over the exposed frames */
.reel::after{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--p,0%);pointer-events:none;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.35) 50%,transparent 100%);
  background-size:120px 100%;background-repeat:no-repeat;animation:gleam 2.4s linear infinite;
  transition:width 1.2s cubic-bezier(.22,.61,.36,1)}
@keyframes gleam{from{background-position:-120px 0}to{background-position:calc(100% + 120px) 0}}
.playhead{position:absolute;top:-6px;bottom:-6px;left:var(--p,0%);width:3px;background:var(--gold);
  box-shadow:0 0 10px var(--gold);transition:left 1.2s cubic-bezier(.22,.61,.36,1)}

.cook-meta{display:flex;justify-content:center;gap:18px;align-items:baseline;color:var(--dim);
  font:13px var(--body);letter-spacing:.04em;margin-bottom:10px}
.cook-meta .pct{font:22px var(--disp);color:var(--acid);letter-spacing:.04em}

/* the dailies ticker: something to read while the render farm earns its money */
.dailies{min-height:26px;font:18px var(--mark);color:var(--gold);opacity:0;transition:opacity .5s ease}
.dailies.in{opacity:.9}

/* ============ premiere ============ */
.premiere{text-align:center;padding:20px 0}
.premiere .marker{margin:10px 0 22px;font-size:22px}
.cinema{background:url('/static/img/cinema_bg.jpg') center/cover;border:4px solid #000;box-shadow:var(--shadow);padding:clamp(18px,4vw,50px);max-width:980px;margin:0 auto}
.screen{background:#000;border:4px solid var(--paper);overflow:hidden;box-shadow:0 0 50px rgba(200,255,58,.25)}
.screen video{width:100%;display:block}
.dl-row{display:flex;gap:16px;justify-content:center;margin:34px 0;flex-wrap:wrap}

footer{position:relative;z-index:2;text-align:center;color:var(--dim);font-size:14px;padding:0 0 40px;margin-top:20px}
footer p{padding:22px 0 0}
/* A torn-off stub, so following reads as taking a ticket rather than clicking a
   social icon. Pink shadow rather than the usual black: the footer sits on the
   dark page and a black shadow would be invisible against it. */
.x-follow{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:11px 22px;
  background:var(--acid);color:#000;border:3px solid #000;box-shadow:6px 6px 0 var(--pink);
  text-decoration:none;transform:rotate(-1.2deg);transition:.14s}
.x-follow:hover{transform:rotate(0) translateY(-3px);box-shadow:9px 9px 0 var(--pink)}
.x-follow svg{width:22px;height:22px;flex:0 0 22px}
.x-follow span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.x-follow b{font:17px var(--disp);letter-spacing:.08em}
.x-follow i{font:14px var(--mark);font-style:normal;color:#2c2c2c}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}

@media(max-width:900px){
  .billboard{grid-template-columns:1fr;min-height:0;gap:18px}
  /* headline, pitch, button -- then the director. He was first, which pushed the
     only call to action off the opening screen entirely. */
  .bill-art{order:1}
  .chair-mascot{max-width:min(300px,72vw);animation:none}
  .tag-a{left:0}.tag-b{right:0}
  .posters,.types{grid-template-columns:repeat(2,1fr)}
  .howbar{grid-template-columns:repeat(2,1fr)}.howbar div{border-bottom:3px solid #000}
  .grid2{grid-template-columns:1fr}
  .tape{font-size:20px}
}

/* who's the star */
.star-grid label{display:flex;flex-direction:column;gap:6px}
.star-grid label>span{font:16px var(--mark);color:#555}
.star-grid label>span i{font-style:normal;color:#999}
.star-grid{margin-top:0}
.ca-block{margin-top:22px;border-top:3px dashed rgba(0,0,0,.25);padding-top:16px}
.ca-note{font-size:17px;color:#444;margin-bottom:10px;display:block}
.tone-row{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.tone-row .marker{color:#444;font-size:19px}

/* showcase strip */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
.show{background:var(--paper);border:4px solid #000;box-shadow:var(--shadow);padding:8px 8px 0;transform:rotate(-.6deg);transition:.18s}
.show:nth-child(2){transform:rotate(.8deg)}.show:nth-child(3){transform:rotate(-.4deg)}
.show:hover{transform:rotate(0) translateY(-6px);box-shadow:12px 12px 0 #000}
.show video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border:3px solid #000;background:#000;cursor:pointer}
.show-cap{padding:10px 4px 12px;color:#000;font:15px var(--mark)}
.show-cap b{font:18px var(--disp);letter-spacing:.06em;margin-right:8px}
@media(max-width:900px){.showcase{grid-template-columns:1fr}}

/* casting call */
.cast-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:stretch}
.drop.big{margin-top:0;padding:34px 22px 28px;min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;border-width:4px;background:#fff repeating-linear-gradient(45deg,transparent 0 14px,rgba(0,0,0,.035) 14px 28px)}
.drop.big:hover,.drop.big.over{background:#fff9c4;border-color:var(--pink)}
.drop-m{width:96px;filter:drop-shadow(4px 4px 0 #000);animation:bob 5s ease-in-out infinite}
.drop.big p{font:22px/1.25 var(--mark);color:#222}
.drop.big p b{font:30px var(--disp);letter-spacing:.05em;display:block;margin-bottom:6px}
.drop.big small{font:13px var(--body);color:#777}
/* The four roles are the whole point of this panel: each chip is coloured to match
   the tag button that appears under a dropped photo (.cast-card .role, below), so
   the list reads as a legend rather than as four more lines of body copy. */
.cast-tips{background:#fff;border:4px solid #000;box-shadow:5px 5px 0 #000;padding:15px 17px 14px;display:flex;flex-direction:column;justify-content:center;gap:11px}
.cast-tips-h{font:17px var(--disp);letter-spacing:.1em;background:#000;color:var(--acid);padding:5px 11px;align-self:flex-start;transform:rotate(-1.5deg)}
.cast-tips ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.cast-tips li{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;font:14.5px/1.32 var(--body);color:#1a1a1a}
.cast-tips li b{font:15px var(--disp);letter-spacing:.07em;text-align:center;border:2px solid #000;box-shadow:2px 2px 0 #000;padding:5px 0}
.cast-tips li.r-mascot b{background:var(--pink);color:#000}
.cast-tips li.r-logo b{background:var(--gold);color:#000}
.cast-tips li.r-style b{background:#000;color:var(--acid)}
.cast-tips li.r-scene b{background:#fff;color:#000}
.cast-tips .tip-note{font:15px var(--mark);color:#555;margin-top:2px}
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-top:18px}
.cast-card{background:#fff;border:3px solid #000;box-shadow:4px 4px 0 #000;padding:6px 6px 8px;position:relative;transform:rotate(-1.5deg)}
.cast-card:nth-child(even){transform:rotate(1.5deg)}
.cast-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border:2px solid #000}
.cast-card .role{width:100%;margin-top:6px;border:2px solid #000;background:#000;color:var(--acid);font:13px var(--disp);letter-spacing:.08em;padding:4px 0;cursor:pointer}
.cast-card .role.mascot{background:var(--pink);color:#000}.cast-card .role.logo{background:var(--gold);color:#000}
.cast-card .role.style{background:#000;color:var(--acid)}.cast-card .role.scene{background:#fff;color:#000}
.cast-card .rm{position:absolute;top:-12px;right:-12px;width:28px;height:28px;border:3px solid #000;background:#fff;font:16px var(--disp);cursor:pointer;line-height:1}
.cast-count{margin-top:14px;color:#444;font-size:18px}
/* Mirrors .take on the opposite corner: a reference image is not optional, and the
   sheet should say so before the payer reaches the send button, not after. */
/* Both badges ride one left-anchored row. Right-anchoring the REQUIRED badge put
   it off-screen on narrow viewports: the poster grid in TAKE 2 overflows and
   stretches the whole column, and `body{overflow-x:hidden}` then clips whatever
   sits nearest the right edge. `.take` never showed it because it is on the left. */
.take-row{position:absolute;top:-16px;left:22px;display:flex;gap:10px;align-items:flex-start}
.take-row .take{position:static}
.req{background:var(--acid);border:3px solid #000;box-shadow:3px 3px 0 #000;font:15px var(--disp);letter-spacing:.1em;padding:5px 12px;transform:rotate(2.5deg)}
.req.done{background:#000;color:var(--acid)}
.drop.big.needed{border-color:var(--pink);background:#ffeaf5 repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,47,160,.09) 14px 28px);animation:nudge .45s ease-in-out}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@media(max-width:820px){.cast-grid{grid-template-columns:1fr}}

/* ============ wallet, modals ============ */
.ticket-btn.ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.ticket-btn.ghost:hover{background:var(--paper);color:#000}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:70;display:flex;align-items:center;justify-content:center;padding:20px;animation:pop .2s ease}
.modal{background:var(--paper);color:#000;border:4px solid #000;box-shadow:12px 12px 0 var(--pink);padding:26px;max-width:460px;width:100%}
.modal.wide{max-width:900px;background:#111;border-color:#000;box-shadow:12px 12px 0 var(--acid)}
.modal h3{font:28px var(--disp);letter-spacing:.05em;margin-bottom:16px}
.wallet-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.wallet-opt{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid #000;padding:12px 14px;cursor:pointer;transition:.12s;text-align:left}
.wallet-opt:hover{box-shadow:5px 5px 0 var(--acid);transform:translate(-2px,-2px)}
.wallet-opt img{width:30px;height:30px}
.wallet-opt .dot{width:30px;height:30px;background:var(--acid);border:2px solid #000;border-radius:50%}
.wallet-opt b{font:16px var(--disp);letter-spacing:.04em;flex:1}
.wallet-opt i{font:14px var(--mark);color:#777}
.modal-actions{display:flex;gap:12px;justify-content:center;margin-top:18px}
.modal-body{font:18px/1.45 var(--mark);color:#444}
/* The dialog focuses its first button so a keyboard lands inside it; the browser's
   blue ring is the one thing on this page nobody drew. */
.modal .ticket-btn:focus-visible{outline:3px solid #000;outline-offset:3px}

/* ============ box office ============ */
/* A pack is drawn as a cinema ticket: ADMIT ONE band, a perforated tear line, and a
   stub carrying the price.

   Deliberately NOT a flex container. `.pack` is a <button>, and a button's UA
   stylesheet fights `display:flex` -- in Chrome the children shrink-wrap and hug the
   left instead of stretching, which collapsed the band and the tear line to the width
   of their own text. Plain block children fill the button on every engine. Every card
   holds the same three rows, so the tear lines line up without any height juggling. */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px}
.pack{position:relative;display:block;width:100%;background:#fff;border:3px solid #000;
  padding:0;cursor:pointer;text-align:center;transition:.14s}
.pack:hover{transform:translateY(-5px)}
.pack.sel{box-shadow:7px 7px 0 var(--acid);transform:rotate(-1.4deg) scale(1.04)}
.pack.sel .tk-admit{background:var(--acid);color:#000}

.tk-admit{display:block;background:#000;color:var(--paper);font:11px var(--disp);
  letter-spacing:.26em;padding:7px 0;transition:.14s}
.tk-top{display:block;padding:26px 10px 22px}
.tk-n{display:block;font:56px/1 var(--disp);letter-spacing:.01em}
.tk-unit{display:block;font:12px var(--disp);letter-spacing:.2em;color:#111;opacity:.45;
  margin-top:8px;font-style:normal}

.tk-stub{display:block;position:relative;border-top:3px dashed #000;padding:15px 10px}
.tk-price{display:block;font:27px var(--disp);letter-spacing:.03em;color:var(--pink)}
/* Half-circles bitten out at the tear line: a circle straddles the border and
   clip-path discards the half that would otherwise float outside the card. */
.tk-stub::before,.tk-stub::after{content:"";position:absolute;top:-11px;width:16px;height:16px;
  background:var(--paper);border:3px solid #000;border-radius:50%}
.tk-stub::before{left:-14px;clip-path:inset(0 0 0 50%)}
.tk-stub::after{right:-14px;clip-path:inset(0 50% 0 0)}

.ticket-rate{margin-top:16px;color:#777;font-size:16px}
/* Clear the selected ticket: it tilts and scales up, so it needs room below. */
.custom-amt{display:flex;align-items:center;gap:12px;margin-top:34px;font:18px var(--mark);color:#555}
.custom-amt input{max-width:220px}
@media(max-width:560px){
  .custom-amt{flex-direction:column;align-items:stretch;gap:8px}
  .custom-amt input{max-width:none}
}
.chains{display:flex;gap:10px;flex-wrap:wrap}
.chain-opt small{font:13px var(--mark);color:#666}
.chain-opt.sel small{color:var(--gold)}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.quote-grid div{background:#fff;border:3px solid #000;padding:12px 14px}
.quote-grid span{display:block;font:14px var(--mark);color:#666}
.quote-grid b{font:24px var(--disp);letter-spacing:.03em;word-break:break-all}
.expiry.dead{color:#c00}
.quote-actions{display:flex;gap:12px;flex-wrap:wrap}
.pay-status{margin-top:14px;color:#333;font-size:19px;min-height:26px}
.sheet.quote{box-shadow:10px 10px 0 var(--acid)}

/* ============ my premieres ============ */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.gcard{background:var(--paper);border:4px solid #000;box-shadow:var(--shadow);padding:8px 8px 0;transform:rotate(-.5deg);transition:.18s}
.gcard:nth-child(even){transform:rotate(.7deg)}
.gcard:hover{transform:rotate(0) translateY(-6px);box-shadow:12px 12px 0 #000}
.gthumb{position:relative;cursor:pointer;border:3px solid #000;background:#000;aspect-ratio:16/9;overflow:hidden}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gph{width:100%;height:100%;background:repeating-linear-gradient(45deg,#111 0 12px,#191919 12px 24px)}
.gplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--acid);text-shadow:0 0 18px rgba(0,0,0,.8);opacity:.85}
.gbody{padding:10px 4px 12px;color:#000}
.gbody b{display:block;font:18px var(--disp);letter-spacing:.04em}
.gbody i{font:14px var(--mark);color:#555}
.empty{text-align:center;padding:50px 0}
.empty img{width:min(280px,60vw);filter:drop-shadow(8px 8px 0 #000)}
.empty h3{font:44px var(--disp);letter-spacing:.05em;margin:14px 0 6px;color:var(--paper)}
.empty p{margin-bottom:22px}

/* ============ pay-with pickers ============ */
.pay-pickers{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:end}
.picker{display:flex;flex-direction:column;gap:6px}
.picker>span{font:17px var(--mark);color:#555}
/* Chips, not a <select>: an <option> cannot carry a logo, and the network is the
   choice here most worth showing rather than describing. */
.coin-chips{display:flex;flex-wrap:wrap;gap:10px}
.coin-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:3px solid #000;
  padding:10px 14px;cursor:pointer;font:17px var(--disp);letter-spacing:.04em;color:#000;transition:.12s}
.coin-chip:hover{transform:translateY(-2px)}
.coin-chip.sel{background:var(--acid);box-shadow:4px 4px 0 #000}
.coin-chip b{font-weight:400}
.coin-chip i{font:12px var(--mark);color:#777;font-style:normal}
.coin-chip.sel i{color:#333}
.coin-mark{display:block;width:22px;height:22px;flex:0 0 22px}
/* Base and Robinhood are squares, the coin marks draw their own circles, and
   Solana is bare bars -- so round the box a little rather than clipping it round. */
.coin-mark svg,.coin-mark img{display:block;width:100%;height:100%;border-radius:5px}

/* ---- solana pay ---- */
.solpay{display:flex;gap:22px;align-items:flex-start;margin-top:20px;padding-top:20px;
  border-top:3px dashed rgba(0,0,0,.25);flex-wrap:wrap}
.solpay-qr{flex:0 0 auto;background:#fff;border:3px solid #000;padding:10px;line-height:0;
  box-shadow:6px 6px 0 #000}
.solpay-qr svg{display:block;width:min(216px,60vw);height:auto}
.solpay-side{flex:1 1 260px;min-width:0}
.solpay-side h4{font:22px var(--disp);letter-spacing:.06em;margin:0 0 6px}
.solpay-side p{margin:0 0 14px;color:#555;font-size:17px}
@media(max-width:560px){.solpay{gap:16px}.solpay-qr{margin:0 auto}}
.net-note{margin-top:12px;color:#555;font-size:17px;min-height:24px}
@media(max-width:640px){.pay-pickers{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.view.active{animation:none}*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ============ toasts ============ */
.toast-tray{position:fixed;left:0;right:0;bottom:24px;z-index:80;display:flex;flex-direction:column;
  align-items:center;gap:10px;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;cursor:pointer;background:var(--acid);color:#000;border:3px solid #000;
  box-shadow:5px 5px 0 #000;font:20px/1.25 var(--mark);padding:12px 22px;max-width:min(520px,92vw);
  text-align:center;animation:toast-in .22s cubic-bezier(.2,.9,.3,1.4)}
.toast.bad{background:var(--pink)}
.toast.out{animation:toast-out .24s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}

/* ============ toasts ============ */
.toast-tray{position:fixed;left:0;right:0;bottom:24px;z-index:80;display:flex;flex-direction:column;
  align-items:center;gap:10px;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;cursor:pointer;background:var(--acid);color:#000;border:3px solid #000;
  box-shadow:5px 5px 0 #000;font:20px/1.25 var(--mark);padding:12px 22px;max-width:min(520px,92vw);
  text-align:center;animation:toast-in .22s cubic-bezier(.2,.9,.3,1.4)}
.toast.bad{background:var(--pink)}
.toast.out{animation:toast-out .24s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}


/* ============ take 1: CA first, manual second ============ */
.lead-in{font:17px/1.5 var(--body);color:#555;max-width:640px;margin:-6px 0 16px}
.ca-row.big input{font:20px ui-monospace,SFMono-Regular,Menlo,monospace;padding:18px 18px}
.ca-row.big .ticket-btn{font-size:22px;padding:16px 34px}
.or-line{display:flex;align-items:center;gap:14px;margin:30px 0 8px;color:#777}
.or-line::before,.or-line::after{content:"";flex:1;border-top:3px dashed rgba(0,0,0,.22)}
.or-line span{font:16px var(--disp);letter-spacing:.1em;text-transform:uppercase;color:#666}
.manual-note{color:#666;font-size:17px;margin-bottom:14px;text-align:center}
.star-grid label>span{font:15px var(--mark);color:#777}
.star-grid input{font-size:15px;padding:12px 14px}
/* the CA field types like an address but invites like a scribble */
.ca-row.big input::placeholder{font:23px var(--mark);color:#9a9384;opacity:1}

/* ============ now-cooking pill (a render that survived a refresh) ============ */
/* Floats bottom-left so a still-rendering film follows the user around the site
   instead of being stranded on the cooking screen. Tap to jump back to the reel. */
.job-pill{position:fixed;right:20px;bottom:24px;z-index:85;display:flex;align-items:center;gap:12px;
  background:#111;color:var(--txt);border:3px solid #000;box-shadow:var(--shadow);
  padding:12px 20px 12px 15px;cursor:pointer;overflow:hidden;text-align:left;
  transition:transform .12s,box-shadow .12s;animation:pill-in .3s cubic-bezier(.2,.9,.3,1.4)}
.job-pill:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 #000}
.job-pill:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}
.job-pill .jp-txt{display:flex;flex-direction:column;line-height:1.15}
.job-pill b{font:16px var(--disp);letter-spacing:.06em}
.job-pill i{font:14px var(--mark);color:var(--gold);font-style:normal}
.job-pill .jp-ic{flex:0 0 auto;width:18px;height:18px;display:grid;place-items:center;font-size:15px;color:var(--acid)}
.job-pill .jp-ic.spin{border:3px solid var(--acid);border-top-color:transparent;border-radius:50%;
  animation:jp-spin .8s linear infinite}
/* progress rides the bottom edge, same acid as the reel */
.job-pill::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--jp,3%);
  background:var(--acid);transition:width .4s ease}
.job-pill.ready{border-color:var(--acid)}
.job-pill.ready .jp-ic{color:var(--acid)}
.job-pill.ready i{color:var(--acid)}
.job-pill.failed{border-color:var(--pink)}
.job-pill.failed .jp-ic,.job-pill.failed i{color:var(--pink)}
.job-pill.failed::after{background:var(--pink)}
@keyframes jp-spin{to{transform:rotate(360deg)}}
@keyframes pill-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
@media(max-width:560px){.job-pill{left:12px;right:12px;bottom:16px;justify-content:center}}
@media(prefers-reduced-motion:reduce){.job-pill,.job-pill .jp-ic.spin{animation:none}}