:root{
  --ink:#0d0d0f;
  --ink-2:#17171b;
  --panel:#1c1c22;
  --panel-2:#25252c;
  --line:#33333c;
  --gold:#c69c4a;
  --gold-bright:#e7bd63;
  --white:#f6f5f2;
  --muted:#9a9aa3;
  --green:#2fae66;
  --radius:16px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.75);
  --font:'Archivo',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--ink);
  color:var(--white);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* Faint pitch / stadium backdrop */
.pitch-bg{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(198,156,74,.14), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(47,174,102,.10), transparent 60%),
    linear-gradient(180deg,#0d0d0f 0%, #121216 100%);
}
.pitch-bg::after{
  content:"";position:absolute;inset:0;opacity:.05;
  background-image:
    linear-gradient(90deg, #fff 1px, transparent 1px),
    linear-gradient(#fff 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}

.screen{max-width:1100px;margin:0 auto;padding:32px 20px 60px}
.hidden{display:none}

/* ---------- HERO ---------- */
.hero{text-align:center;padding:26px 0 10px}
.hero-badges{display:flex;gap:14px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}
.host{
  font-size:.72rem;letter-spacing:.18em;font-weight:600;
  color:var(--muted);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.02);
}
.crest{
  width:118px;height:132px;margin:0 auto 10px;
  display:grid;place-items:center;position:relative;
}
.crest-26{
  font-family:'Archivo Black',var(--font);
  font-size:64px;line-height:.82;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  border:3px solid var(--gold);border-radius:18px;
  padding:14px 22px 10px;
  box-shadow:0 0 44px -8px rgba(198,156,74,.6), inset 0 0 20px rgba(198,156,74,.15);
}
.title{
  font-family:'Archivo Black',var(--font);
  font-size:clamp(2.4rem,7vw,4.4rem);
  letter-spacing:.02em;margin:.15em 0 .1em;
  background:linear-gradient(180deg,#fff, #cfcfcf);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subtitle{color:var(--muted);font-size:.95rem;letter-spacing:.02em;margin:0}

/* ---------- CARDS ---------- */
.cards{
  display:grid;grid-template-columns:1.25fr 1fr;gap:22px;
  margin-top:34px;
}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);
}
.card h2{margin:0 0 18px;font-size:1.15rem;font-weight:800;letter-spacing:.01em}
.card-load{display:flex;flex-direction:column}
.muted{color:var(--muted);font-size:.85rem;margin:.2em 0 1.1em}

.field{display:block;margin-bottom:18px}
.field>span{display:block;font-size:.82rem;color:var(--muted);margin-bottom:8px;font-weight:600}
.field em{color:var(--gold);font-style:normal;font-weight:400}
input[type=text],input[type=search]{
  width:100%;padding:13px 14px;border-radius:11px;
  background:var(--ink);border:1px solid var(--line);color:var(--white);
  font-family:var(--font);font-size:1rem;outline:none;transition:.15s border,.15s box-shadow;
}
#load-code{letter-spacing:.28em;text-transform:uppercase;font-weight:800}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,156,74,.18)}

/* Mode toggle */
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.mode-toggle{grid-template-columns:1fr}}
.mode-opt{
  text-align:left;cursor:pointer;
  background:var(--ink);border:1.5px solid var(--line);
  border-radius:12px;padding:14px;color:var(--white);
  font-family:var(--font);transition:.15s;
}
.mode-opt strong{display:block;font-size:1rem;margin-bottom:5px}
.mode-opt small{color:var(--muted);font-size:.76rem;line-height:1.35;display:block}
.mode-opt u{text-decoration-color:var(--gold);text-underline-offset:2px}
.mode-opt.selected{border-color:var(--gold);background:linear-gradient(180deg,rgba(198,156,74,.14),rgba(198,156,74,.04))}
.mode-opt.selected strong{color:var(--gold-bright)}

/* Buttons */
.btn{
  border:none;cursor:pointer;font-family:var(--font);font-weight:700;
  font-size:.95rem;padding:13px 18px;border-radius:12px;transition:.15s transform,.15s filter;
  letter-spacing:.01em;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#231a06}
.btn-gold:hover{filter:brightness(1.06)}
.btn-outline{background:transparent;border:1.5px solid var(--gold);color:var(--gold-bright)}
.btn-outline:hover{background:rgba(198,156,74,.1)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn-ghost:hover{color:var(--white);border-color:var(--muted)}
.error{color:#e5766f;font-size:.82rem;min-height:1.1em;margin:.6em 0 0}
.foot{text-align:center;color:#5c5c66;font-size:.75rem;margin-top:40px}

/* ---------- CATALOG ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.topbar-left{display:flex;align-items:center;gap:14px}
.mini-crest{
  font-family:'Archivo Black',var(--font);font-size:20px;
  color:#231a06;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
}
.cat-name{font-weight:800;font-size:1.2rem}
.cat-meta{color:var(--muted);font-size:.8rem;margin-top:2px}
.code-chip{
  font-weight:800;letter-spacing:.2em;color:var(--gold-bright);
  background:rgba(198,156,74,.12);padding:2px 8px;border-radius:6px;
  cursor:pointer;user-select:all;
}
.topbar-right{display:flex;gap:10px}

.progress-wrap{display:flex;align-items:center;gap:14px;margin:20px 0 6px}
.progress-bar{flex:1;height:12px;background:var(--panel-2);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .3s ease}
.progress-text{font-weight:800;font-size:.9rem;min-width:96px;text-align:right;color:var(--gold-bright)}

.toolbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:18px 0 8px}
.toolbar input[type=search]{max-width:320px}
.chk{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--gold)}
.hint{color:var(--muted);font-size:.8rem;margin-left:auto}

/* Teams */
.teams{margin-top:14px}
.team{
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line);border-radius:14px;
  margin-bottom:14px;overflow:hidden;
}
.team-head{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:14px 18px;user-select:none;
}
.team-head:hover{background:rgba(255,255,255,.02)}
.team-code{
  font-weight:800;font-size:.78rem;letter-spacing:.06em;color:#231a06;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  padding:5px 9px;border-radius:7px;min-width:46px;text-align:center;
}
.team-name{font-weight:700;font-size:1.02rem;flex:1}
.team-count{font-size:.8rem;color:var(--muted)}
.team-count b{color:var(--gold-bright)}
.chevron{color:var(--muted);transition:transform .2s;font-size:.9rem}
.team.open .chevron{transform:rotate(90deg)}

.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;padding:6px 16px 18px;
}
.team:not(.open) .grid{display:none}

.sticker{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;transition:.12s;position:relative;
}
.sticker:hover{border-color:var(--muted)}
.sticker .box{
  width:18px;height:18px;border-radius:5px;border:2px solid var(--line);
  display:grid;place-items:center;flex-shrink:0;transition:.12s;
}
.sticker .box::after{content:"✓";font-size:12px;font-weight:800;color:#231a06;opacity:0;transform:scale(.5);transition:.12s}
.sticker .num{font-weight:800;font-size:.78rem;color:var(--muted);min-width:34px}
.sticker .lbl{font-size:.78rem;color:var(--white);opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* "marked" styling adapts by mode via data attr on <body> */
.sticker.on{border-color:var(--gold)}
.sticker.on .box{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}
.sticker.on .box::after{opacity:1;transform:scale(1)}
.sticker.on .num{color:var(--gold-bright)}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(30px);
  background:var(--panel-2);color:var(--white);border:1px solid var(--gold);
  padding:12px 20px;border-radius:12px;font-size:.9rem;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow);z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}