/* ══════════════════════════════════════════════════════════════════════════
   Startbildschirm — „Was kann ich JETZT tun?"
   ─────────────────────────────────────────────────────────────────────────
   Der Block sitzt ganz oben auf /portal und beantwortet in dieser Reihenfolge:
     1. Wer bin ich?          (Spielerkarte: Level, XP, Währungen, Kämpfer)
     2. Was ist gerade los?   (World Boss / nächster Termin)
     3. Was ist offen?        (Quests, Kampagne)
     4. Was mache ich jetzt?  (Schnellzugriffe)

   Alles darunter (Discord-Karte, Aufgaben, Tagesbonus, Konto) bleibt wie
   gehabt — der neue Block ERGÄNZT, er verdrängt nichts.
   ══════════════════════════════════════════════════════════════════════════ */

.hHero{
  display:grid; gap:var(--sp-4); margin:var(--sp-4) 0 var(--sp-6);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}
@media (max-width:960px){.hHero{grid-template-columns:minmax(0,1fr)}}

/* ── Spielerkarte ───────────────────────────────────────────────────────── */
.hPlayer{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--stroke); padding:var(--sp-5);
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(99,102,241,.22), transparent 60%),
    linear-gradient(160deg,var(--card-2),var(--card));
}
.hPlayer-top{display:flex; align-items:center; gap:var(--sp-4)}
.hAvatar{
  position:relative; width:74px; height:74px; border-radius:50%;
  background:var(--grad); background-size:cover; background-position:center;
  display:grid; place-items:center; font-family:var(--f-display);
  font-size:28px; font-weight:800; color:#07101c; flex:none;
}
.hAvatar[data-frame]{box-shadow:0 0 0 3px var(--fc,var(--indigo)), 0 0 26px -6px var(--fc,var(--indigo))}
.hAvatar .lvl{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  padding:2px 9px; border-radius:99px; font-size:11px; font-weight:800;
  background:#0b0e18; border:1px solid var(--stroke-2); color:var(--text);
}
.hName{font-family:var(--f-display); font-size:var(--fs-7); line-height:1.15}
.hTitle{color:var(--gold); font-size:var(--fs-2); font-weight:700; margin-top:2px}
.hBadges{display:flex; gap:5px; margin-top:7px; flex-wrap:wrap}
.hBadges span{font-size:15px}

.hXp{margin-top:var(--sp-4)}
.hWallet{
  display:grid; gap:8px; margin-top:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
}
.hWallet-i{
  padding:10px; border-radius:var(--r-sm); text-align:center;
  background:rgba(255,255,255,.04); border:1px solid var(--stroke);
}
.hWallet-i b{display:block; font-family:var(--f-display); font-size:var(--fs-6);
  font-variant-numeric:tabular-nums}
.hWallet-i span{font-size:var(--fs-1); color:var(--dim)}

.hFighter{
  display:flex; align-items:center; gap:12px; margin-top:var(--sp-4);
  padding:11px 13px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.035); border:1px solid var(--stroke);
}
.hFighter-art{
  width:44px; height:44px; border-radius:var(--r-xs); overflow:hidden;
  display:grid; place-items:center; font-size:22px; background:rgba(0,0,0,.35); flex:none;
}
.hFighter-art img{width:100%; height:100%; object-fit:cover}

/* ── Was ist los ────────────────────────────────────────────────────────── */
.hNow{display:flex; flex-direction:column; gap:var(--sp-4)}

.hEvent{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid rgba(168,85,247,.35); padding:var(--sp-5);
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(168,85,247,.28), transparent 62%),
    linear-gradient(160deg,#141628,#0d101b);
}
.hEvent.is-fight{border-color:rgba(251,113,133,.4)}
.hEvent.is-locked{border-color:var(--stroke)}
.hEvent-glyph{font-size:38px; line-height:1; animation:pFxFloat 3.6s ease-in-out infinite}
.hEvent-t{font-family:var(--f-display); font-size:var(--fs-6); margin-top:8px}
.hEvent-cd{
  font-family:var(--f-display); font-size:clamp(1.8rem,5vw,2.6rem); font-weight:800;
  font-variant-numeric:tabular-nums; margin:6px 0;
}
.hEvent-sub{color:var(--muted); font-size:var(--fs-3)}

.hGoals{display:flex; flex-direction:column; gap:10px}
.hGoal{
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  border-radius:var(--r-sm); background:var(--card); border:1px solid var(--stroke);
  text-decoration:none; color:inherit;
  transition:transform var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
.hGoal:hover{transform:translateX(3px); border-color:var(--stroke-2)}
.hGoal-ic{font-size:19px; flex:none}
.hGoal-b{min-width:0; flex:1}
.hGoal-t{font-weight:700; font-size:var(--fs-3)}
.hGoal-s{color:var(--dim); font-size:var(--fs-2)}
.hGoal.is-ready{border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.08)}

/* ── Schnellzugriffe ────────────────────────────────────────────────────── */
.hQuick{
  display:grid; gap:var(--sp-3); margin-bottom:var(--sp-6);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.hQuick-a{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px;
  padding:var(--sp-4); border-radius:var(--r-md); text-decoration:none; color:inherit;
  background:linear-gradient(160deg,var(--card-2),var(--card));
  border:1px solid var(--stroke);
  transition:transform var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
.hQuick-a:hover{transform:translateY(-4px); border-color:var(--stroke-2)}
.hQuick-a:active{transform:translateY(-1px) scale(.99)}
.hQuick-ic{font-size:26px; line-height:1}
.hQuick-t{font-weight:700}
.hQuick-s{font-size:var(--fs-2); color:var(--dim)}
.hQuick-a .pChip{position:absolute; top:12px; right:12px}
.hQuick-a.is-hot{border-color:rgba(251,113,133,.45)}

html[data-motion="off"] .hEvent-glyph{animation:none}