/* ============================================================
   World Cup '26 Sweepstake — retro Panini sticker-book theme
   ============================================================ */

:root {
  --paper: #f2e7cf;
  --paper-2: #e9dab6;
  --ink: #20283f;
  --ink-soft: #44506e;
  --red: #d33a2c;
  --red-dk: #a72519;
  --teal: #1f8a70;
  --teal-dk: #14624f;
  --mustard: #f0b429;
  --mustard-dk: #c98a08;
  --blue: #2b5fb0;
  --cream: #fbf6e9;
  --shadow: rgba(32, 40, 63, 0.28);

  --d1: #d33a2c; /* division accent colours */
  --d2: #2b5fb0;
  --d3: #1f8a70;
  --d4: #8a4fbf;
  --d5: #c98a08;

  --r: 12px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% -10%, #fff7e6 0, transparent 45%),
    radial-gradient(circle at 90% 0%, #ffe9c9 0, transparent 40%),
    var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* -------------------------------- header -------------------------------- */
.site-header {
  position: relative; z-index: 2;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 18px, transparent 18px 36px),
    linear-gradient(180deg, var(--ink) 0%, #161d30 100%);
  color: var(--cream);
  border-bottom: 6px solid var(--mustard);
  box-shadow: 0 6px 0 var(--red), 0 10px 24px var(--shadow);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 20px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.title-block { display: flex; flex-direction: column; line-height: 1; }
.kicker {
  font-family: 'Archivo', sans-serif; font-weight: 900; letter-spacing: .28em;
  font-size: .68rem; color: var(--mustard); margin-bottom: 6px;
}
.title {
  font-family: 'Bungee', sans-serif; margin: 0; font-size: clamp(2.1rem, 6vw, 3.6rem);
  letter-spacing: .01em; text-shadow: 3px 3px 0 var(--red), 6px 6px 0 rgba(0,0,0,.25);
}
.title .accent { color: var(--mustard); }
.subtitle { font-family: 'Anton', sans-serif; letter-spacing: .12em; font-size: .95rem; margin-top: 8px; color: #d9e0f0; text-transform: uppercase; }

.pot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--cream); color: var(--ink); border: 4px solid var(--mustard);
  border-radius: var(--r); padding: 10px 20px; transform: rotate(2deg);
  box-shadow: 4px 4px 0 var(--red-dk);
}
.pot-label { font-family: 'Archivo'; font-weight: 900; letter-spacing: .2em; font-size: .62rem; color: var(--red-dk); }
.pot-amount { font-family: 'Bungee', sans-serif; font-size: 2rem; line-height: 1; color: var(--teal-dk); }
.pot-sub { font-size: .66rem; font-weight: 700; color: var(--ink-soft); margin-top: 3px; }

/* -------------------------------- tabs -------------------------------- */
.tabs {
  max-width: var(--maxw); margin: 0 auto; padding: 6px 12px 0;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tab {
  font-family: 'Anton', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  font-size: .95rem; cursor: pointer; border: none; color: #cfd6ea;
  background: transparent; padding: 12px 16px 14px; border-radius: 10px 10px 0 0;
  transition: transform .08s ease, background .15s ease, color .15s ease;
}
.tab:hover { color: #fff; transform: translateY(-2px); }
.tab.active {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 -3px 0 var(--mustard) inset;
}

/* -------------------------------- layout -------------------------------- */
#main { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 26px 18px 60px; }
.view { display: none; }
.view.active { display: block; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.loading { text-align: center; padding: 60px; font-family: 'Anton'; letter-spacing: .1em; color: var(--ink-soft); }

.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.view-title {
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0; color: var(--ink);
  position: relative; padding-left: 16px;
}
.view-title::before { content: ''; position: absolute; left: 0; top: 8%; height: 84%; width: 7px; background: var(--red); border-radius: 4px; }
.view-sub { color: var(--ink-soft); font-weight: 700; font-size: .92rem; max-width: 60ch; }

/* generic buttons */
.btn {
  font-family: 'Anton', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; border: 3px solid var(--ink); background: var(--mustard); color: var(--ink);
  padding: 10px 18px; border-radius: 10px; font-size: 1rem;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .07s ease, box-shadow .07s ease;
}
.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: .45; cursor: not-allowed; box-shadow: 3px 3px 0 var(--ink); transform: none; }
.btn.big { font-size: 1.5rem; padding: 16px 34px; }
.btn.green { background: var(--teal); color: #fff; }
.btn.red { background: var(--red); color: #fff; }
.btn.ghost { background: var(--cream); }
.btn.small { font-size: .8rem; padding: 6px 12px; box-shadow: 2px 2px 0 var(--ink); }

input, select, textarea {
  font-family: 'Archivo'; font-weight: 600; font-size: .95rem; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 9px; padding: 9px 11px; background: var(--cream);
}
label { font-weight: 700; font-size: .82rem; color: var(--ink-soft); }

/* ============================ STICKERS ============================ */
.sticker {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: #fff; border: 5px solid #fff;
  box-shadow: 0 4px 10px var(--shadow), inset 0 0 0 2px rgba(0,0,0,.05);
  outline: 2px solid rgba(0,0,0,.12); outline-offset: -5px;
}
.sticker .flagwrap {
  position: relative; aspect-ratio: 4 / 3; background: #dfe5ee; overflow: hidden;
}
.sticker .flagwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sticker .gloss {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 70%, rgba(255,255,255,.18) 100%);
}
.sticker .meta { padding: 7px 8px 8px; text-align: center; background: #fff; }
.sticker .team-name { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .02em; font-size: .92rem; line-height: 1.05; color: var(--ink); }
.sticker .rank { font-size: .66rem; font-weight: 900; color: var(--ink-soft); letter-spacing: .04em; }
.sticker .divbadge {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  font-family: 'Bungee'; font-size: .62rem; color: #fff; padding: 2px 7px; border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.35); border: 1.5px solid rgba(255,255,255,.7);
}
.sticker .stagebadge {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  font-family: 'Anton'; font-size: .6rem; letter-spacing: .05em; text-transform: uppercase;
  background: var(--ink); color: var(--mustard); padding: 2px 7px; border-radius: 5px;
}
.sticker .stagebadge.win { background: var(--mustard); color: var(--ink); }
.sticker .stagebadge.out { background: #6b7280; color: #fff; opacity:.9; }

.d-1 { background: var(--d1); } .d-2 { background: var(--d2); }
.d-3 { background: var(--d3); } .d-4 { background: var(--d4); } .d-5 { background: var(--d5); }
.d-out { background: #6b7280; }

/* shiny division-1 foil */
.sticker.shiny::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity:.5;
  background: linear-gradient(115deg, transparent 30%, rgba(255,0,200,.5), rgba(0,200,255,.5), rgba(255,235,0,.5), transparent 70%);
  background-size: 300% 300%; animation: foil 4s linear infinite;
}
@keyframes foil { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* blank "NO TEAM" sticker */
.sticker.blank { background: repeating-linear-gradient(45deg, #efe6d0 0 12px, #e6dabd 12px 24px); border-color:#fff; }
.sticker.blank .flagwrap { background: transparent; display:flex; align-items:center; justify-content:center; }
.sticker.blank .noteam { font-family:'Bungee'; color: var(--red-dk); font-size: 1rem; text-align:center; transform: rotate(-8deg); text-shadow: 1px 1px 0 #fff; padding: 6px; }
.sticker.empty { background: #00000008; border: 4px dashed rgba(32,40,63,.3); box-shadow:none; outline:none; }
.sticker.empty .slot-ph { aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; color: rgba(32,40,63,.35); font-family:'Anton'; font-size:1.6rem; }

/* reveal animations */
.sticker.pop { animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { 0%{ transform: scale(.2) rotate(-12deg); opacity:0 } 60%{ transform: scale(1.12) rotate(3deg); } 100%{ transform: scale(1) rotate(0); opacity:1 } }
.sticker.cycling .flagwrap { filter: blur(1px) saturate(1.3); }
.sticker.cycling { box-shadow: 0 0 0 3px var(--mustard), 0 4px 14px var(--shadow); }

/* ============================ ALBUM ============================ */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.player-card {
  background: var(--cream); border: 4px solid var(--ink); border-radius: 16px; padding: 14px;
  box-shadow: 6px 6px 0 var(--shadow); position: relative;
}
.player-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.player-name { font-family: 'Anton', sans-serif; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; }
.player-rank-no { font-family:'Bungee'; font-size:.8rem; background: var(--ink); color: var(--mustard); border-radius: 50%; width: 26px; height: 26px; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; }
.money-tag {
  font-family: 'Bungee'; font-size: 1.05rem; color: var(--teal-dk);
  background: #fff; border: 3px solid var(--teal); border-radius: 10px; padding: 4px 10px; box-shadow: 2px 2px 0 var(--teal-dk);
}
.money-tag.zero { color: var(--ink-soft); border-color: var(--ink-soft); box-shadow: 2px 2px 0 var(--ink-soft); }
.slot-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.player-card .sticker .meta { padding: 5px 4px 6px; }
.player-card .sticker .team-name { font-size: .72rem; }
.prize-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.prize-chip { font-size:.64rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; background: var(--mustard); color: var(--ink); border-radius: 20px; padding: 3px 9px; border: 2px solid var(--ink); }

/* ============================ DRAW ROOM ============================ */
.draw-stage { background: var(--cream); border: 4px solid var(--ink); border-radius: 16px; padding: 18px; box-shadow: 6px 6px 0 var(--shadow); }
.draw-control {
  display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(180deg,#fff,#f4ecd6); border: 3px dashed var(--ink); border-radius: 14px; padding: 16px; margin-bottom: 18px;
}
.next-banner { font-family:'Anton'; font-size: 1.15rem; text-transform: uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:12px; }
.next-pill { font-family:'Bungee'; color:#fff; padding: 6px 14px; border-radius: 30px; font-size: 1rem; box-shadow: 2px 2px 0 rgba(0,0,0,.3); }
.draw-actions { display:flex; align-items:center; gap: 12px; flex-wrap: wrap; }
.toggle { display:flex; align-items:center; gap:8px; font-family:'Anton'; letter-spacing:.04em; font-size:.85rem; text-transform:uppercase; cursor:pointer; user-select:none; }
.toggle input { width: 18px; height: 18px; }
.practice-flag { font-family:'Bungee'; color: var(--red); font-size:.85rem; }

.draw-board { display:flex; flex-direction:column; gap: 10px; }
.draw-row { display:grid; grid-template-columns: 150px 1fr; align-items:center; gap: 12px; }
.draw-row .who { font-family:'Anton'; font-size: 1.15rem; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.draw-slots { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.draw-slots .sticker .meta { padding: 4px 3px 5px; }
.draw-slots .sticker .team-name { font-size:.66rem; }
.host-note { text-align:center; font-family:'Anton'; letter-spacing:.06em; color: var(--ink-soft); padding: 8px; }
.complete-banner { text-align:center; font-family:'Bungee'; color: var(--teal-dk); font-size: 1.4rem; padding: 10px; }

/* ============================ PRIZES ============================ */
.prize-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 18px; margin-bottom: 30px; }
.prize-card {
  background: var(--cream); border: 4px solid var(--ink); border-radius: 16px; overflow:hidden;
  box-shadow: 6px 6px 0 var(--shadow); display:flex; flex-direction:column;
}
.prize-top { padding: 14px 16px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.prize-top.p1 { background: linear-gradient(135deg,var(--mustard),var(--mustard-dk)); color: var(--ink); }
.prize-top.p2 { background: linear-gradient(135deg,var(--teal),var(--teal-dk)); }
.prize-top.p3 { background: linear-gradient(135deg,var(--blue),#1c3f78); }
.prize-top.p4 { background: linear-gradient(135deg,var(--d4),#5e2f8a); }
.prize-top.p5 { background: linear-gradient(135deg,var(--red),var(--red-dk)); }
.prize-label { font-family:'Anton'; font-size: 1.15rem; text-transform:uppercase; letter-spacing:.03em; line-height:1.05; }
.prize-amount { font-family:'Bungee'; font-size: 1.6rem; white-space:nowrap; }
.prize-body { padding: 14px 16px; display:flex; flex-direction:column; gap: 10px; flex:1; }
.prize-holder { display:flex; align-items:center; gap: 12px; }
.prize-holder .sticker { width: 78px; flex: 0 0 78px; }
.holder-name { font-family:'Anton'; font-size: 1.3rem; text-transform:uppercase; }
.holder-sub { font-size:.78rem; font-weight:700; color: var(--ink-soft); }
.unclaimed { font-family:'Anton'; color: var(--ink-soft); letter-spacing:.04em; }
.provisional { font-size:.66rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color: var(--red-dk); background:#fff0d8; border:2px dashed var(--mustard-dk); border-radius:6px; padding:2px 7px; align-self:flex-start; }
.prize-detail { font-size:.82rem; font-weight:600; color: var(--ink-soft); }

/* standings table */
.standings { background: var(--cream); border: 4px solid var(--ink); border-radius: 16px; overflow:hidden; box-shadow: 6px 6px 0 var(--shadow); }
.standings table { width:100%; border-collapse: collapse; }
.standings th { background: var(--ink); color: var(--mustard); font-family:'Anton'; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; padding: 10px 12px; text-align:left; }
.standings td { padding: 10px 12px; border-top: 2px solid rgba(32,40,63,.12); font-weight:700; }
.standings tr:nth-child(even) td { background: rgba(255,255,255,.4); }
.standings .pos { font-family:'Bungee'; color: var(--ink-soft); width: 36px; }
.standings .nm { font-family:'Anton'; font-size:1.1rem; text-transform:uppercase; }
.standings .amt { font-family:'Bungee'; color: var(--teal-dk); text-align:right; }
.standings .amt.zero { color: var(--ink-soft); }
.standings .pz { color: var(--ink-soft); font-size:.8rem; font-weight:700; }
.standings tr.leader td { background: #fff6df !important; }

/* ============================ TEAMS ============================ */
.div-section { margin-bottom: 26px; }
.div-header { display:flex; align-items:center; gap:12px; margin: 0 0 12px; }
.div-chip { font-family:'Bungee'; color:#fff; padding: 6px 14px; border-radius: 10px; font-size: 1rem; box-shadow: 3px 3px 0 rgba(0,0,0,.25); }
.div-meta { font-family:'Anton'; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); font-size:.9rem; }
.team-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(135px,1fr)); gap: 12px; }
.team-grid .owner { font-size:.66rem; font-weight:900; color: var(--teal-dk); margin-top:5px; letter-spacing:.02em; display:flex; align-items:center; justify-content:center; gap:5px; }
.team-grid .owner.none { color: var(--ink-soft); }

/* ============================ ADMIN ============================ */
.admin-wrap { display:flex; flex-direction:column; gap: 22px; }
.admin-card { background: var(--cream); border: 4px solid var(--ink); border-radius: 16px; padding: 18px; box-shadow: 6px 6px 0 var(--shadow); }
.admin-card h3 { font-family:'Anton'; text-transform:uppercase; letter-spacing:.04em; margin: 0 0 14px; font-size: 1.3rem; }
.field-row { display:flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.field { display:flex; flex-direction:column; gap: 4px; }
.field.grow { flex: 1; min-width: 180px; }
.login-box { max-width: 420px; margin: 30px auto; text-align:center; }
.login-box input { width: 100%; margin: 12px 0; text-align:center; font-size: 1.1rem; }
.admin-msg { font-weight:800; min-height: 20px; }
.admin-msg.ok { color: var(--teal-dk); }
.admin-msg.err { color: var(--red-dk); }
.admin-badge { font-family:'Anton'; letter-spacing:.05em; background: var(--teal); color:#fff; padding:4px 12px; border-radius: 20px; font-size:.78rem; }
.row-list { display:flex; flex-direction:column; gap: 8px; }
.row-item { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; background:#fff; border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; }
.row-item .grow { flex:1; }
.mini-flag { width: 26px; height: 18px; object-fit: cover; border-radius: 3px; border:1px solid rgba(0,0,0,.2); vertical-align: middle; }
.hint { font-size:.78rem; color: var(--ink-soft); font-weight:600; }
.team-status-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 8px; }
.tsg-item { display:flex; align-items:center; gap:8px; background:#fff; border:2px solid var(--ink); border-radius:8px; padding:5px 8px; }
.tsg-item .nm { flex:1; font-weight:800; font-size:.84rem; }
.tsg-item select { padding:5px 6px; font-size:.8rem; }

/* ============================ BROADCAST (full-screen live draw) ============================ */
.broadcast { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; color: var(--cream);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 28px, transparent 28px 56px),
    radial-gradient(circle at 50% -10%, #2b3a66 0, #11162a 62%), #11162a;
  overflow: hidden; font-family: 'Archivo', sans-serif; animation: fadein .3s ease; }
.broadcast .paper-grain { opacity: .25; }

.bc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 26px; border-bottom: 4px solid var(--mustard); background: rgba(0,0,0,.22); }
.bc-div { font-family: 'Bungee'; font-size: clamp(1.1rem, 2.4vw, 2.1rem); color: #fff; padding: 8px 20px; border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.bc-progress { font-family: 'Anton'; letter-spacing: .12em; font-size: clamp(1rem, 1.8vw, 1.5rem); color: var(--mustard); }
.bc-controls { display: flex; gap: 8px; align-items: center; }
.bc-btn { font-size: 1.3rem; line-height: 1; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.28); color: #fff;
  min-width: 50px; height: 50px; padding: 0 10px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s; }
.bc-btn:hover { background: rgba(255,255,255,.22); }
.bc-btn.wide { font-family: 'Anton'; letter-spacing: .05em; font-size: 1rem; text-transform: uppercase; }

.bc-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 70px); padding: 14px 24px; position: relative; min-height: 0; }
.bc-person, .bc-team { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.avatar.av-xl { width: clamp(150px, 21vw, 290px); height: clamp(150px, 21vw, 290px); border-width: 7px; box-shadow: 0 0 0 5px var(--mustard), 0 16px 40px rgba(0,0,0,.55); }
.bc-name { font-family: 'Bungee'; font-size: clamp(1.5rem, 3.6vw, 3.2rem); text-shadow: 3px 3px 0 var(--red); text-align: center; }
.bc-vs { font-family: 'Anton'; font-size: clamp(1.2rem, 2.4vw, 2rem); color: var(--mustard); letter-spacing: .08em; opacity: .85; }
.bc-flag { width: clamp(210px, 30vw, 430px); aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; border: 7px solid #fff; background: #222;
  box-shadow: 0 0 0 5px var(--blue), 0 16px 40px rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.bc-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-flag .bc-q { font-family: 'Bungee'; font-size: clamp(3rem, 8vw, 7rem); color: rgba(255,255,255,.25); }
.bc-flag.blank { background: repeating-linear-gradient(45deg, #3a4566 0 16px, #444f6e 16px 32px); border-color: #fff; box-shadow: 0 0 0 5px var(--red), 0 16px 40px rgba(0,0,0,.55); }
.bc-flag.blank .noteam { font-family: 'Bungee'; color: #fff; font-size: clamp(1.4rem, 3.4vw, 2.6rem); transform: rotate(-7deg); text-shadow: 2px 2px 0 var(--red-dk); }
.bc-team-name { font-family: 'Bungee'; font-size: clamp(1.5rem, 3.6vw, 3.2rem); color: #fff; text-align: center; min-height: 1.1em; }
.bc-team.dim .bc-team-name { color: rgba(255,255,255,.45); }

.bc-pop { animation: bcpop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes bcpop { 0% { transform: scale(.3) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.14) rotate(3deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.bc-spin { box-shadow: 0 0 0 5px var(--mustard), 0 0 30px var(--mustard), 0 16px 40px rgba(0,0,0,.55) !important; }
.bc-flag.bc-drumroll { box-shadow: 0 0 0 5px var(--mustard), 0 0 26px rgba(240,180,41,.55), 0 16px 40px rgba(0,0,0,.55); animation: bcdrum .42s ease-in-out infinite; }
@keyframes bcdrum { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.06) rotate(-1.2deg); } }
.bc-flag.bc-drumroll .bc-q { animation: bcqp .42s ease-in-out infinite; }
@keyframes bcqp { 0%,100% { opacity: .3; transform: scale(1); } 50% { opacity: .85; transform: scale(1.15); } }

/* this-division strip */
.bc-strip { display: flex; gap: 10px; align-items: flex-end; justify-content: center; flex-wrap: wrap; padding: 8px 20px; min-height: 70px; }
.bc-pair { display: flex; flex-direction: column; align-items: center; gap: 3px; animation: bcpop .4s ease; }
.bc-pair .pf { width: 46px; height: 31px; object-fit: cover; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.bc-pair .pf.noflag { background: #444f6e; display: flex; align-items: center; justify-content: center; font-size: .55rem; font-family: 'Anton'; color: #fff; }
.bc-pair .pn { font-size: .68rem; font-weight: 800; color: #cfd6ea; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* pot rail */
.bc-pot { display: flex; gap: 7px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 20px 16px; border-top: 2px dashed rgba(255,255,255,.18); min-height: 56px; }
.bc-pot .label { font-family: 'Anton'; letter-spacing: .08em; color: var(--mustard); margin-right: 6px; font-size: .9rem; }
.bc-pot img { width: 40px; height: 27px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,.35); }
.bc-pot.empty .label { opacity: .5; }

/* intro + complete cards */
.bc-curtain { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 5;
  background: radial-gradient(circle at 50% 50%, rgba(20,26,48,.7), rgba(10,13,26,.95)); text-align: center; padding: 20px; }
.bc-curtain .big { font-family: 'Bungee'; font-size: clamp(2rem, 7vw, 5.5rem); color: #fff; text-shadow: 4px 4px 0 var(--red), 8px 8px 0 rgba(0,0,0,.3); animation: bcslam .5s cubic-bezier(.2,1.4,.4,1); }
.bc-curtain .sub { font-family: 'Anton'; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(1rem, 2.4vw, 1.8rem); color: var(--mustard); }
.bc-curtain .chip { font-family: 'Bungee'; padding: 10px 26px; border-radius: 16px; color: #fff; font-size: clamp(1.2rem,3vw,2.4rem); box-shadow: 0 6px 0 rgba(0,0,0,.3); }
@keyframes bcslam { 0% { transform: scale(2.4); opacity: 0; } 70% { transform: scale(.92); } 100% { transform: scale(1); opacity: 1; } }
.bc-reveal-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 6; pointer-events: none;
  font-family: 'Bungee'; font-size: clamp(1.6rem, 4.5vw, 3.6rem); color: #fff; background: var(--red); padding: 14px 34px; border-radius: 16px;
  border: 5px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,.5); text-align: center; animation: bcslam .45s cubic-bezier(.2,1.4,.4,1); }
.bc-reveal-banner.blank { background: #535f82; }

@media (max-width: 760px) {
  .bc-stage { flex-direction: column; gap: 10px; }
  .avatar.av-xl { width: 120px; height: 120px; }
  .bc-flag { width: 70vw; }
}

/* ============================ AVATARS (retro Panini portraits) ============================ */
.avatar { position: relative; flex: 0 0 auto; border-radius: 16px; overflow: hidden; background: #c8cedb;
  border: 4px solid #fff; outline: 2px solid rgba(32,40,63,.18); outline-offset: -4px;
  box-shadow: 0 0 0 3px var(--mustard), 0 5px 12px var(--shadow); }
.avatar.circle { border-radius: 50%; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 50% 40%;
  filter: contrast(1.1) saturate(.82) sepia(.24) brightness(1.04); }
/* halftone print dots */
.avatar .av-grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .22;
  background-image: radial-gradient(rgba(0,0,0,.75) 21%, transparent 23%); background-size: 4px 4px; }
/* warm vintage ink wash */
.avatar .av-tone { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .15;
  background: linear-gradient(160deg, #ffd27a, #b5552e); }
/* sticker gloss */
.avatar .av-gloss { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 72%, rgba(255,255,255,.18) 100%); }
.avatar.noimg { display: flex; align-items: center; justify-content: center; font-family: 'Bungee'; color: var(--ink);
  background: linear-gradient(135deg, var(--mustard), var(--mustard-dk)); }
.av-lg { width: 116px; height: 116px; }
.av-md { width: 78px; height: 78px; }
.av-sm { width: 54px; height: 54px; border-width: 3px; box-shadow: 0 0 0 2px var(--mustard), 0 3px 8px var(--shadow); }
.av-xs { width: 40px; height: 40px; border-width: 3px; border-radius: 10px; box-shadow: 0 0 0 2px var(--mustard), 0 2px 6px var(--shadow); }
.av-xxs { width: 26px; height: 26px; border-width: 2px; border-radius: 8px; box-shadow: 0 0 0 2px var(--mustard), 0 2px 4px var(--shadow); }
.av-lg.noimg { font-size: 2.2rem; } .av-md.noimg { font-size: 1.4rem; } .av-sm.noimg { font-size: 1rem; } .av-xs.noimg { font-size: .82rem; } .av-xxs.noimg { font-size: .58rem; }
.player-id { display: flex; align-items: center; gap: 12px; }
.nm-wrap { display: flex; align-items: center; gap: 10px; }

/* ============================ misc ============================ */
.site-footer { position: relative; z-index:2; text-align:center; padding: 18px; color: var(--ink-soft); font-weight:700; font-size:.8rem; }
.status-pill { color: var(--teal); margin-right: 6px; }
.status-pill.off { color: var(--red); }
.empty-note { text-align:center; padding: 40px; color: var(--ink-soft); font-family:'Anton'; letter-spacing:.06em; }
.divider { height: 0; border: none; border-top: 3px dashed rgba(32,40,63,.25); margin: 20px 0; }

@media (max-width: 560px) {
  .draw-row { grid-template-columns: 1fr; }
  .draw-row .who { margin-bottom: 2px; }
  .header-inner { justify-content: center; text-align:center; }
  .pot { transform: none; }
  .album-grid { grid-template-columns: 1fr; }
}

/* ============================ STADIUM BACKDROP (broadcast) ============================ */
.bc-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .5; }
.bc-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(17,22,42,.5), rgba(17,22,42,.82)); }
.broadcast > .bc-top, .broadcast > .bc-stage, .broadcast > .bc-strip, .broadcast > .bc-pot { position: relative; z-index: 1; }

/* ============================ VHS / CRT REC MODE ============================ */
.crt-overlay { position: fixed; inset: 0; z-index: 3000; pointer-events: none; opacity: 0; transition: opacity .35s;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 70%, rgba(0,0,0,.26) 100%); }
.crt-overlay::after { content: ''; position: absolute; left: 0; right: 0; height: 140px; top: -140px;
  background: linear-gradient(rgba(255,255,255,.06), transparent); animation: crtscan 7s linear infinite; }
@keyframes crtscan { to { top: 100%; } }
body.crt-on .crt-overlay { opacity: 1; animation: crtflick 4s steps(1) infinite; }
/* subtle VHS flicker on the OVERLAY only — never put filter on <body> (it
   reparents fixed elements like the broadcast and breaks full-screen layout). */
@keyframes crtflick { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .86; } 96% { opacity: 1; } 98% { opacity: .92; } }
.crt-rec { position: fixed; top: 16px; left: 18px; z-index: 3001; display: none; align-items: center; gap: 8px;
  font-family: 'Anton'; letter-spacing: .08em; color: #fff; font-size: 1.1rem; text-shadow: 0 1px 3px #000; }
body.crt-on .crt-rec { display: flex; }
.crt-rec .rec-dot { width: 14px; height: 14px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px #ff3b30; animation: recblink 1s steps(2) infinite; }
@keyframes recblink { 50% { opacity: .2; } }
.crt-rec .rec-time { font-family: 'Bungee'; font-size: .95rem; }

.foot-btn { font-family: 'Anton'; letter-spacing: .05em; background: rgba(0,0,0,.05); border: 2px solid rgba(32,40,63,.25);
  color: var(--ink-soft); border-radius: 8px; padding: 4px 10px; cursor: pointer; margin-left: 8px; font-size: .78rem; }
.foot-btn:hover { background: rgba(0,0,0,.1); }
.foot-btn.active { background: var(--red); color: #fff; border-color: var(--red-dk); }

/* ============================ TV INTRO ============================ */
.tv-intro { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #05060a; transition: opacity .6s; }
.tv-intro.leaving { opacity: 0; }
.tv-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .42; filter: saturate(1.1); }
.tv-intro::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); }
.tv-content { position: relative; z-index: 2; text-align: center; color: var(--cream); }
.tv-intro.powering .tv-content, .tv-intro.powering .tv-bg { opacity: 0; }
.tv-intro.powering::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: #fff; box-shadow: 0 0 30px #fff; z-index: 3; animation: poweron .7s ease-out forwards; }
@keyframes poweron { 0% { transform: scaleX(.02) scaleY(40); opacity: 1; } 60% { transform: scaleX(1) scaleY(40); } 100% { transform: scaleX(1) scaleY(.3); opacity: .5; } }
.tv-kicker { font-family: 'Archivo'; font-weight: 900; letter-spacing: .3em; color: var(--mustard); font-size: .8rem; margin-bottom: 10px; }
.tv-title { font-family: 'Bungee'; font-size: clamp(2.6rem, 9vw, 6rem); margin: 0; text-shadow: 4px 4px 0 var(--red), 8px 8px 0 rgba(0,0,0,.4); }
.tv-intro.go .tv-title { animation: tvslam .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes tvslam { 0% { transform: scale(1.4) rotate(-2deg); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }
.tv-sub { font-family: 'Anton'; letter-spacing: .35em; font-size: clamp(1rem, 3vw, 1.8rem); color: #d9e0f0; margin: 6px 0 26px; }
.tv-start { font-family: 'Bungee'; font-size: clamp(1.1rem, 2.6vw, 1.8rem); background: var(--mustard); color: var(--ink); border: 4px solid #fff; border-radius: 14px; padding: 14px 34px; cursor: pointer; box-shadow: 0 8px 0 var(--mustard-dk), 0 14px 30px rgba(0,0,0,.5); animation: startpulse 1.1s ease-in-out infinite; }
.tv-start:hover { transform: translateY(-2px); }
@keyframes startpulse { 50% { transform: scale(1.06); } }

/* ============================ LED TICKER ============================ */
.ticker { position: relative; z-index: 2; background: #0a0b08; border-bottom: 3px solid var(--mustard); overflow: hidden; height: 34px; box-shadow: inset 0 0 18px rgba(0,0,0,.85); }
.ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, #0a0b08, transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, #0a0b08, transparent); }
.ticker-track { display: inline-block; white-space: nowrap; will-change: transform; animation: tickerscroll linear infinite; }
@keyframes tickerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { font-family: 'Anton', sans-serif; color: #ffb000; text-shadow: 0 0 6px rgba(255,176,0,.65); letter-spacing: .14em; font-size: .92rem; line-height: 34px; text-transform: uppercase; }
.ticker-sep { color: #5a4a10; margin: 0 16px; }

/* ============================ SOUND DECK ============================ */
.sound-deck { position: fixed; right: 14px; bottom: 14px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sd-toggle { width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--ink); background: var(--mustard); font-size: 1.4rem; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.sd-toggle:hover { transform: translate(-1px,-1px); }
.sd-panel { display: none; flex-direction: column; gap: 10px; background: var(--ink); border: 3px solid var(--mustard); border-radius: 12px; padding: 12px; box-shadow: 4px 4px 0 rgba(0,0,0,.45); width: 200px; }
.sound-deck.open .sd-panel { display: flex; }
.sd-row { display: flex; align-items: center; gap: 8px; color: var(--cream); font-family: 'Anton'; font-size: .78rem; letter-spacing: .08em; }
.sd-row input[type=range] { flex: 1; accent-color: var(--mustard); }
.sd-stabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-stabs button { font-family: 'Anton'; letter-spacing: .03em; font-size: .72rem; text-transform: uppercase; cursor: pointer; border: 2px solid var(--mustard); background: #2a3350; color: var(--cream); border-radius: 8px; padding: 9px 4px; }
.sd-stabs button:hover { background: var(--mustard); color: var(--ink); }
.sd-stabs button:active { transform: translateY(1px); }

/* ============================ DISCO / KONAMI ============================ */
.disco-overlay { position: fixed; inset: 0; z-index: 4000; pointer-events: none; mix-blend-mode: hue; opacity: .55; animation: discohue .5s steps(1) infinite; }
@keyframes discohue { 0%{background:#ff0040} 16%{background:#ff8a00} 33%{background:#ffe600} 50%{background:#00d437} 66%{background:#00c2ff} 83%{background:#7a4dff} 100%{background:#ff0040} }
.disco-flag { position: fixed; top: -60px; z-index: 4001; pointer-events: none; will-change: transform; animation-name: discofall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes discofall { to { transform: translateY(112vh) rotate(540deg); } }