:root{
  --ground:#140F0C; --ground2:#1E1713; --glass:#2A201A; --ink:#F6EBDD; --muted:#A8968A; --dim:#6E5F55;
  --amber:#FFB627; --amberdeep:#D9880B; --slip:#F3E6CF; --slipink:#2B1F17; --rule:rgba(246,235,221,.12);
  --disp:"Fraunces",Georgia,serif; --body:"Manrope",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;min-height:100vh;background:var(--ground);color:var(--ink);font:400 15px/1.55 var(--body);
  padding:0 max(16px,calc((100% - 720px)/2)) 40px;overflow-x:hidden}
a{color:inherit}
code{font-family:var(--mono)}
button{font-family:var(--body)}

/* the marquee: a thin strip, no bar, no connect button */
.marquee{display:flex;align-items:center;gap:9px;padding:12px 0 6px;font-size:13px;color:var(--muted)}
.marquee-logo{border-radius:7px;display:block}
.marquee-name{font:800 15px/1 var(--disp);color:var(--ink);letter-spacing:.01em}
.marquee-hour{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marquee-go{display:flex;gap:12px}
.marquee-go a{text-decoration:none;color:var(--muted)}
.marquee-go a:hover{color:var(--amber)}

/* layout wrappers vanish below 1000px so the jar figure is the first thing on the page */
.stage,.frontrow,.backroom{display:contents}

/* the number: the jar, huge */
.jarcap{margin:18px 0 0;font:600 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.jarfig{font:900 clamp(64px,19vw,112px)/1 var(--disp);font-variation-settings:"opsz" 144;letter-spacing:-.03em;margin:6px 0 4px;
  color:var(--ink);text-shadow:0 0 38px rgba(255,182,39,.28);font-variant-numeric:tabular-nums;white-space:nowrap}
.jarfig.bump{animation:bump .6s ease}
@keyframes bump{30%{color:var(--amber);transform:translateY(-3px)}}
.jarsub{margin:0 0 16px;color:var(--muted);font-size:14px}
.jarsub b{color:var(--ink)}

/* the CA pill: sticky, floats over the jar when scrolled */
.capill{position:sticky;top:10px;z-index:30;display:flex;align-items:center;gap:8px;min-height:48px;padding:5px 5px 5px 14px;
  border-radius:99px;background:rgba(36,27,21,.94);border:1px solid rgba(255,182,39,.35);backdrop-filter:blur(8px);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.9);margin-bottom:16px}
.capill-k{flex:none;font:800 12px/1 var(--disp);color:var(--amber)}
.capill-addr{flex:1;min-width:0;font-size:10.5px;line-height:1.3;word-break:break-all;user-select:all;color:var(--ink)}
.capill-addr.wait{color:var(--muted);font-size:12px}
.capill-copy{flex:none;height:38px;border:0;border-radius:99px;padding:0 16px;background:var(--amber);color:#1B120A;font-weight:700;font-size:13px;cursor:pointer}
.capill-copy[data-done="1"]{background:var(--ink)}
.capill-gm{flex:none;font-size:11px;color:var(--muted);padding-right:8px}

/* the tip jar: glass, rendered in light, with request slips stacked inside */
.tipjar{position:relative;border-radius:30px 30px 40px 40px;padding:0 0 16px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),linear-gradient(180deg,var(--glass),#1A130F);
  border:1px solid rgba(255,235,210,.14);box-shadow:inset 10px 0 24px -14px rgba(255,255,255,.25),inset -14px -20px 40px -20px rgba(255,182,39,.35),0 30px 60px -40px rgba(255,150,30,.45)}
.tipjar-lid{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;border-radius:26px 26px 10px 10px;
  background:linear-gradient(180deg,#3A2C22,#271D16);border-bottom:1px solid rgba(0,0,0,.4);font-size:13px;color:var(--muted)}
.tipjar-lid i{font:600 15px/1 var(--mono);font-style:normal;color:var(--amber)}
.tipjar-glass{padding:14px 14px 4px;min-height:150px}
.slips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start}
.slip{position:relative;flex:0 0 auto;width:calc(33.33% - 5px);min-height:56px;padding:7px 8px 6px;border-radius:6px;background:var(--slip);color:var(--slipink);
  box-shadow:0 1px 0 rgba(0,0,0,.25),0 6px 12px -8px rgba(0,0,0,.7);transform:rotate(var(--tilt,0deg));font-size:11px;line-height:1.25}
.slip-n{display:block;font:800 13px/1 var(--disp)}
.slip-song{display:block;margin-top:3px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slip-who{display:block;margin-top:2px;font:400 10px/1.2 var(--mono);color:#7A6655}
.slip[data-me="1"]{outline:2px solid var(--amber)}
.slip[data-pick="1"]{background:var(--amber);color:#1B120A;transform:rotate(0) scale(1.04);box-shadow:0 0 0 2px #FFE2A0,0 0 26px rgba(255,182,39,.7);z-index:2}
.slip[data-pick="1"] .slip-who{color:#4A3210}
.slip[data-pick="1"]::after{content:"pulled if now";position:absolute;top:-9px;right:6px;padding:2px 6px;border-radius:99px;background:#1B120A;color:var(--amber);font:700 9px/1.2 var(--body);letter-spacing:.04em}
.slip[data-empty="1"]{background:transparent;color:var(--amber);border:1.5px dashed rgba(255,182,39,.65);box-shadow:none;cursor:pointer;animation:breathe 2.2s ease-in-out infinite}
.slip[data-empty="1"] .slip-who{color:var(--muted)}
.slip[data-ghost="1"]{background:rgba(243,230,207,.06);border:1px dashed rgba(243,230,207,.16);box-shadow:none;color:var(--dim)}
.slip.fresh{animation:drop .7s cubic-bezier(.2,.9,.3,1.3)}
@keyframes drop{from{transform:translateY(-40px) rotate(-10deg);opacity:0}}
@keyframes breathe{50%{box-shadow:0 0 0 4px rgba(255,182,39,.14)}}
.ifnow{margin:10px 16px 0;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.28);font-size:14px;line-height:1.45}
.ifnow b{color:var(--amber)}
.ifnow code{font-size:11.5px;word-break:break-all}

/* the request form */
.slipform{margin:18px 0 0}
.slipform-l{display:block;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.slipform-row{display:flex;flex-direction:column;gap:8px}
.slipform-in{height:50px;border-radius:14px;border:1px solid var(--rule);background:var(--ground2);color:var(--ink);padding:0 14px;font:500 16px var(--body)}
.slipform-in:focus{outline:2px solid var(--amber);outline-offset:1px}
.slipform-go{height:56px;border:0;border-radius:14px;background:linear-gradient(180deg,#FFC54D,var(--amber));color:#1B120A;font:800 16px/1 var(--body);cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(255,182,39,.8)}
.slipform-go:disabled{opacity:.55;cursor:default}
.slipform-note{margin:8px 0 0;font-size:13px;color:var(--muted)}
.mine{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--ground2);font-size:13px}
.mine[hidden]{display:none}
.mine-claim{border:0;border-radius:10px;padding:9px 12px;background:var(--ink);color:#1B120A;font-weight:700;cursor:pointer}
.mine-claim[hidden]{display:none}

/* the drawn-winner moment */
.lastcall{margin:26px 0 0;padding:16px 16px 14px;border-radius:18px;background:var(--ground2);border:1px solid var(--rule)}
.lastcall[data-mode="won"]{background:linear-gradient(135deg,rgba(255,182,39,.18),rgba(255,182,39,.03));border-color:rgba(255,182,39,.45)}
.lastcall[data-mode="wait"]{border-style:dashed;border-color:rgba(255,182,39,.5)}
.lastcall-k{font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.lastcall-t{margin:8px 0 0;font:600 17px/1.4 var(--disp)}
.lastcall-t code{font:400 11.5px/1.3 var(--mono);word-break:break-all;color:var(--muted)}
.lastcall-t b{color:var(--amber)}
.lastcall-go{margin-top:10px;border:0;border-radius:10px;padding:10px 14px;background:var(--amber);color:#1B120A;font-weight:800;cursor:pointer}

/* the setlist tape */
.setlist{margin:22px 0 0}
.setlist-top{display:flex;justify-content:space-between;align-items:baseline;font:800 18px/1 var(--disp);padding-bottom:8px;border-bottom:1px solid var(--rule)}
.setlist-top i{font:400 12px var(--body);color:var(--muted)}
.setlist-rows{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto}
.setlist-rows li{display:grid;grid-template-columns:62px 1fr auto;gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--rule);font-size:13px}
.setlist-rows li.lit{animation:print .9s ease}
@keyframes print{from{background:rgba(255,182,39,.2)}}
.setlist-none{display:block!important;color:var(--muted)}
.tk{font:700 10px/1.6 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tk[data-k="pulled"]{color:var(--amber)}
.tw{min-width:0;overflow-wrap:anywhere}
.tt{color:var(--dim);font-size:12px}

/* rules as a house card with a worked tab */
.housecard{margin:24px 0 0;padding:18px;border-radius:18px;background:var(--slip);color:var(--slipink)}
.housecard-h{margin:0 0 8px;font:900 22px/1.1 var(--disp)}
.housecard-list{margin:0;padding-left:20px;font-size:14px}
.housecard-list li{margin:6px 0}
.tab{margin-top:14px;padding:12px;border-radius:10px;background:#FFF8EA;border:1px dashed #C9B394;font:400 12.5px/1.6 var(--mono)}
.tab div{display:flex;justify-content:space-between;gap:10px}
.tab div.sum{border-top:1px solid #C9B394;margin-top:4px;padding-top:4px;font-weight:600}

.cloak{margin-top:30px;padding-top:16px;border-top:1px solid var(--rule);font-size:12px;color:var(--muted)}
.cloak-row{display:flex;gap:10px;margin:4px 0}
.cloak-row span{flex:none;width:104px}
.cloak-row code{min-width:0;word-break:break-all;color:var(--ink)}
.cloak-links{display:flex;gap:14px;margin-top:8px}
.cloak-note{margin:10px 0 0;color:var(--dim)}

.curtain{position:fixed;inset:0;z-index:60;background:rgba(10,7,5,.72);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.curtain-off{display:none}
.curtain-box{width:100%;max-width:420px;background:var(--ground2);border-radius:18px;padding:16px;border:1px solid var(--rule)}
.curtain-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.curtain-top button{border:0;background:none;color:var(--ink);font-size:22px;cursor:pointer}
.pickw{display:flex;flex-direction:column;gap:8px}
.pickw button{height:46px;border-radius:12px;border:1px solid var(--rule);background:var(--glass);color:var(--ink);font-weight:700;cursor:pointer}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;padding:10px 16px;border-radius:99px;background:var(--ink);color:#1B120A;font-weight:700;font-size:13px;max-width:92vw}

/* 720+: wider measure, a bigger jar */
@media (min-width:720px){
  .slip{width:calc(25% - 6px)}
  .slipform-row{flex-direction:row}
  .slipform-in{flex:1}
  .slipform-go{padding:0 22px;height:52px}
  .capill-addr{font-size:12.5px}
}

/* 1000+: the page recomposes — the jar and the request on the left, the drawn-winner card, setlist and house card in a column */
@media (min-width:1000px){
  body{padding:0 max(28px,calc((100% - 1160px)/2)) 48px}
  .stage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:start}
  .frontrow,.backroom{display:block}
  .backroom{position:sticky;top:16px}
  .lastcall{margin-top:24px}
  .jarfig{font-size:150px}
  .slip{width:calc(20% - 6px);min-height:64px}
  .tipjar-glass{min-height:240px;padding:18px}
  .capill-addr{font-size:13px}
}