/* ============================================================================
   styles.css — "Retro Mexico '86" design system
   paper-cream canvas · warm ink · terracotta / teal / marigold accents
   hard-offset shadows · thick borders · sticker flags · halftone print texture
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper:#F2E7CC; --paper-2:#EAD9B6; --card:#FBF5E6; --card-2:#F5EAD2;
  --ink:#231A11; --ink-2:#6E5C45; --ink-3:#9a896f;
  --terracotta:#D8552E; --teal:#168B79; --marigold:#EFA01E; --pink:#E1457E; --blue:#2E6FB0;
  --line:#231A11;
  --r:16px; --r-sm:10px;
  --sh:5px 5px 0 var(--ink); --sh-lg:8px 8px 0 var(--ink); --sh-sm:3px 3px 0 var(--ink);
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(var(--ink) 1.15px, transparent 1.15px);
  background-size:22px 22px;
  background-position:-11px -11px;
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb,var(--marigold) 38%, transparent) 0 90px, transparent 220px),
    radial-gradient(circle at 96% 12%, color-mix(in srgb,var(--teal) 30%, transparent) 0 70px, transparent 200px),
    radial-gradient(circle at 90% 96%, color-mix(in srgb,var(--terracotta) 30%, transparent) 0 80px, transparent 230px);
}
a{color:inherit;}
h1,h2,h3{font-family:var(--disp); line-height:0.98; margin:0; letter-spacing:-0.01em;}
.mono{font-family:var(--mono);}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* ---- generic blocks ----------------------------------------------------- */
.panel{
  background:var(--card); border:3px solid var(--ink); border-radius:var(--r);
  box-shadow:var(--sh-lg);
}
.tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  padding:5px 11px; border:2.5px solid var(--ink); border-radius:999px; background:var(--card);
  box-shadow:var(--sh-sm); white-space:nowrap;
}
.section-head{display:flex; align-items:flex-end; gap:14px; margin:46px 0 18px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px,3.4vw,40px); font-weight:800;}
.section-head .kick{font-family:var(--mono); font-size:13px; color:var(--ink-2); font-weight:700; padding-bottom:4px;}
.collapsible-btn{
  cursor:pointer; user-select:none; display:flex; align-items:center; gap:10px;
}
.collapsible-btn .chev{font-family:var(--mono); transition:transform .2s; font-size:18px;}
.collapsible-btn[aria-expanded="false"] .chev{transform:rotate(-90deg);}

/* ---- HEADER ------------------------------------------------------------- */
header.masthead{
  border-bottom:3px solid var(--ink); background:var(--terracotta);
  background-image:repeating-linear-gradient(135deg, transparent 0 16px, rgba(0,0,0,.05) 16px 32px);
  color:var(--card); position:relative; overflow:hidden;
}
.masthead .wrap{padding-top:22px; padding-bottom:22px; position:relative;}
.masthead .top{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.brandline{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.hostflags{font-size:26px; letter-spacing:2px; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25));}
.masthead h1{
  font-size:clamp(38px,7.5vw,86px); font-weight:800; color:var(--card);
  text-shadow:4px 4px 0 var(--ink); margin:10px 0 4px; letter-spacing:-0.02em;
}
.masthead .sub{font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:0.14em; font-size:clamp(11px,1.6vw,15px); color:var(--card);}
.statusbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px;}
.statuspill{
  background:var(--card); color:var(--ink); border:2.5px solid var(--ink); border-radius:999px;
  padding:7px 14px; font-family:var(--mono); font-weight:700; font-size:13px; box-shadow:var(--sh-sm);
  display:inline-flex; align-items:center; gap:8px;
}
.dot-live{width:11px;height:11px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 var(--pink);animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pink) 70%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.btn{
  cursor:pointer; font-family:var(--mono); font-weight:700; font-size:13px;
  border:2.5px solid var(--ink); border-radius:999px; padding:7px 14px; background:var(--marigold);
  color:var(--ink); box-shadow:var(--sh-sm); transition:transform .08s, box-shadow .08s;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink);}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn.ghost{background:var(--card);}
.btn.teal{background:var(--teal); color:var(--card);}

/* ---- HEADLINE BAND ------------------------------------------------------ */
.headline{margin-top:26px;}
.headline .panel{padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;}
.bignum{font-family:var(--disp); font-weight:800; line-height:0.85; display:flex; align-items:baseline; gap:14px;}
.bignum .n{font-size:clamp(64px,12vw,140px); color:var(--terracotta); text-shadow:3px 3px 0 var(--ink);}
.bignum .lab{font-size:clamp(20px,3vw,34px); max-width:320px;}
.bignum .lab small{display:block; font-family:var(--mono); font-size:13px; color:var(--ink-2); font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-top:6px;}
.headline-side{display:flex; flex-direction:column; gap:10px; align-items:flex-end; text-align:right;}
.stagechip{font-family:var(--disp); font-weight:800; font-size:clamp(20px,2.6vw,30px); padding:6px 18px; border:3px solid var(--ink); border-radius:999px; background:var(--teal); color:var(--card); box-shadow:var(--sh);}

/* countdown */
.countdown{display:flex; gap:10px; margin-top:4px;}
.cd-cell{background:var(--ink); color:var(--card); border-radius:10px; padding:8px 12px; text-align:center; min-width:62px;}
.cd-cell b{font-family:var(--disp); font-size:30px; display:block; line-height:1;}
.cd-cell span{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--marigold);}

/* ---- SURVIVOR BOARD (hero) --------------------------------------------- */
.board{display:flex; flex-direction:column; gap:14px;}
.prow{
  background:var(--card); border:3px solid var(--ink); border-radius:var(--r);
  box-shadow:var(--sh); padding:16px 18px; display:grid;
  grid-template-columns:62px 1fr auto; gap:18px; align-items:center;
  position:relative; transition:transform .12s, box-shadow .12s;
}
.prow.clickable{cursor:pointer;}
.prow.clickable:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);}
.prow.out{background:var(--card-2);}
.prow.out .pname{ text-decoration:line-through; text-decoration-thickness:3px; color:var(--ink-2);}
.prow.out .stickers .sticker{filter:grayscale(1) opacity(.55);}
.prow.top1{background:color-mix(in srgb,var(--marigold) 26%, var(--card)); box-shadow:var(--sh-lg); border-width:3px;}
.prow.top2{background:color-mix(in srgb,var(--teal) 14%, var(--card));}
.prow.top3{background:color-mix(in srgb,var(--terracotta) 12%, var(--card));}

.placebadge{
  width:54px; height:54px; border-radius:14px; border:3px solid var(--ink); background:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:var(--sh-sm);
  font-family:var(--disp); font-weight:800;
}
.placebadge .pl{font-size:26px; line-height:0.9;}
.placebadge .px{font-family:var(--mono); font-size:9px; font-weight:700;}
.top1 .placebadge{background:var(--marigold);}
.top2 .placebadge{background:var(--teal); color:var(--card);}
.top3 .placebadge{background:var(--terracotta); color:var(--card);}

.pmain{min-width:0;}
.pname{font-family:var(--disp); font-weight:800; font-size:clamp(22px,2.6vw,30px); line-height:1; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.pmeta{font-family:var(--mono); font-size:12px; color:var(--ink-2); font-weight:700; margin-top:5px; text-transform:uppercase; letter-spacing:.04em; display:flex; gap:14px; flex-wrap:wrap;}
.pmeta b{color:var(--ink);}

.stickers{display:flex; gap:10px; margin-top:11px; flex-wrap:wrap;}
.sticker{
  position:relative; width:60px; height:62px; border:2.5px solid var(--ink); border-radius:12px;
  background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:var(--sh-sm); transition:transform .1s;
}
.sticker:nth-child(3n+1){transform:rotate(-3deg);}
.sticker:nth-child(3n+2){transform:rotate(2deg);}
.sticker:nth-child(3n+3){transform:rotate(-1deg);}
.sticker .fl{font-size:26px; line-height:1; filter:drop-shadow(1px 1px 0 rgba(0,0,0,.15));}
.sticker .nm{font-family:var(--mono); font-size:8.5px; font-weight:700; margin-top:3px; max-width:54px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sticker .stg{position:absolute; top:-9px; right:-7px; font-family:var(--mono); font-size:8px; font-weight:700; background:var(--ink); color:var(--card); border-radius:6px; padding:2px 4px; border:1.5px solid var(--card);}
.sticker.dead{filter:grayscale(1) opacity(.5);}
.sticker.dead::after{
  content:"OUT"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:800; font-size:15px; color:var(--terracotta);
  transform:rotate(-14deg); text-shadow:1px 1px 0 var(--card); letter-spacing:1px;
}
.sticker.champ{background:var(--marigold); transform:rotate(0) scale(1.05);}
.sticker.champ .crown{position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:16px;}

.pstatus{display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.badge{font-family:var(--mono); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:6px 13px; border:2.5px solid var(--ink); border-radius:999px; box-shadow:var(--sh-sm); white-space:nowrap; display:inline-flex; align-items:center; gap:6px;}
.badge.in{background:var(--teal); color:var(--card);}
.badge.dead{background:var(--ink); color:var(--card);}
.badge.champ{background:var(--marigold); color:var(--ink);}
.lives{display:flex; gap:5px;}
.life{width:14px; height:14px; border-radius:50%; border:2px solid var(--ink); background:var(--card);}
.life.on{background:var(--teal);}
.life.off{background:var(--card); position:relative;}
.life.off::after{content:"✕"; position:absolute; inset:0; font-size:9px; display:flex; align-items:center; justify-content:center; color:var(--ink-2);}

.spoon{font-size:14px;}

/* expandable detail */
.pdetail{grid-column:1/-1; margin-top:4px; border-top:2.5px dashed var(--ink); padding-top:14px; display:none;}
.prow.open .pdetail{display:block;}
.pdetail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px;}
.teamcard{border:2.5px solid var(--ink); border-radius:12px; padding:11px 13px; background:var(--paper); box-shadow:var(--sh-sm);}
.teamcard h4{font-family:var(--disp); font-weight:800; font-size:18px; display:flex; align-items:center; gap:8px;}
.teamcard .tline{font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-top:6px; font-weight:700;}
.teamcard.dead{opacity:.6;}
.teamcard .res{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap;}
.rchip{font-family:var(--mono); font-size:11px; font-weight:700; padding:3px 7px; border-radius:7px; border:2px solid var(--ink);}
.rchip.W{background:var(--teal); color:var(--card);} .rchip.D{background:var(--marigold);} .rchip.L{background:var(--card-2);}

/* ---- ELIMINATIONS LOG --------------------------------------------------- */
.logwrap{padding:6px 6px;}
.log{display:flex; flex-direction:column;}
.logitem{display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-bottom:2px dashed color-mix(in srgb,var(--ink) 25%, transparent);}
.logitem:last-child{border-bottom:none;}
.logitem .tstamp{font-family:var(--mono); font-size:11px; color:var(--ink-2); font-weight:700; min-width:96px; padding-top:3px;}
.logitem .body{font-size:16px;}
.logitem.person{background:color-mix(in srgb,var(--terracotta) 12%, transparent); border-radius:10px;}
.logitem.person .body{font-family:var(--disp); font-weight:800; font-size:21px;}
.logitem .ic{font-size:22px; line-height:1;}
.logempty{padding:30px; text-align:center; font-family:var(--mono); color:var(--ink-2); font-weight:700;}

/* ---- MATCH STRIP -------------------------------------------------------- */
.strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.match{border:3px solid var(--ink); border-radius:14px; background:var(--card); box-shadow:var(--sh); padding:14px 16px;}
.match .when{font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; display:flex; justify-content:space-between; gap:8px;}
.match .when .gp{background:var(--ink); color:var(--card); padding:1px 6px; border-radius:5px;}
.match .row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px;}
.match .tn{display:flex; align-items:center; gap:8px; font-weight:600; font-size:16px;}
.match .tn .fl{font-size:21px;}
.match .sc{font-family:var(--disp); font-weight:800; font-size:22px; min-width:26px; text-align:center;}
.match.livecard{border-color:var(--pink); box-shadow:5px 5px 0 var(--pink);}
.owntag{display:inline-block; font-family:var(--mono); font-size:9px; font-weight:700; background:var(--marigold); border:1.5px solid var(--ink); border-radius:5px; padding:1px 5px; margin-left:4px;}
.vs{font-family:var(--mono); font-size:11px; color:var(--ink-2); font-weight:700;}

/* ---- GROUP TABLES + BRACKET -------------------------------------------- */
.groups{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.gtable{border:3px solid var(--ink); border-radius:14px; background:var(--card); box-shadow:var(--sh); overflow:hidden;}
.gtable h3{font-family:var(--disp); font-weight:800; font-size:18px; background:var(--ink); color:var(--card); padding:8px 14px; display:flex; justify-content:space-between;}
.gtable table{width:100%; border-collapse:collapse; font-size:13px;}
.gtable td,.gtable th{padding:6px 10px; text-align:center; font-family:var(--mono); font-weight:700;}
.gtable th{font-size:9px; color:var(--ink-2); text-transform:uppercase; border-bottom:2px solid var(--ink);}
.gtable td.t{text-align:left; font-family:var(--body); font-weight:600; font-size:14px;}
.gtable tr.q{background:color-mix(in srgb,var(--teal) 15%, transparent);}
.gtable tr.q3{background:color-mix(in srgb,var(--marigold) 18%, transparent);}
.gtable .own{font-size:9px;}

.bracket{display:flex; gap:26px; overflow-x:auto; padding:8px 4px 18px;}
.bcol{display:flex; flex-direction:column; gap:14px; min-width:200px;}
.bcol h4{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); margin-bottom:2px;}
.btie{border:2.5px solid var(--ink); border-radius:10px; background:var(--card); box-shadow:var(--sh-sm); overflow:hidden;}
.bteam{display:flex; align-items:center; gap:7px; padding:6px 10px; font-size:13px; font-weight:600;}
.bteam.win{background:color-mix(in srgb,var(--teal) 18%, transparent);}
.bteam.lose{opacity:.5; text-decoration:line-through;}
.bteam+.bteam{border-top:2px solid var(--ink);}
.bteam .bs{margin-left:auto; font-family:var(--mono); font-weight:700;}
.bteam .fl{font-size:16px;}

/* ---- SIM / DEMO CONTROL DOCK ------------------------------------------- */
.simdock{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:50;
  background:var(--ink); color:var(--card); border-radius:16px; padding:14px 18px;
  box-shadow:0 8px 0 rgba(0,0,0,.25), 0 14px 30px rgba(0,0,0,.3);
  width:min(860px, calc(100vw - 28px)); border:3px solid var(--ink);
}
.simdock.collapsed{padding:10px 16px;}
.simdock .srow{display:flex; align-items:center; gap:14px;}
.simdock .stitle{font-family:var(--mono); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--marigold); display:flex; align-items:center; gap:8px;}
.simdock .asof{font-family:var(--mono); font-size:12px; color:var(--card); margin-left:auto; opacity:.85;}
.scrub{flex:1; display:flex; align-items:center; gap:12px;}
input[type=range].slider{ -webkit-appearance:none; appearance:none; height:8px; border-radius:6px; background:var(--ink-2); outline:none; flex:1;}
input[type=range].slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--marigold); border:3px solid var(--card); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4);}
input[type=range].slider::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--marigold); border:3px solid var(--card); cursor:pointer;}
.simbtn{cursor:pointer; font-family:var(--mono); font-weight:700; font-size:12px; border:2px solid var(--card); border-radius:999px; padding:6px 12px; background:transparent; color:var(--card); white-space:nowrap;}
.simbtn:hover{background:var(--card); color:var(--ink);}
.simbtn.play{background:var(--marigold); color:var(--ink); border-color:var(--marigold);}
.presets{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px;}
.presets .simbtn{font-size:11px; padding:5px 10px;}
.mode-toggle{display:flex; border:2.5px solid var(--ink); border-radius:999px; overflow:hidden; box-shadow:var(--sh-sm);}
.mode-toggle button{cursor:pointer; border:none; background:var(--card); font-family:var(--mono); font-weight:700; font-size:12px; padding:7px 14px; color:var(--ink);}
.mode-toggle button.active{background:var(--ink); color:var(--marigold);}

/* ---- FOOTER ------------------------------------------------------------- */
footer{margin:60px 0 130px; }
footer .panel{padding:28px 30px;}
footer h3{font-family:var(--disp); font-weight:800; font-size:24px; margin-bottom:12px;}
footer ul{margin:0; padding-left:22px;}
footer li{margin:6px 0; font-size:15px;}
footer .src{font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-top:18px; border-top:2px dashed var(--ink); padding-top:12px;}

.notice{background:var(--marigold); border:2.5px solid var(--ink); border-radius:10px; padding:8px 14px; font-family:var(--mono); font-weight:700; font-size:12px; display:inline-flex; gap:8px; align-items:center; box-shadow:var(--sh-sm);}
.collapse-body{overflow:hidden;}
.collapse-body[hidden]{display:none;}

@media (max-width:720px){
  .prow{grid-template-columns:48px 1fr; gap:12px;}
  .pstatus{grid-column:2; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap:wrap;}
  .placebadge{width:46px;height:46px;}
  .headline .panel{flex-direction:column; align-items:flex-start;}
  .headline-side{align-items:flex-start; text-align:left;}
  .simdock .srow{flex-wrap:wrap;}
  .scrub{order:3; width:100%;}
}
@media print{ .simdock{display:none;} body{background:#fff;} }