/* Shane's World Cup HQ — "Sticker Storm" design system.
   Deep-navy canvas, white stickers with hard gold offset shadows, gold
   press-buttons, comic bubbles. Data-dense modules stay clean white for
   legibility; rotation + chaos live on accents and match cards. */
:root{
  --saltire:#005EB8; --deep:#071A52; --deep2:#020617; --sky:#7DD3FC; --sky2:#38BDF8;
  --gold:#FFD166; --grass:#14B86A; --danger:#F94144; --thistle:#8B5CF6;
  --ink:#0b1633; --muted:#5b6b8c; --line:#071A52; --paper:#ffffff;
  --shadow-hard:8px 8px 0 var(--gold); --shadow-soft:0 16px 38px rgba(2,6,23,.45);
  --radius-xl:30px; --radius-lg:24px; --radius-md:18px;
  --font-display:'Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:#fff;font-family:var(--font-body);min-height:100vh;overflow-x:hidden;
  background:radial-gradient(circle at 18% -5%,#0ea5e9 0,#0b3aa0 26%,#071A52 58%,#020617 100%) fixed;
}
.page{max-width:1080px;margin:auto;padding:18px 16px 96px}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);background:rgba(7,26,82,.55);border-bottom:1px solid rgba(255,255,255,.12)}
.topbar-inner{max-width:1080px;margin:auto;padding:10px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#fff;font-weight:1000}
.brand img{width:50px;height:50px;border-radius:15px;border:3px solid #fff;box-shadow:var(--shadow-soft);transform:rotate(-4deg)}
.brand span{font-family:var(--font-display);line-height:.95}
.nav{display:flex;gap:8px;overflow:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;border:0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 13px;text-decoration:none;color:#fff;font-weight:900;font-size:14px}
.nav a.active,.nav a:hover{background:var(--gold);color:#1b2550;border-color:var(--gold)}

/* ---- typography ---- */
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.02em}
h1{font-size:clamp(38px,8vw,72px);line-height:.9;letter-spacing:-.04em}
h2{font-size:clamp(22px,3.2vw,34px);line-height:.98}
h3{font-size:20px}
.eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--danger);color:#fff;border:3px solid var(--deep);border-radius:999px;padding:6px 12px;font-weight:1000;font-size:13px;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-2deg)}
.lead{font-size:17px;line-height:1.45}
.meta{font-size:13px;color:var(--muted);font-weight:800}

/* ---- sticker + glass surfaces ---- */
.sticker,.hero-card,.panel{position:relative;overflow:hidden}
.hero-card,.panel{background:var(--paper);color:var(--ink);border:4px solid var(--deep);border-radius:var(--radius-xl);box-shadow:var(--shadow-hard)}
.panel{padding:18px}
.panel.blue{box-shadow:8px 8px 0 var(--sky2)}
.panel.green{box-shadow:8px 8px 0 var(--grass)}
.panel.yellow{box-shadow:8px 8px 0 var(--gold)}
.panel h2,.panel h3,.hero-card h1,.hero-card h2{color:var(--saltire)}

/* hero */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:stretch;margin-top:18px}
.hero-card{padding:26px;transform:rotate(-1deg);background:radial-gradient(circle at 90% 8%,#fff 0 9%,transparent 10%),linear-gradient(135deg,#fff 0%,#eef6ff 60%,#fff3cb 100%)}
.hero-card h1{margin:14px 0 12px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.mascot-stack{border:4px solid var(--deep);border-radius:var(--radius-xl);box-shadow:8px 8px 0 var(--thistle);padding:16px;display:grid;gap:12px;background:linear-gradient(160deg,#0ea5e9,#005EB8 60%,#071A52);transform:rotate(1.5deg)}
.mascot-stack img{width:100%;max-height:210px;object-fit:contain;filter:drop-shadow(0 10px 0 rgba(0,0,0,.22))}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:16px;background:var(--gold);color:#1b2550;text-decoration:none;font-weight:1000;padding:12px 17px;box-shadow:0 7px 0 rgba(7,26,82,.55);cursor:pointer}
.btn.alt{background:#fff;color:var(--saltire);box-shadow:0 7px 0 rgba(7,26,82,.3)}
.btn:hover,.btn:active{transform:translateY(3px);box-shadow:0 4px 0 rgba(7,26,82,.55)}

/* chaos strip */
.chaos-strip{display:flex;gap:10px;overflow:auto;margin:20px 0 4px;padding-bottom:8px;scrollbar-width:none}
.chaos-strip::-webkit-scrollbar{display:none}
.chaos-pill{flex:0 0 auto;background:#fff;color:var(--ink);border:3px solid var(--deep);border-radius:999px;padding:9px 14px;font-weight:1000;box-shadow:4px 5px 0 rgba(7,26,82,.45)}
.chaos-pill:nth-child(odd){transform:rotate(-2deg)}
.chaos-pill:nth-child(even){transform:rotate(2deg);box-shadow:4px 5px 0 var(--gold)}

/* comic speech bubble */
.bubble{background:#fff;color:var(--ink);border:4px solid var(--deep);border-radius:26px 26px 26px 6px;padding:14px 16px;font-weight:900;box-shadow:6px 6px 0 var(--danger);margin:18px 0}

/* grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-9{grid-column:span 9}.span-12{grid-column:span 12}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.section-title small{font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}

/* scatter stat stickers */
.scatter{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.mini{border:4px solid var(--deep);border-radius:24px;background:#fff;color:var(--ink);padding:14px;box-shadow:6px 6px 0 rgba(7,26,82,.35)}
.mini:nth-child(2){transform:rotate(2deg);background:#FEF3C7;box-shadow:6px 6px 0 var(--gold)}
.mini:nth-child(3){transform:rotate(-2deg);background:#ECFDF5;box-shadow:6px 6px 0 var(--grass)}
.mini:nth-child(4){transform:rotate(1.5deg);background:#F5F3FF;box-shadow:6px 6px 0 var(--thistle)}
.mini .tiny{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mini .big{font-size:34px;font-weight:1000;line-height:1;margin:4px 0;font-family:var(--font-display)}

/* match cards (white stickers, slight jaunt) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.match-card,.team-card{border:3px solid var(--deep);background:#fff;color:var(--ink);border-radius:22px;padding:14px;box-shadow:5px 6px 0 rgba(7,26,82,.4)}
.card-grid>*:nth-child(odd){transform:rotate(-1deg)}
.card-grid>*:nth-child(even){transform:rotate(1deg)}
.match-card.heroic{background:linear-gradient(135deg,#fff,#fff2bd);box-shadow:6px 7px 0 var(--gold);border-width:4px}
.match-card:hover{transform:translateY(-2px) rotate(0)}
.scoreline{font-family:var(--font-display);font-size:20px;display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--deep)}
.versus{margin:auto;font-family:var(--font-display);font-size:15px;color:var(--danger)}
.badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.badge{border:2px solid var(--deep);border-radius:999px;background:var(--gold);color:#1b2550;padding:4px 9px;font-size:12px;font-weight:1000}
.badge.blue{background:var(--saltire);color:#fff}
.badge.green{background:var(--grass);color:#fff}
.flag{font-size:24px}

/* odds list rows */
.odds-rows{display:flex;flex-direction:column;gap:7px}
.odds-row{display:flex;align-items:center;gap:9px;border:2px solid var(--deep);border-radius:13px;padding:7px 11px;background:#fff;color:var(--ink);text-decoration:none}
a.odds-row:hover{background:var(--gold)!important}
a.odds-row .price::after{content:" ↗";font-size:11px;opacity:.55}
.odds-row .rank{width:16px;color:var(--muted);font-weight:1000}
.odds-row .name{flex:1;font-weight:900}
.odds-row .price{font-weight:1000;font-variant-numeric:tabular-nums}
.namelist{color:var(--ink);margin-top:6px;line-height:1.9;font-weight:800;font-size:13px}

/* wire / empty states */
.wire-note{background:#fff;color:var(--muted);border:3px dashed var(--deep);border-radius:16px;padding:12px;font-weight:800}

/* match pop-out */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(2,6,23,.74);z-index:50;align-items:flex-end;justify-content:center;padding:0}
.modal-backdrop.open{display:flex}
.match-modal{width:min(640px,100%);max-height:92vh;overflow:auto;background:#fff;color:var(--ink);border:5px solid var(--deep);border-radius:30px 30px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.modal-head{position:sticky;top:0;background:#fff3cf;border-bottom:4px solid var(--deep);display:flex;justify-content:space-between;gap:12px;padding:14px 16px;z-index:1}
.modal-head h2{color:var(--saltire);font-size:22px}
.close{border:0;border-radius:999px;background:#EEF2FF;font-weight:1000;font-size:20px;width:42px;height:42px;cursor:pointer}
.modal-body{padding:16px}
.rival-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.team-rival{border:4px solid var(--deep);border-radius:24px;background:#f4f8ff;padding:16px;position:relative}
.team-rival.heroic{background:linear-gradient(135deg,#eef6ff,#fff3bd);box-shadow:5px 5px 0 var(--gold)}
.ribbon{position:absolute;right:10px;top:10px;transform:rotate(4deg);background:var(--danger);color:#fff;border:3px solid var(--deep);border-radius:12px;padding:4px 8px;font-weight:1000;font-size:12px}
.lineup{margin-top:12px;border-top:3px dotted rgba(7,26,82,.25);padding-top:10px}
.odds-section{margin-top:18px}
.player-odds-grid{display:grid;grid-template-columns:1fr;gap:12px}
.player-card{border:3px solid var(--deep);border-radius:18px;background:#EFF6FF;padding:14px}
.player-card h4{margin:0 0 4px;font-family:var(--font-display);font-size:18px;color:var(--saltire)}
.odds-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.odds-pill{display:inline-flex;gap:5px;align-items:center;border:2px solid var(--deep);border-radius:999px;background:#FEF3C7;padding:6px 10px;color:var(--ink);font-weight:1000;font-size:13px;text-decoration:none}
a.odds-pill:hover{background:var(--gold)}

/* tables (used by inner pages) */
.table-wrap{overflow:auto;border:3px solid var(--deep);border-radius:18px;background:#fff;color:var(--ink)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:11px;border-bottom:2px solid #e5e7eb;text-align:left}
th{background:#e8f1ff;font-family:var(--font-display);color:var(--deep)}

/* page header band */
.pagehead{margin:18px 0 6px}
.pagehead h1{font-size:clamp(34px,6vw,56px)}
.pagehead .lead{color:rgba(255,255,255,.85);margin-top:6px}

/* toolbar / toggles */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.toggle{border:3px solid var(--deep);background:#fff;color:var(--ink);border-radius:999px;padding:9px 14px;font-weight:1000;cursor:pointer;box-shadow:4px 5px 0 rgba(7,26,82,.4)}
.toggle.active{background:var(--gold)}

/* knockout bracket */
.ko-board{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin}
.ko-col{flex:0 0 215px;display:flex;flex-direction:column;gap:12px}
.ko-col h3{color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.ko-match{border:3px solid var(--deep);background:#fff;color:var(--ink);border-radius:18px;padding:11px 12px;box-shadow:5px 6px 0 rgba(7,26,82,.4)}
.ko-match.heroic{background:linear-gradient(135deg,#fff,#fff2bd);box-shadow:5px 6px 0 var(--gold)}
.ko-team{font-weight:1000;color:var(--deep);font-size:14px;line-height:1.5}
.ko-match .meta{margin-top:6px}

/* teams grid */
.team-grid{display:flex;flex-wrap:wrap;gap:8px}
.team-pill{border:2px solid var(--deep);border-radius:999px;background:#fff;color:var(--ink);padding:7px 11px;font-weight:900;font-size:13px;box-shadow:3px 4px 0 rgba(7,26,82,.3)}
.team-pill.hero-team{background:var(--gold)}
.team-pill.my-team{background:#e3f3ff}

.footer{margin:30px 0 16px;text-align:center;color:rgba(255,255,255,.7);font-weight:800}
.footer a{color:#fff}
.tartan-corner{position:absolute;right:-18px;bottom:-18px;width:120px;opacity:.18}

/* floating bottom nav (mobile) */
.mobile-tabs{display:none}
@media(max-width:820px){
  .page{padding:12px 12px 92px}
  .topbar-inner{align-items:flex-start;flex-direction:column}
  .nav{width:100%}
  .hero{grid-template-columns:1fr}
  .hero-card{transform:none}
  .grid{grid-template-columns:1fr}
  .span-4,.span-6,.span-8,.span-12{grid-column:1}
  .scatter{grid-template-columns:1fr 1fr}
  .rival-grid{grid-template-columns:1fr}
  .mobile-tabs{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(420px,calc(100% - 20px));z-index:30;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 18px 44px rgba(0,0,0,.4)}
  .mobile-tabs a{text-align:center;text-decoration:none;color:#172554;font-size:12px;font-weight:1000;padding:8px 4px;border-radius:15px}
  .mobile-tabs a:hover{background:#DBEAFE}
}