/* Ticket Wall — perforated cloakroom stubs pinned to an indigo board,
   with a deliberately low-fi scuffle for the draw */

/* ---- Palette -------------------------------------------------------------
   Retuned from indigo-and-paper to the site's black-and-brass. The token
   NAMES changed with the values: a variable called --cobalt holding a gold
   is worse than no variable at all, and this file is edited by hand.

   The two status colours are the deliberate exception. Everything else on
   the wall is brass, so if "paid" and "failed" were brass too they would
   be indistinguishable from ordinary furniture — the one place on the
   page where colour has to carry meaning rather than mood. They are
   darkened to sit on black rather than on indigo. */
:root{
  --void:#050505;          /* the board */
  --void-2:#0c0c0d;        /* raised surfaces: stubs, panels, fields */
  --void-3:#17171a;        /* the surface above that: hover, active */
  --brass:#C9A24B;         /* the primary accent — was --cobalt */
  --bone:#F2EDE1;          /* type on the board — was --paper */
  --bone-2:#A39C8C;        /* secondary type */
  --on-bone:#12100B;       /* type drawn ON a bone-coloured fill */
  --brass-bright:#E8C874;  /* highlights, focus rings — was --marigold */
  --rose:#C4485F;          /* failed / sold out */
  --mint:#4FB894;          /* paid / confirmed */
  --line:rgba(242,237,225,.16);

  --display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --body:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","Space Mono",ui-monospace,Menlo,monospace;

  --gap:clamp(16px,3vw,28px);

  /* ---- Band inset -------------------------------------------------------
     The full-bleed bands (masthead, meter, footer) used to sit at --gap from
     the window edge while the wall below them is a centred column, so on a
     wide monitor a band started hundreds of pixels to the left of the content
     it introduced. Centring the bands on the column instead would waste the
     margins the band exists to fill.

     So: split the difference. --content-inset is where the wall's first pixel
     actually lands, derived the same way .layout derives it (the inline style
     in index.php owns that rule; this mirrors its arithmetic, so if one
     changes the other has to follow). --band-pad is the midpoint between that
     and the window edge, never tighter than --gap.

     1400px      → inset 28,  pad 28   (identical to full bleed; nothing moves)
     1800px      → inset 228, pad 128
     2600px      → inset 628, pad 328 */
  --sb-fade:clamp(0px,calc((100vw - 1400px) / 4),150px);
  --content-inset:calc(
      (100vw - min(100vw, calc(1400px + 2 * var(--sb-fade)))) / 2
      + var(--gap) + var(--sb-fade));
  --band-pad:max(var(--gap), calc((var(--gap) + var(--content-inset)) / 2));

  /* Was 6px. The rest of the site is deliberately square-cornered, and
     rounded corners were the loudest remaining tell that this page came
     from somewhere else. Set it back to 6px if you disagree — it is one
     value and every corner follows it. */
  --radius:0px;
}

*{box-sizing:border-box}

/* hidden must win over the display values set on overlays below */
[hidden]{display:none !important}

/* set while an overlay is open, so the board behind it stays put */
body.is-locked{overflow:hidden}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  /* Two brass glows on black instead of the cobalt-and-rose wash. Kept
     much fainter than the originals: the same opacity that reads as a
     tint over indigo reads as a smear over black, because there is no
     mid-tone underneath it to absorb the light. */
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(201,162,75,.13), transparent 62%),
    radial-gradient(900px 500px at 5% 105%, rgba(201,162,75,.06), transparent 60%),
    var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--bone);color:var(--void);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--brass-bright);outline-offset:3px}

/* ---------- masthead ---------- */

.masthead{
  padding:clamp(28px,5vw,56px) var(--band-pad) clamp(18px,3vw,28px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap);
  border-bottom:1px solid var(--line);
}
/* Was max-width:52ch, which capped the whole block to roughly 420px and was
   what forced a long game title onto three lines while the rest of the band
   sat empty. The wordmark now gets the full inner width and the copy below it
   splits into two columns; min-width:0 so a long unbroken title shrinks the
   flex item rather than overflowing it. */
.masthead__inner{flex:1 1 auto;min-width:0}
.masthead__admin{flex:0 0 auto}

/* Stacked by default — at phone and laptop widths there is no room to put two
   text columns side by side and still have a readable measure. */
.masthead__copy{display:grid;gap:14px;margin-top:clamp(10px,1.4vw,16px)}

@media (min-width:1100px){
  .masthead__copy{
    grid-template-columns:minmax(24ch,auto) minmax(42ch,1fr);
    align-items:start;
    column-gap:clamp(32px,4.5vw,112px);
  }
}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass-bright);margin:0 0 .6rem;display:flex;align-items:center;gap:.7rem;
}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block}
.wordmark{
  font-family:var(--display);font-weight:800;font-size:clamp(2.8rem,10vw,6.2rem);
  line-height:.86;letter-spacing:-.01em;text-transform:uppercase;margin:0 0 .5rem;color:var(--bone);
  text-wrap:balance;
}
.standfirst{
  margin:0;
  font-family:var(--body);
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  font-weight:700;
  line-height:1.28;
  letter-spacing:.005em;
  color:var(--bone);
  max-width:34ch;
}
/* On a very wide monitor the way to use the space is bigger type, not longer
   lines: the measure stays near 78 characters either way, but at 2600px those
   78 characters occupy about 780px instead of 500px, so the copy row sits in
   better proportion to a wordmark that is now 1700px across. */
.masthead__note{
  margin:0;
  color:rgba(242,237,225,.62);
  font-size:clamp(.95rem,.85vw,1.15rem);
  max-width:78ch;
}

/* ---------- meter ---------- */

.meter{padding:clamp(18px,3vw,26px) var(--band-pad);border-bottom:1px solid var(--line)}
.meter__figures{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,44px);margin:0 0 14px}
.meter__figures p{margin:0;display:flex;align-items:baseline;gap:.5rem}
.meter__figures strong{font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:1;color:var(--brass-bright)}
.meter__figures span{font-size:.86rem;color:rgba(242,237,225,.6)}
.meter__track{height:14px;border-radius:2px;background:var(--void-2);border:1px solid var(--line);overflow:hidden}
.meter__fill{
  height:100%;width:0%;
  background:repeating-linear-gradient(135deg,var(--brass-bright) 0 9px,#8C6E2E 9px 18px);
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.meter__status{margin:10px 0 0;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,237,225,.55)}

/* ---------- layout ---------- */

.layout{
  padding:var(--gap);display:grid;gap:clamp(22px,4vw,40px);
  grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:"claim roster" "wall roster" "stickers stickers" "ledger ledger";
  align-items:start;max-width:1400px;margin:0 auto;
}
.claim{grid-area:claim}
.wall-wrap{grid-area:wall}
.roster{grid-area:roster}
.stickers{grid-area:stickers}
.ledger{grid-area:ledger;overflow-x:auto}

@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"claim" "wall" "roster" "stickers" "ledger"}
  .masthead{flex-direction:column}
}

.section-head{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.5rem;letter-spacing:.04em;margin:0 0 .8rem;color:var(--bone)}
.section-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- builder ---------- */

.builder{
  display:flex;gap:clamp(16px,3vw,30px);flex-wrap:wrap;align-items:flex-start;
  background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:18px;
}
.builder__stage{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto}
#preview{
  width:108px;height:144px;image-rendering:pixelated;
  background:var(--bone);border-radius:var(--radius);
  box-shadow:0 6px 0 -2px rgba(0,0,0,.35);
}
.builder__controls{flex:1 1 260px;display:flex;flex-direction:column;gap:14px;min-width:0}

.opt{border:none;margin:0;padding:0}
.opt legend{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,225,.6);padding:0 0 8px}
.opt__row{display:flex;gap:9px;flex-wrap:wrap}
.opt__row--items{gap:8px}
.opt__tagline{
  margin:8px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--brass-bright);font-style:italic;
}

.swatch{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(242,237,225,.25);background:transparent;padding:3px;
}
.swatch i{display:block;width:100%;height:100%;border-radius:50%}
.swatch[aria-checked="true"]{border-color:var(--brass-bright);box-shadow:0 0 0 3px rgba(232,200,116,.22)}

.item-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  background:transparent;border:2px solid rgba(242,237,225,.25);border-radius:var(--radius);
  padding:7px 9px;color:rgba(242,237,225,.75);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
}
.item-btn canvas{width:26px;height:26px;image-rendering:pixelated}
.item-btn--shoe canvas{width:34px;height:22px}
.item-btn[aria-checked="true"]{border-color:var(--brass-bright);color:var(--brass-bright);box-shadow:0 0 0 3px rgba(232,200,116,.22)}

/* ---------- three steps ---------- */

.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.step{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-top:1px solid var(--line);
  opacity:.4;transition:opacity .25s ease;
}
.step:first-child{border-top:none}
.step.is-active,.step.is-done{opacity:1}
.step__n{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line);
  font-family:var(--display);font-weight:800;font-size:1.05rem;
  color:rgba(242,237,225,.6);
}
.step.is-active .step__n{border-color:var(--brass-bright);color:var(--brass-bright)}
.step.is-done .step__n{border-color:var(--mint);color:var(--mint)}
.step__body{flex:1 1 auto;min-width:0}
.step__body h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.2rem;letter-spacing:.03em;margin:2px 0 10px;
}
.step__note{font-size:.86rem;color:rgba(242,237,225,.6);margin:0 0 10px}
.step__note strong{color:var(--bone)}
.step__picked{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--mint);margin:0}
.step__sum{
  font-family:var(--display);font-weight:700;font-size:1.7rem;
  color:var(--brass-bright);margin:0 0 12px;
}

/* ---------- step 4: the prize ----------
   The other three steps dim until it is their turn, because they are things
   the buyer does in order. This one is not a turn — it is what the whole wall
   is for — so it stays lit at every point in the flow, and its marker is
   brass rather than the pending grey to say so without a second colour.

   The textarea needs its own rule: .field input styles the other controls
   and an input selector does not reach a <textarea>. */

.step--prize{opacity:1}
.step--prize .step__n{border-color:var(--brass);color:var(--brass-bright)}

.prizeboard{
  display:flex;gap:clamp(14px,3vw,22px);align-items:flex-start;flex-wrap:wrap;
  background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;
}

/* Fixed-width well, so a portrait photo and a landscape one occupy the same
   column and the text beside them starts in the same place either way. */
.prizeboard__shot{
  flex:0 0 auto;width:clamp(120px,26vw,180px);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--void);border:1px solid rgba(242,237,225,.1);
}
.prizeboard__img{max-width:100%;max-height:100%;display:block}
.prizeboard__text{flex:1 1 220px;min-width:0}
.prizeboard__name{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.02;letter-spacing:.02em;
  color:var(--brass-bright);margin:0 0 8px;word-break:break-word;
}
.prizeboard__blurb{margin:0 0 10px;color:rgba(242,237,225,.78);font-size:.95rem;white-space:pre-line}
.prizeboard__note{margin:0}

.field textarea{
  background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--bone);font-family:var(--body);font-size:1rem;padding:11px 13px;resize:vertical;
}
.field textarea::placeholder{color:rgba(242,237,225,.32)}
.field textarea:focus{border-color:var(--brass-bright)}

/* One photo, not five: a single wide cell reads as a slot rather than as the
   first of a grid that is missing its others. */
.stickup--single .stickup__grid{grid-template-columns:minmax(0,160px)}

/* ---------- hold countdowns ---------- */
/* Green while there is time, amber under two minutes, red under thirty seconds.
   Colour is backed by the changing digits, never carrying the meaning alone. */

.stub__timer{font-family:var(--mono);font-weight:700;color:var(--on-bone)}
.stub__timer.is-warn{color:#6B5726}
.stub__timer.is-urgent{color:var(--rose)}

.step__hold{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;
  color:rgba(242,237,225,.7);margin:8px 0 0;
}

.basket__timer{
  font-family:var(--mono);font-weight:700;font-size:.82rem;letter-spacing:.08em;
  color:var(--mint);
}
.basket__timer.is-warn{color:var(--brass-bright)}
.basket__timer.is-urgent{
  color:var(--rose);
  animation:pulse 1s steps(2, end) infinite;
}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .basket__timer.is-urgent{animation:none}
}

/* ---------- basket bar ---------- */

.basket{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px var(--gap);
  background:var(--void-2);border-top:2px solid var(--brass-bright);
  box-shadow:0 -8px 24px rgba(0,0,0,.4);
}
.basket__sum{display:flex;flex-direction:column;gap:2px;min-width:0}
.basket__sum strong{font-family:var(--display);font-weight:700;font-size:1.3rem;text-transform:uppercase}
.basket__sum span{font-family:var(--mono);font-size:.72rem;color:rgba(242,237,225,.6)}
.basket__acts{display:flex;gap:10px;align-items:center}
body.has-basket{padding-bottom:84px}

/* ---------- claim form ---------- */

.claim__row{display:flex;gap:14px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;flex:1 1 200px;margin-bottom:12px}
.field span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,225,.6)}
.field input{background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius);color:var(--bone);font-family:var(--body);font-size:1rem;padding:11px 13px}
.field input::placeholder{color:rgba(242,237,225,.32)}
.field input:focus{border-color:var(--brass-bright)}
.claim__hint{margin:0;font-size:.9rem;color:rgba(242,237,225,.6)}
.claim__hint.is-warn{color:var(--brass-bright)}
.check{display:flex;align-items:center;gap:10px;font-size:.9rem;margin:6px 0 4px}
.check input{width:18px;height:18px;accent-color:var(--brass-bright)}

/* ---------- item pool picker ---------- */

.pool{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin:4px 0 16px}
.pool__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.pool__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,225,.6)}
.pool__count{font-family:var(--mono);font-size:.7rem;color:var(--brass-bright)}
.pool__group{margin-bottom:12px}
.pool__grouptop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}
.pool__groupname{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.04em}
.pool__all{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:none;color:rgba(242,237,225,.55);cursor:pointer;padding:2px 4px;
}
.pool__all:hover{color:var(--brass-bright)}
.pool__row{display:flex;gap:7px;flex-wrap:wrap}
.pool__btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  background:transparent;border:2px solid rgba(242,237,225,.2);border-radius:var(--radius);
  padding:6px 8px;color:rgba(242,237,225,.45);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
}
.pool__btn canvas{width:22px;height:22px;image-rendering:pixelated;opacity:.35}
.pool__btn[aria-checked="true"]{border-color:var(--mint);color:var(--bone)}
.pool__btn[aria-checked="true"] canvas{opacity:1}
.pool__btn--restricted[aria-checked="true"]{border-color:var(--rose);color:var(--rose)}
.pool__note{font-size:.76rem;color:rgba(242,237,225,.45);margin:4px 0 0}

/* ---------- buttons ---------- */

.solid-btn{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.05rem;padding:11px 22px;border:none;border-radius:var(--radius);
  background:var(--brass-bright);color:#1B1408;cursor:pointer;
}
.solid-btn:hover{background:#E8C874}
.ghost-btn{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:transparent;color:var(--bone);cursor:pointer;
}
.ghost-btn:hover{border-color:var(--brass-bright);color:var(--brass-bright)}
.ghost-btn--small{padding:7px 12px;font-size:.68rem}

/* ---------- the wall ---------- */

.wall__rule{font-size:.86rem;color:rgba(242,237,225,.6);margin:8px 0 0;max-width:62ch}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;margin-top:14px}

.stub{
  position:relative;display:block;width:100%;text-align:left;
  padding:12px 52px 12px 26px;min-height:96px;
  border:none;border-radius:var(--radius);
  background:var(--bone);color:var(--on-bone);font-family:var(--body);cursor:pointer;
  box-shadow:0 6px 0 -2px rgba(0,0,0,.35);
  transition:transform .16s ease, box-shadow .16s ease;
}
.stub::before{content:"";position:absolute;left:17px;top:9px;bottom:9px;width:0;border-left:2px dashed rgba(18,16,11,.35)}
.stub::after{content:"";position:absolute;left:11px;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--void);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.stub:hover{transform:translateY(-3px);box-shadow:0 9px 0 -2px rgba(0,0,0,.4)}
.stub:active{transform:translateY(0)}

.stub__fig{position:absolute;right:9px;top:11px;width:36px;height:48px;image-rendering:pixelated}
.stub__num{position:absolute;left:-2px;bottom:8px;font-family:var(--display);font-weight:800;font-size:.9rem;writing-mode:vertical-rl;transform:rotate(180deg);color:rgba(18,16,11,.55);letter-spacing:.08em}
.stub__name{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.28rem;line-height:1.02;word-break:break-word}
.stub__code{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;color:rgba(18,16,11,.6);margin-top:6px}
.stub__meta{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(18,16,11,.5);margin-top:4px}

.stub--open{background:transparent;color:rgba(242,237,225,.55);border:2px dashed rgba(242,237,225,.28);box-shadow:none}
.stub--open::before{border-left-color:rgba(242,237,225,.2)}
.stub--open::after{background:var(--void);box-shadow:inset 0 0 0 2px rgba(242,237,225,.28)}
.stub--open .stub__name{font-size:1.05rem;color:rgba(242,237,225,.55)}
.stub--open .stub__fig{opacity:.22;filter:grayscale(1)}
.stub--open:hover{border-color:var(--brass-bright);color:var(--brass-bright);transform:translateY(-3px);box-shadow:none}
.stub--open:hover .stub__name{color:var(--brass-bright)}
.stub--open:hover .stub__fig{opacity:.6;filter:none}

.stub--held{
  background:transparent;border:2px dashed rgba(232,200,116,.55);
  color:var(--brass-bright);box-shadow:none;cursor:not-allowed;
}
.stub--held .stub__name{color:var(--brass-bright);font-size:1.05rem}
.stub--held .stub__fig{opacity:.3}
.stub--mine{background:var(--mint);cursor:pointer}
.stub--mine .stub__name{color:#14362C}
.stub--mine .stub__meta{color:rgba(20,54,44,.7)}
.stub--dim{opacity:.34;filter:saturate(.4)}
.stub--won{background:var(--rose);color:var(--bone);transform:translateY(-5px) rotate(-1.5deg)}
.stub--won .stub__code,.stub--won .stub__num,.stub--won .stub__meta{color:rgba(242,237,225,.75)}

.wall__empty,.roster__empty,.ledger__empty{color:rgba(242,237,225,.5);font-size:.9rem}

/* ---------- roster ---------- */

.roster__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.roster__item{border-top:1px solid var(--line);padding-top:10px;display:flex;gap:10px;align-items:flex-start}
.roster__fig{width:26px;height:35px;image-rendering:pixelated;flex:0 0 auto;margin-top:2px}
.roster__body{flex:1 1 auto;min-width:0}
.roster__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.roster__name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.15rem;letter-spacing:.02em}
.roster__odds{font-family:var(--mono);font-size:.74rem;color:var(--brass-bright)}
.roster__bar{height:5px;background:var(--void-2);border-radius:99px;margin-top:6px;overflow:hidden}
.roster__bar i{display:block;height:100%;background:var(--brass)}
.roster__stakes{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,237,225,.5);margin-top:4px;display:block}

/* ---------- sticker gallery ----------
   The product, as opposed to the raffle. Cards are bone-on-black like the
   stubs so the two read as one page, but square and quiet: no punch hole,
   no dashed perforation, nothing that suggests they are tickets.

   The grid is auto-fit rather than a fixed count because a run can be three
   designs or five, and a five-column rule leaves two dead columns at three.
   The 190px floor keeps the art big enough to judge on a phone. */

.stickers__rule{
  margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-bright);
}
.stickers__note{font-size:.86rem;color:rgba(242,237,225,.6);margin:0 0 14px;max-width:62ch}
.stickers__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.stickers__empty{color:rgba(242,237,225,.5);font-size:.9rem}

.sticker{
  background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .16s ease, transform .16s ease;
}
.sticker:hover{border-color:var(--brass-bright);transform:translateY(-3px)}

/* A square well behind the art, so a tall sticker and a wide one still line
   up as a row. The checker is faint on purpose: it says "this is cut out"
   without becoming a pattern you notice. */
.sticker__well{
  position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(45deg,rgba(242,237,225,.028) 25%,transparent 25%,transparent 75%,rgba(242,237,225,.028) 75%) 0 0/14px 14px,
    linear-gradient(45deg,rgba(242,237,225,.028) 25%,transparent 25%,transparent 75%,rgba(242,237,225,.028) 75%) 7px 7px/14px 14px,
    var(--void);
  border:1px solid rgba(242,237,225,.08);overflow:hidden;
}
.sticker__img{
  max-width:100%;max-height:100%;display:block;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.sticker__name{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.03em;line-height:1.05;margin:0;word-break:break-word;
}
.sticker__meta{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(242,237,225,.45);margin:0;
}

/* ---------- drawer: sticker uploader ----------
   Same vocabulary as the item pool picker above it — bordered well, mono
   label, count on the right — so the drawer stays one control panel rather
   than a stack of unrelated widgets. */

.stickup{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin:4px 0 0}
.stickup__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.stickup__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,225,.6)}
.stickup__count{font-family:var(--mono);font-size:.7rem;color:var(--brass-bright)}
.stickup__count.is-full{color:var(--mint)}
.stickup__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.stickup__empty{font-size:.76rem;color:rgba(242,237,225,.45);margin:0}

.stickup__cell{position:relative;aspect-ratio:1/1;background:var(--void);border:1px solid rgba(242,237,225,.14);overflow:hidden}
.stickup__cell img{width:100%;height:100%;object-fit:contain;display:block}
.stickup__drop--busy .stickup__dropline{color:var(--brass-bright)}

/* The remove button sits on the thumbnail, so it needs its own contrast
   rather than borrowing the card's. */
.stickup__kill{
  position:absolute;top:2px;right:2px;width:22px;height:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,5,.82);border:1px solid rgba(242,237,225,.28);
  color:var(--bone);font-family:var(--mono);font-size:.8rem;cursor:pointer;padding:0;
}
.stickup__kill:hover{border-color:var(--rose);color:var(--rose)}

.stickup__drop{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  margin-top:10px;padding:16px 12px;cursor:pointer;
  border:2px dashed rgba(242,237,225,.24);border-radius:var(--radius);
}
.stickup__drop:hover,.stickup__drop.is-over{border-color:var(--brass-bright);background:var(--void-3)}
.stickup__drop.is-disabled{opacity:.4;cursor:not-allowed}
.stickup__dropline{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,237,225,.75)}
.stickup__hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:rgba(242,237,225,.42)}
.stickup__status{margin:10px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--brass-bright)}
.stickup__status.is-bad{color:var(--rose)}

.drawer__note--tight{margin-top:0;margin-bottom:12px}

/* ---------- ledger ---------- */

.ledger__table{width:100%;min-width:520px;border-collapse:collapse;font-size:.88rem}
.ledger__table th{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,225,.5);font-weight:400;padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.ledger__table td{padding:11px 12px 11px 0;border-bottom:1px solid rgba(242,237,225,.08);vertical-align:top}
.ledger__table .num{text-align:right}
.ledger__table td.num{text-align:right;font-family:var(--mono)}
.ledger__win{color:var(--mint);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.05rem}
.ledger__proof{font-family:var(--mono);font-size:.68rem;color:rgba(242,237,225,.45);word-break:break-all}
.ledger__losers{display:block;font-size:.74rem;color:rgba(242,237,225,.42);margin-top:2px}

/* ---------- footer ---------- */

.footer{padding:clamp(24px,4vw,44px) var(--band-pad);border-top:1px solid var(--line);color:rgba(242,237,225,.5);font-size:.85rem}
.footer p{margin:0 0 6px;max-width:70ch}

/* Was two inline styles, one of them color:red. Pure red is the only colour on
   the page that is not in the palette, and next to the brass it reads as an
   error rather than as emphasis — --rose is the palette's own warm red and is
   already what the wall uses for the winning stub. */
.footer__label{font-size:1.2em;font-weight:600;color:var(--bone)}
.footer__call{
  font-size:1.2em;font-weight:600;color:var(--rose);
  margin-top:12px;max-width:70ch;
}

.footer__seal{margin-top:10px}
.footer code{font-family:var(--mono);color:var(--brass-bright);font-size:.78rem;word-break:break-all}

/* ---------- draw overlay ---------- */

.draw{position:fixed;inset:0;z-index:60;background:rgba(5,5,5,.95);display:flex;align-items:stretch;justify-content:center;padding:var(--gap);overflow-y:auto}
.draw__confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.draw__stage{position:relative;width:100%;max-width:660px;margin:auto;text-align:center}
.draw__controls{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* the gif frame — chunky border, caption bar, pixel-doubled canvas */
.gif{
  background:#050505;border:3px solid var(--bone);border-radius:4px;
  overflow:hidden;box-shadow:0 14px 0 -6px rgba(0,0,0,.55);
}
.gif__bar{
  display:flex;justify-content:space-between;gap:10px;
  background:var(--bone);color:var(--on-bone);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;
}
#scuffle{display:block;width:100%;height:auto;image-rendering:pixelated;background:#A39C8C}
.gif__picker{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 8px;color:var(--brass-bright);background:#050505;border-top:2px solid var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gif__picker.is-locked{background:var(--brass-bright);color:#1B1408;font-weight:700}

/* prize card */
.prize{
  display:flex;gap:18px;align-items:center;text-align:left;
  background:var(--bone);color:var(--on-bone);
  border-radius:8px;padding:18px 20px;margin-top:18px;
  box-shadow:0 14px 0 -6px rgba(0,0,0,.5);
  animation:prizein .45s cubic-bezier(.2,1.1,.3,1) both;
}
@keyframes prizein{from{transform:translateY(26px) rotate(-2deg);opacity:0}to{transform:none;opacity:1}}
.prize__fig{image-rendering:pixelated;flex:0 0 auto;width:96px;height:128px}
.prize__text{min-width:0}
.prize__eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(18,16,11,.6);margin:0 0 2px}
.prize__name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,7vw,3rem);line-height:.92;margin:0 0 6px;word-break:break-word}
.prize__line{margin:0 0 6px;font-size:.95rem}
.prize__note{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:rgba(18,16,11,.6)}

@media (max-width:520px){
  .prize{flex-direction:column;text-align:center;align-items:center}
}

/* ---------- drawer ---------- */

.drawer{position:fixed;inset:0;z-index:70;background:rgba(5,5,5,.7);display:flex;justify-content:flex-end}
.drawer__panel{width:min(420px,100%);height:100%;overflow-y:auto;background:var(--void-2);border-left:1px solid var(--line);padding:22px var(--gap) 60px}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer__top h2{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;margin:0}
.drawer__block{border-top:1px solid var(--line);padding:18px 0}
.drawer__block h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-bright);margin:0 0 12px;font-weight:400}
.drawer__warn,.drawer__note{font-size:.8rem;color:rgba(242,237,225,.5);margin:10px 0 0}
.drawer__note code{font-family:var(--mono);color:var(--brass-bright)}
.kv{font-family:var(--mono);font-size:.8rem;color:rgba(242,237,225,.7);margin-bottom:14px}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid rgba(242,237,225,.08)}

/* ---------- toast ---------- */

.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--bone);color:var(--on-bone);padding:12px 18px;border-radius:var(--radius);
  z-index:80;font-size:.9rem;max-width:min(520px,92vw);box-shadow:0 10px 0 -4px rgba(0,0,0,.4);
}

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