/* ============================================================
   TITO'S — Main Event Pizza
   Fight-poster / arena styling. One page, no framework.
   ============================================================ */

:root{
  --ink:#0B0908;
  --ink-2:#161210;
  --canvas:#EDE3D2;      /* ring canvas cream */
  --canvas-2:#F7F1E2;
  --gold:#FFB612;        /* burgundy & gold, gold half */
  --burg:#7A1B2B;        /* burgundy half */
  --red:#C8202E;         /* red corner */
  --blue:#1D3A8A;        /* blue corner */
  --tomato:#D6412B;
  --basil:#4E8B45;
  --char:#1A1512;

  --f-display:'Anton', Impact, sans-serif;
  --f-cond:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:'Barlow', system-ui, sans-serif;
  --f-hand:'Caveat', cursive;

  --maxw:1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--canvas);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:var(--gold); }

/* ---------- atmosphere ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.30; mix-blend-mode:overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(0,0,0,.14) 0 1px, transparent 1px);
  background-size:3px 3px, 4px 4px, 5px 5px;
}
.spot{
  position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,28%), rgba(255,182,18,.13), transparent 62%);
  transition:background .25s ease-out;
}

/* ---------- marquee ---------- */
.marquee{
  position:relative; z-index:20;
  background:var(--gold); color:var(--ink);
  border-bottom:4px solid var(--ink);
  overflow:hidden; white-space:nowrap;
}
.marquee__track{ display:flex; width:max-content; animation:slide 44s linear infinite; }
.marquee__track span{
  font-family:var(--f-cond); font-weight:700; font-size:14px; letter-spacing:.16em;
  padding:7px 24px;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- scoreboard nav ---------- */
.board{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:8px 16px;
  background:rgba(11,9,8,.93);
  backdrop-filter:blur(8px);
  border-bottom:2px solid #2b2320;
}
.board__logo{
  font-family:var(--f-display); font-size:22px; letter-spacing:.02em;
  color:var(--canvas); text-decoration:none; line-height:1;
}
.board__logo span{ color:var(--gold); }
.board__links{ display:flex; gap:16px; margin-left:auto; overflow-x:auto; scrollbar-width:none; }
.board__links::-webkit-scrollbar{ display:none; }
.board__links a{
  font-family:var(--f-cond); font-weight:600; font-size:14px; letter-spacing:.11em;
  text-transform:uppercase; color:#c9bda9; text-decoration:none; white-space:nowrap;
  padding:4px 0; border-bottom:2px solid transparent;
}
.board__links a:hover{ color:var(--gold); border-color:var(--gold); }
.board__bell{
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-cond); font-weight:700; font-size:13px; letter-spacing:.12em;
  background:var(--gold); color:var(--ink); border:2px solid var(--ink);
  box-shadow:2px 2px 0 #000; padding:6px 11px; cursor:pointer; border-radius:2px;
}
.board__bell:active{ transform:translate(2px,2px); box-shadow:none; }
.board__bell.ding{ animation:shake .5s; }
@keyframes shake{
  0%,100%{ transform:rotate(0) } 20%{ transform:rotate(-9deg) } 40%{ transform:rotate(8deg) }
  60%{ transform:rotate(-5deg) } 80%{ transform:rotate(3deg) }
}
@media (max-width:820px){ .board__links{ display:none; } }

/* ---------- shared ---------- */
.wrap{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.wrap--narrow{ max-width:720px; text-align:center; }
.sec{ position:relative; padding:74px 0; border-top:2px solid #241d1a; }
.bill{
  font-family:var(--f-display); font-size:clamp(30px,6.2vw,58px); line-height:.98;
  letter-spacing:.005em; margin:0 0 6px; color:var(--canvas);
  text-shadow:3px 3px 0 var(--burg);
}
.bill--gold{ color:var(--gold); text-shadow:3px 3px 0 var(--burg); }
.lede{ font-family:var(--f-cond); font-size:19px; letter-spacing:.02em; color:#bfb3a0; max-width:56ch; margin:0 0 30px; }
.big{ font-family:var(--f-display); font-size:clamp(24px,4.4vw,40px); line-height:1.06; color:var(--canvas); margin:0 0 14px; }
.center{ text-align:center; }
.hand{ font-family:var(--f-hand); font-size:23px; color:var(--gold); line-height:1.35; }
.smallprint{ font-family:var(--f-cond); font-size:14px; letter-spacing:.08em; color:#7b7066; margin-top:22px; text-transform:uppercase; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-cond); font-weight:700; font-size:16px; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  padding:13px 24px; border-radius:2px; border:3px solid var(--ink);
  transition:transform .08s, box-shadow .08s;
}
.btn--gold{ background:var(--gold); color:var(--ink); box-shadow:5px 5px 0 var(--burg); }
/* ghost defaults to the ON-CREAM version (poster, classified card).
   The one place it sits on a dark panel is the booth — overridden below. */
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); box-shadow:5px 5px 0 var(--burg); }
.sec--booth .btn--ghost{ color:var(--canvas); border-color:var(--canvas); box-shadow:5px 5px 0 #2b2320; }
.btn:hover{ transform:translate(-1px,-1px); }
.btn:active{ transform:translate(5px,5px); box-shadow:none !important; }
.btn--wide{ width:100%; }
.btn--huge{ font-size:20px; padding:18px 34px; }

/* ---------- ropes ---------- */
.ropes{ position:absolute; left:0; right:0; display:grid; gap:9px; z-index:3; pointer-events:none; }
.ropes--top{ top:0; }
.ropes--bottom{ bottom:0; }
.ropes i{ display:block; height:6px; border-top:1px solid rgba(255,255,255,.25); }
.ropes i:nth-child(1){ background:var(--red); }
.ropes i:nth-child(2){ background:var(--canvas); }
.ropes i:nth-child(3){ background:var(--blue); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:2;
  padding:96px 20px 84px;
  background:
    radial-gradient(900px 520px at 50% 8%, rgba(255,182,18,.16), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px),
    var(--ink);
  overflow:hidden;
}

/* hanging mic */
.mic{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  background:none; border:0; padding:0; cursor:pointer; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  animation:sway 6s ease-in-out infinite; transform-origin:top center;
}
.mic__cord{ display:block; width:3px; height:54px; background:linear-gradient(#3a3128,#FFB612); }
.mic__head svg{ width:38px; height:70px; filter:drop-shadow(0 0 14px rgba(255,182,18,.5)); }
.mic__hint{
  font-family:var(--f-cond); font-size:11px; letter-spacing:.2em; color:var(--gold);
  opacity:.7; margin-top:4px; text-transform:uppercase;
}
.mic:hover .mic__head svg{ filter:drop-shadow(0 0 24px rgba(255,182,18,.95)); }
@keyframes sway{ 0%,100%{ transform:translateX(-50%) rotate(-1.6deg) } 50%{ transform:translateX(-50%) rotate(1.6deg) } }
@media (max-width:640px){ .mic{ display:none; } }

.poster{
  position:relative; z-index:4; max-width:920px; margin:70px auto 0;
  background:var(--canvas); color:var(--ink);
  border:6px solid var(--ink);
  box-shadow:0 0 0 4px var(--canvas), 0 0 0 10px var(--ink), 18px 20px 0 rgba(0,0,0,.55);
  padding:30px 26px 26px; text-align:center;
  transform:rotate(-.5deg);
}
.poster::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.13;
  background-image:radial-gradient(#0B0908 1px, transparent 1px);
  background-size:5px 5px;
}
.poster__rule{
  font-family:var(--f-cond); font-weight:700; font-size:12px; letter-spacing:.28em;
  background:var(--ink); color:var(--gold); padding:7px 8px; margin:0 -6px 18px;
}
.poster__rule--b{ margin:24px -6px 0; }
.poster__over{
  font-family:var(--f-cond); font-size:14px; letter-spacing:.24em; text-transform:uppercase;
  color:#6a5c4c; margin:0 0 6px;
}

.wordmark{ margin:0; line-height:.86; }
/* the little script word sits up and to the LEFT of the wordmark, the way a
   fight poster tucks it — centred it collides head-on with the O. */
.wordmark__the{
  display:block; text-align:left; padding-left:9%;
  font-family:var(--f-hand); font-size:clamp(26px,4.4vw,44px); color:var(--burg);
  transform:rotate(-7deg); transform-origin:left center;
  margin-bottom:-.16em; position:relative; z-index:2;
  text-shadow:0 0 9px var(--canvas), 0 0 9px var(--canvas), 0 0 9px var(--canvas);
}
.wordmark__main{
  display:block; font-family:var(--f-display);
  font-size:clamp(64px,17vw,178px); letter-spacing:-.01em; color:var(--ink);
  text-shadow:5px 5px 0 var(--red), 10px 10px 0 var(--gold);
}
.wordmark__main em{ font-style:normal; color:var(--burg); }
.wordmark__sub{
  display:block; font-family:var(--f-cond); font-weight:700;
  font-size:clamp(15px,3.2vw,27px); letter-spacing:.42em; color:var(--ink);
  margin-top:14px; padding-top:12px; border-top:4px double var(--ink);
}

.versus{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin:26px 0 4px; }
.versus__side{ padding:10px 6px; }
.versus__corner{
  display:block; font-family:var(--f-cond); font-weight:700; font-size:11px; letter-spacing:.24em;
  padding:3px 0; margin-bottom:6px; color:#fff;
}
.versus__side--red .versus__corner{ background:var(--red); }
.versus__side--blue .versus__corner{ background:var(--blue); }
.versus__side strong{ display:block; font-family:var(--f-display); font-size:clamp(22px,5vw,40px); line-height:1; }
.versus__side strong i{ font-style:normal; color:var(--burg); }
.versus__note{ display:block; font-family:var(--f-cond); font-size:14px; letter-spacing:.06em; color:#6a5c4c; margin-top:6px; }
.versus__vs{ font-family:var(--f-display); font-size:clamp(20px,4vw,34px); color:var(--red); }
.versus__vs em{ font-style:normal; font-size:.55em; vertical-align:super; }
.versus__fineprint{ font-family:var(--f-cond); font-size:13px; letter-spacing:.05em; color:#8a7c6c; margin:0 0 20px; }

.poster__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px; }

.stamp{
  position:absolute; right:6%; bottom:56px; z-index:6;
  width:132px; height:132px; display:grid; place-items:center;
  border:5px solid var(--red); border-radius:50%;
  color:var(--red); font-family:var(--f-display); font-size:22px; line-height:1;
  text-align:center; transform:rotate(-14deg); opacity:.9;
  box-shadow:inset 0 0 0 3px var(--red);
  background:rgba(11,9,8,.55);
}
@media (max-width:900px){ .stamp{ right:4%; bottom:14px; width:98px; height:98px; font-size:16px; } }
/* the mic is hidden on phones, so reclaim the headroom it was hanging in */
@media (max-width:640px){
  .hero{ padding:30px 14px 70px; }
  .poster{ margin-top:0; padding:22px 14px 20px; transform:none;
    box-shadow:0 0 0 3px var(--canvas), 0 0 0 7px var(--ink), 10px 12px 0 rgba(0,0,0,.55); }
  .poster__rule{ letter-spacing:.18em; margin:0 -3px 14px; }
  .poster__rule--b{ margin:18px -3px 0; }
  .versus{ gap:4px; }
  .versus__note{ font-size:12.5px; line-height:1.25; }
  .versus__corner{ letter-spacing:.14em; }
  .poster__cta .btn{ width:100%; }
  .sec{ padding:54px 0; }
}

/* ============================================================
   ANNOUNCER BOOTH
   ============================================================ */
.sec--booth{ background:linear-gradient(180deg, #0d0a09, #120e0c); }
.booth{ display:grid; grid-template-columns:minmax(280px,1fr) 1.25fr; gap:26px; align-items:start; }
@media (max-width:860px){ .booth{ grid-template-columns:1fr; } }

.booth__form{
  background:#171210; border:3px solid #2f2622; border-radius:4px; padding:20px;
  display:grid; gap:14px;
}
.fld span{
  display:block; font-family:var(--f-cond); font-weight:700; font-size:12px;
  letter-spacing:.2em; color:var(--gold); margin-bottom:5px;
}
.fld input[type=text]{
  width:100%; background:#0B0908; border:2px solid #3a2f28; color:var(--canvas);
  font-family:var(--f-cond); font-weight:600; font-size:20px; letter-spacing:.03em;
  padding:11px 12px; border-radius:2px;
}
.fld input[type=text]:focus{ outline:none; border-color:var(--gold); }
.fld--row{ display:flex; gap:18px; flex-wrap:wrap; }
.chk{ display:flex; align-items:center; gap:7px; cursor:pointer; }
.chk span{ font-family:var(--f-cond); font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:#bfb3a0; }
.chk input{ accent-color:var(--gold); width:17px; height:17px; }
.booth__tip{ font-family:var(--f-cond); font-size:13px; letter-spacing:.05em; color:#7b7066; margin:0; }

.booth__screen{
  position:relative; min-height:320px; border:5px solid #241d1a; border-radius:6px;
  background:
    radial-gradient(circle at 50% 40%, #1b1512, #0a0807 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
  display:flex; flex-direction:column; overflow:hidden;
}
.jumbo{
  flex:1; display:grid; place-items:center; text-align:center; padding:26px 18px;
  font-family:var(--f-display); line-height:1.02;
}
.jumbo__idle{ font-size:22px; letter-spacing:.24em; color:#3f362f; }
.jumbo__idle i{ font-family:var(--f-cond); font-style:normal; font-size:14px; letter-spacing:.3em; }
.jumbo .line{ display:block; opacity:0; transform:translateY(14px) scale(.96); }
.jumbo .line.in{ animation:pop .45s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes pop{ to{ opacity:1; transform:none; } }
.jumbo .l-sm{ font-family:var(--f-cond); font-weight:700; font-size:clamp(13px,2.4vw,17px); letter-spacing:.3em; color:var(--gold); }
.jumbo .l-md{ font-size:clamp(20px,4vw,30px); color:var(--canvas); letter-spacing:.02em; margin:6px 0; }
.jumbo .l-xl{
  font-size:clamp(34px,8vw,72px); color:var(--gold); letter-spacing:-.01em; margin:8px 0;
  text-shadow:0 0 26px rgba(255,182,18,.6), 4px 4px 0 var(--burg);
}
.jumbo .l-fx{ font-family:var(--f-cond); font-size:clamp(14px,2.6vw,19px); letter-spacing:.22em; color:#bfb3a0; }
.booth__lights{ display:flex; }
.booth__lights i{ flex:1; height:10px; background:#241d1a; }
.booth__screen.live .booth__lights i{ animation:chase 1s linear infinite; }
.booth__lights i:nth-child(2){ animation-delay:.12s } .booth__lights i:nth-child(3){ animation-delay:.24s }
.booth__lights i:nth-child(4){ animation-delay:.36s } .booth__lights i:nth-child(5){ animation-delay:.48s }
.booth__lights i:nth-child(6){ animation-delay:.6s }
@keyframes chase{ 0%,100%{ background:#241d1a } 50%{ background:var(--gold) } }
.booth__screen.live{ animation:flashbulb 2.4s ease-out; }
@keyframes flashbulb{ 0%{ box-shadow:inset 0 0 90px rgba(255,182,18,.55) } 100%{ box-shadow:inset 0 0 0 rgba(255,182,18,0) } }

/* ============================================================
   FIGHT CARD
   ============================================================ */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:18px; }
.fighter{
  position:relative; background:var(--canvas); color:var(--ink);
  border:4px solid var(--ink); box-shadow:8px 8px 0 rgba(0,0,0,.5);
  padding:0; text-align:left; cursor:pointer; overflow:hidden;
  transition:transform .12s, box-shadow .12s;
  font-family:var(--f-body);
}
.fighter:hover{ transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--burg); }
.fighter.open{ box-shadow:11px 11px 0 var(--gold); }
.fighter__top{ display:flex; justify-content:space-between; align-items:center; padding:6px 10px; color:#fff; }
.fighter--red .fighter__top{ background:var(--red); }
.fighter--blue .fighter__top{ background:var(--blue); }
.fighter__corner,.fighter__rec{ font-family:var(--f-cond); font-weight:700; font-size:11px; letter-spacing:.2em; }
.fighter__body{ padding:16px 16px 18px; }
.fighter__name{ font-family:var(--f-display); font-size:clamp(24px,3.4vw,32px); line-height:.98; margin:0; }
.fighter__nick{ font-family:var(--f-hand); font-size:21px; color:var(--burg); display:block; margin:2px 0 8px; }
.fighter__style{
  font-family:var(--f-cond); font-weight:700; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:#6a5c4c; border-top:2px solid #cdbfa4; border-bottom:2px solid #cdbfa4;
  padding:5px 0; margin-bottom:10px;
}
.fighter__blurb{ font-size:15px; line-height:1.45; margin:0 0 10px; color:#33291f; }
.fighter__tops{ font-family:var(--f-cond); font-size:15px; letter-spacing:.03em; color:#5a4c3c; margin:0; }
.fighter__more{ max-height:0; overflow:hidden; transition:max-height .35s ease; background:#e3d7c2; }
.fighter.open .fighter__more{ max-height:360px; }
.fighter__more-in{ padding:14px 16px 16px; border-top:3px dashed #b9a887; }
.fighter__row{
  display:flex; justify-content:space-between; gap:10px;
  font-family:var(--f-cond); font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 0; border-bottom:1px solid #cbbb9b; color:#4a3d2f;
}
.fighter__row b{ color:var(--ink); }
.fighter__fin{ font-family:var(--f-display); font-size:17px; color:var(--burg); margin:12px 0 0; }
.fighter__tap{
  position:absolute; right:10px; bottom:8px; font-family:var(--f-cond); font-size:11px;
  letter-spacing:.18em; color:#9c8c74;
}
.fighter.belt-holder .fighter__body::before{
  content:"🏆 HOLDS THE BELT"; display:inline-block; font-family:var(--f-cond); font-weight:700;
  font-size:11px; letter-spacing:.18em; background:var(--gold); color:var(--ink);
  padding:3px 8px; margin-bottom:8px; border:2px solid var(--ink);
}

/* ============================================================
   TALE OF THE TAPE
   ============================================================ */
.sec--tape{ background:#100c0b; }
.tape{ background:var(--canvas); color:var(--ink); border:5px solid var(--ink); box-shadow:12px 12px 0 rgba(0,0,0,.5); padding:22px 18px; }
.tape__head{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin-bottom:20px; }
.tape__corner{ display:block; font-family:var(--f-cond); font-weight:700; font-size:11px; letter-spacing:.24em; color:#fff; padding:3px 8px; margin-bottom:6px; }
.tape__fighter--red .tape__corner{ background:var(--red); }
.tape__fighter--blue .tape__corner{ background:var(--blue); }
.tape select{
  width:100%; font-family:var(--f-display); font-size:clamp(15px,2.6vw,22px);
  background:#fff; color:var(--ink); border:3px solid var(--ink); padding:8px; border-radius:2px;
}
.tape__meta{ display:block; font-family:var(--f-cond); font-size:13px; letter-spacing:.1em; color:#6a5c4c; margin-top:6px; text-transform:uppercase; }
.tape__vs{ font-family:var(--f-display); font-size:clamp(20px,4vw,34px); color:var(--red); }
.tape__rows{ display:grid; gap:9px; }
.trow{ display:grid; grid-template-columns:1fr 130px 1fr; align-items:center; gap:8px; }
.trow__label{ font-family:var(--f-cond); font-weight:700; font-size:12px; letter-spacing:.18em; text-align:center; color:#4a3d2f; }
.trow__bar{ height:22px; background:#dfd3ba; border:2px solid var(--ink); position:relative; overflow:hidden; }
.trow__bar i{ position:absolute; top:0; bottom:0; width:0; transition:width .7s cubic-bezier(.2,.9,.25,1); }
.trow__bar--l i{ right:0; background:repeating-linear-gradient(45deg,var(--red) 0 7px,#a81a26 7px 14px); }
.trow__bar--r i{ left:0; background:repeating-linear-gradient(45deg,var(--blue) 0 7px,#162e6e 7px 14px); }
/* value chip — sits on top of the hatch fill, so it stays legible at any width */
.trow__bar span{
  position:absolute; top:1px; font-family:var(--f-cond); font-weight:700; font-size:12px;
  color:var(--ink); background:var(--canvas-2); border:2px solid var(--ink);
  padding:0 5px; line-height:14px; letter-spacing:.04em;
}
.trow__bar--l span{ left:4px } .trow__bar--r span{ right:4px }
.tape__verdict{ text-align:center; margin-top:22px; padding-top:18px; border-top:3px double var(--ink); }
.tape__out{ font-family:var(--f-display); font-size:clamp(17px,3.2vw,26px); color:var(--burg); margin:14px 0 0; line-height:1.2; }
@media (max-width:620px){ .trow{ grid-template-columns:1fr 92px 1fr; } .trow__label{ font-size:10px; letter-spacing:.1em; } }

/* ============================================================
   ROUNDS
   ============================================================ */
.rounds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-bottom:44px; }
.round{
  background:#171210; border:3px solid #2f2622; border-left:8px solid var(--gold);
  padding:18px; position:relative;
  opacity:0; transform:translateY(20px);
}
.round.in{ animation:rise .55s ease forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.round__n{ font-family:var(--f-display); font-size:13px; letter-spacing:.28em; color:var(--gold); }
.round__t{ font-family:var(--f-display); font-size:26px; margin:4px 0 8px; color:var(--canvas); line-height:1; }
.round__b{ margin:0; font-size:15.5px; color:#bfb3a0; }
.round__x{ font-family:var(--f-hand); font-size:19px; color:var(--tomato); display:block; margin-top:9px; }

.classified{
  position:relative; max-width:640px; margin:0 auto; text-align:center;
  background:var(--canvas); color:var(--ink); border:5px solid var(--ink);
  box-shadow:12px 12px 0 rgba(0,0,0,.5); padding:28px 22px 24px; transform:rotate(.6deg);
}
.classified__stamp{
  position:absolute; top:14px; right:-6px; transform:rotate(9deg);
  font-family:var(--f-display); font-size:18px; letter-spacing:.16em; color:var(--red);
  border:4px solid var(--red); padding:4px 12px; opacity:.85;
}
.classified h3{ font-family:var(--f-display); font-size:clamp(28px,5vw,44px); margin:0; }
.classified__by{ font-family:var(--f-cond); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:#6a5c4c; margin:2px 0 18px; }
.redact{ display:grid; gap:9px; margin-bottom:18px; }
.redact span{ display:block; height:17px; background:var(--ink); margin:0 auto; transition:transform .18s; }
.redact.jiggle span{ animation:nudge .32s; }
@keyframes nudge{ 25%{ transform:translateX(-5px) } 75%{ transform:translateX(5px) } }
.classified__msg{ font-family:var(--f-hand); font-size:22px; color:var(--burg); min-height:30px; margin:12px 0 6px; }
.classified .hand{ color:var(--burg); }   /* gold-on-cream is too faint here */

/* ============================================================
   ROOM
   ============================================================ */
.sec--room{ background:linear-gradient(180deg,#0d0a09,#131010); }
.room{ display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start; }
@media (max-width:880px){ .room{ grid-template-columns:1fr; } }
.room__plan svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
.plan-label{ font-family:'Anton',sans-serif; font-size:22px; fill:#0E0B0A; letter-spacing:.06em; }
.plan-tiny{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; fill:#0E0B0A; letter-spacing:.14em; }
.hot{ cursor:pointer; transition:transform .15s; transform-origin:center; }
.hot:hover,.hot:focus{ outline:none; transform:scale(1.035); }
.hot:hover .plan-label,.hot:focus .plan-label{ fill:var(--burg); }
.hot.sel{ filter:drop-shadow(0 0 12px rgba(255,182,18,.95)); }
.room__panel{
  background:#171210; border:3px solid #2f2622; border-top:7px solid var(--gold);
  padding:22px; position:sticky; top:70px;
}
.room__kicker{ font-family:var(--f-cond); font-weight:700; font-size:12px; letter-spacing:.24em; color:var(--gold); }
.room__panel h3{ font-family:var(--f-display); font-size:clamp(24px,3.6vw,34px); margin:6px 0 10px; line-height:1.02; }
.room__panel p{ margin:0; color:#c4b8a5; font-size:16px; }
.room__attrib{ font-family:var(--f-cond); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#7b7066 !important; margin-top:12px !important; }

/* ============================================================
   GAME DAY
   ============================================================ */
.sec--gameday{ background:linear-gradient(135deg,var(--burg),#4a0f1c 60%,#2a0910); border-top:5px solid var(--gold); }
.gameday{ display:grid; grid-template-columns:1.35fr 1fr; gap:28px; align-items:center; }
@media (max-width:820px){ .gameday{ grid-template-columns:1fr; } }
.gameday__copy p{ color:#f0e3cf; }
.gameday__score{ display:grid; gap:10px; }
.scorebug{
  display:flex; justify-content:space-between; align-items:baseline;
  background:#0B0908; border:3px solid var(--gold); padding:10px 16px;
}
.scorebug--away{ border-color:#8a7a5c; }
.scorebug--clock{ border-color:#5c534a; }
.scorebug__t{ font-family:var(--f-cond); font-weight:700; font-size:14px; letter-spacing:.24em; color:#bfb3a0; }
.scorebug__n{ font-family:var(--f-display); font-size:40px; color:var(--gold); line-height:1; }
.scorebug--clock .scorebug__n{ font-size:30px; color:#e8dcc6; }

/* ============================================================
   CORNERS
   ============================================================ */
.pull{ margin:0 0 34px; padding:0; border-left:8px solid var(--gold); padding-left:20px; }
.pull p{ font-family:var(--f-display); font-size:clamp(24px,5.2vw,50px); line-height:1.04; margin:0; color:var(--canvas); }
.pull em{ font-style:normal; color:var(--gold); }
.pull cite{ display:block; font-family:var(--f-cond); font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:#7b7066; font-style:normal; margin-top:10px; }

.corners{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .corners{ grid-template-columns:1fr; } }
.corner{ background:var(--canvas); color:var(--ink); border:4px solid var(--ink); box-shadow:9px 9px 0 rgba(0,0,0,.5); padding:0 0 18px; }
.corner__tag{ display:block; font-family:var(--f-cond); font-weight:700; font-size:12px; letter-spacing:.26em; color:#fff; padding:6px 16px; }
.corner--red .corner__tag{ background:var(--red); }
.corner--blue .corner__tag{ background:var(--blue); }
.corner h3{ font-family:var(--f-display); font-size:clamp(30px,5.6vw,46px); margin:14px 16px 8px; line-height:.95; }
.corner h3 small{ font-family:var(--f-hand); font-size:.55em; color:var(--burg); }
.corner ul{ margin:0; padding:0 18px 0 34px; }
.corner li{ margin-bottom:8px; font-size:16px; color:#33291f; }
.corner li::marker{ color:var(--red); }
.corner--blue li::marker{ color:var(--blue); }

.thirdcorner{
  margin-top:18px; background:#171210; border:3px solid #2f2622; border-left:8px solid var(--basil);
  padding:16px 18px;
}
.thirdcorner span{ font-family:var(--f-cond); font-weight:700; font-size:12px; letter-spacing:.26em; color:var(--basil); }
.thirdcorner p{ margin:6px 0 0; color:#c4b8a5; }

.nickname{ margin-top:34px; max-width:760px; }
.nickname h3{ font-family:var(--f-display); font-size:clamp(26px,4.6vw,42px); margin:0 0 10px; color:var(--gold); }
.nickname p{ color:#c9bda9; font-size:17.5px; }
.nickname em{ font-style:normal; font-family:var(--f-hand); font-size:1.35em; color:var(--gold); }

/* ============================================================
   BELT + OPENING
   ============================================================ */
.sec--belt{ background:#100c0b; }
.belt{ text-align:center; }
.belt svg{ max-width:420px; filter:drop-shadow(0 0 30px rgba(255,182,18,.32)); }
.belt.flash svg{ animation:beltflash .9s ease; }
@keyframes beltflash{ 50%{ filter:drop-shadow(0 0 70px rgba(255,182,18,1)) brightness(1.5); } }
.belt__holder{ font-family:var(--f-cond); font-size:18px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:12px 0 4px; }
.belt__note{ font-family:var(--f-cond); font-size:15px; letter-spacing:.06em; color:#8a7c6c; margin:0; }

.sec--open{ background:linear-gradient(180deg,#0d0a09,#0B0908); padding-bottom:66px; }
.sec--open .bill{ text-align:center; }
.sec--open p{ color:#c4b8a5; }
.sec--open .btn--huge{ margin-top:26px; }
.counter{ font-family:var(--f-cond); font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:#7b7066; margin-top:14px; }
.counter span{ color:var(--gold); font-size:19px; }
/* the last thing you see — a quiet stamp, so it beats `.sec--open p` on specificity */
.sec--open .round1{ font-family:var(--f-display); font-size:clamp(22px,4.4vw,40px); color:var(--burg); margin-top:34px; letter-spacing:.12em; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); border-top:5px solid var(--gold); padding:44px 0 60px; text-align:center; }
.foot p{ color:#8a7c6c; font-size:15px; margin:6px 0; }
.foot strong{ color:#c9bda9; }
.foot__mark{ font-family:var(--f-display); font-size:40px; color:var(--canvas) !important; letter-spacing:.02em; margin:0 0 10px !important; }
.foot__mark span{ color:var(--gold); }
.foot__liah{ max-width:620px; margin:16px auto 0 !important; }
.foot__tiny{ font-family:var(--f-cond); font-size:13px; letter-spacing:.08em; color:#5c534a !important; max-width:560px; margin:20px auto 0 !important; }

/* ---------- confetti ---------- */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden; }
.pep{
  position:absolute; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #e0563f, #a3241c 72%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.22);
  animation:fall linear forwards;
}
@keyframes fall{ to{ transform:translateY(115vh) rotate(720deg); opacity:.15; } }

/* ---------- reveal ---------- */
.sec .wrap > *{ }
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{ transition:opacity .6s ease, transform .6s ease; opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .round{ opacity:1; transform:none; }
}