/* =========================================================
   DARTS UNIVERSE — Basis fuer das Prediction-Plugin

   Die Tokens und die wenigen Bausteine aus dem Onepager, die der
   Turnierbaum braucht. Bewusst auf .du-pred (Frontend) und .du-adm
   (Backend) begrenzt statt auf :root -- so laeuft das Plugin unter
   jedem Theme, ohne dessen Variablen zu ueberschreiben.

   1. Tokens  2. Reset  3. Layout  4. Buttons  5. Felder
   6. Karten der Uebersicht  7. Responsive
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
.du-pred,
.du-adm{
  --navy-950:#0A0720;
  --navy-900:#0F0B29;
  --navy-850:#150F33;
  --navy-800:#1B1440;
  --navy-700:#241B57;
  --blue-600:#3F45A3;
  --blue-500:#4D54BF;

  --gold:#F2E423;
  --gold-600:#E2D414;
  --gold-700:#C2B400;
  --gold-deep:#D6C400;

  --white:#FFFFFF;
  --mute:#A7A6C8;
  --mute-dim:#7B79A3;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);

  --f-display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --f-body:"Poppins","Helvetica Neue",Arial,sans-serif;

  --shell:1240px;
  --gutter:clamp(20px,5vw,48px);
  --radius:20px;
  --radius-lg:28px;
  --radius-sm:12px;
  --sp-section:clamp(64px,9vw,120px);

  --ease:cubic-bezier(.22,.8,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* --header-h bewusst NICHT hier setzen: die Hoehe des fixen Headers
     kommt vom Theme. Ein eigener Wert (frueher 0px) ueberschrieb sie und
     schob die Ueberschrift unter den Header. Fallback siehe prediction.css. */
}

/* ---------- 2. RESET (nur innerhalb unserer Container) ---------- */
/* Themes bringen eigene Grundregeln mit. Wir setzen nur das zurueck,
   worauf der Turnierbaum baut -- und nur bei uns. */
.du-pred,
.du-adm,
.du-pred *,
.du-adm *,
.du-pred *::before,
.du-adm *::before,
.du-pred *::after,
.du-adm *::after{box-sizing:border-box;}

.du-pred{
  /* Der Baum laeuft absichtlich aus der Flaeche heraus. Die statische
     Fassung faengt das ueber body{overflow-x:hidden} ab -- ein fremdes
     Theme tut das nicht, also fangen wir es hier.
     "clip" statt "hidden": hidden wuerde nebenbei eine senkrechte
     Bildlaufleiste im Container erzeugen. */
  overflow-x:clip;
  font-family:var(--f-body);
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.72;
  color:var(--white);
  background:linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 100%);
}

.du-pred h1,.du-pred h2,.du-pred h3,.du-pred h4,
.du-pred p,.du-pred ul,.du-pred ol,.du-pred li,
.du-adm h2,.du-adm h3,.du-adm p,.du-adm ul,.du-adm ol,.du-adm li{
  margin:0;padding:0;
}
.du-pred ul,.du-pred ol,.du-adm ul,.du-adm ol{list-style:none;}
.du-pred a{color:inherit;text-decoration:none;}
.du-pred img,.du-adm img{max-width:100%;height:auto;display:block;}
.du-pred svg,.du-adm svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.du-pred button,.du-adm button{
  font:inherit;color:inherit;
  background:none;border:0;cursor:pointer;
}
.du-pred input,.du-pred textarea,.du-pred select,
.du-adm input,.du-adm textarea,.du-adm select{font:inherit;}

/* Eigene display-Regeln schlagen das hidden-Attribut des Browsers. */
.du-pred [hidden],
.du-adm [hidden]{display:none !important;}

/* ---------- 3. LAYOUT ---------- */
.du-pred .shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.du-pred .section{position:relative;padding-block:var(--sp-section);}
.du-pred .hl{color:var(--gold);}

.du-pred .section__title{
  font-family:var(--f-display);
  font-weight:900;font-style:italic;
  font-size:clamp(2.1rem,4.6vw,3.6rem);
  line-height:1.03;letter-spacing:-.02em;
}
.du-pred .section__head{max-width:720px;margin-bottom:clamp(36px,4.5vw,60px);}
.du-pred .lead{
  color:var(--mute);
  font-size:clamp(1rem,1.08vw,1.09rem);
  line-height:1.8;max-width:62ch;
}

/* ---------- 4. BUTTONS ---------- */
.du-pred .btn,
.du-adm .btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);
  font-weight:600;font-size:.94rem;
  padding:15px 28px;
  border-radius:99px;
  white-space:nowrap;
  text-decoration:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
.du-pred .btn svg,
.du-adm .btn svg{width:18px;height:18px;transition:transform .35s var(--ease);}

.du-pred .btn--primary,
.du-adm .btn--primary{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-600) 55%,var(--gold-deep) 100%);
  color:var(--navy-950);
  font-weight:700;
  box-shadow:0 10px 30px -10px rgba(242,228,35,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.du-pred .btn--primary::after,
.du-adm .btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#fff 0%,var(--gold) 100%);
  opacity:0;transition:opacity .35s var(--ease);
}
.du-pred .btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(242,228,35,.7), inset 0 1px 0 rgba(255,255,255,.5);}
.du-pred .btn--primary:hover::after,
.du-adm .btn--primary:hover::after{opacity:1;}
.du-pred .btn--primary:hover svg{transform:translateX(4px);}
.du-pred .btn--primary:active{transform:translateY(-1px);}

.du-pred .btn--ghost,
.du-adm .btn--ghost{
  border:1px solid var(--line-strong);
  background:var(--glass);
  color:var(--white);
}
.du-pred .btn--ghost:hover,
.du-adm .btn--ghost:hover{
  border-color:var(--gold);color:var(--gold);
  background:rgba(242,228,35,.07);
}
.du-pred .btn--ghost:hover{transform:translateY(-3px);}
.du-pred .btn--block,
.du-adm .btn--block{width:100%;}

.du-pred .btn--lg{padding:19px 38px;font-size:1.04rem;gap:13px;}
.du-pred .btn--lg svg{width:21px;height:21px;}
.du-pred .btn--lg.btn--primary{
  box-shadow:0 16px 46px -14px rgba(242,228,35,.65), inset 0 1px 0 rgba(255,255,255,.45);
  animation:duCtaGlow 3.4s var(--ease) infinite;
}
@keyframes duCtaGlow{
  0%,100%{box-shadow:0 16px 46px -14px rgba(242,228,35,.55), inset 0 1px 0 rgba(255,255,255,.45);}
  50%    {box-shadow:0 20px 62px -14px rgba(242,228,35,.95), inset 0 1px 0 rgba(255,255,255,.55);}
}
.du-pred .btn--lg.btn--primary:hover{animation-play-state:paused;}

/* ---------- 5. FELDER ---------- */
.du-pred .field{position:relative;}
.du-pred .field input{
  width:100%;
  padding:22px 18px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(10,7,32,.3);
  color:var(--white);
  font-size:.95rem;
  transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.du-pred .field label{
  position:absolute;left:18px;top:17px;
  font-size:.92rem;color:var(--mute);
  pointer-events:none;transform-origin:left top;
  transition:transform .3s var(--ease), color .3s var(--ease);
}
.du-pred .field input:focus{
  outline:none;border-color:var(--gold);
  background:rgba(10,7,32,.46);
  box-shadow:0 0 0 4px rgba(242,228,35,.15);
}
.du-pred .field input:focus + label,
.du-pred .field input:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.76);
  color:var(--gold);
}

/* ---------- 6. KARTEN DER UEBERSICHT ---------- */
.du-pred .section--du-row{padding-block:clamp(48px,5.5vw,84px);}
/* Die zweite Reihe schliesst nicht mehr bündig an die erste an --
   zwischen "Jetzt tippen" und "Demnächst" darf Luft stehen. */
.du-pred .section--du-row-next{padding-top:clamp(28px,3.6vw,52px);}

.du-grid{
  display:grid;
  /* Schmalere Spuren: die Karten werden kompakter statt in die
     Breite gezogen. min(100%,…) haelt sie auf schmalen Schirmen heil. */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr));
  column-gap:clamp(16px,1.8vw,22px);
  row-gap:clamp(26px,3vw,40px);
}

.du-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  padding:clamp(19px,2vw,24px);
  border-radius:var(--radius);
  border:1px solid var(--line-strong);
  background:
    radial-gradient(440px 230px at 100% 0%, rgba(242,228,35,.12), transparent 72%),
    linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.02));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
  text-align:center;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* Die Goldkante links -- dasselbe Zeichen wie auf der Turnierkarte. */
.du-card::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg, var(--gold), var(--gold-deep));
}
/* Inhalt ueber die Dartscheibe legen, sonst liegt sie davor. */
.du-card__body,
.du-card__foot{position:relative;}

/* Die Dartscheibe als Wasserzeichen in der Ecke. */
.du-card__board{
  position:absolute;right:-24px;top:-24px;
  width:126px;height:126px;
  color:var(--gold);opacity:.10;
  pointer-events:none;
  transition:transform .9s var(--ease), opacity .4s var(--ease);
}
.du-card__board svg{width:100%;height:100%;stroke-width:1.1;}

.du-card:hover{
  border-color:rgba(242,228,35,.45);
  transform:translateY(-4px);
  box-shadow:0 24px 54px -30px rgba(242,228,35,.7);
}
.du-card:hover .du-card__board{transform:rotate(26deg) scale(1.07);opacity:.2;}

/* Karten ohne Teilnehmerfeld bleiben ruhig -- sie fuehren nirgendwohin. */
.du-card--closed{opacity:.72;}
.du-card--closed:hover{
  border-color:var(--line-strong);
  transform:none;box-shadow:none;
}
.du-card--closed:hover .du-card__board{transform:none;opacity:.10;}

/* Die margin-Angaben brauchen .du-pred davor -- sonst gewinnt der
   Reset weiter oben (.du-pred h3 / .du-pred ul) ueber den Elementnamen. */
.du-pred .du-card__title{
  font-family:var(--f-display);
  font-weight:800;font-style:italic;
  font-size:clamp(1.12rem,1.5vw,1.32rem);
  line-height:1.18;letter-spacing:-.02em;
  color:var(--gold);
  margin-bottom:6px;
}
.du-card__title a:hover{color:var(--white);}
.du-card__sub{color:var(--mute);font-size:.86rem;line-height:1.5;}

.du-pred .du-card__foot .btn{padding:12px 20px;font-size:.88rem;}
.du-card__pending{
  display:inline-block;
  padding:11px 18px;border-radius:99px;
  border:1px dashed var(--line-strong);
  font-size:.83rem;font-weight:600;color:var(--mute-dim);
}

/* Hinweiszeile ueber dem Baum (anstehend / vorbei) */
.du-pred .tool-head__flag{
  display:inline-block;
  margin-bottom:18px;padding:9px 16px;
  border-radius:99px;
  border:1px solid rgba(242,228,35,.3);
  background:rgba(242,228,35,.07);
  font-size:.86rem;font-weight:600;color:var(--gold);
}
.du-pred .tool-head__flag--done{
  border-color:var(--line-strong);
  background:var(--glass);
  color:var(--mute);
}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width:820px){
  .du-pred .section__title{font-size:clamp(1.85rem,6.6vw,2.6rem);}
  .du-pred .section__head{margin-bottom:clamp(24px,4vw,34px);}
}

@media (max-width:640px){
  .du-grid{grid-template-columns:1fr;}
  .du-pred .section--du-row{padding-block:clamp(34px,7vw,52px);}
  .du-pred .section--du-row-next{padding-top:clamp(24px,5.5vw,36px);}
  .du-card{gap:14px;}
  /* Ein Knopf pro Karte, ueber die volle Breite -- besser zu treffen. */
  .du-pred .du-card__foot .btn,
  .du-card__pending{width:100%;text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  .du-pred .btn,
  .du-adm .btn,
  .du-card,
  .du-card__board{transition:none !important;animation:none !important;}
  .du-pred .btn:hover,
  .du-card:hover{transform:none !important;}
  .du-card:hover .du-card__board{transform:none !important;}
}