/* =====================================================================
   Asuia WM 2026 Tipp-Challenge — Design System
   Premium · Swiss · Sportlich · Dunkel
   ===================================================================== */

:root {
  /* ---- Farbpalette ---- */
  --navy-900: #080b16;   /* tiefster Hintergrund */
  --navy-850: #0b101f;
  --navy-800: #0e1426;   /* Basis-Hintergrund */
  --navy-700: #131a30;   /* Karten */
  --navy-600: #1a2340;
  --line:     #243150;   /* Linien / Rahmen */

  --bordeaux: #8f0f2f;   /* Akzent dunkel */
  --crimson:  #ba143d;   /* Akzent hell (Bordeaux) */
  --crimson-glow: rgba(186, 20, 61, 0.5);

  --gold:     #dfc6a8;   /* Champagner / Preis */
  --gold-deep:#c2a279;
  --gold-2:   #efe0c8;

  --white:    #f6f8ff;
  --mist:     #ccd4e8;   /* sekundärer Text */
  --muted:    #95a0bd;   /* tertiärer Text */

  /* ---- Gradients ---- */
  --grad-gold: linear-gradient(135deg, #efe0c8 0%, #dfc6a8 38%, #c2a279 100%);
  --grad-crimson: linear-gradient(135deg, #d61f4a 0%, #ba143d 45%, #8f0f2f 100%);
  --grad-card: linear-gradient(160deg, rgba(28,38,68,0.72) 0%, rgba(15,21,40,0.86) 100%);

  /* ---- Schrift ---- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  /* ---- Radius / Schatten ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-card: 0 24px 60px -28px rgba(0,0,0,0.85);
  --shadow-glow: 0 0 0 1px rgba(223,198,168,0.18), 0 30px 70px -30px rgba(186,20,61,0.4);

  /* ---- Layout ---- */
  --maxw: 1180px;
  --gutter: clamp(18px, 5vw, 40px);
}



* { box-sizing: border-box; }

/* Sharpen: kein Button fällt auf die dunkle UA-Textfarbe zurück */
button { color: inherit; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--navy-800);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient Hintergrund: Stadionlicht + Bracket-Raster */
.bg-field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(186,20,61,0.20), transparent 60%),
    radial-gradient(1000px 560px at 12% 4%, rgba(223,198,168,0.10), transparent 58%),
    radial-gradient(900px 700px at 50% 120%, rgba(40,60,120,0.28), transparent 60%),
    var(--navy-800);
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 72%);
}
.bg-beams {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.bg-beams span {
  position: absolute; top: -30%; width: 1px; height: 160%;
  background: linear-gradient(180deg, transparent, rgba(223,198,168,0.18), transparent);
  filter: blur(0.5px);
  animation: beam 9s ease-in-out infinite;
}
.bg-beams span:nth-child(1){ left: 18%; animation-delay: 0s; }
.bg-beams span:nth-child(2){ left: 38%; height: 130%; animation-delay: 1.4s; opacity:.6;}
.bg-beams span:nth-child(3){ left: 63%; animation-delay: 2.6s; }
.bg-beams span:nth-child(4){ left: 82%; height: 140%; animation-delay: 3.6s; opacity:.5;}
@keyframes beam {
  0%,100% { transform: translateY(-6%) scaleY(0.9); opacity: .25; }
  50%     { transform: translateY(4%) scaleY(1.05); opacity: .8; }
}

.app { position: relative; z-index: 1; }

/* ---- Container ---- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Typo ---- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
.eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 9px;
}
.lead { color: var(--mist); font-size: clamp(16px, 2.1vw, 19px); line-height: 1.6; }
.text-gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prize-shimmer { background: linear-gradient(100deg, #c2a279 0%, #efe0c8 38%, #fff8ea 50%, #efe0c8 62%, #c2a279 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4.5s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
.text-crimson { color: var(--crimson); }

/* ---- Glass Card ---- */
.glass {
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  border: none; cursor: pointer; border-radius: 999px;
  padding: 16px 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .2s, background .2s;
  position: relative; white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  background: var(--grad-crimson); color: #fff;
  box-shadow: 0 14px 34px -12px var(--crimson-glow), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -14px var(--crimson-glow), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-gold {
  background: var(--grad-gold); color: #2a1d05;
  box-shadow: 0 14px 34px -14px rgba(223,198,168,0.55), inset 0 1px 0 rgba(255,255,255,0.55);
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-ghost {
  background: rgba(255,255,255,0.04); color: var(--white);
  border: 1px solid rgba(255,255,255,0.14);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
.btn-lg { padding: 19px 36px; font-size: 17px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.3); }
.btn-block { width: 100%; }

/* sheen on primary */
.btn-primary::after, .btn-gold::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.45) 48%, transparent 60%);
  background-size: 250% 100%; background-position: 180% 0; opacity: .7;
  transition: background-position .8s ease;
}
.btn-primary:hover::after, .btn-gold:hover::after { background-position: -60% 0; }

/* ---- Live counter + Tips ticker ---- */
.live-counter { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 13.5px; }
.live-counter > b { color: #ff6b82; letter-spacing: .1em; font-size: 11px; font-weight: 800; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b5c; animation: livePulse 1.6s infinite; flex: 0 0 auto; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,92,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,59,92,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); } }
.play-pill { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; color: var(--mist); background: rgba(255,255,255,0.04); border: 1px dashed rgba(223,198,168,0.4); transition: all .2s; font-family: var(--font-body); }
.play-pill:hover { border-style: solid; border-color: rgba(223,198,168,0.7); color: #fff; transform: translateY(-1px); }
.play-pill b { color: var(--gold-2); font-weight: 700; }
.pp-ball { font-size: 17px; display: inline-block; animation: ppBounce 1.4s ease-in-out infinite; }
@keyframes ppBounce { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(180deg); } }
.ticker { margin-top: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(8,11,22,.4); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker-track { display: flex; gap: 34px; width: max-content; padding: 13px 0; animation: tickerMove 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--mist); white-space: nowrap; flex: 0 0 auto; }
.ticker-item b { color: #fff; font-weight: 700; }
.tk-flag { font-size: 17px; }
.tk-team { color: var(--gold-2); font-weight: 600; }
.tk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }

/* ---- Pitch action effects ---- */
.pos-node.on .jersey { animation: jerseyPop .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes jerseyPop { 0% { transform: scale(.55); } 55% { transform: scale(1.24); } 100% { transform: scale(1.04); } }
.pitch-ball { position: absolute; left: 50%; top: 50%; font-size: 18px; z-index: 1; pointer-events: none;
  animation: ballSpin 7s linear infinite; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
@keyframes ballSpin { 0% { transform: translate(-50%,-50%) rotate(0deg) translateY(0); } 50% { transform: translate(-50%,-50%) rotate(180deg) translateY(-7px); } 100% { transform: translate(-50%,-50%) rotate(360deg) translateY(0); } }
.pitch-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle 150px at center, rgba(255,255,255,.07), transparent 72%);
  background-repeat: no-repeat; background-size: 320px 320px; animation: spotSweep 10s ease-in-out infinite; }
@keyframes spotSweep { 0% { background-position: 15% 75%; } 50% { background-position: 85% 25%; } 100% { background-position: 15% 75%; } }
.complete-flash { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 8; }
.complete-flash span { font-family: var(--font-display); font-weight: 800; font-size: clamp(16px,3.4vw,22px); color: #2a1d05;
  background: var(--grad-gold); padding: 11px 22px; border-radius: 999px; box-shadow: 0 16px 44px -10px rgba(223,198,168,.75);
  animation: completePop .5s cubic-bezier(.2,1.4,.4,1); text-align: center; }
@keyframes completePop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---- Hype meter ---- */
.hype { margin-top: 14px; }
.hype-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.hype-label { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #fff; }
.hype-emoji { font-size: 17px; display: inline-block; }
.hype-max .hype-emoji { animation: hypeShake .5s ease-in-out infinite; }
@keyframes hypeShake { 0%,100% { transform: rotate(-12deg) scale(1.1); } 50% { transform: rotate(12deg) scale(1.25); } }
.hype-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }
.hype-fill { height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, #dfc6a8, #e2a24a 45%, #ba143d);
  transition: width .45s cubic-bezier(.2,.9,.3,1.3); box-shadow: 0 0 14px rgba(186,20,61,0.45); }
.hype-max .hype-fill { animation: hypePulse 1.1s ease-in-out infinite; }
@keyframes hypePulse { 0%,100% { box-shadow: 0 0 10px rgba(186,20,61,0.45); } 50% { box-shadow: 0 0 22px rgba(223,198,168,0.8); } }
.hype-reaction { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--gold-2); min-height: 16px; }

/* ---- Brand logo (Wortmarke + Fussball) ---- */
.logo-ball { transform-box: fill-box; transform-origin: center; animation: logoSpin 9s linear infinite; }
@keyframes logoSpin { to { transform: rotate(360deg); } }
.brand-logo { transition: transform .2s; }
.brand-logo:hover { transform: translateY(-1px); }
.brand-logo:hover .logo-ball { animation: logoKick .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes logoKick { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(160deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } }

/* ---- Pills / Chips ---- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--mist);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* ---- Badge (inoffiziell) ---- */
.badge-unofficial {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: var(--mist); background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
}
.badge-unofficial b { color: var(--white); font-weight: 700; }

/* ---- Section spacing ---- */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Trophy ---- */
.trophy-wrap { position: relative; display: grid; place-items: center; }
.trophy-glow {
  position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(223,198,168,0.45), transparent 65%);
  filter: blur(20px); animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ transform: scale(.9); opacity:.6;} 50%{ transform: scale(1.08); opacity:1;} }
.trophy-float { animation: float 6s ease-in-out infinite; transform-origin: center; }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(-1deg);} 50%{ transform: translateY(-14px) rotate(1deg);} }
.spark { transform-box: fill-box; transform-origin: center; animation: spark 3.4s ease-in-out infinite; }
@keyframes spark { 0%,100%{ opacity:.2; transform: scale(.6);} 50%{ opacity:1; transform: scale(1);} }

/* ---- Progress (Funnel) ---- */
.progress-track { display: flex; align-items: center; gap: 0; width: 100%; }
.progress-step { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.progress-node {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; font-family: var(--font-display);
  border: 1.5px solid var(--line); background: var(--navy-700); color: var(--muted);
  transition: all .35s ease; flex: 0 0 auto;
}
.progress-step.active .progress-node { border-color: var(--crimson); color: #fff; background: var(--grad-crimson); box-shadow: 0 0 0 5px rgba(186,20,61,0.14); }
.progress-step.done .progress-node { border-color: var(--gold); color: #2a1d05; background: var(--grad-gold); }
.progress-label { font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.progress-step.active .progress-label { color: #fff; }
.progress-step.done .progress-label { color: var(--gold-2); }
.progress-bar { flex: 1 1 auto; height: 2px; background: var(--line); margin: 0 14px; border-radius: 2px; overflow: hidden; min-width: 18px; }
.progress-bar > i { display:block; height: 100%; width: 0; background: var(--grad-gold); transition: width .5s ease; }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--mist); }
.field label .req { color: var(--crimson); }
.input, .select {
  font-family: var(--font-body); font-size: 15.5px; color: var(--white);
  background: rgba(8,11,22,0.55); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px; width: 100%; transition: border .2s, box-shadow .2s, background .2s;
}
.input::placeholder { color: var(--muted); }
.input:focus, .select:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 4px rgba(186,20,61,0.14); background: rgba(8,11,22,0.75); }
.input.err { border-color: #e0556b; box-shadow: 0 0 0 4px rgba(224,85,107,0.14); }
.field .hint { font-size: 12px; color: var(--muted); }
.field .error-msg { font-size: 12.5px; color: #ff8a9c; display: flex; align-items: center; gap: 6px; }

/* ---- Checkbox ---- */
.check { display: flex; gap: 13px; align-items: flex-start; cursor: pointer; padding: 14px; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); transition: border .2s, background .2s; }
.check:hover { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); }
.check.checked { border-color: rgba(223,198,168,0.4); background: rgba(223,198,168,0.06); }
.check.err { border-color: rgba(224,85,107,0.55); }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px;
  border: 1.5px solid var(--line); background: rgba(8,11,22,0.6); display: grid; place-items: center;
  transition: all .2s; color: #2a1d05;
}
.check.checked .box { background: var(--grad-gold); border-color: transparent; }
.check .box svg { opacity: 0; transform: scale(.4); transition: all .2s; }
.check.checked .box svg { opacity: 1; transform: none; }
.check .ctext { font-size: 14px; line-height: 1.5; color: var(--mist); }
.check .ctext b { color: var(--white); font-weight: 700; }
.check .ctext .opt { color: var(--muted); font-weight: 600; font-size: 12px; }

/* ---- Eligibility banner ---- */
.elig { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; margin-top: 18px; }
.elig-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.elig-t { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.elig-d { font-size: 13px; color: var(--mist); margin-top: 3px; line-height: 1.5; }
.elig-yes { background: rgba(223,198,168,0.09); border: 1px solid rgba(223,198,168,0.35); }
.elig-yes .elig-ic { background: var(--grad-gold); color: #2a1d05; }
.elig-yes .elig-t { color: var(--gold-2); }
.elig-fun { background: rgba(91,141,239,0.08); border: 1px solid rgba(91,141,239,0.3); }
.elig-fun .elig-ic { background: rgba(91,141,239,0.2); color: #9db8f5; }
.elig-fun .elig-t { color: #c4d3f7; }
.elig-no { background: rgba(186,20,61,0.1); border: 1px solid rgba(186,20,61,0.4); }
.elig-no .elig-ic { background: rgba(186,20,61,0.2); color: #ff8a9c; }
.elig-no .elig-t { color: #ff8a9c; }

/* ---- Team card ---- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.team-card {
  position: relative; text-align: left; cursor: pointer; border-radius: var(--r-md); padding: 16px 16px 14px;
  background: var(--grad-card); border: 1px solid rgba(255,255,255,0.10); color: var(--white);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .25s; overflow: hidden;
}
.team-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.2); }
.team-card .flag { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.team-card .tname { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-top: 12px; color: var(--white); }
.team-card .tgroup { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .04em; margin-top: 2px; }
.team-card.sel { border-color: transparent; box-shadow: var(--shadow-glow); background: linear-gradient(160deg, rgba(186,20,61,0.18), rgba(15,21,40,0.9)); transform: translateY(-3px); }
.team-card.sel::before { content:''; position:absolute; inset:0; border-radius: inherit; padding:1.5px;
  background: var(--grad-gold); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.team-card .tick {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad-gold); display: grid; place-items: center; color: #2a1d05;
  opacity: 0; transform: scale(.4) rotate(-30deg); transition: all .25s cubic-bezier(.2,1.4,.4,1);
}
.team-card.sel .tick { opacity: 1; transform: none; }

/* group filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: var(--mist);
  transition: all .18s;
}
.chip:hover { border-color: rgba(255,255,255,0.22); }
.chip.on { background: var(--white); color: var(--navy-900); border-color: transparent; }

/* ---- Bracket / Group ranking ---- */
.grouprank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; }
.grouprank {
  background: var(--grad-card); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--r-md); padding: 16px;
}
.grouprank h4 { font-size: 14px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.grouprank h4 .gl { color: var(--gold); }
.rankrow {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; cursor: grab;
  background: rgba(8,11,22,0.45); border: 1px solid rgba(255,255,255,0.05); margin-bottom: 7px;
  transition: background .15s, border .15s, transform .12s; user-select: none;
}
.rankrow:last-child { margin-bottom: 0; }
.rankrow:hover { border-color: rgba(255,255,255,0.16); }
.rankrow.dragging { opacity: .35; }
.rankrow.over { border-color: var(--gold); background: rgba(223,198,168,0.08); }
.rankrow .pos { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 800;
  font-family: var(--font-display); flex: 0 0 auto; }
.rankrow .pos-1 { background: var(--grad-gold); color: #2a1d05; }
.rankrow .pos-2 { background: rgba(196,204,224,0.85); color: #1a2340; }
.rankrow .pos-3 { background: rgba(199,154,62,0.35); color: var(--gold-2); }
.rankrow .pos-4 { background: rgba(255,255,255,0.06); color: var(--muted); }
.rankrow .rflag { font-size: 20px; flex: 0 0 auto; }
.rankrow .rname { font-size: 13.5px; font-weight: 600; flex: 1 1 auto; }
.rankrow .grip { color: var(--muted); flex: 0 0 auto; display: flex; }
.mini-arrow {
  width: 18px; height: 14px; line-height: 1; font-size: 9px; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
  color: var(--mist); display: grid; place-items: center; transition: all .15s;
}
.mini-arrow:hover:not(:disabled) { background: rgba(223,198,168,0.18); color: var(--gold); }
.mini-arrow:disabled { opacity: .3; cursor: not-allowed; }
.qual-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.qual-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* KO bracket */
.ko-round { min-width: 200px; }
.ko-match {
  background: var(--grad-card); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; overflow: hidden;
}
.ko-team {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05); transition: background .15s; font-size: 13px;
}
.ko-team:last-child { border-bottom: none; }
.ko-team:hover { background: rgba(255,255,255,0.04); }
.ko-team.win { background: rgba(223,198,168,0.12); }
.ko-team.win .kn { color: var(--gold-2); font-weight: 700; }
.ko-team .kf { font-size: 17px; }
.ko-team .kn { font-size: 13px; font-weight: 600; flex: 1 1 auto; }
.ko-team.empty { color: var(--muted); cursor: default; font-style: italic; }
.ko-team.empty:hover { background: none; }

/* ---- Asuia Startelf Pitch ---- */
.startelf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.pitch-wrap { display: flex; justify-content: center; }
.pitch {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 100/140;
  border-radius: 18px; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 8.33%, rgba(255,255,255,0) 8.33% 16.66%),
    linear-gradient(160deg, #123026 0%, #0e2620 45%, #0c1d2c 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 0 80px rgba(0,0,0,0.5), var(--shadow-card);
  transition: opacity .3s, filter .3s;
}
.pitch.dim { opacity: .5; filter: grayscale(.6); }
.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pitch-lines rect, .pitch-lines line, .pitch-lines circle, .pitch-lines path {
  fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 0.5; vector-effect: non-scaling-stroke;
}
.pitch-lines .fill { fill: rgba(255,255,255,0.4); stroke: none; }
.pos-node {
  position: absolute; transform: translate(-50%, -50%); background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; width: 76px;
  transition: transform .18s cubic-bezier(.2,1.3,.4,1);
}
.pos-node:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 5; }
.jersey {
  position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8,11,22,0.72); border: 1.5px solid rgba(255,255,255,0.22); color: var(--mist);
  transition: all .2s; backdrop-filter: blur(4px);
}
.jersey .num {
  position: absolute; top: -5px; right: -5px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--navy-700); border: 1px solid rgba(255,255,255,0.22); color: var(--mist);
  font-size: 10px; font-weight: 800; font-family: var(--font-display); display: grid; place-items: center;
}
.pos-node.on .jersey {
  background: var(--grad-gold); border-color: transparent; color: #2a1d05;
  box-shadow: 0 0 0 4px rgba(223,198,168,0.22), 0 10px 26px -8px rgba(223,198,168,0.6); transform: scale(1.04);
}
.pos-node.on .jersey .num { background: var(--crimson); color: #fff; border-color: rgba(255,255,255,0.3); }
.pos-label {
  font-size: 10.5px; font-weight: 700; color: var(--mist); text-align: center; line-height: 1.1;
  background: rgba(8,11,22,0.7); padding: 2px 7px; border-radius: 6px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.07);
}
.pos-node.on .pos-label { color: var(--gold-2); border-color: rgba(223,198,168,0.3); }
.pitch-badge {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
  font-size: 11.5px; font-weight: 700; color: var(--gold-2); padding: 5px 12px; border-radius: 999px;
  background: rgba(8,11,22,0.75); border: 1px solid rgba(223,198,168,0.3); letter-spacing: .03em;
}
.lineup-panel { position: sticky; top: 84px; }
.lineup-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  background: rgba(223,198,168,0.06); border: 1px solid rgba(223,198,168,0.16); transition: all .15s; }
.lineup-row:hover { background: rgba(223,198,168,0.1); }
.lineup-row:hover .ln-x { color: #ff8a9c; }
.ln-num { width: 22px; height: 22px; border-radius: 6px; background: var(--grad-gold); color: #2a1d05;
  font-size: 11px; font-weight: 800; font-family: var(--font-display); display: grid; place-items: center; flex: 0 0 auto; }
.ln-x { color: var(--muted); flex: 0 0 auto; transition: color .15s; }
.only-tip { width: 100%; margin-top: 16px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--mist); background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px; text-align: left; transition: all .18s; }
.only-tip:hover { border-color: rgba(255,255,255,0.18); }
.only-tip.on { border-color: rgba(223,198,168,0.4); background: rgba(223,198,168,0.07); color: #fff; }
.only-tip .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line);
  background: rgba(8,11,22,0.6); display: grid; place-items: center; color: #2a1d05; flex: 0 0 auto; }
.only-tip.on .box { background: var(--grad-gold); border-color: transparent; }
.opt-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--muted); margin-left: 2px; }

@media (max-width: 820px) {
  .startelf-grid { grid-template-columns: 1fr; }
  .lineup-panel { position: static; }
  .pitch { max-width: 380px; }
}
@media (max-width: 420px) {
  .pos-node { width: 60px; }
  .jersey { width: 44px; height: 44px; }
  .pos-label { font-size: 9.5px; padding: 1px 5px; }
}

/* ---- Confetti canvas ---- */
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* ---- Sound toggle ---- */
.sound-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 999px; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--mist); background: rgba(8,11,22,0.8); border: 1px solid var(--line); backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.8); transition: all .2s; }
.sound-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.25); transform: translateY(-1px); }
.sound-toggle.on { color: #2a1d05; background: var(--grad-gold); border-color: transparent; }
.sound-waves { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-waves i { width: 2.5px; background: #2a1d05; border-radius: 2px; animation: swave .8s ease-in-out infinite; }
.sound-waves i:nth-child(1) { height: 6px; animation-delay: 0s; }
.sound-waves i:nth-child(2) { height: 12px; animation-delay: .15s; }
.sound-waves i:nth-child(3) { height: 8px; animation-delay: .3s; }
@keyframes swave { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }

/* ---- Goal shot overlay ---- */
.goalshot { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(186,20,61,0.25), rgba(4,6,12,0.82) 70%); animation: fade .2s ease; }
.goal-stage { position: relative; width: min(86vw, 420px); aspect-ratio: 300/200; }
.goal-frame { position: absolute; top: 0; left: 0; width: 100%; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6)); }
.goal-net { animation: netRipple .5s ease .62s; transform-origin: center; }
@keyframes netRipple { 0% { transform: scale(1); } 40% { transform: scale(1.05, 0.9); } 100% { transform: scale(1); } }
.goal-ball { position: absolute; left: 50%; bottom: -8%; font-size: clamp(34px, 9vw, 52px); transform: translateX(-50%);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.55)); animation: ballShot .66s cubic-bezier(.3,.1,.5,1) forwards; }
@keyframes ballShot {
  0% { transform: translate(-50%, 0) scale(1.25) rotate(0deg); }
  100% { transform: translate(-50%, -150%) scale(0.42) rotate(540deg); }
}
.goal-text { position: absolute; left: 50%; top: 26%; transform: translate(-50%,-50%); font-family: var(--font-display);
  font-weight: 800; font-size: clamp(34px, 9vw, 64px); letter-spacing: -0.02em; color: transparent;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; opacity: 0;
  text-shadow: 0 6px 30px rgba(223,198,168,0.4); animation: goalText .6s cubic-bezier(.2,1.5,.4,1) .66s forwards; }
@keyframes goalText { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 60% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

/* ---- Floating balls (hero bg) ---- */
.float-balls { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.float-balls span { position: absolute; bottom: -40px; animation-name: floatUp; animation-timing-function: linear; animation-iteration-count: infinite;
  filter: grayscale(0.2); }
@keyframes floatUp { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-115vh) rotate(360deg); } }

/* ---- Success / WM-Pass card ---- */
.passcard { position: relative; overflow: hidden; }
.passcard::before { content: ''; position: absolute; top: -40%; right: -10%; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(223,198,168,0.12), transparent 70%); pointer-events: none; }
.prize-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; }
.prize-badge.yes { background: var(--grad-gold); color: #2a1d05; }
.prize-badge.fun { background: rgba(91,141,239,0.16); color: #9db8f5; border: 1px solid rgba(91,141,239,0.35); }
.pos-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--gold-2); background: rgba(223,198,168,0.08);
  border: 1px solid rgba(223,198,168,0.2); }
.pos-chip .n { width: 17px; height: 17px; border-radius: 50%; background: var(--grad-gold); color: #2a1d05;
  font-size: 10px; font-weight: 800; font-family: var(--font-display); display: grid; place-items: center; }

/* ---- Penalty mini-game ---- */
.pk-overlay { position: fixed; inset: 0; z-index: 115; display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto; background: rgba(4,6,12,0.78); backdrop-filter: blur(8px); animation: fade .25s ease; }
.pk-card { width: 100%; max-width: 540px; background: var(--navy-700); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); animation: pop .3s cubic-bezier(.2,.9,.3,1.1); overflow: hidden; }
.pk-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.pk-score { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; }
.pk-dots { display: flex; gap: 7px; }
.pk-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); transition: all .3s; }
.pk-dot[data-state="next"] { background: var(--crimson); box-shadow: 0 0 0 4px rgba(186,20,61,0.16); }
.pk-dot[data-state="done"] { background: var(--grad-gold); border-color: transparent; }
.pk-goals { font-size: 14px; font-weight: 700; color: var(--mist); }
.pk-pitch { position: relative; margin: 0 18px; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/12;
  background: linear-gradient(180deg, #0e2620 0%, #123026 55%, #0c1d2c 100%); border: 1px solid rgba(255,255,255,0.08); }
.pk-goal { position: absolute; top: 8%; left: 8%; width: 84%; height: 58%; }
.pk-frame { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5)); }
.pk-net-shake { animation: netRipple .45s ease; transform-origin: center; }
.pk-keeper { position: absolute; bottom: 4%; width: 17%; height: 62%; transition: left .5s cubic-bezier(.3,.1,.4,1), transform .5s cubic-bezier(.3,.1,.4,1); transform-origin: bottom center; z-index: 2; }
.pk-k-head { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 42%; aspect-ratio: 1; border-radius: 50%; background: #e9c39a; border: 2px solid rgba(0,0,0,0.15); }
.pk-k-body { position: absolute; top: 32%; left: 50%; transform: translateX(-50%); width: 80%; height: 62%; border-radius: 40% 40% 30% 30%; background: var(--grad-crimson); box-shadow: inset 0 2px 0 rgba(255,255,255,0.2); }
.pk-k-arm { position: absolute; top: 36%; width: 46%; height: 16%; border-radius: 999px; background: var(--crimson); }
.pk-k-arm.l { left: -22%; transform: rotate(18deg); }
.pk-k-arm.r { right: -22%; transform: rotate(-18deg); }
.pk-k-arm::after { content: ''; position: absolute; top: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--gold-2); }
.pk-k-arm.l::after { left: -6px; } .pk-k-arm.r::after { right: -6px; }
.pk-zones { position: absolute; inset: 0; z-index: 3; }
.pk-zone { position: absolute; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(223,198,168,0.12); border: 1.5px dashed rgba(223,198,168,0.5); color: var(--gold-2); font-size: 18px;
  display: grid; place-items: center; transition: all .15s; animation: zonePulse 1.6s ease-in-out infinite; }
.pk-zone:hover { background: var(--grad-gold); color: #2a1d05; border-color: transparent; transform: translate(-50%,-50%) scale(1.18); }
@keyframes zonePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(223,198,168,0.3); } 50% { box-shadow: 0 0 0 6px rgba(223,198,168,0); } }
.pk-flash { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; pointer-events: none; }
.pk-flash span { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px,6vw,40px); padding: 8px 20px; border-radius: 14px;
  animation: completePop .45s cubic-bezier(.2,1.4,.4,1); }
.pk-flash.goal span { color: #2a1d05; background: var(--grad-gold); box-shadow: 0 14px 40px -10px rgba(223,198,168,0.7); }
.pk-flash.save span { color: #fff; background: var(--grad-crimson); box-shadow: 0 14px 40px -10px rgba(186,20,61,0.6); }
.pk-ball { position: absolute; font-size: 30px; z-index: 4; transition: left .5s cubic-bezier(.25,.05,.4,1), top .5s cubic-bezier(.25,.05,.4,1), transform .5s; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5)); }
.pk-spot { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: 10px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.pk-hint { text-align: center; color: var(--muted); font-size: 13px; padding: 14px 18px 20px; }
.pk-result { padding: 6px 18px 22px; }
.pk-result-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px,4vw,26px); text-align: center; }
.pk-result-sub { text-align: center; color: var(--mist); font-size: 14px; margin-top: 6px; }
.pk-launch { width: 100%; margin-top: 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left;
  padding: 16px 18px; border-radius: var(--r-md); color: #fff; background: linear-gradient(135deg, rgba(186,20,61,0.18), rgba(223,198,168,0.08));
  border: 1px solid rgba(223,198,168,0.3); transition: all .2s; font-family: var(--font-body); }
.pk-launch:hover { transform: translateY(-2px); border-color: rgba(223,198,168,0.6); box-shadow: 0 16px 40px -18px rgba(186,20,61,0.6); }
.pk-launch-ball { font-size: 30px; animation: ppBounce 1.4s ease-in-out infinite; flex: 0 0 auto; }

/* ---- Modal ---- */
  position: fixed; inset: 0; z-index: 100; background: rgba(4,6,12,0.72); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto;
  animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.modal {
  width: 100%; max-width: 760px; background: var(--navy-700); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); animation: pop .3s cubic-bezier(.2,.9,.3,1.1);
  margin-bottom: 5vh;
}
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity:1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--navy-700); border-radius: var(--r-lg) var(--r-lg) 0 0; z-index: 2; }
.modal-body { padding: 24px 26px 30px; }
.modal-body h4 { margin: 22px 0 8px; font-size: 16px; color: var(--white); }
.modal-body p, .modal-body li { color: var(--mist); font-size: 14.5px; line-height: 1.65; }
.modal-body ol, .modal-body ul { padding-left: 20px; }
.modal-body li { margin-bottom: 7px; }
.x-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--mist); cursor: pointer; display: grid; place-items: center; transition: all .2s; }
.x-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(16px,2.4vw,19px); padding: 22px 0; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.faq-q .ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold); transition: transform .3s, background .2s; }
.faq-item.open .faq-q .ic { transform: rotate(45deg); background: rgba(223,198,168,0.12); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s; opacity: 0; }
.faq-item.open .faq-a { max-height: 360px; opacity: 1; }
.faq-a p { color: var(--mist); padding: 0 0 22px; margin: 0; line-height: 1.65; font-size: 15.5px; }

/* ---- Tournament flow ---- */
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 8px; }
.flow-stage { flex: 0 0 auto; display: flex; align-items: center; gap: 0; }
.flow-card { min-width: 130px; padding: 16px 18px; border-radius: var(--r-md); background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.07); text-align: center; font-family: inherit; color: inherit;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .25s; }
.flow-card.clickable { cursor: pointer; }
.flow-card.clickable:hover { transform: translateY(-3px); border-color: rgba(223,198,168,0.45);
  box-shadow: 0 16px 36px -20px rgba(223,198,168,0.5); }
.flow-card.clickable:active { transform: translateY(-1px) scale(.99); }
.flow-card .fn { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.flow-card .fd { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.flow-card.final { border-color: rgba(223,198,168,0.4); background: linear-gradient(160deg, rgba(223,198,168,0.1), rgba(15,21,40,0.9)); }
.flow-arrow { color: var(--line); flex: 0 0 auto; padding: 0 6px; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; margin-top: 40px; }
.footer a { color: var(--mist); text-decoration: none; font-size: 14px; transition: color .2s; }
.footer a:hover { color: var(--white); }
.legal-note { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* ---- Sticky mobile CTA ---- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(8,11,22,0.92) 30%); display: none; }
.sticky-cta .inner { max-width: 520px; margin: 0 auto; }

/* ---- Stat ---- */
.stat-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }

/* ---- Sprachumschalter ---- */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.lang-opt {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.03em;
  color: var(--muted); background: transparent;
  padding: 6px 9px; border-radius: 999px; line-height: 1;
  transition: color .2s, background .2s, box-shadow .2s;
}
.lang-opt:hover { color: var(--mist); }
.lang-opt.on {
  color: #2a1d05; background: var(--grad-gold);
  box-shadow: 0 4px 12px -4px rgba(223,198,168,0.6);
}
.lang-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 430px) {
  .lang-opt { padding: 6px 7px; font-size: 11px; }
}

/* ---- Util ---- */
.flex { display: flex; } .center { align-items: center; } .between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-40{margin-top:40px;}
.tac { text-align: center; }
.hide-mobile { }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
  .sticky-cta.show { display: block; }
  .progress-label { display: none; }
  .progress-bar { margin: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   RESPONSIVE & SHARPENING — Handy · iPad · Desktop
   ===================================================================== */

/* iPad landscape & kleiner Desktop: Abstände straffen */
@media (max-width: 1024px) {
  .hero-grid { gap: 30px !important; }
  .container { --maxw: 960px; }
}

/* iPad portrait & darunter: Hero stapeln */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .hero-grid > div:last-child { min-height: 0 !important; }
  .hero-grid .glass { max-width: 420px; }
  .ticker { margin-top: 34px; }
}

/* Phablet / grosses Handy */
@media (max-width: 640px) {
  .section { padding: clamp(48px, 11vw, 72px) 0; }
  .hero-cta { flex-direction: column; align-items: stretch !important; }
  .hero-cta .btn { width: 100%; }
  .live-counter, .play-pill { width: 100%; }
  .play-pill { justify-content: center; }
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .team-card .flag { font-size: 30px; }
  .chip { padding: 9px 14px; }            /* grössere Tap-Targets */
  .glass { border-radius: var(--r-md); }
  .modal-body { padding: 20px 18px 26px; }
  .flow-card { min-width: 116px; }
  /* Sound-Toggle über die Sticky-CTA heben + nur Icon */
  .sound-toggle { bottom: calc(74px + env(safe-area-inset-bottom)); padding: 10px; }
  .sound-toggle > span:not(.sound-waves) { display: none; }
}

/* Kleines Handy */
@media (max-width: 430px) {
  :root { --gutter: 16px; }
  .badge-unofficial { font-size: 11.5px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .pk-zone { width: 40px; height: 40px; font-size: 16px; }
  .pk-ball { font-size: 26px; }
  .pk-keeper { width: 20%; }
  .pk-flash span { font-size: 24px; }
  .progress-node { width: 30px; height: 30px; font-size: 13px; }
  .ticker-track { gap: 24px; }
  .ticker-item { font-size: 12.5px; }
}

/* Touch-Geräte: Hover-only Effekte zähmen, Ticker pausierbar lassen */
@media (hover: none) {
  .team-card:hover, .btn-primary:hover, .btn-gold:hover, .pos-node:hover { transform: none; }
}

/* Sharpening: crispere Kanten & Text auf HiDPI */
@media (min-resolution: 2dppx) {
  body { -webkit-font-smoothing: antialiased; }
  .glass { border-color: rgba(255,255,255,0.115); }
}

/* Querformat-Handy: Hero kompakter */
@media (max-height: 460px) and (orientation: landscape) {
  .section { padding: 40px 0; }
  .pk-overlay { padding: 2vh 16px; }
}

/* =====================================================================
   Tipp-Trends (Community-Statistik)
   ===================================================================== */
.trend-card { padding: clamp(18px, 3vw, 30px); max-width: 760px; margin: 0 auto; }
.trend-live { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; margin-bottom: 18px; color: #ff8a9c; }
.trend-live b { color: #ff5c77; }
.trend-row { display: grid; grid-template-columns: 34px minmax(110px, 200px) 1fr 56px; align-items: center;
  gap: 12px; padding: 9px 4px; border-radius: 10px; }
.trend-row.leader { background: linear-gradient(90deg, rgba(223,198,168,0.10), transparent 70%);
  border: 1px solid rgba(223,198,168,0.22); padding: 11px 10px; margin: 2px -6px 6px; }
.trend-flag { font-size: 24px; line-height: 1; text-align: center; }
.trend-name { font-weight: 600; font-size: 14.5px; color: var(--white); display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; min-width: 0; }
.trend-crown { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--grad-gold); color: #2a1d05; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.trend-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.06); overflow: hidden; }
.trend-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #c2a279, #efe0c8 60%, #dfc6a8);
  width: 0%; transition: width 1.1s cubic-bezier(.22,.8,.3,1); box-shadow: 0 0 14px -2px rgba(223,198,168,.55); }
.trend-row.leader .trend-fill { background: linear-gradient(90deg, #dfc6a8, #fff3da 55%, #e2a24a); }
.trend-fill.dim { background: rgba(204,212,232,0.35); box-shadow: none; }
.trend-pct { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; text-align: right;
  color: var(--gold-2); font-variant-numeric: tabular-nums; }
.trend-row.other .trend-name, .trend-row.other .trend-pct { color: var(--muted); }
.trend-note { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }

/* =====================================================================
   Mobile-Polish — kompakter, griffiger, lebendiger
   ===================================================================== */
@media (max-width: 640px) {
  /* Trends mobil: Name über Balken, alles volle Breite */
  .trend-row { grid-template-columns: 30px 1fr 52px; grid-template-areas: "flag name pct" "flag track pct"; row-gap: 5px; }
  .trend-flag { grid-area: flag; font-size: 21px; }
  .trend-name { grid-area: name; font-size: 13.5px; }
  .trend-track { grid-area: track; height: 10px; }
  .trend-pct { grid-area: pct; font-size: 13.5px; }

  /* Hero: kompakter, CTA früher sichtbar */
  .hero h1 { letter-spacing: -0.02em; }
  .section { padding: 56px 0; }

  /* Formular & Touch-Ziele */
  .input, .select { min-height: 48px; font-size: 16px; } /* 16px verhindert iOS-Zoom */
  .check { padding: 13px 12px; }
  .check .box { width: 26px; height: 26px; flex: 0 0 auto; }
  .btn-lg { min-height: 52px; }

  /* Team-Grid: 3 Spalten, größere Tap-Flächen */
  .team-card { min-height: 92px; }

  /* Pitch: Positionen besser treffbar */
  .pos-node { transform: scale(1.12); }
  .pos-node:active { transform: scale(1.2); }

  /* Ticker etwas ruhiger */
  .ticker-item { font-size: 12.5px; }
}

@media (max-width: 400px) {
  .trend-row { grid-template-columns: 26px 1fr 48px; }
  .trend-crown { display: none; } /* Platz sparen, Leader-Stil reicht */
}

/* ---- Trend-Feinschliff: edler, klarer ---- */
.trend-row { padding: 11px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.trend-row:last-of-type, .trend-row.leader { border-bottom: none; }
.trend-row.leader { margin-bottom: 10px; box-shadow: 0 10px 30px -18px rgba(223,198,168,.5); }
.trend-pct { font-size: 16px; }
.trend-row.leader .trend-pct { font-size: 19px; color: #fff3da; }
.trend-row.leader .trend-flag { font-size: 30px; }
.trend-track { height: 14px; }
.trend-row.leader .trend-track { height: 18px; }
.trend-note { opacity: .75; }

/* ---- Step2: diplomatischer Why-Hinweis + Opt-in-Checkbox ---- */
.why-note { margin-top: 14px; padding: 11px 13px; border-radius: 11px; display: flex; gap: 9px;
  align-items: flex-start; font-size: 12.8px; line-height: 1.55; color: var(--mist);
  background: rgba(223,198,168,0.06); border: 1px solid rgba(223,198,168,0.15); }
.why-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--gold); }
.only-tip.optin { border-color: rgba(223,198,168,0.22); }
.only-tip.optin.on { background: rgba(223,198,168,0.08); border-color: rgba(223,198,168,0.4); }
.only-tip.optin.on .box { background: var(--grad-gold); border-color: transparent; color: #2a1d05; }

/* =====================================================================
   KLARHEITS-SCHICHT (v20260611e)
   Ziel: ruhiger, übersichtlicher, klarere Trennung – ohne Funktionsverlust.
   ===================================================================== */

/* 1) Hintergrund beruhigen: weniger Glow, kein flackerndes Raster, ruhigere Strahlen */
.bg-field {
  background:
    radial-gradient(1100px 560px at 80% -10%, rgba(186,20,61,0.10), transparent 62%),
    radial-gradient(900px 520px at 8% 2%, rgba(223,198,168,0.05), transparent 60%),
    radial-gradient(1000px 760px at 50% 128%, rgba(40,60,120,0.16), transparent 62%),
    var(--navy-800) !important;
}
.bg-grid { opacity: 0.22 !important; background-size: 80px 80px !important; }
.bg-beams span { opacity: .28 !important; animation-duration: 16s !important; filter: blur(1px) !important; }
.bg-beams span:nth-child(2), .bg-beams span:nth-child(4) { display: none !important; } /* nur 2 statt 4 */
@media (prefers-reduced-motion: reduce) { .bg-beams { display: none !important; } }

/* 2) Klare Sektions-Trennung + ruhigerer Rhythmus */
.section { padding: clamp(56px, 7vw, 96px) 0 !important; }
.section + .section::before,
#trends::before, #how::before, #tournament::before, #faq::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(92%, var(--maxw)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 18%, rgba(255,255,255,0.10) 82%, transparent);
}

/* 3) Karten ruhiger: weichere, einheitliche Schatten statt vieler Gold-Glows */
.glass, .card { box-shadow: 0 20px 50px -28px rgba(0,0,0,0.6) !important; }
.trend-row.leader { box-shadow: none !important; }
.trend-fill { box-shadow: none !important; }

/* 4) Bewegungs-Lautstärke runter: dezentere Dauerschleifen */
.prize-shimmer { animation-duration: 7s !important; }
.ticker-track { animation-duration: 60s !important; }
.pp-ball { animation: none !important; }

/* 5) Lesbarkeit: Textblöcke schmaler, mehr Luft unter Überschriften */
.lead { max-width: 62ch; }
.tac .lead { margin-left: auto; margin-right: auto; }
.section h2 { line-height: 1.12; }
.eyebrow { margin-bottom: 6px; }

/* 6) Sektions-Überschriften zentriert mehr Abstand zum Inhalt */
.section > .container > .tac:first-child { margin-bottom: 8px; }