/* ── TOKENS ────────────────────────────────────────────────── */
:root {
  --bg:       #F5EFE0;
  --bg-center:#EDE4D1;
  --red:      #E4002B;
  --red-dark: #B00020;
  --text:     #1A1A1A;
  --mint:     #B8D4C0;
  --cream:    #F5EFE0;
  --gold:     #F5C518;
  --border:   1px solid #1A1A1A;
  --ease:     cubic-bezier(0.65,0,0.35,1);
  --ease-ui:  cubic-bezier(0.4,0,0.2,1);
  --mono:     'Space Mono',monospace;
  --pixel:    'VT323','Pixelify Sans',monospace;
  --topbar-h: 48px;
  --mq-h:     36px;
  --col-side: 21%;
  --col-center:58%;
  /* 8px grid */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s8:64px; --s10:80px;
  /* pixel cursors — chunky Windows 3.1 style */
  --cur-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpolygon points='3,1 3,24 9,18 13,27 18,25 14,16 22,16' fill='%231A1A1A'/%3E%3Cpolygon points='3,1 3,24 9,18 13,27 18,25 14,16 22,16' fill='none' stroke='%23F5EFE0' stroke-width='2' stroke-linejoin='miter'/%3E%3C/svg%3E") 3 1,auto;
  --cur-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' shape-rendering='crispEdges'%3E%3Cpolygon points='3,1 3,28 11,20 16,32 23,29 18,17 28,17' fill='%23E4002B'/%3E%3Cpolygon points='3,1 3,28 11,20 16,32 23,29 18,17 28,17' fill='none' stroke='%23F5EFE0' stroke-width='2.5' stroke-linejoin='miter'/%3E%3C/svg%3E") 3 1,pointer;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--mono);cursor:var(--cur-default)}
::selection{background:var(--red);color:var(--bg)}

/* ── FILM GRAIN ── */
.film-grain{position:fixed;inset:0;pointer-events:none;z-index:991;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;animation:grain .35s steps(1) infinite}
@keyframes grain{0%,100%{background-position:0 0}25%{background-position:-60px -90px}50%{background-position:90px 60px}75%{background-position:-90px 60px}}

/* ── SCANLINES / CRT ── */
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:989;opacity:0;transition:opacity .3s var(--ease-ui);
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.08) 3px,rgba(0,0,0,.08) 4px)}
.scanlines.active{opacity:1}
.crt-band{position:fixed;left:0;right:0;height:60px;pointer-events:none;z-index:988;
  background:linear-gradient(to bottom,transparent,rgba(180,220,180,.06),transparent);top:-60px;opacity:0}
.crt-band.active{animation:crtBand 6s linear infinite}
@keyframes crtBand{0%{top:-60px;opacity:0}5%{opacity:1}90%{top:110vh;opacity:1}100%{top:110vh;opacity:0}}
.crt-warmup{position:fixed;inset:0;pointer-events:none;z-index:987;background:rgba(200,255,200,.15);opacity:0}
.crt-warmup.flash{animation:crtFlash .4s ease-out forwards}
@keyframes crtFlash{0%{opacity:0}15%{opacity:1}30%{opacity:0}55%{opacity:.7}70%{opacity:0}85%{opacity:.4}100%{opacity:0}}
body.crt-on{filter:contrast(1.03) brightness(.98) saturate(1.05)}

/* ── CRACK FLASH ── */
.crack-flash{position:fixed;inset:0;pointer-events:none;z-index:830;opacity:0;background:var(--red)}
.crack-flash.pop{animation:crackPop .12s ease-out forwards}
@keyframes crackPop{0%{opacity:.85}100%{opacity:0}}

/* ── VIGNETTE ── */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:850;opacity:0;transition:opacity .3s;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(228,0,43,.18) 100%)}
.vignette.active{opacity:1}

/* ── PARTICLES ── */
.particle-container{position:fixed;inset:0;pointer-events:none;z-index:820;overflow:hidden}
.px{position:absolute;image-rendering:pixelated;animation:pxfly var(--dur,.8s) linear forwards}
@keyframes pxfly{
  0%  {transform:translate(0,0) rotate(var(--r0,0deg));opacity:1}
  70% {opacity:1}
  100%{transform:translate(var(--vx,0px),var(--vy,100px)) rotate(var(--r1,360deg));opacity:0}
}

/* ── TOASTS ── */
.toast{position:fixed;top:calc(var(--topbar-h) + var(--s1));right:var(--s2);
  background:var(--red);color:var(--bg);font-family:var(--mono);font-size:18px;font-weight:700;
  letter-spacing:.06em;padding:12px 20px;z-index:960;
  transform:translateX(calc(100% + 32px));transition:transform .4s var(--ease);white-space:nowrap}
.toast.show{transform:translateX(0)}
.toast--undo{background:var(--mint);color:var(--text)}
.toast--milestone{
  position:fixed;right:var(--s2);
  background:var(--text);color:var(--cream);
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 18px;border:2px solid var(--text);z-index:959;
  box-shadow:2px 2px 0 rgba(0,0,0,0.15);
  transform:translateX(calc(100% + 32px));
  transition:transform .4s cubic-bezier(0.65,0,0.35,1), opacity .5s;
  white-space:nowrap;
}
.toast--milestone.show{transform:translateX(0)}

/* ── TOOLTIP ── */
.can-tooltip{position:fixed;pointer-events:none;z-index:900;background:var(--cream);color:var(--text);
  border:var(--border);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  padding:4px 8px;opacity:0;transition:opacity .15s;white-space:nowrap}
.can-tooltip.visible{opacity:1}

/* ── TOP BAR ── */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--s2);border-bottom:var(--border);background:var(--bg);z-index:500;gap:var(--s2)}
.topbar__clock{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.12em;justify-self:start}
.topbar__wordmark{font-family:var(--pixel);font-size:26px;letter-spacing:.04em;line-height:1;justify-self:center;text-align:center}
.topbar__wordmark .tm{font-family:var(--mono);font-size:11px;vertical-align:super}
.topbar__right{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;justify-self:end}
.status-pill{display:flex;align-items:center;gap:6px}
.status-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:sPulse 1.5s ease-in-out infinite;flex-shrink:0}
@keyframes sPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{opacity:.75;box-shadow:0 0 0 4px rgba(34,197,94,0)}}
.topbar-btn{background:none;border:var(--border);padding:4px 8px;cursor:var(--cur-pointer);
  display:flex;align-items:center;gap:5px;color:var(--text);font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.08em;transition:background .15s var(--ease-ui),color .15s var(--ease-ui)}
.topbar-btn:hover{background:var(--text);color:var(--bg)}
.topbar-btn.active{background:var(--mint)}
.crt-btn{font-size:9px;gap:6px}

/* ── MAIN GRID ── */
.main-grid{position:fixed;top:var(--topbar-h);bottom:var(--mq-h);left:0;right:0;
  display:grid;grid-template-columns:var(--col-side) var(--col-center) 1fr}

/* ── COLUMNS ── */
.col{border-right:var(--border);display:flex;flex-direction:column;overflow:hidden;position:relative}
.col:last-child{border-right:none}
.col--today{background:var(--bg-center);background-image:radial-gradient(circle,rgba(26,26,26,.04) 1px,transparent 1px);background-size:16px 16px}
.col__header{display:flex;align-items:center;gap:var(--s1);padding:0 var(--s2);height:48px;border-bottom:var(--border);flex-shrink:0}
.col__header--today{gap:var(--s1)}
.col__label{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:.15em;white-space:nowrap;flex-shrink:0;line-height:1;display:flex;align-items:center}
.col__rule{flex:1;height:1px;background:var(--text);opacity:.2}
.col__alias{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--red);white-space:nowrap;flex-shrink:0}
.col__body{flex:1;padding:var(--s3) var(--s2);display:flex;flex-direction:column;gap:var(--s2);overflow:hidden;position:relative}
.col__body--center{align-items:center;justify-content:center;gap:0}

/* ── LIVE BADGE ── */
.live-badge{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--red)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:lPulse 1s ease-in-out infinite;flex-shrink:0}
@keyframes lPulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ── GLOBAL COUNTER ── */
.counter-global{display:flex;gap:3px;align-items:center}
.flip-tile{width:40px;height:56px;background:var(--text);border-radius:3px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;position:relative;perspective:200px}
.flip-face{font-family:var(--pixel);font-size:44px;color:var(--cream);line-height:1;display:block;will-change:transform}
.flip-tile.flipping .flip-face{animation:tileFlip .4s cubic-bezier(.65,0,.35,1) forwards}
@keyframes tileFlip{0%{transform:rotateX(0) scale(1);opacity:1}45%{transform:rotateX(-90deg) scale(.9);opacity:0}55%{transform:rotateX(90deg) scale(.9);opacity:0}100%{transform:rotateX(0) scale(1);opacity:1}}
.flip-tile::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.06);pointer-events:none}

/* ── PERSONAL COUNTER ── */
.flip-tile--personal{width:56px;height:76px;background:transparent;border:2px solid var(--red);border-radius:4px}
.flip-tile--personal .flip-face{color:var(--red);font-size:64px}
.flip-tile--personal::after{display:none}
.counter-personal{display:flex;gap:var(--s1);align-items:center}

/* ── LABELS ── */
.counter-sublabel{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.18em;opacity:.6;text-transform:uppercase;line-height:1;display:flex;align-items:center;padding:4px 0}
.counter-sublabel--red{color:var(--red);opacity:.85}
.personal-count-label{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.13em;opacity:.55;line-height:1;display:flex;align-items:center;padding:4px 0}

/* ── DATA TABLE ── */
.data-table{display:flex;flex-direction:column;gap:var(--s2)}
.data-row{display:flex;align-items:baseline;font-family:var(--mono);font-size:13px;line-height:1.5}
.data-key{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--text);opacity:.7;white-space:nowrap;flex-shrink:0}
.data-dots{flex:1;margin:0 4px;border-bottom:1px dotted rgba(26,26,26,.3);min-width:8px;position:relative;bottom:2px}
.data-val{font-size:13px;font-weight:700;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;text-align:right}
.data-rule{font-family:var(--mono);font-size:12px;letter-spacing:.06em;opacity:.3;flex-shrink:0}

/* ── GLOBAL FOOTER ── */
.global-footer{margin-top:auto}
.system-line{font-family:var(--mono);font-size:10px;letter-spacing:.14em;opacity:.28;font-weight:700}

/* ── PLUS ONE ── */
.plus-one-anchor{position:relative;height:0}
.plus-one{position:absolute;bottom:0;left:0;font-family:var(--pixel);font-size:56px;color:var(--red);opacity:0;pointer-events:none;white-space:nowrap}
.plus-one.animate{animation:floatUp 1.5s var(--ease) forwards}
@keyframes floatUp{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-100px);opacity:0}}

/* ── CAN STAGE ── */
.can-stage{position:relative;display:flex;flex-direction:column;align-items:center;cursor:var(--cur-pointer);flex-shrink:0}
.can-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(228,0,43,.07) 0%,transparent 70%)}
.can-wrapper{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;animation:canFloat 3s ease-in-out infinite}
.can-wrapper.no-float{animation:none!important}
@keyframes canFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.can-img{width:330px;height:auto;display:block;image-rendering:pixelated;user-select:none;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.2));transition:transform .2s var(--ease-ui),filter .2s var(--ease-ui)}
.can-stage:hover .can-wrapper{animation:none}
.can-stage:hover .can-img{transform:rotate(2deg) translateY(-5px);filter:drop-shadow(0 32px 50px rgba(0,0,0,.28))}
.can-glint{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  background-size:300% 100%;background-position:200% 0;opacity:0}
.can-glint.shine{animation:glint .65s ease-in-out forwards}
@keyframes glint{0%{background-position:200% 0;opacity:0}20%{opacity:1}80%{opacity:1}100%{background-position:-100% 0;opacity:0}}
.can-wrapper.shake{animation:cShake .12s ease-in-out 4!important}
@keyframes cShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.can-wrapper.breathe{animation:breathe 1.5s ease-in-out!important}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.can-wrapper.squish{animation:squish .15s ease-out forwards!important}
@keyframes squish{0%{transform:scale(1,1)}100%{transform:scale(1.05,.96)}}

/* ── SPEC LABELS ── */
.spec-label{position:absolute;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;opacity:.25;pointer-events:none;color:var(--text)}
.spec-label--tl{top:var(--s3);left:var(--s2)}
.spec-label--tr{top:var(--s3);right:var(--s2)}
.spec-label--bl{bottom:var(--s8);left:var(--s2)}

/* ── ORNAMENTS ── */
.ornament{position:absolute;font-size:14px;color:var(--mint);opacity:.45;pointer-events:none;
  animation:ornRot 30s linear infinite;filter:brightness(.7)}
.ornament--tl{top:var(--s6);left:var(--s4)}
.ornament--tr{top:var(--s6);right:var(--s4);animation-direction:reverse}
.ornament--bl{bottom:var(--s8);left:var(--s4);animation-delay:-10s}
.ornament--br{bottom:var(--s8);right:var(--s4);animation-delay:-20s;font-size:10px;letter-spacing:2px}
@keyframes ornRot{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── CRACK BUTTON — cream default, red on hover ── */
.crack-btn{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--bg);color:var(--text);border:2px solid var(--text);border-radius:6px;
  min-width:280px;min-height:56px;padding:0 var(--s5);
  cursor:var(--cur-pointer);display:flex;align-items:center;justify-content:center;gap:4px;
  box-shadow:4px 4px 0 var(--text);
  animation:btnPulse 2.5s ease-in-out infinite;margin-top:var(--s3);user-select:none;
  transition:background .15s var(--ease-ui),color .15s var(--ease-ui),border-color .15s var(--ease-ui),box-shadow .15s var(--ease-ui),transform .15s var(--ease-ui)}
@keyframes btnPulse{0%,100%{box-shadow:4px 4px 0 var(--text)}50%{box-shadow:4px 4px 0 var(--text),0 0 0 10px rgba(228,0,43,.1)}}
.crack-btn:hover{background:var(--red);color:var(--bg);border-color:var(--red);animation:none;box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.crack-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--text)}
.crack-btn:disabled{opacity:.4;pointer-events:none;animation:none}
.crack-btn__cursor{opacity:0;animation:cursorBlink .8s step-end infinite}
.crack-btn:hover .crack-btn__cursor{opacity:1}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.crack-subtext{font-family:var(--mono);font-size:12px;letter-spacing:.16em;opacity:.4;margin-top:var(--s2);font-style:italic;transition:opacity .3s}
.key-hint{font-family:var(--mono);font-size:12px;letter-spacing:.1em;opacity:.28;margin-top:var(--s1);font-weight:700}

/* ── ONLINE NOW ── */
.online-now-bar{display:flex;align-items:center;gap:8px;margin-top:var(--s4);
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.1em}
.online-dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;animation:onlinePulse 1s ease-in-out infinite;flex-shrink:0}
@keyframes onlinePulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ── UNDO PANEL ── */
.undo-panel{flex-shrink:0;border:var(--border);padding:var(--s1) var(--s2);background:rgba(184,212,192,.12);animation:undoIn .25s var(--ease) both}
@keyframes undoIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.undo-top{display:flex;align-items:center;gap:var(--s1)}
.undo-arrow{font-size:18px;color:var(--mint);filter:brightness(.7)}
.undo-btn{background:none;border:none;font-family:var(--mono);font-size:13px;font-weight:700;
  letter-spacing:.1em;cursor:var(--cur-pointer);color:var(--text);padding:0;text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.undo-btn:hover{color:var(--red)}
.undo-timer{font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:.55;margin-top:4px}

/* ── RECEIPT ── */
.receipt{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.05em;opacity:.28}
.receipt-line{display:block}
.receipt-line--small{font-size:11px;letter-spacing:.1em}
.receipt-ok{color:var(--red);font-weight:700}

/* ── SECTION DIVIDER ── */
.section-divider{display:flex;align-items:center;text-align:center;margin:24px 0 12px 0}
.section-divider::before,.section-divider::after{content:'';flex:1;border-bottom:1px solid var(--text);opacity:0.2}
.section-divider span{padding:0 8px;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--text);line-height:1;display:flex;align-items:center}

/* ── HALL OF FAME ── */
.hof-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;padding-right:4px}
.hof-list::-webkit-scrollbar{width:6px}
.hof-list::-webkit-scrollbar-track{background:var(--cream);border:1px solid rgba(0,0,0,0.1)}
.hof-list::-webkit-scrollbar-thumb{background:var(--red);border-radius:3px}

.hof-empty{font-family:var(--mono);font-size:11px;letter-spacing:.05em;opacity:.5;text-align:center;font-style:italic;padding-top:10px}

.hof-card{width:100%;border:1px solid var(--text);background:#F5EFE0;color:var(--text);padding:8px;display:flex;flex-direction:column;gap:4px;animation:hofIn .2s ease-out both}
.hof-card-title{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;color:var(--text);display:flex;gap:4px;align-items:center;line-height:1}
.hof-card-date{font-family:var(--mono);font-size:10px;color:var(--text);opacity:0.6;text-transform:lowercase;line-height:1}

@keyframes hofIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* ── MARQUEE ── */
.marquee-bar{position:fixed;bottom:0;left:0;right:0;height:var(--mq-h);border-top:var(--border);background:var(--bg);overflow:hidden;display:flex;align-items:center;z-index:500}
.marquee-track{display:flex;white-space:nowrap;animation:marquee 38s linear infinite}
.marquee-content{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--red);display:inline-block}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .can-wrapper,.marquee-track,.film-grain,.ornament,.crack-btn{animation:none!important}
  .flip-tile.flipping .flip-face,.plus-one.animate{animation:none!important}
}
@media(max-width:900px){
  html,body{overflow-y:auto}
  .main-grid{position:static;display:flex;flex-direction:column;margin-top:var(--topbar-h);margin-bottom:var(--mq-h)}
  .col{border-right:none;border-bottom:var(--border)}
  .col:last-child{border-bottom:none}
  .can-img{width:240px}
  .topbar{grid-template-columns:1fr auto}
  .topbar__right{font-size:9px}
}