:root{--green:#36865b;--dark:#193f2a;--honey:#f5cf54;--honey2:#e0a72e;--cream:#fff8e8;--cream2:#f0edda;--ink:#192d22;--muted:#4f5c52;--line:#e1e5dc;--paper:#f6f6ef;--wood:#b98452;--wood2:#8d6238}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#141c17;--ink:#eef3ec;--muted:#aebcb1;--line:#34443a;--cream:#1d2a22;--cream2:#213229}}
:root[data-theme="dark"]{--paper:#141c17;--ink:#eef3ec;--muted:#aebcb1;--line:#34443a;--cream:#1d2a22;--cream2:#213229}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 'Segoe UI',Arial,sans-serif;padding-block:0 40px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
header{background:var(--green);color:#fff;padding:22px 0 18px;border-bottom:8px solid var(--honey)}header .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font:700 26px 'Segoe UI',Arial,sans-serif;letter-spacing:-.5px}.brand span{color:var(--honey)}.brand small{display:block;font:600 10px 'Segoe UI';letter-spacing:3px;margin-top:2px;color:#e6f2e8}
.edition{font:600 12px 'Segoe UI';letter-spacing:2px;text-transform:uppercase;color:var(--honey)}
h1{font:700 34px/1.1 'Segoe UI',Arial,sans-serif;letter-spacing:-.6px;margin:26px 0 6px;color:var(--dark)}h1 em{font-style:normal;color:var(--green)}
.lead{margin:0 0 20px;color:var(--muted);max-width:60ch}
.stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:0;border-radius:20px;overflow:hidden;box-shadow:0 20px 50px rgba(25,63,42,.18)}
@media(max-width:860px){.stage{grid-template-columns:1fr}}
.cam{position:relative;background:#10271b center/cover;min-height:360px}
@media(max-width:860px){.cam{aspect-ratio:16/9;min-height:0}}
.cam::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,39,27,.3),transparent 35%,rgba(16,39,27,.85));pointer-events:none}
.live{position:absolute;top:14px;left:16px;z-index:2;display:flex;gap:6px;align-items:center;font:700 11px 'Segoe UI';letter-spacing:1.2px;color:#fff;background:rgba(25,63,42,.75);padding:6px 10px;border-radius:6px}.live i{width:8px;height:8px;border-radius:50%;background:#e33;box-shadow:0 0 6px #e33}
.camtxt{position:absolute;left:20px;right:20px;bottom:22px;z-index:2;color:#fff}.camtxt .eyebrow{color:var(--honey)}.camtxt h2{font:700 26px/1.15 'Segoe UI',Arial,sans-serif;margin:6px 0 4px}.camtxt p{margin:0;font-size:13px;color:#e6f2e8}
.eyebrow{font:700 11px 'Segoe UI';letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.moment{position:absolute;z-index:3;left:8%;right:8%;top:38%;background:var(--honey);color:var(--dark);border-radius:14px;padding:20px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.35);opacity:0;transform:translateY(12px) scale(.96);transition:opacity .35s,transform .35s;pointer-events:none}
.moment.show{opacity:1;transform:none}.moment strong{display:block;font:700 22px/1.2 'Segoe UI',Arial,sans-serif;margin:6px 0}.moment span{font-size:13px}
.booth{position:relative;background:var(--cream2);padding:0 22px 20px;display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden}
.awning{height:26px;margin:0 -22px 16px;background:repeating-linear-gradient(90deg,var(--green) 0 34px,var(--cream) 34px 68px);border-radius:0 0 14px 14px;box-shadow:0 6px 12px rgba(25,63,42,.15)}
.booth h3{font:700 22px 'Segoe UI',Arial,sans-serif;margin:4px 0 0;color:var(--dark)}.booth .sub{margin:2px 0 8px;font-size:13px;color:var(--muted)}
.scene{position:relative;overflow:hidden}.scene svg{width:100%;display:block}
.entry{position:absolute;left:50%;top:6px;transform:translate(-50%,-10px);background:var(--dark);color:var(--cream);border-radius:18px;padding:6px 14px;font:700 14px 'Segoe UI',Arial,sans-serif;opacity:0;white-space:nowrap;z-index:3}
.entry.show{animation:entry 1.6s ease both}@keyframes entry{0%{opacity:0;transform:translate(-50%,-12px)}15%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,6px)}}
.meter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}.meter strong{font:700 40px/1 'Segoe UI',Arial,sans-serif;color:var(--dark);letter-spacing:-1px;font-variant-numeric:tabular-nums}.meter strong span{font-size:20px;font-weight:500}
.meter .pts{text-align:right;font-size:13px;color:var(--muted)}.meter .pts b{display:block;font-size:17px;color:var(--dark)}
.bar{height:10px;background:#dfe3d3;border-radius:6px;overflow:hidden;margin:10px 0 8px}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--honey));transition:width .6s ease}
.status{font-size:14px;min-height:22px;color:var(--ink)}.status.hot{color:var(--green);font-weight:700}
.people{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:30px}.people span{background:#fff;border:1px solid #e2dcc0;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}.people span.new{background:var(--honey);border-color:#d9b23a;animation:pop .4s ease both}@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
/* nuts and basket */
.nut.drop{animation:drop .8s cubic-bezier(.3,.6,.4,1) both}@keyframes drop{0%{transform:translate(var(--fx),var(--fy)) rotate(-40deg);opacity:0}10%{opacity:1}72%{transform:translateY(5px) rotate(8deg)}86%{transform:translateY(-3px) rotate(2deg)}100%{transform:none}}
#basket.tip{animation:tip 2.8s ease-in-out both;transform-origin:200px 192px}@keyframes tip{0%{transform:rotate(0)}40%{transform:rotate(118deg)}72%{transform:rotate(118deg)}100%{transform:rotate(0)}}
.spill{animation:spill 1.1s cubic-bezier(.45,.05,.8,.6) both}@keyframes spill{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
.pile{animation:settle .6s ease both}@keyframes settle{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
footer{margin-top:22px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
