/* ============================================================
   PAPERCREDITS -- design tokens (locked from BRIEF + ui-ux-pro-max
   "Vibrant & Block-based" pass, overridden to the concept's own
   carnival coral/mustard/maroon, sampled straight off avatar/banner)
   palette : coral #DE5A47 / coral-dark #A83A2C / mustard #E7B93E /
             maroon #5A1E1E / wood #A97148 / cream #FBF0D6 / ink #1B0F07
   type    : Alfa Slab One (stamp display) + Oswald (condensed signage)
             + Courier Prime (ticket-serial mono: CA, counter, canary)
   spacing : 8px scale, radius 14px on cards / 999px on pill controls
   motion  : one idiom -- tear (clip-path zigzag flash + fly-off),
             everything else (shrink, tick, stub) is a variant of it
   ============================================================ */
:root{
  --coral:#DE5A47;
  --coral-dark:#A83A2C;
  --coral-deep:#7C271C;
  --mustard:#E7B93E;
  --mustard-deep:#C98A1F;
  --maroon:#5A1E1E;
  --maroon-deep:#3B1211;
  --wood:#A97148;
  --wood-dark:#7A4E30;
  --cream:#FBF0D6;
  --ink:#1B0F07;

  --font-display:'Alfa Slab One', 'Georgia', serif;
  --font-sign:'Oswald', 'Arial Narrow', sans-serif;
  --font-mono:'Courier Prime', 'Courier New', monospace;

  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px;
  --radius-card:14px;
  --radius-pill:999px;
  --ease:cubic-bezier(.22,.9,.32,1.1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100dvh;
  background:var(--maroon-deep);
  color:var(--cream);
  font-family:var(--font-sign);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}

#boot-error-banner{
  position:fixed;inset:0 0 auto 0;z-index:9999;
  background:#c0392b;color:#fff;font-family:var(--font-mono);
  font-size:13px;padding:10px 14px;display:none;
}
#boot-error-banner:not(:empty){display:block;}

/* ---------- scene shell ---------- */
.scene{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg, rgba(59,18,17,.72) 0%, rgba(90,30,30,.55) 32%, rgba(90,30,30,.75) 78%, rgba(28,10,9,.92) 100%),
    url('assets/banner.png') center 42% / cover no-repeat,
    var(--mustard);
  padding:var(--sp-2) var(--sp-2) 0;
}

.perf-edge{
  position:fixed;left:0;right:0;height:14px;z-index:5;pointer-events:none;
  background-image:radial-gradient(circle, var(--maroon-deep) 5px, transparent 5.5px);
  background-size:26px 26px;
  background-position:center;
  background-color:var(--mustard-deep);
}
.perf-edge--top{top:0;}
.perf-edge--bottom{bottom:0;}

/* ---------- topbar ---------- */
.topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-1);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{border-radius:10px;background:var(--cream);padding:3px;box-shadow:0 2px 0 var(--maroon-deep);}
.brand-text{display:flex;flex-direction:column;line-height:1.12;}
.brand-name{font-family:var(--font-display);font-size:19px;letter-spacing:.02em;color:var(--cream);}
.brand-ticker{font-family:var(--font-mono);font-size:11px;color:var(--mustard);}

.topbar-controls{display:flex;align-items:center;gap:var(--sp-1);}
.icon-link{
  width:42px;height:42px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  background:rgba(251,240,214,.12);
  border:1px solid rgba(251,240,214,.28);
  transition:transform .18s var(--ease), background .18s;
}
.icon-link:hover{background:rgba(251,240,214,.22);transform:translateY(-2px);}
.icon-link img{width:24px;height:24px;}

.buy-btn{
  display:flex;align-items:center;gap:8px;
  padding:9px 18px 9px 10px;
  border-radius:var(--radius-pill);
  background:linear-gradient(180deg, var(--coral) 0%, var(--coral-dark) 100%);
  border:1px solid var(--coral-deep);
  box-shadow:0 3px 0 var(--coral-deep);
  font-family:var(--font-sign);font-weight:700;font-size:14px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--cream);
  transition:transform .15s var(--ease), box-shadow .15s;
}
.buy-btn img{width:22px;height:22px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));}
.buy-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--coral-deep);}
.buy-btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--coral-deep);}

/* ---------- main booth ---------- */
.booth{
  position:relative;z-index:2;
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:var(--sp-3) var(--sp-2) var(--sp-4);
  gap:var(--sp-3);
}
.booth-eyebrow{
  margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mustard);
}
.booth-title{
  margin:0;max-width:18ch;
  font-family:var(--font-display);
  font-size:clamp(26px, 4.6vw, 42px);
  line-height:1.12;
  color:var(--cream);
  text-shadow:0 3px 0 var(--maroon-deep);
}
.booth-sub{
  margin:0;max-width:30ch;
  font-family:var(--font-sign);font-weight:500;font-size:15px;
  color:var(--mustard);
}

/* ---------- counter card ---------- */
.counter{
  width:100%;max-width:820px;
  display:grid;grid-template-columns:1.3fr 1fr;
  gap:var(--sp-3);
  align-items:start;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0 3px, transparent 3px 26px),
    linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
  border:1px solid var(--maroon-deep);
  border-radius:var(--radius-card);
  padding:var(--sp-3);
  box-shadow:0 14px 0 rgba(0,0,0,.28), 0 20px 34px rgba(0,0,0,.35);
}

.roll-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);
  position:relative;
}

.roll{
  position:relative;
  width:clamp(150px, 22vw, 210px);
  height:clamp(150px, 22vw, 210px);
  transform:scale(var(--roll-scale, 1));
  transition:transform .5s var(--ease);
  display:flex;align-items:center;justify-content:center;
}
.roll-img{
  width:100%;height:100%;object-fit:contain;pointer-events:none;
  border-radius:18px;
  background:var(--mustard);
  box-shadow:inset 0 0 0 3px var(--maroon-deep), 0 10px 16px rgba(0,0,0,.4);
}
.roll-hint{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  font-family:var(--font-sign);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--maroon-deep);
  background:var(--mustard);padding:3px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--maroon-deep);
  transition:opacity .2s;
}
.roll.is-empty{cursor:not-allowed;}
.roll.is-empty .roll-hint{opacity:.55;}
.roll:not(.is-empty){cursor:grab;}
.roll:not(.is-empty):active{cursor:grabbing;}

.tear-layer{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6;}

.tear-flash{
  position:absolute;top:18%;left:calc(50% - 9px);width:18px;height:64%;
  background:var(--cream);
  clip-path:polygon(0% 0%,55% 14%,0% 28%,55% 42%,0% 56%,55% 70%,0% 84%,55% 100%,100% 100%,45% 86%,100% 72%,45% 58%,100% 44%,45% 30%,100% 16%,45% 0%);
  opacity:0;
  animation:tear-flash .38s ease-out forwards;
}
@keyframes tear-flash{
  0%{opacity:0;transform:scaleY(.4);}
  35%{opacity:.95;transform:scaleY(1);}
  100%{opacity:0;transform:scaleY(1.05);}
}

.flying-ticket{
  position:absolute;top:42%;left:50%;width:96px;
  margin-left:-48px;margin-top:-30px;
  animation:ticket-fly .85s cubic-bezier(.2,.7,.4,1) forwards;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));
}
@keyframes ticket-fly{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1;}
  100%{transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.8);opacity:0;}
}

.readout{display:flex;flex-direction:column;align-items:center;gap:2px;}
.readout-num{
  font-family:var(--font-display);
  font-size:44px;line-height:1;color:var(--mustard);
  text-shadow:0 2px 0 var(--maroon-deep);
  transition:transform .18s var(--ease);
}
.readout-num.is-tick{transform:scale(1.18);}
.readout-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);opacity:.85;}

.reel{
  display:flex;flex-wrap:wrap;justify-content:center;gap:3px;
  max-width:230px;
}
.reel-tick{width:5px;height:14px;border-radius:2px;background:var(--coral);transition:background .3s, opacity .3s;}
.reel-tick.is-spent{background:rgba(251,240,214,.18);opacity:.6;}

.flavor-line{
  min-height:1.2em;margin:0;
  font-family:var(--font-mono);font-size:12px;color:var(--mustard);
  letter-spacing:.02em;
}

/* ---------- CA ticket ---------- */
.ca-ticket{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:18px 118px 44px 20px;
  min-height:150px;
  background:var(--coral);
  border:2px dashed var(--cream);
  border-radius:10px 10px 10px 26px;
  text-align:left;
  box-shadow:0 6px 0 var(--coral-deep);
  transform:rotate(-1.4deg);
  transition:transform .12s var(--ease), box-shadow .12s;
  overflow:hidden;
}
.ca-ticket::before{
  content:"";position:absolute;left:-1px;top:14%;bottom:14%;width:2px;
  background-image:repeating-linear-gradient(180deg, var(--cream) 0 6px, transparent 6px 12px);
}
.ca-ticket::after{
  content:"";
  position:absolute;right:-22px;bottom:-26px;width:150px;height:100px;
  background:url('assets/ticket-single.png') no-repeat center / contain;
  opacity:.32;
  pointer-events:none;
}
.ca-ticket:hover{transform:rotate(-1.4deg) translateY(-2px);box-shadow:0 8px 0 var(--coral-deep);}
.ca-ticket:active{transform:rotate(-1.4deg) translateY(1px);box-shadow:0 3px 0 var(--coral-deep);}

.ca-eyebrow{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--maroon-deep);opacity:.85;
}
.ca-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.ca-label{
  font-family:var(--font-sign);font-weight:700;font-size:12px;letter-spacing:.1em;
  color:var(--maroon-deep);
  background:var(--cream);padding:2px 8px;border-radius:5px;
}
.ca-value{
  font-family:var(--font-mono);font-weight:700;font-size:13px;
  color:var(--maroon-deep);word-break:break-all;
}
.ca-state{
  font-family:var(--font-mono);font-size:11px;color:var(--maroon-deep);opacity:.8;
}
.ca-ticket.is-copied .ca-state{opacity:1;font-weight:700;}

.ca-stub{
  position:absolute;top:-4px;right:14px;width:16px;height:20px;
  background:var(--cream);
  clip-path:polygon(0 0,100% 0,100% 60%,70% 100%,40% 55%,0 60%);
  opacity:0;pointer-events:none;
}
.ca-ticket.is-copied .ca-stub{animation:stub-fall .7s ease-in forwards;}
@keyframes stub-fall{
  0%{opacity:1;transform:translate(0,0) rotate(0deg);}
  100%{opacity:0;transform:translate(14px,58px) rotate(140deg);}
}

/* ---------- scroll cue ---------- */
.scroll-cue{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:var(--sp-1);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mustard);opacity:.8;
  transition:opacity .18s;
}
.scroll-cue:hover{opacity:1;}
.scroll-cue-arrow{
  width:12px;height:12px;
  border-right:2px solid var(--mustard);
  border-bottom:2px solid var(--mustard);
  transform:rotate(45deg);
  animation:cue-bob 1.6s ease-in-out infinite;
}
@keyframes cue-bob{
  0%,100%{transform:rotate(45deg) translate(0,0);}
  50%{transform:rotate(45deg) translate(3px,3px);}
}

/* ---------- reveal-on-scroll sections ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}

.rules, .ledger, .menu, .faq{
  position:relative;z-index:2;
  padding:var(--sp-4) var(--sp-2);
  display:flex;justify-content:center;
}
.section-frame{width:100%;max-width:640px;}
.section-eyebrow{
  margin:0 0 4px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mustard);
}
.section-title{
  margin:0 0 var(--sp-3);
  font-family:var(--font-display);
  font-size:clamp(22px, 3.4vw, 30px);
  line-height:1.16;
  color:var(--cream);
  text-shadow:0 2px 0 var(--maroon-deep);
}

/* ---------- rules: pinned notice board ---------- */
.rules .section-frame{
  background:var(--wood);
  border:1px solid var(--maroon-deep);
  border-radius:var(--radius-card);
  padding:var(--sp-3) var(--sp-4);
  box-shadow:0 10px 0 rgba(0,0,0,.22), 0 16px 26px rgba(0,0,0,.3);
}
.rules-list{
  margin:0;padding-left:1.4em;
  display:flex;flex-direction:column;gap:12px;
  font-family:var(--font-sign);font-size:15px;line-height:1.4;
  color:var(--cream);
}
.rules-list li::marker{
  font-family:var(--font-mono);font-weight:700;color:var(--mustard);
}

/* ---------- ledger: cream paper strip ---------- */
.ledger .section-frame{
  background:var(--cream);
  border-radius:var(--radius-card);
  padding:var(--sp-3) var(--sp-4);
  box-shadow:0 10px 0 rgba(0,0,0,.22), 0 16px 26px rgba(0,0,0,.3);
}
.ledger .section-eyebrow{color:var(--coral-dark);}
.ledger .section-title{color:var(--maroon-deep);text-shadow:none;}
.ledger-list{display:flex;flex-direction:column;gap:14px;}
.ledger-row{
  display:grid;grid-template-columns:64px 1fr;gap:14px;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(59,18,17,.3);
}
.ledger-row:last-child{border-bottom:0;padding-bottom:0;}
.ledger-year{
  font-family:var(--font-mono);font-weight:700;font-size:14px;
  color:var(--coral-dark);
}
.ledger-text{
  font-family:var(--font-sign);font-size:14px;line-height:1.45;
  color:var(--maroon-deep);
}

/* ---------- also sold: chalk price board ---------- */
.menu .section-frame{
  background:var(--maroon-deep);
  border:1px solid var(--mustard-deep);
  border-radius:var(--radius-card);
  padding:var(--sp-3) var(--sp-4);
  box-shadow:0 10px 0 rgba(0,0,0,.22), 0 16px 26px rgba(0,0,0,.3);
}
.menu-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.menu-list li{
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--font-sign);font-size:14px;
}
.menu-item{color:var(--cream);white-space:nowrap;}
.menu-dots{
  flex:1;
  border-bottom:2px dotted rgba(251,240,214,.35);
  transform:translateY(-4px);
}
.menu-price{
  font-family:var(--font-mono);font-size:12px;color:var(--mustard);
  white-space:nowrap;
}

/* ---------- faq: ticket stub cards ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{
  position:relative;
  background:var(--coral);
  border:2px dashed var(--cream);
  border-radius:10px 10px 10px 22px;
  padding:14px 18px;
  box-shadow:0 4px 0 var(--coral-deep);
}
.faq-q{
  margin:0 0 4px;
  font-family:var(--font-sign);font-weight:600;font-size:14px;
  color:var(--maroon-deep);
}
.faq-a{
  margin:0;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.5;
  color:var(--maroon-deep);opacity:.85;
}

/* ---------- footer strip ---------- */
.strip{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-3);
  padding:var(--sp-2);
  background:rgba(27,15,7,.55);
  border-top:1px solid rgba(251,240,214,.14);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--cream);opacity:.85;
}
.strip-link{text-decoration:underline;text-underline-offset:3px;}
.strip-link:hover{opacity:1;}

/* ---------- responsive ---------- */
@media (max-width: 720px){
  .counter{grid-template-columns:1fr;}
  .ca-ticket{border-radius:10px;}
}
@media (max-width: 400px){
  .booth-title{font-size:24px;}
  .topbar-controls .buy-btn span{display:none;}
  .buy-btn{padding:9px;}
  .rules .section-frame,
  .ledger .section-frame,
  .menu .section-frame{padding:var(--sp-3);}
  .ledger-row{grid-template-columns:52px 1fr;gap:10px;}
  .menu-list li{flex-wrap:wrap;}
  .menu-dots{display:none;}
}
@media (min-width: 921px){
  .scene{padding-left:var(--sp-4);padding-right:var(--sp-4);}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}