:root {
  color-scheme: dark;
  --bg: #070706;
  --bg-soft: #0d0c0a;
  --surface: rgba(18, 17, 14, .86);
  --surface-solid: #11100e;
  --surface-strong: #171512;
  --surface-hover: #1d1a16;
  --text: #f8f6f1;
  --text-strong: #ffffff;
  --muted: #aaa39a;
  --muted-2: #777168;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 151, 28, .55);
  --orange: #ff971c;
  --orange-2: #f06d00;
  --orange-soft: rgba(255, 151, 28, .12);
  --gold: #ffc650;
  --green: #54e59f;
  --danger: #ff6c75;
  --shadow: 0 22px 70px rgba(0, 0, 0, .40);
  --shadow-soft: 0 10px 34px rgba(0, 0, 0, .24);
  --radius: 20px;
  --radius-sm: 13px;
  --shell: min(1380px, calc(100% - 42px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 151, 28, .11), transparent 25%),
    radial-gradient(circle at 12% 32%, rgba(240, 109, 0, .07), transparent 28%),
    var(--bg);
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: var(--shell); margin-inline: auto; }
.is-hidden { display: none !important; }

.page-texture {
  position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.ambient { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(125px); pointer-events: none; z-index: -1; opacity: .13; }
.ambient-one { left: -220px; top: 300px; background: var(--orange); }
.ambient-two { right: -220px; top: 160px; background: var(--orange-2); opacity: .08; }

.topbar-wrap {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 83%, transparent);
  backdrop-filter: blur(20px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 220px; }
.brand-logo { width: 105px; height: 62px; object-fit: contain; object-position: center; filter: drop-shadow(0 5px 12px rgba(0,0,0,.26)); }
.brand-copy { display: grid; gap: 0; }
.brand-copy b { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.brand-copy small { color: var(--orange); font-size: 9px; letter-spacing: .24em; font-weight: 900; }
.main-nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; }
.main-nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .025em; transition: .2s ease; }
.main-nav a span { color: var(--orange); font-size: 15px; }
.main-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--orange); transform: scaleX(0); transition: .2s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--text-strong); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .refresh-button, .ghost-button {
  min-height: 40px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-solid) 76%, transparent); color: var(--text);
  border-radius: 11px; cursor: pointer; transition: .2s ease; display: inline-flex; align-items: center; justify-content: center;
}
.icon-button { width: 40px; padding: 0; color: var(--orange); }
.icon-button svg, .refresh-button svg { width: 17px; }
.refresh-button { gap: 8px; padding: 0 13px; font-size: 12px; font-weight: 850; }
.ghost-button { padding: 0 13px; font-size: 12px; font-weight: 850; color: var(--muted); }
.icon-button:hover, .refresh-button:hover, .ghost-button:hover { border-color: var(--line-strong); background: var(--orange-soft); transform: translateY(-1px); }
.refresh-button.is-loading svg { animation: spin .8s linear infinite; }

.hero {
  min-height: 445px; padding: 54px 0 62px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); gap: 70px; align-items: center;
}
.hero-copy { position: relative; padding-left: 8px; }
.hero-copy::before { content: ""; position: absolute; width: 230px; height: 230px; left: 52%; top: 48%; transform: translate(-50%,-50%) rotate(10deg); border: 1px solid rgba(255,151,28,.14); clip-path: polygon(50% 0,100% 100%,0 100%); opacity: .55; z-index: -1; }
.eyebrow, .kicker { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--orange-soft); padding: 7px 10px; border-radius: 999px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 15%, transparent), 0 0 18px var(--gold); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 16%, transparent), 0 0 18px var(--green); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 15%, transparent), 0 0 18px var(--danger); }
.hero h1 { margin: 22px 0 0; display: grid; gap: 4px; font-size: clamp(44px, 5vw, 68px); line-height: .96; letter-spacing: -.055em; color: var(--text-strong); }
.hero h1 span { font-weight: 950; }
.hero h1 em { color: var(--orange); font-style: normal; font-weight: 950; text-transform: none; text-shadow: 0 10px 40px color-mix(in srgb, var(--orange) 18%, transparent); }
.hero-rule { display: block; width: 74px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); margin: 24px 0 0; }
.hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.primary-button, .secondary-button {
  min-height: 48px; border-radius: 11px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; font-weight: 900; letter-spacing: .025em; transition: .2s ease; cursor: pointer;
}
.primary-button { color: #16100a; background: linear-gradient(135deg, #ffbd55, var(--orange) 48%, #f17600); box-shadow: 0 12px 30px rgba(242, 112, 0, .27), inset 0 1px rgba(255,255,255,.5); border: 1px solid #ffb445; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 35px rgba(242,112,0,.34); }
.primary-button .button-icon { font-size: 16px; }
.secondary-button { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.secondary-button span { color: var(--muted); }
.secondary-button b { color: var(--orange); }

.glass-card { background: linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 96%, transparent), color-mix(in srgb, var(--surface-strong) 90%, transparent)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero-panel { position: relative; overflow: hidden; border-radius: 24px; padding: 27px 29px 25px; border-color: color-mix(in srgb, var(--orange) 42%, var(--line)); }
.panel-glow { position: absolute; inset: -1px; pointer-events: none; background: radial-gradient(circle at 8% 0%, rgba(255,151,28,.18), transparent 35%); }
.hero-panel::after { content: ""; position: absolute; right: -58px; top: -72px; width: 210px; height: 210px; border-radius: 50%; background: rgba(255,151,28,.09); filter: blur(45px); pointer-events: none; }
.hero-panel-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hero-panel-top b { color: var(--orange); margin-right: 7px; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--green); }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; }
.champion { position: relative; z-index: 1; display: grid; grid-template-columns: 108px 1fr; gap: 22px; align-items: center; min-height: 142px; margin: 18px 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.champion-avatar { width: 104px; height: 104px; border-radius: 23px; position: relative; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, rgba(255,151,28,.28), var(--surface-strong)); color: var(--orange); font-size: 24px; font-weight: 900; border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); box-shadow: 0 12px 32px rgba(0,0,0,.24); }
.champion-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.champion-info { display: grid; min-width: 0; }
.champion-info > span { color: var(--gold); font-size: 11px; font-weight: 950; letter-spacing: .09em; }
.champion-info strong { margin-top: 7px; overflow: hidden; text-overflow: ellipsis; font-size: clamp(28px, 3.2vw, 44px); line-height: 1; letter-spacing: -.045em; color: var(--text-strong); }
.champion-info small { margin-top: 10px; color: var(--muted); font-size: 13px; }
.hero-kpis { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.hero-kpis > div { min-width: 0; padding: 15px 17px; display: grid; gap: 4px; }
.hero-kpis > div + div { border-left: 1px solid var(--line); }
.hero-kpis b { font-size: 23px; color: var(--text-strong); }
.hero-kpis span { color: var(--muted-2); font-size: 8px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; line-height: 1.35; }

.spotlight, .leaderboards { padding: 42px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 22px; }
.section-heading h2 { margin: 5px 0 0; color: var(--text-strong); font-size: clamp(26px, 3vw, 38px); letter-spacing: -.035em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.split-heading { align-items: center; }
.updated { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.updated > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.spotlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.spotlight-card, .metric-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, var(--surface-solid), var(--surface)); box-shadow: var(--shadow-soft); transition: .22s ease; }
.spotlight-card { min-height: 315px; border-radius: 18px; padding: 21px; cursor: pointer; }
.spotlight-card::before, .metric-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--orange), var(--card-color, var(--orange))); }
.spotlight-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -48px; top: -46px; border-radius: 50%; background: color-mix(in srgb, var(--card-color, var(--orange)) 12%, transparent); filter: blur(20px); }
.spotlight-card:hover, .metric-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--orange) 43%, var(--line)); background: var(--surface-hover); }
.card-top, .metric-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--orange); background: var(--orange-soft); border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent); }
.metric-icon svg { width: 21px; }
.card-number { color: var(--muted-2); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.spotlight-card h3, .metric-card h3 { margin: 20px 0 0; color: var(--text-strong); letter-spacing: -.025em; }
.spotlight-card h3 { font-size: 23px; }
.winner { margin-top: 8px; color: var(--muted); font-size: 12px; }
.spotlight-value { margin-top: 7px; font-size: 26px; font-weight: 900; color: var(--orange); letter-spacing: -.035em; }
.mini-ranking { display: grid; gap: 10px; margin-top: 19px; }
.mini-rank-row { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; align-items: center; padding-bottom: 9px; font-size: 11px; }
.mini-rank-row .rank { color: var(--orange); font-weight: 900; }
.mini-rank-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-rank-row .value { color: var(--muted); }
.mini-progress { position: absolute; left: 38px; right: 0; bottom: 0; height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--card-color, var(--orange))); }

.toolbar { border-radius: 16px; padding: 11px; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; box-shadow: var(--shadow-soft); }
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter-button { min-height: 37px; padding: 0 13px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 850; cursor: pointer; transition: .18s ease; white-space: nowrap; }
.filter-button:hover { color: var(--text); background: var(--orange-soft); }
.filter-button.active { color: #171009; background: linear-gradient(135deg, #ffbd55, var(--orange)); border-color: var(--orange); box-shadow: 0 8px 20px rgba(241,112,0,.18); }
.search-field { width: min(265px, 100%); min-height: 39px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 11px; color: var(--muted); background: color-mix(in srgb, var(--bg) 45%, transparent); }
.search-field:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--orange-soft); }
.search-field svg { width: 17px; flex: 0 0 auto; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.search-field input::placeholder { color: var(--muted-2); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { min-height: 238px; padding: 18px; border-radius: 16px; color: var(--text); text-align: left; cursor: pointer; }
.metric-card h3 { font-size: 17px; }
.category-label { display: block; color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; margin-top: 5px; }
.metric-leader { display: flex; align-items: center; gap: 10px; margin-top: 19px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--bg) 35%, transparent); }
.player-avatar { width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); font-size: 10px; font-weight: 900; border: 1px solid color-mix(in srgb, var(--orange) 24%, transparent); }
.player-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.metric-leader-info { min-width: 0; display: grid; gap: 3px; }
.metric-leader-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.metric-leader-info span { color: var(--orange); font-size: 12px; font-weight: 850; }
.no-data { margin-top: 20px; color: var(--muted); font-size: 12px; }
.card-footer { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 800; }
.card-footer b { color: var(--orange); font-size: 16px; }
.error-banner { margin-bottom: 15px; padding: 12px 14px; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); border-radius: 11px; font-size: 12px; }
.empty-state { padding: 70px 20px; text-align: center; color: var(--muted); }
.empty-state > span { color: var(--orange); font-size: 42px; }
.empty-state h3 { margin: 8px 0 5px; color: var(--text); }
.empty-state p { margin: 0; font-size: 12px; }

.footer { margin-top: 40px; padding: 30px 0 38px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 22px; color: var(--muted); font-size: 10px; }
.footer > div { display: grid; gap: 5px; }
.footer b { color: var(--orange); letter-spacing: .16em; }
.footer > div:last-child { text-align: right; }

.leaderboard-dialog { width: min(660px, calc(100% - 28px)); max-height: min(760px, calc(100vh - 30px)); border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--line)); border-radius: 20px; padding: 0; color: var(--text); background: var(--surface-solid); box-shadow: 0 35px 120px rgba(0,0,0,.55); }
.leaderboard-dialog::backdrop { background: rgba(0,0,0,.70); backdrop-filter: blur(7px); }
.dialog-shell { position: relative; padding: 25px; }
.dialog-close { position: absolute; right: 16px; top: 14px; width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 21px; }
.dialog-close:hover { color: var(--orange); border-color: var(--line-strong); }
.dialog-header { display: flex; align-items: center; gap: 13px; padding-right: 50px; margin-bottom: 20px; }
.dialog-header span:not(.metric-icon) { color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.dialog-header h2 { margin: 4px 0 0; color: var(--text-strong); font-size: 25px; }
.dialog-rows { display: grid; gap: 7px; max-height: 560px; overflow: auto; padding-right: 3px; }
.dialog-row { display: grid; grid-template-columns: 42px 40px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--bg) 32%, transparent); }
.dialog-row:first-child { border-color: color-mix(in srgb, var(--orange) 50%, var(--line)); background: var(--orange-soft); }
.dialog-rank { color: var(--orange); font-weight: 900; text-align: center; }
.dialog-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 800; }
.dialog-value { color: var(--orange); font-size: 12px; font-weight: 900; text-align: right; }

.skeleton-block, .skeleton-card { animation: pulse 1.3s ease-in-out infinite; }
.skeleton-card { background: linear-gradient(100deg, var(--surface-solid) 30%, var(--surface-hover) 50%, var(--surface-solid) 70%); background-size: 200% 100%; }
@keyframes pulse { 0%,100% { opacity: .52; } 50% { opacity: .86; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .main-nav { display: none; }
  .brand { min-width: auto; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-template-columns: .82fr 1.18fr; gap: 42px; }
}
@media (max-width: 900px) {
  :root { --shell: min(100% - 28px, 760px); }
  .topbar { min-height: 68px; }
  .brand-logo { width: 82px; height: 54px; }
  .brand-copy { display: none; }
  .refresh-button span { display: none; }
  .refresh-button { width: 40px; padding: 0; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 42px 0 35px; gap: 34px; }
  .hero-copy { text-align: center; padding-left: 0; }
  .eyebrow { margin-inline: auto; }
  .hero h1 { font-size: clamp(42px, 10vw, 62px); }
  .hero-rule { margin-inline: auto; }
  .hero-buttons { justify-content: center; }
  .spotlight-grid { grid-template-columns: 1fr; }
  .spotlight-card { min-height: auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .section-heading p { display: none; }
}
@media (max-width: 620px) {
  .online-players-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .online-player-card { min-height: 45px; }
  :root { --shell: calc(100% - 22px); }
  .top-actions { gap: 5px; }
  .ghost-button { display: none !important; }
  .brand-logo { width: 72px; }
  .hero { padding-top: 30px; }
  .hero h1 { font-size: clamp(38px, 13vw, 54px); }
  .hero-panel { padding: 21px 18px 18px; }
  .champion { grid-template-columns: 82px 1fr; gap: 15px; min-height: 115px; }
  .champion-avatar { width: 80px; height: 80px; border-radius: 18px; }
  .champion-info strong { font-size: 25px; }
  .hero-kpis > div { padding: 12px 9px; }
  .hero-kpis b { font-size: 18px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-field { width: 100%; }
  .stats-grid { grid-template-columns: 1fr; }
  .section-heading { margin-bottom: 16px; }
  .spotlight, .leaderboards { padding: 30px 0; }
  .footer { flex-direction: column; }
  .footer > div:last-child { text-align: left; }
  .dialog-shell { padding: 20px 14px; }
  .dialog-row { grid-template-columns: 32px 38px minmax(0,1fr); }
  .dialog-value { grid-column: 3; text-align: left; }
}

/* =====================================================================
   WANAStatsWeb 1.2 – Spielerprofile, globale Suche und Serverstatus
   ===================================================================== */

body { min-height: 100vh; }
#app { min-height: calc(100vh - 155px); }
.app-view { animation: view-in .22s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.topbar { gap: 16px; }
.brand { min-width: 196px; }
.brand-logo { width: 92px; height: 58px; }
.main-nav { flex: 0 0 auto; }
.main-nav a { padding-inline: 10px; }

.header-search { position: relative; width: clamp(190px, 19vw, 285px); margin-left: auto; }
.header-search-field {
  min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 12px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent); transition: .2s ease;
}
.header-search-field:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--orange-soft); background: var(--surface-solid); }
.header-search-field svg { width: 17px; flex: 0 0 auto; }
.header-search-field input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.header-search-field input::placeholder { color: var(--muted-2); }
.header-search-field kbd { display: grid; place-items: center; min-width: 23px; height: 22px; padding: 0 5px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted-2); background: var(--bg-soft); font: 700 10px/1 ui-monospace, monospace; }
.player-suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 9px); z-index: 80; padding: 7px;
  border: 1px solid color-mix(in srgb, var(--orange) 26%, var(--line)); border-radius: 15px;
  background: color-mix(in srgb, var(--surface-solid) 97%, transparent); box-shadow: 0 22px 60px rgba(0,0,0,.42); backdrop-filter: blur(18px);
}
.player-suggestion {
  width: 100%; min-height: 58px; display: grid; grid-template-columns: 39px minmax(0,1fr) auto; align-items: center; gap: 10px;
  padding: 8px 9px; border: 0; border-radius: 10px; color: var(--text); background: transparent; text-align: left; cursor: pointer;
}
.player-suggestion:hover, .player-suggestion.active { background: var(--orange-soft); }
.suggestion-info { min-width: 0; display: grid; gap: 3px; }
.suggestion-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.suggestion-info small { color: var(--muted); font-size: 10px; }
.suggestion-empty { padding: 18px 12px; color: var(--muted); text-align: center; font-size: 11px; }

.top-actions { flex: 0 0 auto; }
.server-status-chip {
  min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--surface-solid) 76%, transparent);
  color: var(--muted); font-size: 9px; font-weight: 950; letter-spacing: .09em;
}
.server-status-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px currentColor; }
.server-status-chip small { color: var(--muted-2); font-size: 9px; letter-spacing: 0; }
.server-status-chip.online { color: var(--green); border-color: color-mix(in srgb, var(--green) 26%, var(--line)); }
.server-status-chip.online i { background: var(--green); }
.server-status-chip.offline { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }
.server-status-chip.offline i { background: var(--danger); }
.server-status-chip.is-loading i { animation: pulse 1.2s ease-in-out infinite; }
.server-status-area { position: relative; display: inline-flex; }
.server-status-chip { cursor: pointer; font-family: inherit; }
.server-status-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.online-players-popover {
  position: absolute; z-index: 120; top: calc(100% + 12px); right: 0;
  width: min(650px, calc(100vw - 24px)); padding: 14px;
  border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--line)); border-radius: 17px;
  background: color-mix(in srgb, var(--surface-solid) 97%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.5); backdrop-filter: blur(22px) saturate(1.12);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px) scale(.985);
  transform-origin: top right; transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}
.server-status-area:hover .online-players-popover,
.server-status-area:focus-within .online-players-popover,
.server-status-area.is-open .online-players-popover {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.online-players-popover::before {
  content: ""; position: absolute; right: 34px; top: -7px; width: 12px; height: 12px;
  border-left: 1px solid color-mix(in srgb, var(--orange) 30%, var(--line));
  border-top: 1px solid color-mix(in srgb, var(--orange) 30%, var(--line));
  background: var(--surface-solid); transform: rotate(45deg);
}
.online-popover-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 2px 3px 12px; }
.online-popover-head > div { min-width: 0; display: grid; gap: 3px; }
.online-popover-head b { color: var(--text-strong); font-size: 13px; letter-spacing: -.01em; }
.online-popover-head small { color: var(--muted); font-size: 9px; }
.online-live-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.online-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.online-live-badge.offline { color: var(--danger); }
.online-players-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; max-height: min(390px, 68vh); overflow-y: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.online-player-card {
  min-width: 0; min-height: 47px; display: grid; grid-template-columns: 31px minmax(0,1fr); align-items: center; gap: 8px;
  padding: 7px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: color-mix(in srgb, var(--bg) 30%, transparent);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.online-player-card:hover { border-color: var(--line-strong); background: var(--orange-soft); transform: translateY(-1px); }
.online-player-card .player-avatar { width: 31px; height: 31px; border-radius: 8px; }
.online-player-copy { min-width: 0; display: grid; gap: 3px; }
.online-player-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); font-size: 10px; }
.online-player-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-2); font-size: 7.5px; }
.online-player-copy small.online-since-compact { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.18; }
.online-players-empty { padding: 26px 15px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 10px; }
.map-button { flex: 0 0 auto; }
.page-error { margin: 20px 0 0; }

.secondary-link-button {
  min-height: 48px; border: 1px solid var(--line); border-radius: 11px; padding: 0 17px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--text);
  background: var(--surface); font-size: 12px; font-weight: 900; transition: .2s ease;
}
.secondary-link-button span { color: var(--orange); }
.secondary-link-button:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--orange-soft); }

.player-link { color: inherit; text-decoration: none; cursor: pointer; transition: color .18s ease; }
.player-link:hover { color: var(--orange); }
.avatar-link { display: inline-flex; position: relative; z-index: 3; }
.champion-name { display: block; color: var(--text-strong); font-size: clamp(25px, 3vw, 38px); font-weight: 950; line-height: 1.05; letter-spacing: -.04em; }
.metric-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 850; }
.winner .player-link, .mini-rank-row .player-link { position: relative; z-index: 3; }
.card-open-button { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.metric-card > *:not(.card-open-button), .spotlight-card > *:not(.card-open-button) { position: relative; z-index: 2; }
.metric-card .player-link, .spotlight-card .player-link { position: relative; z-index: 4; }
.dialog-row { text-decoration: none; transition: .18s ease; }
.dialog-row:hover { border-color: var(--line-strong); background: var(--orange-soft); transform: translateX(2px); }

.presence-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 29px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 9px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.presence-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.presence-badge.online { color: var(--green); border-color: color-mix(in srgb, var(--green) 28%, var(--line)); background: color-mix(in srgb, var(--green) 7%, var(--surface)); }
.presence-badge.offline { color: var(--muted-2); }
.presence-badge.compact { min-width: 24px; min-height: 24px; padding: 0; justify-content: center; border: 0; background: transparent; }
.presence-badge.compact i { width: 8px; height: 8px; }

/* Player directory */
.subpage-hero { padding: 56px 0 35px; display: flex; align-items: end; justify-content: space-between; gap: 36px; }
.subpage-hero h1 { margin: 8px 0 9px; color: var(--text-strong); font-size: clamp(42px, 5vw, 67px); line-height: .95; letter-spacing: -.055em; }
.subpage-hero p { margin: 0; max-width: 620px; color: var(--muted); font-size: 14px; }
.subpage-kpis { min-width: 340px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; overflow: hidden; }
.subpage-kpis > div { padding: 19px 22px; display: grid; gap: 4px; }
.subpage-kpis > div + div { border-left: 1px solid var(--line); }
.subpage-kpis b { color: var(--orange); font-size: 27px; letter-spacing: -.04em; }
.subpage-kpis span { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
.players-directory { padding: 15px 0 45px; }
.players-toolbar { margin-bottom: 18px; padding: 11px; border-radius: 16px; display: flex; align-items: center; gap: 15px; box-shadow: var(--shadow-soft); }
.players-local-search { flex: 0 0 285px; }
.alphabet-filter { min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.alphabet-filter::-webkit-scrollbar { display: none; }
.alphabet-filter button { flex: 0 0 auto; min-width: 33px; height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 900; }
.alphabet-filter button:hover { color: var(--text); background: var(--orange-soft); }
.alphabet-filter button.active { color: #171009; border-color: var(--orange); background: linear-gradient(135deg, #ffbd55, var(--orange)); }
.players-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.player-card {
  min-height: 82px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto 24px; align-items: center; gap: 12px;
  padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-soft); transition: .2s ease;
}
.player-card:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-hover); }
.player-card .player-avatar { width: 48px; height: 48px; border-radius: 12px; }
.player-card-info { min-width: 0; display: grid; gap: 4px; }
.player-card-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); font-size: 14px; }
.player-card-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.player-card-arrow { color: var(--orange); font-size: 17px; transition: .2s ease; }
.player-card:hover .player-card-arrow { transform: translateX(3px); }

/* Profile */
.profile-loading { min-height: 350px; margin: 60px 0; display: grid; place-content: center; justify-items: center; gap: 18px; border-radius: 24px; color: var(--muted); }
.profile-loader { width: 42px; height: 42px; border: 3px solid var(--line); border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
.profile-not-found { min-height: 440px; display: grid; place-content: center; justify-items: center; }
.profile-not-found .primary-button { margin-top: 18px; }
.profile-hero {
  position: relative; min-height: 390px; margin-top: 38px; padding: 56px 42px 36px;
  display: grid; grid-template-columns: 245px minmax(0,1fr) 150px; align-items: center; gap: 38px;
  border-radius: 26px; overflow: hidden; border-color: color-mix(in srgb, var(--orange) 36%, var(--line));
}
.profile-hero::after { content: ""; position: absolute; right: -110px; top: -180px; width: 430px; height: 430px; border-radius: 50%; background: color-mix(in srgb, var(--orange) 10%, transparent); filter: blur(70px); pointer-events: none; }
.back-button { position: absolute; top: 17px; left: 20px; z-index: 4; min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: color-mix(in srgb, var(--surface-solid) 76%, transparent); cursor: pointer; font-size: 10px; font-weight: 850; }
.back-button span { color: var(--orange); font-size: 16px; }
.back-button:hover { color: var(--text); border-color: var(--line-strong); background: var(--orange-soft); }
.profile-skin-stage { position: relative; z-index: 2; min-height: 295px; display: grid; place-items: center; }
.profile-skin-stage::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 175px; height: 30px; transform: translateX(-50%); border-radius: 50%; background: rgba(0,0,0,.36); filter: blur(12px); }
.skin-glow { position: absolute; width: 210px; height: 210px; border-radius: 50%; background: color-mix(in srgb, var(--orange) 19%, transparent); filter: blur(40px); }
.profile-skin { position: relative; z-index: 2; display: block; max-width: 220px; max-height: 300px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 20px 23px rgba(0,0,0,.34)); }
.profile-skin-fallback { position: relative; z-index: 2; }
.profile-skin-fallback .champion-avatar { width: 145px; height: 145px; }
.profile-identity { position: relative; z-index: 2; min-width: 0; }
.profile-name-line { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.profile-name-line h1 { margin: 8px 0 3px; overflow-wrap: anywhere; color: var(--text-strong); font-size: clamp(42px, 5vw, 68px); line-height: .94; letter-spacing: -.055em; }
.profile-uuid { margin: 9px 0 25px; color: var(--muted-2); font: 600 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
.profile-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: color-mix(in srgb, var(--bg) 28%, transparent); }
.profile-meta-grid > div { min-width: 0; padding: 15px; display: grid; gap: 6px; }
.profile-meta-grid > div + div { border-left: 1px solid var(--line); }
.profile-meta-grid span { color: var(--muted-2); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.profile-meta-grid b { overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 11px; white-space: nowrap; }
.profile-avatar-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; padding: 19px 13px; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb, var(--bg) 34%, transparent); }
.profile-avatar-card > span { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.profile-avatar-card .champion-avatar { width: 105px; height: 105px; border-radius: 21px; }
.profile-stats-section { padding: 48px 0 30px; }
.global-stats-section { padding: 28px 0 42px; }
.global-kpis { grid-template-columns: repeat(3, 1fr); min-width: 510px; }
.global-kpis > div + div { border-left: 1px solid var(--line); }
.global-stats-loading { min-height: 150px; margin-top: 16px; }
.global-stat-card .profile-stat-value { color: var(--card-color); }
.global-stat-card .profile-stat-rank { color: var(--muted); }
.profile-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.profile-stat-card { position: relative; min-height: 205px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-soft); }
.profile-stat-card::after { content: ""; position: absolute; right: -45px; top: -45px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--card-color) 11%, transparent); filter: blur(22px); }
.profile-stat-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.profile-stat-card h3 { position: relative; z-index: 1; margin: 19px 0 7px; color: var(--text-strong); font-size: 15px; }
.profile-stat-value { position: relative; z-index: 1; display: block; color: var(--orange); font-size: clamp(23px, 2.2vw, 31px); line-height: 1; letter-spacing: -.04em; overflow-wrap: anywhere; }
.profile-stat-rank { position: relative; z-index: 1; display: block; margin-top: 11px; color: var(--muted); font-size: 10px; font-weight: 750; }
.profile-stat-key { position: absolute; z-index: 1; left: 18px; bottom: 16px; color: var(--muted-2); font-size: 8px; }
.empty-inline { grid-column: 1 / -1; padding: 65px 20px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }

@media (max-width: 1280px) {
  .online-players-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-copy { display: none; }
  .brand { min-width: auto; }
  .main-nav a { padding-inline: 8px; font-size: 11px; }
  .header-search { width: min(240px, 22vw); }
  .server-status-chip small { display: none; }
  .profile-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px) {
  .main-nav { display: flex; }
  .main-nav a span { display: none; }
  .brand-logo { width: 78px; }
  .header-search { width: min(230px, 27vw); }
  .server-status-chip { padding-inline: 9px; }
  .server-status-chip span { display: none; }
  .players-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-hero { grid-template-columns: 205px minmax(0,1fr); }
  .profile-avatar-card { display: none; }
}

@media (max-width: 860px) {
  .online-players-popover { position: fixed; top: 74px; right: 12px; left: 12px; width: auto; }
  .online-players-popover::before { display: none; }
  .online-players-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: min(410px, 65vh); }
  .topbar { min-height: 70px; flex-wrap: wrap; padding: 7px 0; }
  .brand { order: 1; }
  .top-actions { order: 2; margin-left: auto; }
  .main-nav { order: 3; height: 42px; flex: 1 1 auto; justify-content: center; }
  .main-nav a { padding: 0 13px; }
  .header-search { order: 4; width: 100%; margin: 0 0 5px; }
  .player-suggestions { top: calc(100% + 5px); }
  .subpage-hero { align-items: stretch; flex-direction: column; padding-top: 42px; }
  .subpage-kpis { min-width: 0; width: 100%; }
  .profile-hero { min-height: auto; grid-template-columns: 170px minmax(0,1fr); padding: 62px 25px 30px; gap: 24px; }
  .profile-skin-stage { min-height: 240px; }
  .profile-skin { max-height: 240px; max-width: 175px; }
  .profile-meta-grid { grid-template-columns: 1fr; }
  .profile-meta-grid > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .topbar { gap: 7px; }
  .brand-logo { width: 68px; height: 48px; }
  .main-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: 1 0 auto; justify-content: center; padding: 0 10px; font-size: 10px; }
  .server-status-chip { min-width: 35px; padding: 0; justify-content: center; }
  .server-status-chip span, .server-status-chip small { display: none; }
  .header-search-field kbd { display: none; }
  .players-toolbar { align-items: stretch; flex-direction: column; }
  .players-local-search { flex-basis: auto; width: 100%; }
  .players-grid { grid-template-columns: 1fr; }
  .player-card { grid-template-columns: 48px minmax(0,1fr) auto 20px; }
  .subpage-hero h1 { font-size: 46px; }
  .profile-hero { grid-template-columns: 1fr; text-align: center; padding: 58px 18px 25px; }
  .profile-skin-stage { min-height: 205px; }
  .profile-skin { max-height: 205px; }
  .profile-name-line { justify-content: center; }
  .profile-uuid { margin-bottom: 18px; }
  .profile-meta-grid { text-align: left; }
  .profile-stats-grid { grid-template-columns: 1fr; }
  .profile-stat-card { min-height: 185px; }
  .profile-stats-section { padding-top: 35px; }
}

/* Keep the reduced three-item navigation visible on normal desktop widths. */
.main-nav { display: flex; }

/* =====================================================================
   WANAStatsWeb 1.4 – deutsche Fortschritte und serverweite Platzierungen
   ===================================================================== */

.profile-meta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-advancements-section { padding: 28px 0 48px; }
.advancement-total-badge {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--green) 8%, var(--surface-solid));
}
.advancement-total-badge b { color: var(--green); font-size: 17px; }
.advancement-total-badge span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.advancement-overview {
  display: grid; grid-template-columns: auto minmax(180px, 1fr); align-items: center; gap: 24px;
  margin-bottom: 14px; padding: 17px 19px; border-radius: 16px;
}
.advancement-overview-copy { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.advancement-overview-copy span { color: var(--muted); font-size: 10px; font-weight: 850; }
.advancement-overview-copy strong { color: var(--green); font-size: 22px; letter-spacing: -.04em; }
.advancement-progress-track {
  height: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 99px;
  background: color-mix(in srgb, var(--bg) 58%, transparent); box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.advancement-progress-track > span {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 82%, #fff), var(--green));
  box-shadow: 0 0 18px color-mix(in srgb, var(--green) 42%, transparent); transition: width .45s ease;
}
.advancement-categories { display: grid; gap: 12px; }
.advancement-category { overflow: hidden; border-radius: 17px; }
.advancement-category > summary,
.advancement-item > summary { list-style: none; cursor: pointer; user-select: none; }
.advancement-category > summary::-webkit-details-marker,
.advancement-item > summary::-webkit-details-marker { display: none; }
.advancement-category > summary {
  min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 17px; transition: background .2s ease;
}
.advancement-category > summary:hover { background: var(--surface-hover); }
.advancement-category[open] > summary { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--orange) 5%, transparent); }
.advancement-category-identity { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.advancement-category-icon {
  grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--orange) 28%, var(--line)); border-radius: 12px;
  background: var(--orange-soft); font-style: normal; font-size: 20px;
}
.advancement-category-identity b { overflow: hidden; text-overflow: ellipsis; color: var(--text-strong); font-size: 14px; white-space: nowrap; }
.advancement-category-identity small { color: var(--muted); font-size: 10px; }
.advancement-category-progress { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.advancement-category-progress-track { width: 105px; height: 6px; overflow: hidden; border-radius: 99px; background: var(--line); }
.advancement-category-progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.advancement-category-progress b { min-width: 42px; color: var(--muted); font-size: 10px; text-align: right; }
.advancement-category-progress > i { color: var(--orange); font-style: normal; transition: transform .2s ease; }
.advancement-category[open] .advancement-category-progress > i { transform: rotate(180deg); }
.advancement-list { display: grid; gap: 8px; padding: 12px; background: color-mix(in srgb, var(--bg) 22%, transparent); }
.advancement-item {
  overflow: hidden; border: 1px solid var(--line); border-radius: 13px;
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent); transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.advancement-item:hover { border-color: color-mix(in srgb, var(--orange) 28%, var(--line)); transform: translateY(-1px); }
.advancement-item.completed {
  border-color: color-mix(in srgb, var(--green) 32%, var(--line));
  background: color-mix(in srgb, var(--green) 6%, var(--surface-solid));
}
.advancement-item > summary {
  min-height: 64px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 9px 13px;
}
.advancement-status-icon {
  width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted-2); background: color-mix(in srgb, var(--bg) 38%, transparent); font-size: 17px; font-weight: 950;
}
.advancement-item.completed .advancement-status-icon {
  color: #071a10; border-color: color-mix(in srgb, var(--green) 65%, transparent); background: var(--green);
  box-shadow: 0 0 16px color-mix(in srgb, var(--green) 22%, transparent);
}
.advancement-item-copy { min-width: 0; display: grid; gap: 3px; }
.advancement-item-copy b { overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 12px; white-space: nowrap; }
.advancement-item.completed .advancement-item-copy b { color: color-mix(in srgb, var(--green) 82%, var(--text-strong)); }
.advancement-item-copy small { color: var(--muted-2); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.advancement-item-badges { display: flex; align-items: center; gap: 8px; }
.advancement-secret-badge {
  padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line)); border-radius: 7px;
  color: var(--orange); background: var(--orange-soft); font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.advancement-rank-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--orange) 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 11%, var(--surface));
  color: color-mix(in srgb, var(--orange) 88%, var(--text-strong));
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .035em;
  white-space: nowrap;
}
.advancement-rank-badge.pending-rank { opacity: .72; border-style: dashed; }
.advancement-rank-badge.first {
  border-color: color-mix(in srgb, #ffd166 65%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, #ffd166 19%, var(--surface)), color-mix(in srgb, var(--orange) 11%, var(--surface)));
  color: color-mix(in srgb, #ffd166 86%, var(--text-strong));
  box-shadow: 0 0 18px color-mix(in srgb, #ffd166 14%, transparent);
}

.advancement-chevron { color: var(--muted); font-style: normal; transition: transform .2s ease; }
.advancement-item[open] .advancement-chevron { transform: rotate(180deg); }
.advancement-item-body { padding: 0 63px 14px; }
.advancement-item-body p { margin: 0; padding-top: 1px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.advancement-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.advancement-item-meta span,
.advancement-item-meta time { font-size: 9px; font-weight: 800; }
.advancement-item-meta .done { color: var(--green); }
.advancement-item-meta .pending { color: var(--orange); }
.advancement-item-meta time { color: var(--muted); }
.advancement-item-meta .server-rank { color: color-mix(in srgb, var(--orange) 80%, var(--text)); }
.advancement-item-meta .server-first { color: color-mix(in srgb, #ffd166 78%, var(--text-strong)); }

.advancement-item-meta code {
  margin-left: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--muted-2); background: var(--bg-soft); font-size: 8px; white-space: nowrap;
}
.advancement-empty { min-height: 250px; }

@media (max-width: 900px) {
  .profile-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-meta-grid > div + div { border-left: 1px solid var(--line); border-top: 0; }
  .profile-meta-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .profile-meta-grid > div:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .advancement-overview { grid-template-columns: 1fr; gap: 11px; }
  .advancement-overview-copy { justify-content: space-between; }
  .advancement-category > summary { padding-inline: 12px; }
  .advancement-category-progress-track { display: none; }
  .advancement-category-identity { grid-template-columns: 38px minmax(0, 1fr); }
  .advancement-category-icon { width: 38px; height: 38px; }
  .advancement-item > summary { grid-template-columns: 34px minmax(0, 1fr) auto; padding-inline: 10px; }
  .advancement-status-icon { width: 31px; height: 31px; }
  .advancement-item-body { padding: 0 12px 13px 55px; }
  .advancement-item-meta code { width: 100%; margin-left: 0; }
  .advancement-total-badge { padding: 8px 10px; }
}

/* =====================================================================
   WANAStatsWeb 1.5.2 – dauerhafte Statistikdaten und einheitliche Online-Zeit
   ===================================================================== */
.hero {
  min-height: 355px;
  padding: 34px 0 40px;
  grid-template-columns: minmax(0, .94fr) minmax(390px, 1.06fr);
  gap: 48px;
}
.eyebrow { padding: 6px 9px; font-size: 9px; }
.hero h1 {
  margin-top: 16px;
  gap: 2px;
  font-size: clamp(38px, 4.25vw, 56px);
  line-height: .98;
}
.hero-rule { width: 64px; height: 3px; margin-top: 17px; }
.hero-buttons { margin-top: 20px; gap: 9px; }
.primary-button, .secondary-button, .secondary-link-button {
  min-height: 42px;
  padding-inline: 15px;
  font-size: 11px;
}
.hero-panel { border-radius: 20px; padding: 20px 23px 19px; }
.hero-panel-top { font-size: 9px; }
.champion {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 17px;
  min-height: 108px;
  margin: 12px 0;
  padding: 12px 0;
}
.champion-avatar { width: 82px; height: 82px; border-radius: 18px; }
.champion-info > span { font-size: 9px; }
.champion-info strong { margin-top: 5px; font-size: clamp(24px, 2.55vw, 35px); }
.champion-info small { margin-top: 7px; font-size: 11px; }
.champion-name { font-size: clamp(24px, 2.55vw, 35px); }
.hero-kpis { border-radius: 12px; }
.hero-kpis > div { padding: 10px 13px; gap: 2px; }
.hero-kpis b { font-size: 19px; }
.hero-kpis span { font-size: 7px; }

.spotlight { padding: 28px 0 34px; }
.leaderboards { padding: 34px 0; }
.section-heading { margin-bottom: 16px; }
.section-heading h2 { font-size: clamp(24px, 2.6vw, 32px); }
.section-heading p { font-size: 12px; }
.spotlight-grid { gap: 13px; }
.spotlight-card { min-height: 260px; padding: 18px; }
.spotlight-card h3 { margin-top: 16px; font-size: 20px; }
.winner { margin-top: 6px; font-size: 11px; }
.spotlight-value { margin-top: 5px; font-size: 22px; }
.mini-ranking { gap: 7px; margin-top: 14px; }
.mini-rank-row { padding-bottom: 8px; font-size: 10px; }

.stats-grid { align-items: stretch; }
.metric-card {
  min-height: 220px;
  padding: 17px;
  display: flex;
  flex-direction: column;
}
.metric-card h3 { margin-top: 16px; font-size: 16px; }
.metric-leader { margin-top: 15px; margin-bottom: 13px; }
.card-footer {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  min-height: 31px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.card-footer span { color: var(--muted); }
.card-footer b { line-height: 1; }
.metric-empty-state {
  flex: 1;
  min-height: 88px;
  margin-top: 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 26%, transparent);
  text-align: center;
}
.metric-empty-state strong { color: var(--text); font-size: 12px; }
.metric-empty-state span { max-width: 210px; color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.metric-card.is-empty { cursor: default; }
.metric-card.is-empty:hover {
  transform: none;
  border-color: var(--line);
  background: linear-gradient(145deg, var(--surface-solid), var(--surface));
}

@media (max-width: 1180px) {
  .hero { grid-template-columns: .86fr 1.14fr; gap: 34px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 32px 0 29px; gap: 26px; }
  .hero h1 { font-size: clamp(38px, 9vw, 54px); }
  .spotlight-card { min-height: auto; }
}
@media (max-width: 620px) {
  .hero { padding-top: 24px; }
  .hero h1 { font-size: clamp(34px, 12vw, 48px); }
  .hero-panel { padding: 18px 16px 16px; }
  .champion { grid-template-columns: 72px minmax(0, 1fr); min-height: 94px; gap: 13px; }
  .champion-avatar { width: 70px; height: 70px; border-radius: 15px; }
  .champion-info strong, .champion-name { font-size: 23px; }
  .hero-kpis > div { padding: 9px 7px; }
  .hero-kpis b { font-size: 17px; }
  .spotlight, .leaderboards { padding: 27px 0; }
  .metric-card { min-height: 208px; }
}


/* =====================================================================
   WANAStatsWeb 1.6 – Kampflog, Siege und Rivalitäten
   ===================================================================== */
.combat-page-hero { padding-bottom: 28px; }
.combat-kpis { min-width: 360px; }
.combat-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 15px;
  margin-bottom: 44px;
}
.combat-panel {
  min-height: 415px;
  padding: 22px;
  border-radius: 19px;
}
.combat-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.combat-panel-heading h2 { margin: 5px 0 0; color: var(--text-strong); font-size: 23px; letter-spacing: -.035em; }
.combat-panel-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line)); border-radius: 12px;
  color: var(--orange); background: var(--orange-soft); font-size: 19px;
}
.combat-ranking-list, .combat-rivalry-list { display: grid; gap: 8px; }
.combat-winner-row {
  display: grid; grid-template-columns: 34px 42px minmax(0,1fr) auto; align-items: center; gap: 10px;
  min-height: 58px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 34%, transparent); transition: .18s ease;
}
.combat-winner-row:first-child { border-color: color-mix(in srgb, var(--orange) 48%, var(--line)); background: var(--orange-soft); }
.combat-winner-row:hover { border-color: var(--line-strong); transform: translateX(2px); }
.combat-rank { color: var(--orange); font-size: 10px; font-weight: 950; text-align: center; }
.combat-player-copy { min-width: 0; display: grid; gap: 3px; }
.combat-player-copy .player-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 850; }
.combat-player-copy small { color: var(--muted); font-size: 9px; }
.combat-win-count { color: var(--orange); font-size: 19px; }
.combat-inline-empty {
  min-height: 255px; display: grid; place-items: center; padding: 30px;
  border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 11px; text-align: center;
}
.combat-rivalry-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 10px 82px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 34%, transparent);
  transition: .18s ease;
}
.combat-rivalry-row:first-child {
  border-color: color-mix(in srgb, var(--orange) 48%, var(--line));
  background: var(--orange-soft);
}
.combat-rivalry-row:hover { border-color: var(--line-strong); }
.combat-rivalry-row > .combat-rank {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
}
.combat-rivalry-player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.combat-rivalry-player-first {
  justify-content: flex-end;
  text-align: right;
}
.combat-rivalry-player-second {
  justify-content: flex-start;
  text-align: left;
}
.combat-rivalry-player .player-link:not(.avatar-link) {
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 850;
}
.combat-rivalry-player .player-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.combat-versus-score {
  width: 68px;
  padding: 8px 6px;
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  border-radius: 9px;
  color: var(--orange);
  background: color-mix(in srgb, var(--orange-soft) 72%, transparent);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  justify-self: center;
}
.combat-duel-count {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 58px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  font-size: 8px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}
.combat-history { padding-bottom: 48px; }
.combat-fights-list { display: grid; gap: 9px; }
.combat-fight-row {
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) 176px minmax(0,1fr);
  align-items: stretch; gap: 0; min-height: 96px; padding: 12px 18px; border-radius: 15px;
  overflow: hidden;
}
.combat-fight-row::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--orange), #ffcc55);
}
.combat-fighter {
  min-width: 0; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 24px;
}
.combat-fighter.winner { justify-content: flex-end; text-align: right; }
.combat-fighter.loser { justify-content: flex-start; text-align: left; }
.combat-fighter .avatar-link { flex: 0 0 auto; }
.combat-fighter .champion-avatar { width: 53px; height: 53px; border-radius: 13px; }
.combat-fighter-copy { min-width: 0; max-width: 240px; display: grid; gap: 4px; }
.combat-fighter small { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.combat-fighter.winner small { color: var(--green); }
.combat-fighter .player-link:not(.avatar-link) {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-strong); font-size: 14px; font-weight: 900;
}
.combat-fight-center {
  min-width: 0; min-height: 70px; display: grid; place-content: center; justify-items: center; gap: 4px;
  padding: 8px 14px; border-inline: 1px solid var(--line); text-align: center;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}
.combat-fight-symbol { color: var(--orange); font-size: 17px; }
.combat-weapon-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 11px; }
.combat-fight-center small { color: var(--muted-2); font-size: 8px; white-space: nowrap; }
.combat-pagination {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  margin-top: 15px; padding: 10px 12px; border-radius: 14px;
}
.combat-pagination > span { color: var(--muted); font-size: 10px; font-weight: 850; text-align: center; }
.pagination-button {
  min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); background: transparent; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; transition: .18s ease;
}
.pagination-button:last-child { justify-self: end; }
.pagination-button:hover:not(:disabled) { color: var(--orange); border-color: var(--line-strong); background: var(--orange-soft); }
.pagination-button:disabled { opacity: .35; cursor: not-allowed; }

@media (max-width: 1100px) {
  .combat-overview-grid { grid-template-columns: 1fr; }
  .combat-panel { min-height: 0; }
  .combat-inline-empty { min-height: 150px; }
}
@media (max-width: 760px) {
  .combat-kpis { min-width: 0; width: 100%; }
  .combat-fight-row { grid-template-columns: minmax(0,1fr) 122px minmax(0,1fr); padding: 10px 8px; }
  .combat-fighter { gap: 8px; padding-inline: 10px; }
  .combat-fight-center { min-width: 0; padding-inline: 6px; }
  .combat-fighter .champion-avatar { width: 42px; height: 42px; border-radius: 10px; }
  .combat-fighter .player-link:not(.avatar-link) { font-size: 11px; }
  .combat-weapon-name { max-width: 108px; }
  .combat-rivalry-row { grid-template-columns: minmax(0,1fr) 58px minmax(0,1fr); gap: 10px; padding-inline: 66px; }
  .combat-versus-score { width: 58px; font-size: 11px; }
}
@media (max-width: 540px) {
  .combat-overview-grid { margin-bottom: 32px; }
  .combat-panel { padding: 16px 12px; }
  .combat-rivalry-row { grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr); gap: 7px; padding: 38px 12px 12px; }
  .combat-rivalry-row > .combat-rank { top: 17px; left: 14px; transform: none; text-align: left; }
  .combat-duel-count { top: 12px; right: 12px; transform: none; }
  .combat-rivalry-player .avatar-link { display: none; }
  .combat-rivalry-player .player-link:not(.avatar-link) { max-width: 110px; font-size: 10px; }
  .combat-versus-score { width: 48px; padding-inline: 3px; }
  .combat-fight-row { grid-template-columns: 1fr; padding: 10px 12px; text-align: left; }
  .combat-fighter, .combat-fighter.winner, .combat-fighter.loser {
    justify-content: flex-start; padding: 6px 2px; text-align: left;
  }
  .combat-fighter .avatar-link { order: 0; }
  .combat-fighter-copy { order: 1; max-width: none; }
  .combat-fight-center { min-height: 60px; border-inline: 0; border-block: 1px solid var(--line); }
  .combat-pagination { grid-template-columns: 1fr 1fr; }
  .combat-pagination > span { grid-column: 1 / -1; grid-row: 1; }
  .pagination-button { grid-row: 2; }
}


/* =====================================================================
   WANAStatsWeb 1.6.4 – PvP-Bilanz im Spielerprofil
   ===================================================================== */
.profile-combat-section { padding: 10px 0 58px; }
.profile-combat-summary {
  max-width: 520px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: 9px;
  font-weight: 850;
  text-align: center;
}
.profile-combat-legend {
  margin: -8px 0 14px;
  color: var(--muted-2);
  font-size: 9px;
  text-align: right;
}
.profile-combat-legend b { color: var(--orange); }
.profile-combat-list { display: grid; gap: 10px; }
.profile-combat-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr) 118px;
  align-items: center;
  gap: 18px;
  min-height: 88px;
  padding: 13px 17px;
  border-radius: 15px;
  overflow: hidden;
}
.profile-combat-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), #ffcc55);
}
.profile-combat-player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.profile-combat-owner { justify-content: flex-end; text-align: right; }
.profile-combat-opponent { justify-content: flex-start; text-align: left; }
.profile-combat-player .champion-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex: 0 0 auto;
}
.profile-combat-player-copy { min-width: 0; display: grid; gap: 4px; }
.profile-combat-player-copy small {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.profile-combat-owner .profile-combat-player-copy small { color: var(--orange); }
.profile-combat-player-copy .player-link {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 900;
}
.profile-combat-score {
  width: 92px;
  min-height: 56px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  border-radius: 12px;
  background: var(--orange-soft);
  text-align: center;
}
.profile-combat-score strong { color: var(--orange); font-size: 18px; line-height: 1; white-space: nowrap; }
.profile-combat-score small { color: var(--muted-2); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.profile-combat-score.is-positive { border-color: color-mix(in srgb, var(--green) 48%, var(--line)); background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.profile-combat-score.is-positive strong { color: var(--green); }
.profile-combat-score.is-negative { border-color: color-mix(in srgb, #ff6c75 48%, var(--line)); background: color-mix(in srgb, #ff6c75 9%, var(--surface)); }
.profile-combat-score.is-negative strong { color: #ff7f86; }
.profile-combat-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.profile-combat-meta b { color: var(--text); font-size: 10px; white-space: nowrap; }
.profile-combat-meta small { color: var(--muted-2); font-size: 8px; line-height: 1.35; }
.profile-combat-empty { min-height: 180px; }
@media (max-width: 900px) {
  .profile-combat-row { grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .profile-combat-score { width: 78px; }
  .profile-combat-meta { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--line); text-align: center; }
  .profile-combat-player-copy .player-link { max-width: 150px; font-size: 11px; }
  .profile-combat-player .champion-avatar { width: 42px; height: 42px; border-radius: 10px; }
}
@media (max-width: 560px) {
  .profile-combat-summary { max-width: none; width: 100%; border-radius: 12px; line-height: 1.45; }
  .profile-combat-legend { margin-top: 0; text-align: center; }
  .profile-combat-row { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); gap: 6px; padding: 11px 8px; }
  .profile-combat-score { width: 62px; min-height: 50px; }
  .profile-combat-score strong { font-size: 14px; }
  .profile-combat-score small { display: none; }
  .profile-combat-player { gap: 6px; }
  .profile-combat-player .avatar-link { display: none; }
  .profile-combat-player-copy .player-link { max-width: 100px; font-size: 10px; }
  .profile-combat-player-copy small { font-size: 7px; }
}

/* =====================================================================
   Elite-Bosse & Trophäen · WANAStatsWeb 1.8.4
   ===================================================================== */
.elite-boss-page-hero { padding-bottom: 30px; }
.elite-boss-page-hero > div:first-child { max-width: 680px; }
.elite-hook-status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 11px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 10px; font-weight: 800;
}
.elite-hook-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 12px color-mix(in srgb, var(--danger) 65%, transparent); }
.elite-hook-status.is-live::before { background: var(--green); box-shadow: 0 0 12px color-mix(in srgb, var(--green) 70%, transparent); }
.elite-boss-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.elite-recent-section, .elite-catalog-section, .profile-elite-boss-section { padding: 34px 0 54px; }
.elite-boss-recent-list { display: grid; gap: 10px; }
.elite-boss-kill-row {
  position: relative; overflow: hidden; min-height: 112px; border-radius: 18px; padding: 14px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr); align-items: center;
}
.elite-boss-kill-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(var(--orange), var(--gold));
}
.elite-kill-boss, .elite-kill-player { min-width: 0; display: flex; align-items: center; gap: 14px; }
.elite-kill-player { justify-content: flex-start; padding-left: 22px; }
.elite-kill-boss { justify-content: flex-end; text-align: right; padding-right: 22px; }
.elite-kill-boss > div, .elite-kill-player > div { min-width: 0; display: grid; gap: 4px; }
.elite-kill-boss small, .elite-kill-player small { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.elite-kill-boss h3 { margin: 0; color: var(--text-strong); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elite-kill-boss span, .elite-kill-player span { color: var(--muted); font-size: 9px; }
.elite-kill-player .player-link:not(.avatar-link) { color: var(--text-strong); font-size: 14px; font-weight: 900; }
.elite-kill-center {
  min-height: 72px; display: grid; place-content: center; justify-items: center; gap: 5px; text-align: center;
  border-inline: 1px solid var(--line); color: var(--muted);
}
.elite-kill-center b { color: var(--text); font-size: 10px; }
.elite-kill-center small { color: var(--muted-2); font-size: 8px; }
.elite-kill-symbol { color: var(--orange); font-size: 20px; }

.elite-boss-toolbar { margin-bottom: 16px; border-radius: 16px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.elite-boss-toolbar .search-field { flex: 0 1 340px; }
.elite-difficulty-filters { flex-wrap: wrap; justify-content: flex-end; }
.elite-boss-catalog { display: grid; gap: 11px; }
.elite-boss-card { overflow: hidden; border-radius: 19px; }
.elite-boss-card > summary {
  position: relative; cursor: pointer; min-height: 104px; padding: 16px 18px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
  list-style: none; transition: background .2s ease;
}
.elite-boss-card > summary::-webkit-details-marker { display: none; }
.elite-boss-card > summary:hover { background: var(--surface-hover); }
.elite-boss-card[open] > summary { border-bottom: 1px solid var(--line); background: var(--orange-soft); }
.elite-boss-card-copy { min-width: 0; display: grid; gap: 7px; }
.elite-boss-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.elite-boss-card-title h3 { min-width: 0; margin: 0; color: var(--text-strong); font-size: 17px; letter-spacing: -.015em; }
.elite-boss-card-copy p { margin: 0; color: var(--muted); font-size: 10px; }
.elite-boss-card-stats { display: flex; align-items: stretch; gap: 8px; }
.elite-boss-chevron { color: var(--orange); font-size: 19px; transition: transform .2s ease; }
.elite-boss-card[open] .elite-boss-chevron { transform: rotate(180deg); }
.elite-boss-card-body { padding: 16px 18px 18px; }
.elite-boss-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.elite-boss-facts > div {
  min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-solid) 75%, transparent); display: grid; gap: 5px;
}
.elite-boss-facts span { color: var(--muted-2); font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.elite-boss-facts b { color: var(--text); font-size: 11px; overflow-wrap: anywhere; }
.elite-boss-slayers-heading { margin: 19px 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.elite-boss-slayers-heading h4 { margin: 0; color: var(--text-strong); font-size: 14px; }
.elite-boss-slayers-heading span { color: var(--muted); font-size: 9px; }
.elite-boss-slayers { display: grid; gap: 7px; }
.elite-boss-slayer-row {
  min-width: 0; display: grid; grid-template-columns: 34px auto minmax(130px, 1fr) 90px 110px 170px; gap: 11px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface) 76%, transparent);
}
.elite-slayer-rank { color: var(--orange); font-size: 9px; font-weight: 950; text-align: center; }
.elite-slayer-copy { min-width: 0; display: grid; gap: 3px; }
.elite-slayer-copy .player-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); font-size: 11px; font-weight: 900; }
.elite-slayer-copy small, .elite-boss-slayer-row time { color: var(--muted-2); font-size: 8px; }
.elite-boss-slayer-row time { text-align: right; }
.metric-stack { min-width: 72px; display: grid; align-content: center; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--orange-soft); text-align: center; }
.metric-stack b { color: var(--text-strong); font-size: 13px; }
.metric-stack span { color: var(--muted-2); font-size: 7px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.boss-difficulty { display: inline-flex; align-items: center; justify-content: center; min-height: 23px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.difficulty-legendar { color: #ffd569; background: rgba(255, 198, 80, .13); border-color: rgba(255, 198, 80, .42); }
.difficulty-extrem { color: #ff858b; background: rgba(255, 108, 117, .11); border-color: rgba(255, 108, 117, .42); }
.difficulty-schwer { color: #ff9b4a; background: rgba(255, 151, 28, .11); border-color: rgba(255, 151, 28, .42); }
.difficulty-mittel { color: #d6b3ff; background: rgba(210, 155, 255, .10); border-color: rgba(210, 155, 255, .38); }
.difficulty-leicht { color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); border-color: color-mix(in srgb, var(--green) 38%, transparent); }
.elite-boss-expanded-overview {
  display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 18px; align-items: stretch;
  padding: 14px; border: 1px solid var(--line); border-radius: 17px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--orange-soft) 48%, var(--surface)), var(--surface));
}
.elite-boss-expanded-copy { min-width: 0; display: grid; align-content: center; }

.boss-visual {
  position: relative; isolation: isolate; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,178,72,.16), transparent 52%),
    linear-gradient(150deg, color-mix(in srgb, var(--surface-strong) 90%, #1d1309), var(--surface-solid));
  border: 1px solid color-mix(in srgb, var(--orange) 58%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-soft);
}
.boss-visual.large { width: 78px; height: 78px; border-radius: 19px; }
.boss-visual.hero { width: 136px; height: 136px; border-radius: 24px; align-self: center; justify-self: center; }
.boss-visual::before, .boss-visual::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.boss-visual::after { inset: 0; border-radius: inherit; box-shadow: inset 0 0 24px rgba(0,0,0,.24); z-index: 5; }
.boss-portrait-canvas {
  position: absolute; z-index: 1; inset: -4%; width: 108%; height: 108%; opacity: 0; transform: translateY(2%) scale(.96);
  transition: opacity .18s ease, transform .18s ease; image-rendering: pixelated;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.52));
}
.boss-portrait-canvas.is-ready { opacity: 1; transform: translateY(2%) scale(1); }
.boss-visual.is-baby .boss-portrait-canvas { transform: translateY(8%) scale(.86); }
.boss-visual.is-baby .boss-portrait-canvas.is-ready { transform: translateY(8%) scale(.9); }
.boss-visual.is-large-entity .boss-portrait-canvas { width: 116%; height: 116%; inset: -8%; }
.boss-head-image, .boss-player-skin {
  position: relative; z-index: 3; width: 100%; height: 100%; padding: 4px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.42));
}
.boss-visual.large .boss-head-image,
.boss-visual.large .boss-player-skin { padding: 5px; }
.boss-visual.hero .boss-head-image,
.boss-visual.hero .boss-player-skin { padding: 8px; }
.boss-portrait-canvas.is-hidden { opacity: 0 !important; transform: translateY(2%) scale(.98) !important; }
.boss-entity-render {
  position: absolute; z-index: 2; inset: -9%; display: block; opacity: 0;
  transform: translateY(3%) scale(.94); transition: opacity .25s ease, transform .25s ease;
  pointer-events: none; overflow: hidden;
}
.boss-entity-render.is-ready { opacity: 1; transform: translateY(2%) scale(1); }
.boss-entity-render canvas {
  width: 100% !important; height: 100% !important; display: block !important;
  background: transparent !important; image-rendering: auto;
  filter: drop-shadow(0 10px 6px rgba(0,0,0,.58));
}
.boss-visual.has-full-render .boss-portrait-fallback { opacity: 0; }
.boss-visual.is-baby .boss-entity-render { inset: 1%; transform: translateY(8%) scale(.84); }
.boss-visual.is-baby .boss-entity-render.is-ready { transform: translateY(8%) scale(.9); }
.boss-integrated-equipment {
  position: absolute; z-index: 4; object-fit: contain; image-rendering: pixelated;
  pointer-events: none; filter: drop-shadow(0 5px 4px rgba(0,0,0,.82));
}
/* Keine Badges: Helm und Waffe liegen direkt im Porträt und wirken als Teil der Figur. */
.boss-integrated-helmet { width: 36%; height: 36%; top: 10%; left: 50%; transform: translateX(-50%) perspective(80px) rotateX(-8deg); }
.boss-integrated-weapon { width: 48%; height: 48%; right: -5%; bottom: -1%; transform: rotate(-28deg); transform-origin: 62% 72%; }
.boss-visual.hero .boss-integrated-helmet { width: 31%; height: 31%; top: 12%; }
.boss-visual.hero .boss-integrated-weapon { width: 42%; height: 42%; right: 1%; bottom: 3%; }
.boss-visual.effect-flame::before { inset: -20%; background: radial-gradient(circle at 50% 82%, rgba(255,89,25,.72), transparent 38%), radial-gradient(circle at 30% 62%, rgba(255,183,45,.52), transparent 24%); filter: blur(3px); animation: bossPulse 1.8s ease-in-out infinite; }
.boss-visual.effect-snow::before { inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px); background-size: 13px 13px; opacity: .68; }
.boss-visual.effect-cloud::before { inset: 8%; background: radial-gradient(circle at 28% 72%, rgba(215,215,215,.42), transparent 28%), radial-gradient(circle at 75% 28%, rgba(185,185,185,.34), transparent 26%); filter: blur(4px); }
.boss-visual.effect-soul::before { inset: -10%; background: radial-gradient(circle at 50% 70%, rgba(46,223,218,.55), transparent 42%); filter: blur(4px); animation: bossPulse 2s ease-in-out infinite; }
.boss-visual.effect-spark::before { inset: 0; background-image: radial-gradient(circle, rgba(255,181,76,.85) 0 1px, transparent 1.6px); background-size: 15px 15px; opacity: .6; }
@keyframes bossPulse { 0%,100% { opacity: .55; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.06); } }

.elite-boss-loot-heading { margin-top: 22px; }
.elite-boss-loot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.elite-loot-card {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px; border: 1px solid var(--line); border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}
.elite-loot-card.compact { min-height: 112px; }
.elite-loot-copy { min-width: 0; display: grid; gap: 7px; }
.elite-loot-title { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
.elite-loot-title h3 { min-width: 0; margin: 0; color: var(--text-strong); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.loot-chance {
  flex: 0 0 auto; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-radius: 999px; color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent);
  font-size: 7px; font-weight: 950; letter-spacing: .04em; white-space: nowrap;
}
.elite-loot-material { margin: 0; color: var(--muted); font-size: 8px; font-weight: 750; }
.elite-loot-lore { margin: 0; color: var(--muted-2); font-size: 8px; line-height: 1.5; font-style: italic; }
.elite-loot-properties { display: flex; flex-wrap: wrap; gap: 5px; }
.elite-loot-properties span {
  padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; color: var(--text);
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent); font-size: 7px; font-weight: 800;
}
.elite-loot-properties .loot-effect { color: #cda7ff; border-color: color-mix(in srgb, #b873ff 35%, var(--line)); }
.elite-loot-properties .loot-model { color: var(--gold); }
.item-visual {
  position: relative; isolation: isolate; flex: 0 0 auto; width: 58px; height: 58px; overflow: hidden; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--orange) 48%, var(--line)); border-radius: 14px;
  background:
    radial-gradient(circle at 42% 36%, rgba(255,255,255,.08), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--orange-soft) 72%, var(--surface)), var(--surface-strong));
  color: var(--orange); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-soft);
}
.item-visual.large { width: 90px; height: 90px; border-radius: 20px; }
.item-visual img {
  position: relative; z-index: 2; width: 78%; height: 78%; object-fit: contain; padding: 2px;
  opacity: 0; image-rendering: pixelated; filter: drop-shadow(0 7px 4px rgba(0,0,0,.58));
}
.item-visual img.is-loaded { opacity: 1; }
.item-visual-fallback { position: relative; z-index: 1; color: var(--muted); font-size: 13px; font-weight: 950; letter-spacing: .08em; }
.item-visual.rarity-rare { border-color: rgba(79,154,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(79,154,255,.12); }
.item-visual.rarity-epic { border-color: rgba(184,115,255,.76); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 17px rgba(184,115,255,.16); }
.item-visual.rarity-legendary { border-color: rgba(255,198,80,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 20px rgba(255,198,80,.2); }
.item-visual.enchanted i {
  position: absolute; z-index: 3; inset: -22%; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(118deg,
    transparent 0 92px,
    rgba(190, 108, 255, .08) 108px,
    rgba(255, 255, 255, .22) 126px,
    rgba(88, 222, 255, .16) 144px,
    transparent 166px 260px);
  background-size: 260px 260px;
  filter: blur(5px);
  mix-blend-mode: screen;
  transform: translateZ(0);
  will-change: background-position;
  animation: itemGlint 4.2s linear infinite;
}
.item-visual.enchanted.item-image-ready i { opacity: .46; }
@keyframes itemGlint {
  from { background-position: -260px 0; }
  to { background-position: 0 0; }
}



.profile-sticky {
  --profile-sticky-top: 86px;
  position: fixed;
  z-index: 60;
  top: var(--profile-sticky-top);
  left: max(12px, calc((100vw - var(--shell)) / 2));
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  min-height: 48px;
  padding: 6px 12px 6px 7px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--orange) 34%, var(--line));
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  box-shadow: 0 12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(1.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-9px) scale(.97);
  transform-origin: top left;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.profile-sticky.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.profile-sticky-avatar { flex: 0 0 auto; }
.profile-sticky-avatar .player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border-color: color-mix(in srgb, var(--orange) 46%, var(--line));
}
.profile-sticky-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  line-height: 1.08;
}
.profile-sticky-copy small {
  color: var(--orange);
  font-size: 6px;
  font-weight: 950;
  letter-spacing: .12em;
}
.profile-sticky-copy b {
  max-width: 190px;
  overflow: hidden;
  color: var(--text-strong);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .profile-sticky {
    left: 10px;
    max-width: calc(100vw - 20px);
    min-height: 44px;
    padding: 5px 10px 5px 6px;
    border-radius: 13px;
  }
  .profile-sticky-avatar .player-avatar { width: 33px; height: 33px; border-radius: 8px; }
  .profile-sticky-copy b { max-width: 150px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-sticky { transition: none; }
}

.profile-trophy-section { padding: 42px 0 24px; }
.profile-trophy-intro { max-width: 790px; margin: -6px 0 17px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.profile-trophy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trophy-card {
  position: relative; overflow: hidden; min-height: 170px; grid-template-columns: auto minmax(0, 1fr); padding: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--orange-soft) 68%, var(--surface)), var(--surface));
}
.trophy-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--orange), var(--gold)); }
.trophy-card .elite-loot-title h3 { font-size: 16px; }
.trophy-card .elite-loot-lore { font-size: 9px; }
.trophy-meta { display: flex; flex-wrap: wrap; gap: 7px 13px; color: var(--muted-2); font-size: 8px; }
.trophy-boss-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; }
.trophy-boss-sources small { width: 100%; color: var(--muted-2); font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.trophy-boss-sources span { padding: 5px 7px; border-radius: 8px; background: var(--orange-soft); color: var(--text); font-size: 7px; font-weight: 800; }

.profile-elite-boss-section { padding-top: 4px; }
.profile-elite-boss-list { display: grid; gap: 10px; }
.profile-elite-boss-row {
  position: relative; overflow: hidden; min-height: 102px; border-radius: 17px; padding: 14px 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px;
}
.profile-elite-boss-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--orange), var(--gold)); }
.profile-elite-boss-copy { min-width: 0; display: grid; gap: 6px; }
.profile-elite-boss-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.profile-elite-boss-heading h3 { margin: 0; color: var(--text-strong); font-size: 15px; }
.profile-elite-boss-copy p { margin: 0; color: var(--muted); font-size: 9px; }
.profile-elite-boss-dates { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--muted-2); font-size: 8px; }
.profile-elite-boss-numbers { display: flex; align-items: stretch; gap: 8px; }

@media (max-width: 1100px) {
  .profile-trophy-grid { grid-template-columns: 1fr; }
  .elite-boss-loot-grid { grid-template-columns: 1fr; }
  .elite-boss-kill-row { grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); }
  .elite-boss-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .elite-boss-slayer-row { grid-template-columns: 30px auto minmax(120px, 1fr) 80px 100px; }
  .elite-boss-slayer-row time { grid-column: 3 / -1; text-align: left; }
}

@media (max-width: 820px) {
  .elite-boss-kpis { grid-template-columns: repeat(2, 1fr); }
  .elite-boss-kpis > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .elite-boss-kpis > div:nth-child(4) { border-top: 1px solid var(--line); }
  .elite-boss-kill-row { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); padding-inline: 10px; }
  .elite-kill-boss, .elite-kill-player { gap: 8px; padding-inline: 8px; }
  .elite-kill-boss h3 { font-size: 12px; }
  .elite-kill-player .player-link:not(.avatar-link) { font-size: 11px; }
  .elite-boss-toolbar { align-items: stretch; flex-direction: column; }
  .elite-boss-toolbar .search-field { flex-basis: auto; width: 100%; }
  .elite-difficulty-filters { justify-content: flex-start; }
  .elite-boss-card > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .elite-boss-card-stats { grid-column: 2; justify-content: flex-start; }
  .elite-boss-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .elite-boss-slayer-row { grid-template-columns: 28px auto minmax(0, 1fr) 80px; }
  .elite-boss-slayer-row .metric-stack:nth-of-type(2) { display: none; }
  .profile-elite-boss-row { grid-template-columns: auto minmax(0, 1fr); }
  .profile-elite-boss-numbers { grid-column: 2; justify-content: flex-start; }
}

@media (max-width: 560px) {
  .elite-boss-kpis { grid-template-columns: 1fr; }
  .elite-boss-kpis > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .profile-trophy-section { padding-top: 28px; }
  .trophy-card { grid-template-columns: 1fr; min-height: 0; }
  .trophy-card .item-visual.large { width: 72px; height: 72px; }
  .elite-loot-card.compact { grid-template-columns: auto minmax(0, 1fr); }
  .elite-loot-title { display: grid; justify-content: stretch; }
  .loot-chance { justify-self: start; }
  .elite-boss-kill-row { grid-template-columns: 1fr; gap: 9px; padding: 13px; }
  .elite-kill-boss, .elite-kill-player { justify-content: flex-start; text-align: left; padding: 0; }
  .elite-kill-center { min-height: 54px; border-inline: 0; border-block: 1px solid var(--line); }
  .elite-boss-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elite-boss-card > summary { gap: 10px; padding: 13px; }
  .elite-boss-card-stats { display: none; }
  .elite-boss-card-title { align-items: flex-start; flex-direction: column; gap: 6px; }
  .elite-boss-card-title h3 { font-size: 14px; }
  .elite-boss-card-body { padding: 12px; }
  .elite-boss-slayers-heading { align-items: flex-start; flex-direction: column; }
  .elite-boss-slayer-row { grid-template-columns: 24px auto minmax(0, 1fr); gap: 7px; }
  .elite-boss-slayer-row > .metric-stack, .elite-boss-slayer-row time { grid-column: 3; text-align: left; }
  .profile-elite-boss-row { padding: 12px; gap: 10px; }
  .profile-elite-boss-row .boss-visual { width: 52px; height: 52px; }
  .profile-elite-boss-numbers { grid-column: 1 / -1; }
}

/* Elite-Boss-Chronik: rein grafisches Symbol statt Emoji. */
.elite-kill-symbol { position: relative; width: 28px; height: 28px; display: inline-block; }
.elite-kill-symbol::before, .elite-kill-symbol::after {
  content: ""; position: absolute; left: 13px; top: 2px; width: 2px; height: 24px; border-radius: 2px;
  background: linear-gradient(var(--gold), var(--orange)); box-shadow: 0 0 8px color-mix(in srgb, var(--orange) 45%, transparent);
}
.elite-kill-symbol::before { transform: rotate(45deg); }
.elite-kill-symbol::after { transform: rotate(-45deg); }

/* Bossdetails bleiben auf Tablets und Mobilgeräten im bestehenden WANA-Kartenstil. */
@media (max-width: 820px) {
  .elite-boss-expanded-overview { grid-template-columns: 124px minmax(0, 1fr); gap: 13px; padding: 12px; }
  .boss-visual.hero { width: 112px; height: 112px; border-radius: 21px; }
}

@media (max-width: 560px) {
  .elite-boss-expanded-overview { grid-template-columns: 1fr; }
  .boss-visual.hero { width: 122px; height: 122px; justify-self: start; }
  .elite-boss-expanded-copy { width: 100%; }
  .item-visual { width: 56px; height: 56px; }
}

@media (max-width: 900px) {
  .global-kpis { min-width: 0; width: 100%; }
}
@media (max-width: 620px) {
  .global-kpis { grid-template-columns: 1fr; }
  .global-kpis > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .global-stats-section { padding-top: 22px; }
}

/* =====================================================================
   WANAStatsWeb 1.9.2 – kompaktere Statistik- und Chronik-Layouts
   ===================================================================== */

/* Leaderboard-Kategorien: Symbol direkt vor der Bezeichnung, Zähler in
   derselben Zeile wie die orange Kategorie. */
.metric-card {
  min-height: 176px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.metric-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.metric-card-heading .metric-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.metric-card-heading .metric-icon svg { width: 18px; }
.metric-card-heading h3,
.metric-card h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-card-meta {
  min-height: 18px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.metric-card-meta .category-label,
.profile-stat-meta .category-label {
  margin: 0;
}
.metric-card-meta .card-number {
  flex: 0 0 auto;
  font-size: 8px;
}
.metric-leader {
  min-height: 52px;
  margin: 9px 0 8px;
  padding: 7px 9px;
}
.metric-leader .player-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
.metric-leader-info { gap: 2px; }
.metric-leader-info .metric-player-name,
.metric-leader-info strong { font-size: 11px; }
.metric-leader-info span { font-size: 11px; }
.metric-card .card-footer {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  min-height: 24px;
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 8px;
}
.metric-card .card-footer b { font-size: 13px; }
.metric-card .metric-empty-state {
  flex: 1;
  min-height: 60px;
  margin-top: 9px;
  padding: 10px;
}
.metric-card .metric-empty-state strong { font-size: 10px; }
.metric-card .metric-empty-state span { font-size: 8px; }

/* Global- und Profilwerte: Symbol direkt vor dem eigentlichen Wert. */
.profile-stat-card {
  min-height: 140px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.profile-stat-card h3 {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.2;
}
.profile-stat-value-row {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.profile-stat-value-row .metric-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.profile-stat-value-row .metric-icon svg { width: 17px; }
.profile-stat-value-row .profile-stat-value {
  min-width: 0;
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.05;
}
.profile-stat-meta {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.profile-stat-meta .profile-stat-rank {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 8px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-stat-card .profile-stat-key {
  position: relative;
  left: auto;
  bottom: auto;
  margin-top: auto;
  padding-top: 8px;
  font-size: 7px;
}

/* Sechs letzte Boss-Siege pro Seite: drei Karten pro Reihe. */
.elite-boss-recent-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.elite-boss-kill-row {
  min-width: 0;
  min-height: 0;
  padding: 12px 13px;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.elite-kill-boss,
.elite-kill-player {
  width: 100%;
  padding: 0;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
}
.elite-boss-kill-row .boss-visual.large {
  width: 58px;
  height: 58px;
  border-radius: 14px;
}
.elite-boss-kill-row .elite-kill-player .champion-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}
.elite-kill-boss h3 { font-size: 13px; }
.elite-kill-player .player-link:not(.avatar-link) { font-size: 12px; }
.elite-kill-center {
  min-height: 42px;
  padding: 7px 2px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  gap: 7px;
  border-inline: 0;
  border-block: 1px solid var(--line);
  text-align: left;
}
.elite-kill-center b {
  min-width: 0;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elite-kill-center small {
  justify-self: end;
  white-space: nowrap;
}
.elite-kill-symbol { transform: scale(.72); }

/* Zwei Bosse nebeneinander im Katalog. */
.elite-boss-catalog {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.elite-boss-card { min-width: 0; }
.elite-boss-card > summary {
  min-height: 94px;
  padding: 13px 15px;
  gap: 12px;
}
.elite-boss-card-stats { gap: 6px; }
.elite-boss-card-stats .metric-stack {
  min-width: 58px;
  padding-inline: 7px;
}

/* Kampflog: 20 Einträge ergeben zwei Spalten mit zehn Reihen. */
.combat-fights-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.combat-fight-row {
  min-width: 0;
  min-height: 86px;
  padding: 9px 10px;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
}
.combat-fighter {
  gap: 8px;
  padding-inline: 9px;
}
.combat-fighter .champion-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}
.combat-fighter .player-link:not(.avatar-link) { font-size: 11px; }
.combat-fight-center {
  min-height: 64px;
  padding: 7px 6px;
}
.combat-weapon-name { max-width: 100px; font-size: 9px; }
.combat-fight-center small { font-size: 7px; }

/* Trophäen sind eigenständige kompakte Karten und verschwenden bei wenigen
   Gegenständen nicht mehr die halbe Seitenbreite. */
.profile-trophy-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.trophy-card {
  min-width: 0;
  min-height: 142px;
  padding: 12px;
  gap: 11px;
}
.trophy-card .item-visual.large {
  width: 78px;
  height: 78px;
}
.trophy-card .elite-loot-title h3 { font-size: 13px; }
.trophy-card .elite-loot-lore { font-size: 8px; }
.trophy-meta { gap: 5px 9px; font-size: 7px; }

/* Boss-Verweise funktionieren überall genauso eindeutig wie Spielerlinks. */
.boss-route-link,
.trophy-boss-sources a {
  color: inherit;
  text-decoration: none;
}
.boss-route-link {
  border-radius: 12px;
  transition: background .16s ease, color .16s ease;
}
.boss-route-link:hover h3,
.trophy-boss-sources a:hover { color: var(--orange); }
.boss-route-card {
  cursor: pointer;
  transition: transform .17s ease, border-color .17s ease, background .17s ease;
}
.boss-route-card:hover,
.boss-route-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--orange-soft);
  outline: none;
}
.trophy-boss-sources a {
  padding: 5px 7px;
  border-radius: 8px;
  background: var(--orange-soft);
  color: var(--text);
  font-size: 7px;
  font-weight: 800;
  transition: background .16s ease, color .16s ease;
}
.trophy-boss-sources a:hover { background: color-mix(in srgb, var(--orange) 18%, var(--surface)); }
.elite-boss-card.boss-route-target {
  border-color: color-mix(in srgb, var(--orange) 72%, var(--line));
  box-shadow: 0 0 0 3px var(--orange-soft), 0 20px 55px rgba(0,0,0,.28);
}

@media (max-width: 1450px) {
  .elite-boss-recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-trophy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1300px) {
  .elite-boss-catalog,
  .combat-fights-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .elite-boss-recent-list,
  .profile-trophy-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-card { min-height: 166px; }
  .profile-stat-card { min-height: 132px; }
}

@media (max-width: 560px) {
  .metric-card-heading .metric-icon { width: 31px; height: 31px; }
  .metric-card-heading h3 { font-size: 13px; }
  .profile-stat-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
  .profile-stat-meta .profile-stat-rank { text-align: left; white-space: normal; }
  .elite-kill-center { grid-template-columns: 24px minmax(0, 1fr); }
  .elite-kill-center small { grid-column: 2; justify-self: start; }
}

@media (max-width: 540px) {
  .combat-fight-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 12px;
    text-align: left;
  }
  .combat-fighter,
  .combat-fighter.winner,
  .combat-fighter.loser {
    justify-content: flex-start;
    padding: 6px 2px;
    text-align: left;
  }
  .combat-fighter .avatar-link { order: 0; }
  .combat-fighter-copy { order: 1; max-width: none; }
  .combat-fight-center {
    min-height: 58px;
    border-inline: 0;
    border-block: 1px solid var(--line);
  }
}


/* 1.9.3 – kompaktere Spielerliste und vollständige Boss-Teilnehmer */
.elite-kill-participants {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
}
.elite-kill-participants > small {
  color: var(--orange);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.elite-kill-participant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.elite-kill-participant-chip {
  min-width: 0;
  min-height: 28px;
  padding: 3px 8px 3px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  transition: .18s ease;
}
.elite-kill-participant-chip:hover {
  border-color: var(--line-strong);
  background: var(--orange-soft);
}
.elite-kill-participant-chip .player-avatar {
  width: 21px;
  height: 21px;
  border-radius: 5px;
}
.elite-kill-participant-chip span {
  max-width: 120px;
  overflow: hidden;
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1281px) {
  .players-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .player-card {
    min-height: 70px;
    padding: 11px 12px;
    grid-template-columns: 42px minmax(0, 1fr) auto 18px;
    gap: 9px;
  }
  .player-card .player-avatar { width: 42px; height: 42px; border-radius: 10px; }
  .player-card-info strong { font-size: 12px; }
  .player-card-info span { font-size: 9px; }
}
@media (min-width: 861px) and (max-width: 1280px) {
  .players-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) and (min-width: 621px) {
  .players-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =====================================================================
   WANAStatsWeb 1.9.5 – kompakte Highlights und Gesamt-Spitzenreiter
   ===================================================================== */
.hero {
  min-height: 300px;
  padding: 24px 0 30px;
  grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr);
  gap: 38px;
}
.hero h1 {
  margin-top: 12px;
  gap: 0;
  font-size: clamp(34px, 3.8vw, 49px);
}
.hero-rule { margin-top: 13px; }
.hero-buttons { margin-top: 17px; }
.hero-panel { padding: 17px 21px 16px; }
.champion {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 15px;
  min-height: 92px;
  margin: 9px 0;
  padding: 9px 0;
}
.champion-avatar { width: 72px; height: 72px; border-radius: 16px; }
.champion-info > span { font-size: 8px; }
.champion-info strong, .champion-name { margin-top: 4px; font-size: clamp(23px, 2.3vw, 32px); }
.champion-info small { margin-top: 5px; font-size: 10px; }
.hero-kpis > div { padding: 8px 12px; }
.hero-kpis b { font-size: 17px; }

.spotlight { padding-top: 23px; }
.spotlight-card {
  min-height: 224px;
  padding: 16px;
}
.spotlight-card-heading,
.spotlight-title-line,
.spotlight-summary {
  display: flex;
  align-items: center;
}
.spotlight-card-heading { justify-content: space-between; gap: 12px; }
.spotlight-title-line { min-width: 0; gap: 10px; }
.spotlight-title-line .metric-icon { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; }
.spotlight-title-line .metric-icon svg { width: 19px; }
.spotlight-card .spotlight-title-line h3 {
  min-width: 0;
  margin: 0;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spotlight-summary {
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
  margin-top: 9px;
}
.spotlight-summary .winner { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotlight-summary .spotlight-value { flex: 0 0 auto; margin: 0; font-size: 20px; }
.mini-ranking { gap: 5px; margin-top: 10px; }
.mini-rank-row {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 31px;
  padding-bottom: 5px;
}
.mini-player-link {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mini-player-link .player-avatar {
  width: 23px;
  height: 23px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.mini-player-link > span:last-child,
.mini-player-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-progress { left: 33px; }

/* Die vier Haupt-Unterseiten verwenden dieselbe vertikale Rhythmik und Titelgröße. */
.global-page-hero,
.players-page-hero,
.combat-page-hero,
.elite-boss-page-hero {
  padding-top: 40px;
  padding-bottom: 27px;
}
.global-page-hero h1,
.players-page-hero h1,
.combat-page-hero h1,
.elite-boss-page-hero h1 {
  font-size: clamp(39px, 4.1vw, 54px);
  line-height: .96;
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 27px 0; gap: 23px; }
  .hero-copy { text-align: center; }
  .hero-rule { margin-inline: auto; }
  .hero-buttons { justify-content: center; }
  .spotlight-card { min-height: auto; }
}
@media (max-width: 620px) {
  .hero h1 { font-size: clamp(32px, 11vw, 44px); }
  .spotlight-summary { align-items: flex-end; }
  .spotlight-summary .winner { white-space: normal; }
  .global-page-hero h1,
  .players-page-hero h1,
  .combat-page-hero h1,
  .elite-boss-page-hero h1 { font-size: 41px; }
}


/* =====================================================================
   WANAStatsWeb 1.9.6 – verdichteter Startbereich und konsistente Raster
   ===================================================================== */

/* Startbereich: beide Hälften gleich hoch; Buttons, Kopfzeile, LIVE und
   die drei unteren Zähler werden bewusst entfernt. */
.hero {
  min-height: 0;
  padding: 20px 0 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}
.hero-copy,
.hero-panel {
  min-height: 178px;
  height: 100%;
}
.hero-copy {
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-buttons,
.hero-panel-top,
.hero-kpis { display: none !important; }
.hero-panel {
  padding: 18px 24px;
  display: flex;
  align-items: center;
}
.champion {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  grid-template-columns: 74px minmax(0, 1fr);
}
.champion-info > span {
  color: var(--gold);
  font-size: 9px;
}

/* Die beiden Kampflog-Übersichtskarten besitzen garantiert dieselbe Höhe. */
.combat-overview-grid {
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.combat-panel {
  min-height: 286px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.combat-ranking-list,
.combat-rivalry-list {
  flex: 1 1 auto;
  align-content: start;
}

/* Auf sehr breiten Ansichten passen vier Boss-Siege pro Reihe und drei
   PvP-Kämpfe. Dadurch entstehen keine unnötig breiten Einzelkarten. */
@media (min-width: 1500px) {
  .elite-boss-recent-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .combat-fights-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .combat-fight-row {
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    padding-inline: 8px;
  }
  .combat-fighter { padding-inline: 6px; }
  .combat-fighter .champion-avatar {
    width: 38px;
    height: 38px;
  }
  .combat-fight-center { padding-inline: 4px; }
  .combat-weapon-name { max-width: 84px; }
}

@media (min-width: 1301px) and (max-width: 1499px) {
  .combat-fights-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy,
  .hero-panel { min-height: 0; }
}


/* =====================================================================
   WANAStatsWeb 1.9.7 – kompakte Profilraster und Spitzenreiter-Kategorien
   ===================================================================== */

/* Der Spitzenreiter nutzt die komplette Kartenbreite sinnvoll: links die
   Person, rechts alle echten Statistik-Kategorien, in denen sie führt. */
.hero-panel {
  padding: 12px 14px;
  align-items: stretch;
}
.champion {
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.62fr);
  gap: 16px;
  align-items: center;
}
.champion-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 4px 14px 4px 4px;
  border-right: 1px solid var(--line);
}
.champion-identity .champion-avatar {
  width: 62px;
  height: 62px;
  border-radius: 14px;
}
.champion-identity .champion-info > span {
  font-size: 7px;
  line-height: 1.35;
}
.champion-identity .champion-name,
.champion-identity .champion-info strong {
  margin-top: 3px;
  font-size: clamp(20px, 2vw, 28px);
}
.champion-identity .champion-info small {
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.35;
}
.champion-winning-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  align-content: center;
}
.champion-winning-stat {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--winning-stat-color) 25%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--winning-stat-color) 6%, var(--surface));
}
.champion-winning-stat .metric-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 7px;
  color: var(--winning-stat-color);
  border-color: color-mix(in srgb, var(--winning-stat-color) 42%, transparent);
  background: color-mix(in srgb, var(--winning-stat-color) 10%, transparent);
}
.champion-winning-stat .metric-icon svg { width: 14px; height: 14px; }
.champion-winning-stat > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 8px;
  font-weight: 850;
}
.champion-winning-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-2);
  font-size: 9px;
}

/* Spielerprofil: mehrere PvP-Bilanzen und Bossarten pro Reihe, statt einer
   einzigen überbreiten Karte. Acht Einträge werden pro Seite gezeigt. */
.profile-combat-list,
.profile-elite-boss-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.profile-combat-row {
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 7px;
  min-height: 112px;
  padding: 10px;
  border-radius: 15px;
}
.profile-combat-player { gap: 6px; }
.profile-combat-player .champion-avatar {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}
.profile-combat-player-copy { gap: 2px; }
.profile-combat-player-copy small { font-size: 6px; }
.profile-combat-player-copy .player-link {
  max-width: 98px;
  font-size: 9px;
}
.profile-combat-score {
  width: 58px;
  min-height: 48px;
  gap: 2px;
  border-radius: 10px;
}
.profile-combat-score strong { font-size: 14px; }
.profile-combat-score small { display: none; }
.profile-combat-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 2px 0;
  border-left: 0;
  border-top: 1px solid var(--line);
}
.profile-combat-meta b { font-size: 8px; }
.profile-combat-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  text-align: right;
}

.profile-elite-boss-row {
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 9px 10px;
  min-height: 126px;
  padding: 11px;
  align-content: start;
}
.profile-elite-boss-row .boss-visual.large {
  width: 54px;
  height: 54px;
}
.profile-elite-boss-copy { gap: 4px; }
.profile-elite-boss-heading { gap: 5px; }
.profile-elite-boss-heading h3 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.profile-elite-boss-heading .difficulty-badge {
  padding: 4px 6px;
  font-size: 6px;
}
.profile-elite-boss-copy p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
}
.profile-elite-boss-dates {
  display: grid;
  gap: 2px;
  font-size: 6px;
}
.profile-elite-boss-numbers {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.profile-elite-boss-numbers .metric-stack {
  min-width: 0;
  padding: 7px 6px;
}
.profile-elite-boss-numbers .metric-stack b { font-size: 11px; }
.profile-elite-boss-numbers .metric-stack span { font-size: 6px; }
.profile-section-pagination { margin-top: 12px; }

@media (max-width: 1540px) {
  .champion-winning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-combat-list,
  .profile-elite-boss-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .champion { grid-template-columns: minmax(230px, .85fr) minmax(0, 1.15fr); }
  .champion-winning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-combat-list,
  .profile-elite-boss-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .champion { grid-template-columns: 1fr; gap: 12px; }
  .champion-identity {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 2px 2px 12px;
  }
  .champion-winning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-combat-list,
  .profile-elite-boss-list { grid-template-columns: 1fr; }
  .profile-combat-row {
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
  }
  .profile-combat-player-copy .player-link { max-width: 150px; }
}
@media (max-width: 560px) {
  .champion-winning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champion-winning-stat > span:last-child { white-space: normal; line-height: 1.2; }
  .profile-combat-player .avatar-link { display: block; }
  .profile-combat-meta { flex-direction: column; align-items: center; }
  .profile-combat-meta small { white-space: normal; text-align: center; }
}

/* 1.9.7 Feinschliff: Die vier Statistikbezeichnungen pro Reihe bleiben
   vollständig lesbar und dürfen höchstens auf zwei Zeilen umbrechen. */
.champion-winning-stat { min-height: 38px; }
.champion-winning-stat > span:last-child {
  white-space: normal;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* WANAStatsWeb 1.9.8 – kompakter Profilkopf, Trophäen und einheitliche Aktualisierung */
.page-updated { margin: 8px 0 9px; justify-content: flex-start; }
.subpage-hero > div:first-child > .page-updated { margin-top: 8px; margin-bottom: 7px; }
.hero-copy .page-updated { margin-top: 8px; }
.profile-page-updated { margin: 3px 0 14px; }

.profile-hero {
  min-height: 282px;
  padding: 46px 28px 24px;
  grid-template-columns: 164px minmax(0, 1fr) 112px;
  gap: 26px;
  align-items: stretch;
}
.profile-skin-stage {
  min-height: 0;
  height: 206px;
  align-self: end;
  align-items: end;
  padding-top: 0;
}
.profile-skin-stage::after { width: 118px; height: 18px; bottom: 0; }
.skin-glow { width: 145px; height: 145px; }
.profile-skin { max-width: 145px; max-height: 206px; align-self: end; }
.profile-skin-fallback .champion-avatar { width: 104px; height: 104px; }
.profile-identity { align-self: center; }
.profile-name-line h1 { font-size: clamp(36px, 4vw, 56px); }
.profile-uuid { margin: 6px 0 0; }
.profile-meta-grid > div { padding: 12px 13px; }
.profile-avatar-card { width: 112px; padding: 13px 10px; align-self: center; }
.profile-avatar-card .player-avatar,
.profile-avatar-card .champion-avatar { width: 76px; height: 76px; }

.profile-trophy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trophy-card {
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-areas: "visual copy" "source copy";
  align-items: start;
  min-height: 0;
  padding: 12px;
  gap: 8px 12px;
}
.trophy-card > .item-visual { grid-area: visual; justify-self: center; }
.trophy-card > .elite-loot-copy { grid-area: copy; min-width: 0; }
.trophy-card > .trophy-boss-sources {
  grid-area: source;
  align-self: start;
  display: grid;
  gap: 5px;
  padding: 0;
}
.trophy-card > .trophy-boss-sources small { width: auto; }
.trophy-card > .trophy-boss-sources a {
  width: 100%;
  padding: 5px 6px;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}
.trophy-card .item-visual.large { width: 72px; height: 72px; }
.trophy-card .elite-loot-title h3 { font-size: 13px; }
.trophy-card .elite-loot-material { font-size: 8px; }
.trophy-card .elite-loot-properties { gap: 4px; }
.trophy-card .elite-loot-properties span { padding: 4px 6px; font-size: 7px; }

.champion-winning-stat { position: relative; overflow: visible; cursor: help; }
.champion-winning-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 20;
  min-width: max-content;
  max-width: 220px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--winning-stat-color) 62%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-solid) 94%, #000);
  color: var(--text-strong);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .16s ease, transform .16s ease;
}
.champion-winning-stat:hover .champion-winning-tooltip,
.champion-winning-stat:focus-visible .champion-winning-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1280px) {
  .profile-trophy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .profile-hero { grid-template-columns: 130px minmax(0,1fr); min-height: 240px; padding: 50px 20px 22px; gap: 18px; }
  .profile-skin-stage { height: 176px; }
  .profile-skin { max-width: 120px; max-height: 176px; }
  .profile-avatar-card { display: none; }
}
@media (max-width: 680px) {
  .profile-hero { grid-template-columns: 1fr; text-align: center; }
  .profile-skin-stage { height: 150px; }
  .profile-skin { max-height: 150px; }
  .profile-page-updated { justify-content: center; }
  .profile-trophy-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   WANAStatsWeb 1.9.9 – Menü-Update, saubere Spitzenreiter-Kacheln,
   kompaktere Profilwerte und angeglichene Boss/PvP-Raster
   ===================================================================== */

.brand-copy { gap: 1px; }
.brand-copy .brand-updated {
  color: var(--muted-2);
  font-size: 8px;
  letter-spacing: .08em;
  font-weight: 800;
  text-transform: none;
}

/* Der globale Aktualisierungshinweis sitzt nur noch in der Menüleiste. */
.page-updated {
  display: none !important;
}

/* Gesamt-Spitzenreiter: mehr Ruhe, keine Überlappungen, Tooltip unterhalb. */
.hero-panel {
  overflow: visible;
  padding: 12px 16px;
}
.champion {
  overflow: visible;
  grid-template-columns: minmax(220px, .68fr) minmax(0, 1.32fr);
  gap: 14px;
}
.champion-identity {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  padding: 4px 10px 4px 2px;
}
.champion-identity .champion-avatar {
  width: 56px;
  height: 56px;
  border-radius: 13px;
}
.champion-winning-grid {
  overflow: visible;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.champion-winning-stat {
  min-height: 46px;
  align-items: flex-start;
  padding: 8px 9px;
  z-index: 1;
}
.champion-winning-stat:hover,
.champion-winning-stat:focus-visible {
  z-index: 30;
}
.champion-winning-stat .metric-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.champion-winning-stat > span:last-child {
  font-size: 8px;
  line-height: 1.15;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.champion-winning-tooltip {
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  z-index: 120;
}

/* Profil-Statistiken: kompakter ohne Aktualisiert-Zeile pro Box. */
.profile-stat-card {
  min-height: 142px;
  padding: 16px;
}
.profile-stat-card h3 {
  margin: 0 0 10px;
  min-height: 34px;
  font-size: 14px;
  line-height: 1.2;
}
.profile-stat-value-row {
  margin-bottom: 12px;
}
.profile-stat-key {
  display: none;
}

/* PvP-Übersicht: beide Highlight-Zeilen gleiche Höhe. */
.combat-panel-heading {
  min-height: 58px;
}
.combat-winner-row,
.combat-rivalry-row {
  min-height: 72px;
}

/* Letzte Boss-Siege: Bosskopf und Spielerkopf gleich groß. */
.elite-boss-kill-row .boss-visual.large,
.elite-boss-kill-row .elite-kill-player .champion-avatar {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

@media (max-width: 1420px) {
  .champion-winning-grid {
    grid-template-columns: repeat(3, minmax(112px, 1fr));
  }
}
@media (max-width: 1180px) {
  .champion {
    grid-template-columns: minmax(200px, .72fr) minmax(0, 1.28fr);
  }
  .champion-winning-grid {
    grid-template-columns: repeat(2, minmax(112px, 1fr));
  }
}
@media (max-width: 820px) {
  .champion-winning-grid {
    grid-template-columns: repeat(2, minmax(112px, 1fr));
  }
}
@media (max-width: 640px) {
  .brand-copy .brand-updated {
    display: none;
  }
}

/* =====================================================================
   WANAStatsWeb 1.9.10 – Profilkarten-Kopfzeile, zentrierte Bossquelle,
   identische Boss-/Spielerköpfe und zweizeilige Aktualisierungsanzeige
   ===================================================================== */

.brand-copy {
  align-content: center;
  gap: 0;
}
.brand-copy .brand-updated {
  display: grid;
  gap: 0;
  margin-top: 3px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.15;
  letter-spacing: .04em;
  font-weight: 750;
  text-transform: none;
}
.brand-updated-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: 7px;
  font-weight: 850;
}
.brand-updated-label i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #4ee59a;
  box-shadow: 0 0 10px rgba(78,229,154,.8);
}
#navUpdatedAge {
  padding-left: 11px;
  color: var(--muted-2);
  white-space: nowrap;
}

/* Kategorie und Rang stehen bei Profil- und Globalwerten immer ganz oben. */
.profile-stat-card {
  min-height: 132px;
  padding: 14px 15px;
}
.profile-stat-meta.profile-stat-meta-top {
  order: -1;
  margin: 0 0 8px;
  min-height: 17px;
}
.profile-stat-meta-top .category-label {
  font-size: 8px;
  line-height: 1;
}
.profile-stat-meta-top .profile-stat-rank {
  max-width: 58%;
  font-size: 7px;
  line-height: 1.15;
}
.profile-stat-card h3 {
  min-height: 0;
  margin: 0 0 10px;
}
.profile-stat-value-row {
  margin: 0;
}

/* Bossquelle exakt unter dem Lootbild zentrieren. */
.trophy-card > .trophy-boss-sources {
  width: 78px;
  justify-items: center;
  justify-self: center;
  text-align: center;
}
.trophy-card > .trophy-boss-sources small {
  display: block;
  width: 100% !important;
  text-align: center;
}
.trophy-card > .trophy-boss-sources a {
  width: 100%;
  margin-inline: auto;
  justify-content: center;
  text-align: center;
}

/* In der Bosschronik nutzen beide Köpfe exakt dieselbe Außen- und Innenfläche. */
.elite-boss-kill-row .boss-visual.large,
.elite-boss-kill-row .elite-kill-player .champion-avatar {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  box-sizing: border-box;
  border-radius: 12px;
}
.elite-boss-kill-row .boss-visual.large .boss-head-image,
.elite-boss-kill-row .boss-visual.large .boss-player-skin {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  transform: scale(1.08);
}
.elite-boss-kill-row .boss-visual.large .boss-portrait-canvas {
  width: 108%;
  height: 108%;
  inset: -4%;
}
.elite-boss-kill-row .elite-kill-player .champion-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 680px) {
  .profile-stat-meta-top .profile-stat-rank {
    max-width: 62%;
    white-space: normal;
  }
}

/* =====================================================================
   WANAStatsWeb 1.9.11 – Profilkopf unten ausrichten und kompakte
   Spitzenreiter-Kategorien ohne Überstände
   ===================================================================== */

/* Spielerkopfkarte am unteren Rand der Profil-Metadaten verankern. Die
   linke untere Ecke bleibt der Bezugspunkt; die Karte wächst nach oben
   und rechts und nutzt den freien Platz besser aus. */
.profile-avatar-card {
  align-self: end;
  justify-self: start;
  width: 132px;
  min-height: 154px;
  margin-left: -16px;
  margin-bottom: -1px;
  padding: 15px 12px 16px;
  transform: translateY(1px);
}
.profile-avatar-card > span {
  font-size: 8px;
  letter-spacing: .11em;
}
.profile-avatar-card .player-avatar,
.profile-avatar-card .champion-avatar {
  width: 90px;
  height: 90px;
  border-radius: 19px;
}

/* Die Gewinner-Kategorien werden als dichtes, echtes Raster ausgegeben.
   Keine Mindestbreite erzwingt mehr ein Überlaufen aus der Karte. */
.champion {
  grid-template-columns: minmax(225px, .72fr) minmax(0, 1.28fr);
  gap: 12px;
}
.champion-winning-grid {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  align-content: center;
}
.champion-winning-stat {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  gap: 5px;
  padding: 5px 6px;
  align-items: center;
  border-radius: 8px;
}
.champion-winning-stat .metric-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 6px;
}
.champion-winning-stat .metric-icon svg {
  width: 11px;
  height: 11px;
}
.champion-winning-stat > span:last-child {
  min-width: 0;
  max-width: 100%;
  font-size: 7px;
  line-height: 1.08;
  font-weight: 850;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.champion-winning-tooltip {
  max-width: 170px;
  font-size: 9px;
}

@media (max-width: 1420px) {
  .champion-winning-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1180px) {
  .champion {
    grid-template-columns: minmax(210px, .78fr) minmax(0, 1.22fr);
  }
  .champion-winning-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 940px) {
  .champion-winning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .profile-avatar-card {
    display: none;
  }
}
@media (max-width: 820px) {
  .champion {
    grid-template-columns: 1fr;
  }
  .champion-winning-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .champion-winning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.12 – saubere Spitzenreiter-Kacheln, Spieler-Editionen
   und Suchfelder links vor den Kategorien
   ===================================================================== */

/* Der eigentliche Kategoriename ist das direkte span-Kind. Frühere Regeln
   trafen wegen des Tooltip-elements nicht zuverlässig zu. */
.champion {
  grid-template-columns: minmax(210px, .66fr) minmax(0, 1.34fr);
  gap: 12px;
}
.champion-identity .champion-info > span {
  font-size: 6px;
  line-height: 1.2;
}
.champion-identity .champion-name,
.champion-identity .champion-info strong {
  font-size: clamp(18px, 1.7vw, 24px);
}
.champion-identity .champion-info small {
  font-size: 7px;
  line-height: 1.25;
}
.champion-winning-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.champion-winning-stat {
  min-width: 0;
  min-height: 34px;
  gap: 5px;
  padding: 5px 6px;
  overflow: visible;
}
.champion-winning-stat > span {
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  font-size: 6.5px !important;
  font-weight: 850;
  line-height: 1.08;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.champion-winning-stat .metric-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.champion-winning-stat .metric-icon svg {
  width: 10px;
  height: 10px;
}

/* Suchfeld beginnt auf Leaderboards und Global immer ganz links. */
.toolbar-search-first {
  justify-content: flex-start;
}
.toolbar-search-first > .search-field {
  order: 0;
  flex: 0 0 min(300px, 34%);
}
.toolbar-search-first > .filters {
  order: 1;
  flex: 1 1 auto;
}

/* Java-/Bedrock-Umschalter im Stil der Boss-Schwierigkeitsfilter. */
.player-type-filters {
  flex: 0 0 auto;
  overflow: visible;
  padding-right: 4px;
  border-right: 1px solid var(--line);
}
.player-type-filters button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  font-weight: 900;
}
.player-type-filters button:hover {
  color: var(--text);
  background: var(--orange-soft);
}
.player-type-filters button.active {
  color: #171009;
  border-color: var(--orange);
  background: linear-gradient(135deg, #ffbd55, var(--orange));
}

@media (max-width: 1180px) {
  .champion-winning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .toolbar-search-first {
    align-items: stretch;
    flex-direction: column;
  }
  .toolbar-search-first > .search-field {
    flex-basis: auto;
    width: 100%;
  }
  .players-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .player-type-filters {
    border-right: 0;
  }
}
@media (max-width: 680px) {
  .champion-winning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================================
   WANAStatsWeb 1.9.13 – vertikaler Spitzenreiter, lesbare Kategorien,
   einheitliche Leaderboard-Kopfzeile und kompaktere Bereichsabstände
   ===================================================================== */

/* Links Kopf oberhalb der Beschriftung, rechts vier lesbare Kategorien. */
.champion {
  grid-template-columns: minmax(180px, .56fr) minmax(0, 1.44fr);
  gap: 16px;
  align-items: stretch;
}
.champion-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 18px 7px 4px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.champion-identity .champion-avatar {
  width: 70px;
  height: 70px;
  border-radius: 16px;
}
.champion-identity .champion-info {
  justify-items: center;
  width: 100%;
}
.champion-identity .champion-info > span {
  max-width: 190px;
  font-size: 7.5px;
  line-height: 1.25;
}
.champion-identity .champion-name,
.champion-identity .champion-info strong {
  max-width: 100%;
  margin-top: 4px;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1;
}
.champion-identity .champion-info small {
  max-width: 195px;
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.3;
}
.champion-winning-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-content: center;
  overflow: visible;
}
.champion-winning-stat {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 9px;
  overflow: visible;
  border-radius: 10px;
}
.champion-winning-stat .metric-icon {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
  border-radius: 7px;
}
.champion-winning-stat .metric-icon svg {
  width: 14px;
  height: 14px;
}
.champion-winning-stat > span:not(.champion-winning-tooltip) {
  min-width: 0;
  color: var(--text);
  font-size: 9px !important;
  font-weight: 900;
  line-height: 1.18;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.champion-winning-tooltip {
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  z-index: 150;
  min-width: 170px;
  max-width: 230px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  text-align: left;
}
.champion-winning-tooltip .metric-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.champion-winning-tooltip-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.champion-winning-tooltip-copy b {
  color: var(--text-strong);
  font-size: 10px;
  line-height: 1.15;
}
.champion-winning-tooltip-copy strong {
  color: var(--winning-stat-color);
  font-size: 13px;
  line-height: 1;
}

/* Leaderboard-Karten: Oberkategorie und Anzahl bilden immer die erste Zeile. */
.metric-card-meta {
  order: -2;
  min-height: 18px;
  margin: 0 0 9px;
}
.metric-card-heading {
  order: -1;
}
.metric-card-meta .category-label {
  font-size: 9px;
}
.metric-card-meta .card-number {
  font-size: 8px;
}

/* Die folgenden Bereiche bleiben optisch getrennt, verschwenden aber weniger Höhe. */
.spotlight {
  padding-bottom: 18px;
}
.leaderboards {
  padding-top: 12px;
}
.elite-recent-section {
  padding-bottom: 18px;
}
.elite-catalog-section {
  padding-top: 12px;
}

@media (max-width: 1280px) {
  .champion-winning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .champion {
    grid-template-columns: minmax(170px, .62fr) minmax(0, 1.38fr);
  }
  .champion-winning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .champion {
    grid-template-columns: 1fr;
  }
  .champion-identity {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 4px 4px 12px;
  }
  .champion-winning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .champion-winning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .champion-winning-stat > span:not(.champion-winning-tooltip) {
    font-size: 8.5px !important;
  }
}

/* =====================================================================
   WANAStatsWeb 1.9.14 – einheitliche Kategorie-Symbole und breiter
   Spitzenreiter-Tooltip
   ===================================================================== */

/* Die sechs Kategorien verwenden überall dieselbe visuelle Sprache.
   Die Filter zeigen daher jetzt ebenfalls das jeweilige Originalsymbol. */
.category-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 5px 12px 5px 7px;
}
.category-filter-button .metric-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 8px;
  color: var(--filter-color);
  border-color: color-mix(in srgb, var(--filter-color) 42%, transparent);
  background: color-mix(in srgb, var(--filter-color) 11%, transparent);
}
.category-filter-button .metric-icon svg {
  width: 15px;
  height: 15px;
}
.category-filter-button > span:last-child {
  color: inherit;
  font-size: 10px;
  font-weight: 900;
}
.category-filter-button:hover {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--filter-color) 32%, transparent);
  background: color-mix(in srgb, var(--filter-color) 8%, var(--surface));
}
.category-filter-button.active {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--filter-color) 72%, var(--line));
  background: color-mix(in srgb, var(--filter-color) 15%, var(--surface));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--filter-color) 14%, transparent);
}
.category-filter-button.active .metric-icon {
  color: var(--filter-color);
  border-color: color-mix(in srgb, var(--filter-color) 74%, transparent);
  background: color-mix(in srgb, var(--filter-color) 16%, transparent);
}

/* Die Kategorien im Spitzenreiter bleiben kompakt, sind aber klar lesbar. */
.champion-winning-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.champion-winning-stat {
  min-height: 52px;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
}
.champion-winning-stat .metric-icon {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  border-radius: 8px;
}
.champion-winning-stat .metric-icon svg {
  width: 16px;
  height: 16px;
}
.champion-winning-stat > span:not(.champion-winning-tooltip) {
  font-size: 9.5px !important;
  line-height: 1.17;
  -webkit-line-clamp: 2;
}

/* Der Hover ist eine eigene horizontale Karte und wird nicht mehr von den
   alten Textregeln der kleinen Kachel zusammengedrückt. */
.champion-winning-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 300;
  width: 250px;
  min-width: 250px;
  max-width: none;
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  overflow: visible;
  white-space: normal;
  border: 1px solid color-mix(in srgb, var(--winning-stat-color) 62%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-solid) 96%, #000);
  box-shadow: 0 18px 42px rgba(0,0,0,.48);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 7px);
  transition: opacity .16s ease, transform .16s ease;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}
.champion-winning-stat:hover .champion-winning-tooltip,
.champion-winning-stat:focus-visible .champion-winning-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}
.champion-winning-tooltip .metric-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
}
.champion-winning-tooltip .metric-icon svg {
  width: 21px;
  height: 21px;
}
.champion-winning-tooltip-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  overflow: visible;
  white-space: normal;
}
.champion-winning-tooltip-copy b {
  overflow: visible;
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  white-space: normal;
}
.champion-winning-tooltip-copy strong {
  overflow: visible;
  color: var(--winning-stat-color);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}
/* An den äußeren Spalten bleibt der Tooltip innerhalb der großen Karte. */
.champion-winning-stat:nth-child(4n + 1) .champion-winning-tooltip {
  left: 0;
  transform: translate(0, 7px);
}
.champion-winning-stat:nth-child(4n + 1):hover .champion-winning-tooltip,
.champion-winning-stat:nth-child(4n + 1):focus-visible .champion-winning-tooltip {
  transform: translate(0, 0);
}
.champion-winning-stat:nth-child(4n) .champion-winning-tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 7px);
}
.champion-winning-stat:nth-child(4n):hover .champion-winning-tooltip,
.champion-winning-stat:nth-child(4n):focus-visible .champion-winning-tooltip {
  transform: translate(0, 0);
}

@media (max-width: 1280px) {
  .champion-winning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .champion-winning-stat:nth-child(4n + 1) .champion-winning-tooltip,
  .champion-winning-stat:nth-child(4n) .champion-winning-tooltip {
    left: 50%;
    right: auto;
    transform: translate(-50%, 7px);
  }
  .champion-winning-stat:nth-child(4n + 1):hover .champion-winning-tooltip,
  .champion-winning-stat:nth-child(4n + 1):focus-visible .champion-winning-tooltip,
  .champion-winning-stat:nth-child(4n):hover .champion-winning-tooltip,
  .champion-winning-stat:nth-child(4n):focus-visible .champion-winning-tooltip {
    transform: translate(-50%, 0);
  }
  .champion-winning-stat:nth-child(3n + 1) .champion-winning-tooltip {
    left: 0;
    transform: translate(0, 7px);
  }
  .champion-winning-stat:nth-child(3n + 1):hover .champion-winning-tooltip,
  .champion-winning-stat:nth-child(3n + 1):focus-visible .champion-winning-tooltip {
    transform: translate(0, 0);
  }
  .champion-winning-stat:nth-child(3n) .champion-winning-tooltip {
    left: auto;
    right: 0;
    transform: translate(0, 7px);
  }
  .champion-winning-stat:nth-child(3n):hover .champion-winning-tooltip,
  .champion-winning-stat:nth-child(3n):focus-visible .champion-winning-tooltip {
    transform: translate(0, 0);
  }
}
@media (max-width: 980px) {
  .champion-winning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .champion-winning-stat:nth-child(3n + 1) .champion-winning-tooltip,
  .champion-winning-stat:nth-child(3n) .champion-winning-tooltip {
    left: 50%;
    right: auto;
    transform: translate(-50%, 7px);
  }
  .champion-winning-stat:nth-child(3n + 1):hover .champion-winning-tooltip,
  .champion-winning-stat:nth-child(3n + 1):focus-visible .champion-winning-tooltip,
  .champion-winning-stat:nth-child(3n):hover .champion-winning-tooltip,
  .champion-winning-stat:nth-child(3n):focus-visible .champion-winning-tooltip {
    transform: translate(-50%, 0);
  }
  .champion-winning-stat:nth-child(2n + 1) .champion-winning-tooltip {
    left: 0;
    transform: translate(0, 7px);
  }
  .champion-winning-stat:nth-child(2n + 1):hover .champion-winning-tooltip,
  .champion-winning-stat:nth-child(2n + 1):focus-visible .champion-winning-tooltip {
    transform: translate(0, 0);
  }
  .champion-winning-stat:nth-child(2n) .champion-winning-tooltip {
    left: auto;
    right: 0;
    transform: translate(0, 7px);
  }
  .champion-winning-stat:nth-child(2n):hover .champion-winning-tooltip,
  .champion-winning-stat:nth-child(2n):focus-visible .champion-winning-tooltip {
    transform: translate(0, 0);
  }
}
@media (max-width: 620px) {
  .category-filter-button {
    padding-right: 10px;
  }
  .category-filter-button .metric-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .champion-winning-tooltip {
    width: min(250px, calc(100vw - 40px));
    min-width: min(250px, calc(100vw - 40px));
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.15 – systemweite Kategoriefarben und sauberer
   Spitzenreiter-Block
   ===================================================================== */

/* Jedes Standardsymbol trägt seine semantische Kategoriefarbe überall:
   Filter, Leaderboards, Global, Profile, Highlights, Dialoge und Champion. */
.metric-icon {
  color: var(--metric-color, var(--orange)) !important;
  border-color: color-mix(in srgb, var(--metric-color, var(--orange)) 42%, transparent) !important;
  background: color-mix(in srgb, var(--metric-color, var(--orange)) 11%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metric-color, var(--orange)) 4%, transparent);
}
.metric-icon svg {
  stroke: currentColor;
}
.category-filter-button:hover .metric-icon,
.category-filter-button.active .metric-icon,
.champion-winning-stat:hover .metric-icon,
.champion-winning-stat:focus-visible .metric-icon {
  color: var(--metric-color, var(--orange)) !important;
  border-color: color-mix(in srgb, var(--metric-color, var(--orange)) 70%, transparent) !important;
  background: color-mix(in srgb, var(--metric-color, var(--orange)) 17%, transparent) !important;
}

/* Der gelbe Status ist bewusst zweizeilig: Text oben, Zahl unten. */
.champion-rank-badge {
  display: grid;
  justify-items: center;
  gap: 2px;
  max-width: 210px;
  color: var(--gold);
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
}
.champion-rank-badge b,
.champion-rank-badge strong {
  display: block;
  color: inherit;
  font-weight: 950;
  letter-spacing: .075em;
}
.champion-rank-badge b {
  font-size: 9.5px;
}
.champion-rank-badge strong {
  font-size: 11px;
}

/* Alte allgemeine span-Regeln dürfen den neuen Badge nicht verkleinern. */
.champion-identity .champion-info > .champion-rank-badge {
  max-width: 210px;
  font-size: inherit;
  line-height: 1.08;
}

/* Kategorien beim Spitzenreiter: echtes, festes Iconfeld statt zu kleiner
   oder verrutschter Symbole. */
.champion-winning-stat {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 58px;
  gap: 9px;
  padding: 9px 10px;
  align-items: center;
}
.champion-winning-stat > .metric-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  flex: 0 0 38px;
  align-self: center;
  justify-self: start;
  border-radius: 10px;
}
.champion-winning-stat > .metric-icon svg {
  width: 21px;
  height: 21px;
}
.champion-winning-stat > span:not(.metric-icon):not(.champion-winning-tooltip) {
  align-self: center;
  font-size: 10px !important;
  line-height: 1.18;
}

/* Tooltip-Symbol ebenfalls exakt ausgerichtet und kategoriefarbig. */
.champion-winning-tooltip > .metric-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  border-radius: 11px;
}
.champion-winning-tooltip > .metric-icon svg {
  width: 23px;
  height: 23px;
}

@media (max-width: 620px) {
  .champion-rank-badge b { font-size: 8.5px; }
  .champion-rank-badge strong { font-size: 10px; }
  .champion-winning-stat {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 54px;
  }
  .champion-winning-stat > .metric-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.16 – Große Vier, geordnete Kampfwerte und kompaktere
   Spitzenreiter-Kacheln
   ===================================================================== */

/* Vier gleichwertige Highlights auf der Startseite. */
.spotlight-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Die Zahl der ersten Plätze bleibt prominent, ist aber knapp kleiner als
   der Spielername. Die höhere Spezifität verhindert alte strong-Regeln. */
.champion-identity .champion-info .champion-rank-badge strong {
  margin-top: 1px;
  font-size: clamp(20px, 1.95vw, 28px);
  line-height: .98;
  letter-spacing: .045em;
}

/* Die Gewinnerkategorien erhalten links ein kompaktes, sauber zentriertes
   Iconfeld. Dadurch bleibt rechts deutlich mehr Platz für den vollen Namen. */
.champion-winning-stat {
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 48px;
  gap: 7px;
  padding: 7px 9px;
  align-items: center;
}
.champion-winning-stat > .metric-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: start;
  border-radius: 8px;
}
.champion-winning-stat > .metric-icon svg {
  width: 15px;
  height: 15px;
}
.champion-winning-stat > span:not(.metric-icon):not(.champion-winning-tooltip) {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-overflow: ellipsis;
  font-size: 9px !important;
  line-height: 1.12;
}

@media (max-width: 1180px) {
  .spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .spotlight-grid {
    grid-template-columns: 1fr;
  }
  .champion-identity .champion-info .champion-rank-badge strong {
    font-size: 21px;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.17 – feinere Größenkorrekturen für Spitzenreiter,
   Kampflog, Profilwerte und Leaderboards
   ===================================================================== */

/* Der Titel der gewonnenen Ranglisten bleibt präsent, tritt aber klar hinter
   dem Spielernamen zurück. */
.champion-rank-badge {
  gap: 3px;
}
.champion-rank-badge b {
  font-size: 10px;
  letter-spacing: .08em;
}
.champion-identity .champion-info .champion-rank-badge strong {
  margin-top: 0;
  font-size: clamp(13px, 1.12vw, 15px);
  line-height: 1.02;
  letter-spacing: .06em;
}

/* Kompaktere Kampflog-Highlights: gleiche Kopfgröße, geringere Zeilenhöhe und
   weniger Luft, damit beide Übersichtskarten effizienter wirken. */
.combat-panel-heading {
  margin-bottom: 14px;
}
.combat-ranking-list,
.combat-rivalry-list {
  gap: 6px;
}
.combat-winner-row {
  grid-template-columns: 30px 34px minmax(0, 1fr) auto;
  min-height: 52px;
  gap: 8px;
  padding: 7px 10px;
}
.combat-rivalry-row {
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
  min-height: 58px;
  gap: 12px;
  padding: 8px 74px;
}
.combat-rivalry-row > .combat-rank {
  left: 16px;
  width: 24px;
}
.combat-winner-row .player-avatar,
.combat-rivalry-player .player-avatar {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}
.combat-player-copy .player-link {
  font-size: 11px;
}
.combat-player-copy small {
  font-size: 8px;
}
.combat-win-count {
  font-size: 17px;
}
.combat-rivalry-player {
  gap: 8px;
}
.combat-rivalry-player .player-link:not(.avatar-link) {
  max-width: 168px;
  font-size: 10px;
}
.combat-versus-score {
  width: 62px;
  padding: 6px 5px;
  font-size: 12px;
}
.combat-duel-count {
  right: 12px;
  min-width: 52px;
  padding: 4px 6px;
  font-size: 7px;
}

/* Profilkarten: innerhalb derselben Boxen leicht größer und präsenter. */
.profile-stat-card h3 {
  margin-bottom: 9px;
  font-size: 14px;
}
.profile-stat-value-row {
  gap: 10px;
}
.profile-stat-value-row .metric-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.profile-stat-value-row .metric-icon svg {
  width: 18px;
  height: 18px;
}
.profile-stat-value-row .profile-stat-value {
  font-size: clamp(21px, 1.95vw, 27px);
}
.profile-stat-meta .category-label {
  font-size: 9px;
}
.profile-stat-meta .profile-stat-rank {
  font-size: 8.5px;
}
.profile-stat-card .profile-stat-key {
  padding-top: 9px;
  font-size: 7.5px;
}

/* Leaderboard-Karten: sehr vorsichtig größer, damit die Boxen dichter und
   besser ausgenutzt wirken, ohne überladen zu werden. */
.metric-card-heading {
  gap: 11px;
}
.metric-card-heading .metric-icon {
  width: 35px;
  height: 35px;
}
.metric-card-heading .metric-icon svg {
  width: 18.5px;
  height: 18.5px;
}
.metric-card-heading h3,
.metric-card h3 {
  font-size: 15.5px;
}
.metric-card-meta {
  margin-bottom: 10px;
}
.metric-card-meta .category-label {
  font-size: 9.5px;
}
.metric-card-meta .card-number {
  font-size: 8.5px;
}
.metric-leader {
  min-height: 54px;
  margin: 10px 0 9px;
  padding: 8px 10px;
}
.metric-leader .player-avatar {
  width: 35px;
  height: 35px;
}
.metric-leader-info .metric-player-name,
.metric-leader-info strong,
.metric-leader-info span {
  font-size: 11.5px;
}
.metric-card .card-footer {
  padding-top: 8px;
  font-size: 8.5px;
}
.metric-card .card-footer b {
  font-size: 13.5px;
}
.metric-card .metric-empty-state strong {
  font-size: 10.5px;
}
.metric-card .metric-empty-state span {
  font-size: 8.5px;
}

@media (max-width: 720px) {
  .champion-identity .champion-info .champion-rank-badge strong {
    font-size: 13px;
  }
}

/* =====================================================================
   WANAStatsWeb 1.9.18 – Symbolskalierung, dritte Kampflog-Statistik und
   klarere Leaderboard-Zeilen
   ===================================================================== */

/* Gesamt-Spitzenreiter: obere Zeile kleiner, damit Stern + Titel sauber in
   einer Zeile bleiben. */
.champion-rank-badge {
  max-width: 230px;
}
.champion-rank-badge b {
  font-size: 8px;
  letter-spacing: .055em;
  white-space: nowrap;
}
.champion-identity .champion-info > .champion-rank-badge {
  max-width: 230px;
}

/* Die Kategorien rechts bekommen korrekt zentrierte und größer gezogene
   SVG-Symbole statt kleine Icons in der Ecke. */
.champion-winning-stat > .metric-icon {
  display: grid;
  place-items: center;
}
.champion-winning-stat > .metric-icon svg,
.champion-winning-tooltip > .metric-icon svg {
  display: block;
  width: 18px !important;
  height: 18px !important;
  margin: 0 auto;
}

/* Drei Übersichtskarten im Kampflog: Sieger, Verlierer und Duelle. */
.combat-overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.combat-panel {
  min-height: 276px;
}
.combat-inline-empty {
  min-height: 200px;
}

/* Das Duell-Badge darf präsenter sein. */
.combat-duel-count {
  right: 12px;
  min-width: 66px;
  padding: 6px 9px;
  font-size: 8.5px;
  font-weight: 900;
}

/* Leaderboard-Karten: Kopf links, Name mittig größer, Wert rechts größer. */
.metric-leader {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}
.metric-leader .avatar-link {
  grid-column: 1;
}
.metric-leader .player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.metric-leader-info {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.metric-leader-info .metric-player-name,
.metric-leader-info strong {
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.15;
}
.metric-leader-info span {
  justify-self: end;
  text-align: right;
  color: var(--orange);
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

@media (max-width: 1400px) {
  .combat-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .combat-overview-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .champion-rank-badge b {
    font-size: 7.4px;
  }
  .metric-leader-info {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .metric-leader-info span {
    justify-self: start;
    text-align: left;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.19 – Fortschritt direkt nach Zeit und ausgewogenere
   Kampflog-Spalten
   ===================================================================== */

/* Sieger und Verlierer bewusst schmaler, Rivalitäten deutlich breiter.
   So bleiben auch längere Spielernamen im Duell lesbar. */
.combat-overview-grid {
  grid-template-columns: minmax(260px, .78fr) minmax(260px, .78fr) minmax(520px, 1.44fr);
  gap: 16px;
}

/* Platzierung klarer hervorheben; Sieg-/Niederlagenzahl moderat größer. */
.combat-winner-row .combat-rank,
.combat-rivalry-row > .combat-rank {
  font-size: 13px;
  font-weight: 950;
}
.combat-win-count {
  font-size: 20px;
  line-height: 1;
}

/* Die breitere Duellkarte nutzt den zusätzlichen Raum auch wirklich aus. */
.combat-rivalry-row {
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  gap: 14px;
  padding-left: 68px;
  padding-right: 82px;
}
.combat-rivalry-player .player-link:not(.avatar-link) {
  max-width: none;
  font-size: 11px;
}
.combat-versus-score {
  width: 72px;
  font-size: 13px;
}
.combat-duel-count {
  min-width: 70px;
  font-size: 8.5px;
}

@media (max-width: 1500px) {
  .combat-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .combat-overview-grid .combat-panel:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .combat-overview-grid {
    grid-template-columns: 1fr;
  }
  .combat-overview-grid .combat-panel:last-child {
    grid-column: auto;
  }
}

/* Kleine letzte Lesbarkeitskorrektur für Rang und Ergebniszeile. */
.combat-winner-row .combat-rank,
.combat-rivalry-row > .combat-rank { font-size: 14px; }
.combat-player-copy small { font-size: 9px; }


/* =====================================================================
   WANAStatsWeb 1.9.20 – Fortschritt-Reihenfolge und Feinschliff für
   Kampflog- sowie Spielerkarten
   ===================================================================== */

/* Letzte Kämpfe: Sieger/Verlierer und Spielernamen spürbar größer, aber
   weiterhin ellipsensicher für längere Namen. */
.combat-fighter-copy {
  max-width: 260px;
  gap: 5px;
}
.combat-fighter small {
  font-size: 9px;
  letter-spacing: .1em;
}
.combat-fighter .player-link:not(.avatar-link) {
  font-size: 15px;
  line-height: 1.12;
}

/* Top-5-Karten im Kampflog: Spielernamen und Zahlen nutzen den verfügbaren
   Platz besser aus, ohne unruhig zu wirken. */
.combat-rank {
  font-size: 13px;
}
.combat-player-copy .player-link {
  font-size: 13px;
  line-height: 1.12;
}
.combat-player-copy small {
  font-size: 9px;
}
.combat-win-count {
  font-size: 18px;
}
.combat-rivalry-player .player-link:not(.avatar-link) {
  max-width: 220px;
  font-size: 12px;
  line-height: 1.1;
}

/* Spielerübersicht: Name oben bündig, Status unten bündig zur Kopfhöhe,
   insgesamt größer und besser ausgenutzt. */
.player-card {
  align-items: center;
}
.player-card .player-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
}
.player-card-info {
  min-height: 50px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  padding-block: 1px;
}
.player-card-info strong {
  font-size: 15px;
  line-height: 1.1;
}
.player-card-info span {
  font-size: 11px;
  line-height: 1.1;
}

@media (min-width: 1281px) {
  .player-card {
    min-height: 76px;
    grid-template-columns: 50px minmax(0, 1fr) auto 18px;
    gap: 10px;
  }
  .player-card .player-avatar {
    width: 50px;
    height: 50px;
  }
  .player-card-info {
    min-height: 50px;
  }
  .player-card-info strong {
    font-size: 14px;
  }
  .player-card-info span {
    font-size: 10.5px;
  }
}

@media (max-width: 720px) {
  .combat-fighter .player-link:not(.avatar-link) {
    font-size: 13px;
  }
  .combat-player-copy .player-link,
  .combat-rivalry-player .player-link:not(.avatar-link) {
    font-size: 11px;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.21 – schmalere Spielerliste und größere Statistiktitel
   ===================================================================== */

/* Spielerliste: Karten etwas schmaler, damit pro Reihe eine Karte mehr passt.
   Der Spielername wird prominenter und optisch mittig neben dem Kopf geführt,
   während der Online-Status unten stehen bleibt. */
.players-grid {
  gap: 10px;
}
.player-card {
  min-height: 78px;
  padding: 12px 12px;
  grid-template-columns: 46px minmax(0, 1fr) auto 18px;
  gap: 10px;
}
.player-card .player-avatar {
  width: 46px;
  height: 46px;
  border-radius: 11px;
}
.player-card-info {
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  padding-block: 0;
}
.player-card-info strong {
  font-size: 15.5px;
  line-height: 1.05;
  transform: translateY(-2px);
}
.player-card-info span {
  font-size: 10.5px;
  line-height: 1.08;
}
.player-card-arrow {
  font-size: 16px;
}

/* Große Ansichten: eine zusätzliche Karte pro Reihe. */
@media (min-width: 1281px) {
  .players-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
  }
  .player-card {
    min-height: 74px;
    padding: 10px 11px;
    grid-template-columns: 44px minmax(0, 1fr) auto 16px;
    gap: 9px;
  }
  .player-card .player-avatar {
    width: 44px;
    height: 44px;
  }
  .player-card-info {
    min-height: 44px;
  }
  .player-card-info strong {
    font-size: 14.5px;
    transform: translateY(-1px);
  }
  .player-card-info span {
    font-size: 10px;
  }
}

@media (min-width: 861px) and (max-width: 1280px) {
  .players-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Globale Statistik-Karten: Titel wie „Blöcke abgebaut“ etwas größer. */
.profile-stat-card h3 {
  font-size: 15.5px;
  line-height: 1.18;
}

/* Leaderboard-Karten: Statistiktitel ebenfalls größer, da genug Platz da ist. */
.metric-card-heading h3,
.metric-card h3 {
  font-size: 16.5px;
  line-height: 1.16;
}

@media (max-width: 720px) {
  .player-card-info strong {
    font-size: 14px;
    transform: none;
  }
  .player-card-info span {
    font-size: 10px;
  }
  .profile-stat-card h3 {
    font-size: 14.5px;
  }
  .metric-card-heading h3,
  .metric-card h3 {
    font-size: 15px;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.22 – exakte Namensposition in der Spielerliste und
   einheitliche Überschriften in allen Statistikblöcken
   ===================================================================== */

/* Spielerliste: Name wirklich zentral neben dem Kopf, mit leichter Tendenz
   nach oben rechts. Der Status bleibt unten an seiner bisherigen Position. */
.player-card-info {
  position: relative;
  min-height: 46px;
  display: block;
  align-self: stretch;
}
.player-card-info strong {
  position: absolute;
  inset: auto 0 auto 0;
  top: 50%;
  transform: translateY(-62%);
  font-size: 15.8px;
  line-height: 1.04;
}
.player-card-info span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 10.5px;
  line-height: 1.08;
}

@media (min-width: 1281px) {
  .player-card-info {
    min-height: 44px;
  }
  .player-card-info strong {
    font-size: 14.8px;
    transform: translateY(-60%);
  }
  .player-card-info span {
    font-size: 10px;
  }
}

/* Alle weißen Überschriften in Statistikblöcken auf die gleiche Größe wie bei
   „Die großen Vier“ bringen. */
.spotlight-card h3,
.metric-card-heading h3,
.metric-card h3,
.profile-stat-card h3 {
  font-size: 20px !important;
  line-height: 1.14;
}

@media (max-width: 720px) {
  .player-card-info strong {
    font-size: 14.2px;
    transform: translateY(-56%);
  }
  .player-card-info span {
    font-size: 10px;
  }
  .spotlight-card h3,
  .metric-card-heading h3,
  .metric-card h3,
  .profile-stat-card h3 {
    font-size: 17px !important;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.23 – Große Vier ohne Spitzenreiterzeile, mit größerer
   Top-3-Darstellung
   ===================================================================== */

/* In den Großen Vier fällt die separate Spitzenreiterzeile samt orangefarbener
   Einzelzahl weg. Der frei gewordene Platz wird komplett für die Top 3 genutzt. */
.spotlight-summary {
  display: none !important;
}
.spotlight-card {
  min-height: 250px;
}
.spotlight-card .mini-ranking {
  gap: 10px;
  margin-top: 16px;
}
.spotlight-card .mini-rank-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 42px;
  padding-bottom: 8px;
  font-size: 13px;
}
.spotlight-card .mini-rank-row .rank {
  font-size: 16px;
  line-height: 1;
}
.spotlight-card .mini-player-link {
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
}
.spotlight-card .mini-player-link .player-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.spotlight-card .mini-rank-row .value {
  font-size: 14px;
  color: var(--text);
}
.spotlight-card .mini-progress {
  left: 47px;
  bottom: 0;
}
.spotlight-card .mini-progress i {
  height: 4px;
}

@media (max-width: 720px) {
  .spotlight-card .mini-ranking {
    gap: 8px;
    margin-top: 14px;
  }
  .spotlight-card .mini-rank-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 38px;
    font-size: 12px;
  }
  .spotlight-card .mini-rank-row .rank {
    font-size: 14px;
  }
  .spotlight-card .mini-player-link {
    font-size: 12.5px;
  }
  .spotlight-card .mini-player-link .player-avatar {
    width: 25px;
    height: 25px;
  }
  .spotlight-card .mini-rank-row .value {
    font-size: 12.5px;
  }
  .spotlight-card .mini-progress {
    left: 42px;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.24 – Feinschliff Spielerübersicht
   ===================================================================== */

/* Spielername etwas größer, Statuszeile leicht nach oben gezogen, damit sie
   sauber mit der Unterkante des Kopfes abschließt. */
.player-card-info strong {
  font-size: 16.4px;
  transform: translateY(-64%);
}
.player-card-info span {
  bottom: 3px;
  font-size: 10.7px;
}

@media (min-width: 1281px) {
  .player-card-info strong {
    font-size: 15.2px;
    transform: translateY(-63%);
  }
  .player-card-info span {
    bottom: 3px;
    font-size: 10.2px;
  }
}

@media (max-width: 720px) {
  .player-card-info strong {
    font-size: 14.6px;
    transform: translateY(-58%);
  }
  .player-card-info span {
    bottom: 2px;
    font-size: 10px;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.25 – Feinschliff Spielerstatus, Kampflog-Ausrichtung und
   Markenblock mit Versionsanzeige
   ===================================================================== */

/* Spielerübersicht: Status minimal höher, damit er sauber mit dem Kopf
   abschließt. */
.player-card-info span {
  bottom: 5px;
}

@media (min-width: 1281px) {
  .player-card-info span {
    bottom: 5px;
  }
}

@media (max-width: 720px) {
  .player-card-info span {
    bottom: 4px;
  }
}

/* Letzte Kämpfe: beide Köpfe exakt auf gleicher Höhe halten. */
.combat-fighter .avatar-link {
  display: flex;
  align-items: center;
  align-self: center;
}
.combat-fighter .champion-avatar {
  display: block;
}
.combat-fighter-copy {
  align-self: center;
}

/* Header-Markierung: Text beginnt bündig auf Höhe der Logospitze, die
   Versionsnummer steht unter dem Aktualisierungshinweis. */
.brand {
  align-items: flex-start;
}
.brand-copy {
  align-self: flex-start;
  padding-top: 2px;
}
.brand-copy .brand-updated {
  gap: 1px;
}
#navVersion {
  padding-left: 11px;
  color: var(--muted-2);
  font-size: 7px;
  line-height: 1.15;
  letter-spacing: .04em;
  font-weight: 780;
}


/* =====================================================================
   WANAStatsWeb 1.9.26 – exakte Kampfkopf-Ausrichtung und kompaktere
   Errungenschafts-/Profilkarten
   ===================================================================== */

/* Letzte Kämpfe: beide Köpfe exakt auf derselben Y-Achse. Durch explizite
   Grid-Spalten bekommen Sieger- und Verliererblock identische Vertikalzentren. */
.combat-fighter {
  display: grid;
  align-items: center;
  width: 100%;
  padding: 0 22px;
  column-gap: 12px;
}
.combat-fighter.winner {
  grid-template-columns: minmax(0, 1fr) 53px;
  justify-items: end;
  text-align: right;
}
.combat-fighter.loser {
  grid-template-columns: 53px minmax(0, 1fr);
  justify-items: start;
  text-align: left;
}
.combat-fighter .avatar-link {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  margin: 0;
  line-height: 0;
}
.combat-fighter .champion-avatar {
  margin: 0;
}
.combat-fighter-copy {
  align-self: center;
}

/* Globale und persönliche Profil-/Errungenschaftskarten: weniger verschenkter
   Platz oben und unten, dabei gleichmäßige Innenabstände. */
.profile-stat-card {
  min-height: 122px;
  padding: 12px 15px;
}
.profile-stat-meta.profile-stat-meta-top {
  margin: 0 0 7px;
  min-height: 15px;
}
.profile-stat-card h3 {
  margin: 0 0 8px;
}
.profile-stat-value-row {
  margin: 0;
}
.profile-stat-card .profile-stat-key {
  padding-top: 7px;
}

@media (max-width: 720px) {
  .profile-stat-card {
    min-height: 118px;
    padding: 11px 13px;
  }
  .profile-stat-meta.profile-stat-meta-top {
    margin-bottom: 6px;
  }
  .profile-stat-card h3 {
    margin-bottom: 7px;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.27 – Kampflog-Feinschliff, kompaktere Statistikblöcke,
   kleinere Trophäenkarten und größere Profil-Metadaten
   ===================================================================== */

/* Letzte Kämpfe: Namen kleiner, damit sie nicht abgeschnitten werden. Der
   rechte Kopf wird minimal abgesenkt, damit beide Köpfe visuell exakt gleich
   hoch sitzen. */
.combat-fight-row {
  align-items: center;
}
.combat-fighter {
  align-self: center;
  padding: 0 18px;
  column-gap: 10px;
}
.combat-fighter-copy {
  max-width: 190px;
  gap: 4px;
}
.combat-fighter .player-link:not(.avatar-link) {
  font-size: 12.6px;
  line-height: 1.08;
}
.combat-fighter.loser .avatar-link {
  transform: translateY(2px);
}

/* Globale und persönliche Statistikblöcke noch etwas kompakter, mit weiterhin
   gleichmäßigen Abständen oben und unten. */
.profile-stat-card {
  min-height: 114px;
  padding: 11px 15px;
}
.profile-stat-meta.profile-stat-meta-top {
  margin: 0 0 6px;
  min-height: 14px;
}
.profile-stat-card h3 {
  margin: 0 0 7px;
}
.profile-stat-value-row {
  gap: 9px;
}
.profile-stat-card .profile-stat-key {
  padding-top: 6px;
}

/* Boss-Trophäen: Bildkasten kleiner, Gesamthöhe kompakter. Die Bossquelle und
   Dropchance sitzen unten auf Höhe der Erfassungszeile. */
.trophy-card {
  grid-template-columns: 70px minmax(0, 1fr);
  padding: 10px 11px;
  gap: 6px 10px;
}
.trophy-card > .item-visual {
  align-self: start;
}
.trophy-card .item-visual.large {
  width: 64px;
  height: 64px;
}
.trophy-card > .trophy-boss-sources {
  width: 70px;
  gap: 4px;
  align-self: end;
}
.trophy-card > .trophy-boss-sources small {
  font-size: 6.5px;
}
.trophy-card > .trophy-boss-sources a {
  padding: 4px 5px;
  font-size: 6.6px;
  line-height: 1.18;
}
.trophy-card .elite-loot-title h3 {
  font-size: 12.5px;
}
.trophy-card .elite-loot-lore,
.trophy-card .elite-loot-material {
  font-size: 7.7px;
}
.trophy-card .elite-loot-properties span {
  padding: 3px 6px;
}
.trophy-meta {
  gap: 5px 10px;
}

/* Profilkopf-Metaboxen: Texte deutlich größer, damit der verfügbare Platz auch
   sichtbar genutzt wird. */
.profile-meta-grid > div {
  padding: 14px 15px;
  gap: 7px;
}
.profile-meta-grid span {
  font-size: 8.8px;
}
.profile-meta-grid b {
  font-size: 13.2px;
  line-height: 1.15;
}

@media (max-width: 720px) {
  .combat-fighter .player-link:not(.avatar-link) {
    font-size: 11.5px;
  }
  .profile-stat-card {
    min-height: 110px;
    padding: 10px 13px;
  }
  .trophy-card {
    padding: 10px;
  }
  .trophy-card .item-visual.large {
    width: 60px;
    height: 60px;
  }
  .profile-meta-grid span {
    font-size: 8.2px;
  }
  .profile-meta-grid b {
    font-size: 12.2px;
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.29 – mobiles Kampflog + Hamburger-Menü
   ===================================================================== */

/* Mobilmenü: Desktop bleibt wie bisher, auf kleinen Geräten wird die breite
   Navigationsleiste durch einen Button „Menü“ mit Aufklappliste ersetzt. */
.mobile-menu-wrap {
  position: relative;
  display: none;
}
.mobile-menu-button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-solid) 76%, transparent);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: .2s ease;
}
.mobile-menu-button:hover,
.mobile-menu-button[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: var(--orange-soft);
}
.mobile-menu-button .hamburger {
  display: inline-grid;
  gap: 3px;
}
.mobile-menu-button .hamburger i {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 99px;
  background: var(--orange);
}
.mobile-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(240px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--orange) 26%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent);
  box-shadow: 0 24px 65px rgba(0,0,0,.46);
  backdrop-filter: blur(18px);
  z-index: 60;
}
.mobile-menu-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.mobile-menu-panel a span {
  color: var(--orange);
  font-size: 15px;
}
.mobile-menu-panel a:hover,
.mobile-menu-panel a.active {
  color: var(--text-strong);
  background: var(--orange-soft);
}

/* Mobile Kampfansicht: Sieger oben rechts, Verlierer unten links. */
@media (max-width: 620px) {
  .main-nav { display: none !important; }
  .mobile-menu-wrap { display: inline-flex; }

  .combat-fight-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 12px 12px;
    text-align: left;
  }
  .combat-fighter {
    width: 100%;
    padding: 8px 6px;
    column-gap: 10px;
  }
  .combat-fighter.winner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    justify-items: end;
    align-items: center;
    text-align: right;
  }
  .combat-fighter.loser {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    text-align: left;
  }
  .combat-fighter .avatar-link { order: initial; margin: 0; }
  .combat-fighter-copy { order: initial; max-width: none; }
  .combat-fighter .player-link:not(.avatar-link) {
    font-size: 11.4px;
    line-height: 1.06;
  }
  .combat-fighter-copy small {
    font-size: 7.2px;
  }
  .combat-fighter.loser .avatar-link { transform: none; }
  .combat-fight-center {
    min-height: 68px;
    border-inline: 0;
    border-block: 1px solid var(--line);
  }
}


/* =====================================================================
   WANAStatsWeb 1.9.30 – Android Render-Safe-Modus
   ===================================================================== */

/* Einige Android-/WebView-Versionen reagieren empfindlich auf mehrere
   gleichzeitig gerenderte Blur-, Backdrop- und Blend-Layer. Auf Android wird
   deshalb ausschließlich die grafische Nachbearbeitung reduziert. Abstände,
   Größen, Inhalte und das eigentliche Layout bleiben unverändert. */
html.android-render-safe .page-texture,
html.android-render-safe .ambient {
  display: none !important;
}

html.android-render-safe .topbar-wrap,
html.android-render-safe .player-suggestions,
html.android-render-safe .online-players-popover,
html.android-render-safe .profile-sticky,
html.android-render-safe .mobile-menu-panel,
html.android-render-safe .leaderboard-dialog::backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.android-render-safe .topbar-wrap {
  background: var(--bg) !important;
}
html.android-render-safe .player-suggestions,
html.android-render-safe .online-players-popover,
html.android-render-safe .profile-sticky,
html.android-render-safe .mobile-menu-panel {
  background: var(--surface-solid) !important;
}

html.android-render-safe .hero-panel::after,
html.android-render-safe .spotlight-card::after,
html.android-render-safe .profile-hero::after,
html.android-render-safe .profile-stat-card::after,
html.android-render-safe .skin-glow {
  display: none !important;
}

html.android-render-safe .item-visual.enchanted i {
  display: none !important;
  animation: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  will-change: auto !important;
}

html.android-render-safe .boss-visual.effect-flame::before,
html.android-render-safe .boss-visual.effect-cloud::before,
html.android-render-safe .boss-visual.effect-soul::before {
  animation: none !important;
  filter: none !important;
}

/* =====================================================================
   WANAStatsWeb 1.9.36 – dreispaltiger Hero + Aufgaben-Feed
   ===================================================================== */
.hero {
  min-height: 355px;
  padding: 34px 0 40px;
  grid-template-columns: minmax(250px, .78fr) minmax(330px, 1fr) minmax(390px, 1.12fr);
  gap: 22px;
  align-items: stretch;
}
.hero-copy { padding-left: 0; padding-top: 2px; align-self: start; }
.hero-copy::before { opacity: .35; }
.hero h1 { margin-top: 0; }
.task-feed-panel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 18px 18px 15px;
  border-color: color-mix(in srgb, var(--orange) 32%, var(--line));
  min-height: 100%;
}
.task-feed-panel::after {
  content: "";
  position: absolute;
  left: -50px;
  bottom: -70px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255,151,28,.08);
  filter: blur(42px);
  pointer-events: none;
}
.task-feed-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text-strong);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.task-feed-heading b { color: var(--orange); margin-right: 7px; }
.task-feed-heading small { color: var(--muted-2); font-size: 7px; letter-spacing: .12em; }
.task-feed-list { position: relative; z-index: 1; display: grid; margin-top: 6px; }
.task-feed-entry {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 8px 0;
}
.task-feed-entry + .task-feed-entry { border-top: 1px solid var(--line); }
.task-feed-entry .player-avatar { width: 36px; height: 36px; border-radius: 9px; }
.task-feed-copy { min-width: 0; display: grid; gap: 4px; }
.task-feed-copy strong {
  color: var(--text-strong);
  font-size: 11px;
  line-height: 1.28;
  font-weight: 800;
}
.task-feed-copy strong a { color: var(--orange-2); }
.task-feed-copy strong em { color: var(--gold); font-style: normal; }
.task-feed-copy time { color: var(--muted-2); font-size: 9px; }
.task-feed-empty { display: grid; place-items: center; min-height: 220px; color: var(--muted); font-size: 11px; text-align: center; }

@media (max-width: 1240px) {
  .hero { grid-template-columns: minmax(240px,.8fr) minmax(300px,1fr) minmax(350px,1.05fr); gap: 17px; }
  .task-feed-entry:nth-child(n+5) { display: none; }
  .task-feed-entry { min-height: 57px; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .hero-copy { grid-column: 1 / -1; text-align: center; }
  .hero-rule { margin-inline: auto; }
  .hero-buttons { justify-content: center; }
  .task-feed-panel, .hero-panel { min-height: 320px; }
  .task-feed-entry:nth-child(n+5) { display: none; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { grid-column: auto; }
  .task-feed-panel, .hero-panel { min-height: auto; }
  .task-feed-entry:nth-child(n+4) { display: none; }
  .task-feed-empty { min-height: 150px; }
}

/* 1.9.37: API-Status bleibt fuer JS im DOM, ist aber rein optisch verborgen. */
.hero-api-status-hidden { display: none !important; }

/* =====================================================================
   WANAStatsWeb 1.9.43 – einklappbare Profilbereiche
   ===================================================================== */
.profile-collapsible {
  margin: 16px 0 0;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow-soft);
}
.profile-collapsible > summary {
  list-style: none;
  min-height: 82px;
  margin: 0 !important;
  padding: 17px 20px;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: background .2s ease, border-color .2s ease;
}
.profile-collapsible > summary::-webkit-details-marker { display: none; }
.profile-collapsible > summary:hover { background: var(--surface-hover); }
.profile-collapsible[open] > summary {
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--orange) 4%, var(--surface));
}
.profile-collapsible[open] { padding-bottom: 20px !important; }
.profile-collapsible > :not(summary) { margin-inline: 20px; }
.profile-heading-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}
.profile-collapse-indicator {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  border-radius: 10px;
  color: var(--orange);
  background: var(--orange-soft);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  transition: transform .2s ease;
}
.profile-collapsible[open] .profile-collapse-indicator { transform: rotate(180deg); }

@media (max-width: 620px) {
  .profile-collapsible { margin-top: 11px; border-radius: 15px; }
  .profile-collapsible > summary { min-height: 70px; padding: 14px 13px; gap: 10px; }
  .profile-collapsible > summary h2 { font-size: 22px; }
  .profile-collapsible > :not(summary) { margin-inline: 12px; }
  .profile-heading-actions { gap: 7px; }
  .profile-collapse-indicator { width: 29px; height: 29px; flex-basis: 29px; }
  .profile-collapsible .profile-combat-summary { font-size: 9px; }
}


/* =====================================================================
   WANAStatsWeb 2.0 – Layout- und Konsistenzpass
   ===================================================================== */
.profile-back-row { margin: 22px 0 8px; display:flex; align-items:center; }
.profile-back-row .back-button { position: static !important; }
.profile-hero { margin-top: 0 !important; min-height: 300px !important; padding-top: 28px !important; padding-bottom: 28px !important; }
.profile-skin { max-height: 250px !important; }
.profile-skin-stage { min-height: 250px !important; }

.profile-heading-actions .profile-combat-summary,
.profile-heading-actions .advancement-total-badge {
  min-height: 44px; padding: 0 17px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  border-radius:14px; color:var(--green); background:color-mix(in srgb, var(--green) 9%, transparent);
  font-size:16px !important; font-weight:900; line-height:1;
}
.profile-heading-actions .advancement-total-badge b,
.profile-heading-actions .advancement-total-badge span { color:var(--green); font-size:16px !important; font-weight:900; line-height:1; text-transform:none; letter-spacing:0; }

.advancement-category-progress b { min-width:76px; color:var(--green) !important; font-size:16px !important; font-weight:900; }
.advancement-category-progress-track { width:128px; height:8px; }

.spotlight-card .mini-ranking { align-content:start; }
.spotlight-card .mini-rank-row { min-height:58px; grid-template-columns:34px minmax(0,1fr) auto !important; align-items:center; }
.spotlight-card .mini-player-link { align-items:center; }
.spotlight-card .mini-rank-row .value { color:var(--orange) !important; font-size:15px !important; font-weight:900 !important; line-height:1; }
.spotlight-card .mini-player-link, .spotlight-card .mini-player-link > span:last-child { font-size:14px !important; font-weight:900; }
.spotlight-card .mini-player-link .player-avatar { width:34px !important; height:34px !important; }

.task-feed-panel { display:grid; grid-template-rows:auto 1fr auto; }
.task-feed-pagination { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--line); }
.task-feed-pagination button { min-height:32px; padding:0 12px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:transparent; font:inherit; font-size:9px; font-weight:850; cursor:pointer; }
.task-feed-pagination button:last-child { justify-self:end; }
.task-feed-pagination button:disabled { opacity:.32; cursor:not-allowed; }
.task-feed-pagination span { color:var(--muted); font-size:8px; font-weight:850; text-align:center; }

.champion-winning-stat { padding-inline:10px !important; }
.champion-winning-stat > span:not(.champion-winning-tooltip) { width:100%; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; text-align:center; font-size:10px !important; line-height:1.15; }
.champion-winning-grid { gap:8px !important; }

.hero { padding-bottom:24px !important; }
.spotlight { padding-top:18px !important; }
.spotlight + .leaderboards-section, #leaderboards { scroll-margin-top:90px; }

.combat-rivalry-row { min-height:66px !important; padding-block:8px !important; }
.combat-panel { min-height:auto !important; }
.combat-pagination .pagination-button { width:100%; justify-self:stretch !important; }

.footer > div:first-child { display:none; }
.footer { justify-content:center; text-align:center; }
.footer > div:last-child { text-align:center; }

.profile-stat-rank { white-space:nowrap; }
.profile-collapsible, .advancement-category { scroll-margin-top:96px; }

@media (max-width:720px) {
  .profile-back-row { margin-top:14px; }
  .profile-hero { padding-top:20px !important; padding-bottom:20px !important; }
  .profile-heading-actions .profile-combat-summary,
  .profile-heading-actions .advancement-total-badge { font-size:12px !important; min-height:36px; padding-inline:10px; }
  .profile-heading-actions .advancement-total-badge b,
  .profile-heading-actions .advancement-total-badge span { font-size:12px !important; }
}

/* =====================================================================
   WANAStatsWeb 2.1 – Trophäen-Chronik, kompakte Karten und Rangmittel
   ===================================================================== */

/* Aufgaben-Feed: neueste Meldung stets direkt unter der Überschrift,
   Navigation dauerhaft am unteren Rand. */
.task-feed-list {
  align-content: start !important;
  grid-auto-rows: max-content;
  min-height: 0;
  padding-top: 8px;
}
.task-feed-entry { align-self: start; }
.task-feed-pagination {
  align-self: end;
  margin-top: 8px;
}
.task-feed-pagination.is-hidden { display: grid !important; }

/* Gesamt-Spitzenreiter: drei größere Felder pro Reihe; bei 13 Kategorien
   entstehen damit fünf sauber lesbare Reihen. */
.champion-winning-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(56px, auto);
  gap: 10px !important;
  align-content: center;
}
.champion-winning-stat {
  min-height: 56px !important;
  padding: 10px 12px !important;
  border-radius: 12px;
}
.champion-winning-stat > span:not(.champion-winning-tooltip) {
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  text-align: left !important;
  display: block !important;
  overflow-wrap: anywhere !important;
}
.hero-panel { min-height: 372px; }
.champion { align-items: center; }

/* Profil-/Chronik-Trophäen: auf der Seite nur Symbol und Name. */
.profile-trophy-grid,
.trophy-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 13px;
  align-items: stretch;
}
.trophy-history-grid { padding: 2px 0 4px; }
.trophy-tile {
  position: relative;
  min-width: 0;
  min-height: 142px;
  padding: 13px 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--shadow-soft);
  cursor: help;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  outline: none;
}
.trophy-tile:hover,
.trophy-tile:focus-visible,
.trophy-tile:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--orange) 55%, var(--line));
  background: color-mix(in srgb, var(--orange) 5%, var(--surface));
  z-index: 1000;
}
.trophy-tile > .item-visual.large {
  width: 78px !important;
  height: 78px !important;
  flex: 0 0 78px;
}
.trophy-tile-name {
  width: 100%;
  min-height: 28px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-strong);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 900;
  text-align: center;
}
.trophy-tile-owner,
.trophy-tile-time {
  width: 100%;
  color: var(--muted-2);
  font-size: 7px;
  line-height: 1.2;
  text-align: center;
}
.trophy-tile-owner .player-link { color: var(--orange); font-size: 8px; font-weight: 900; }
.trophy-tile-time { margin-top: auto; }

/* Das vollständige bisherige Feld erscheint als 20 % größeres Mouseover. */
.trophy-hover-card {
  position: fixed;
  z-index: 3000;
  display: none;
  max-width: calc(100vw - 28px);
  pointer-events: auto;
  filter: drop-shadow(0 22px 42px rgba(0,0,0,.48));
}
.trophy-tile:hover > .trophy-hover-card,
.trophy-tile:focus-within > .trophy-hover-card { display: block; }
.trophy-hover-card > .trophy-card {
  width: 100%;
  min-height: 205px;
  margin: 0;
  padding: 22px !important;
  grid-template-columns: 118px minmax(0,1fr) !important;
  gap: 20px !important;
  border: 1px solid color-mix(in srgb, var(--orange) 58%, var(--line));
  border-radius: 19px;
  background: color-mix(in srgb, var(--surface-strong) 96%, #000);
  box-shadow: 0 24px 70px rgba(0,0,0,.58);
}
.trophy-hover-card .trophy-card .item-visual.large {
  width: 110px !important;
  height: 110px !important;
}
.trophy-hover-card .elite-loot-title h3 { font-size: 19px !important; }
.trophy-hover-card .elite-loot-material,
.trophy-hover-card .elite-loot-lore { font-size: 11px !important; line-height: 1.45; }
.trophy-hover-card .elite-loot-properties span,
.trophy-hover-card .trophy-meta,
.trophy-hover-card .trophy-boss-sources a { font-size: 9px !important; }
.trophy-hover-card .trophy-boss-sources {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.trophy-hover-owner {
  display: grid;
  grid-template-columns: 40px auto 1fr;
  gap: 9px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.trophy-hover-owner .player-avatar { width: 38px; height: 38px; border-radius: 9px; }
.trophy-hover-owner > span { color: var(--muted); font-size: 9px; }
.trophy-hover-owner .player-link { color: var(--orange); font-size: 12px; font-weight: 900; }
.profile-trophy-section[open],
.elite-trophy-history-section[open] { overflow: visible !important; }

/* Durchschnittlicher Serverrang im Statistik-Header. */
.average-rank-badge {
  min-height: 48px;
  min-width: 235px;
  padding: 7px 15px;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--green) 48%, var(--line));
  border-radius: 14px;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 9%, transparent);
}
.average-rank-badge b { color: var(--green); font-size: 15px; line-height: 1; font-weight: 950; }
.average-rank-badge span { color: var(--green); font-size: 8px; line-height: 1.2; font-weight: 850; text-align: right; }

/* Kampflog: Rivalitätszeile exakt so kompakt wie Sieger/Verlierer. */
.combat-rivalry-row {
  min-height: 52px !important;
  height: 52px;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.combat-rivalry-row .player-avatar { width: 30px !important; height: 30px !important; }
.combat-rivalry-row .combat-duel-count { line-height: 1; }
.combat-panel { align-self: stretch; }

/* Elite-Boss-Seite erhält dieselben einklappbaren Sektionen wie Profile. */
.elite-page-collapsible {
  margin: 17px 0 0;
  padding: 0 !important;
}
.elite-page-collapsible > summary { min-height: 84px; }
.elite-page-collapsible[open] { padding-bottom: 22px !important; }
.elite-page-collapsible .combat-pagination,
.elite-page-collapsible .elite-boss-toolbar { margin-top: 18px; }
.trophy-history-pagination.is-hidden { display: grid !important; }

@media (max-width: 1180px) {
  .champion-winning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .champion-winning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-panel { min-height: auto; }
  .profile-trophy-grid,
  .trophy-history-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .trophy-tile { min-height: 124px; padding: 10px 7px; }
  .trophy-tile > .item-visual.large { width: 62px !important; height: 62px !important; flex-basis: 62px; }
  .average-rank-badge { min-width: 0; padding-inline: 10px; }
  .average-rank-badge b { font-size: 12px; }
  .average-rank-badge span { font-size: 7px; }
}
@media (max-width: 480px) {
  .profile-trophy-grid,
  .trophy-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trophy-hover-card { display: none !important; }
}


/* =====================================================================
   WANAStatsWeb 2.2 – Tooltip-Portal, lesbarer Spitzenreiter, kombinierte
   Suche, kompakter Profilkopf und konsistente Seitennavigation
   ===================================================================== */

/* Header-Suche: Boss- und Spielervorschläge teilen sich dieselbe Liste. */
.boss-search-suggestion .search-boss-visual,
.boss-search-suggestion .boss-visual {
  width: 39px !important;
  height: 39px !important;
  min-width: 39px;
  border-radius: 10px;
}
.boss-search-suggestion .boss-head-image,
.boss-search-suggestion .boss-portrait-canvas { width: 100% !important; height: 100% !important; }
.suggestion-type-badge {
  justify-self: end;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--line));
  border-radius: 8px;
  color: var(--orange);
  background: var(--orange-soft);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .08em;
}

/* Gesamt-Spitzenreiter: echte nutzbare Breite, drei lesbare Spalten,
   zentrierte Begriffe ohne willkürliche Zeichenumbrüche. */
.champion {
  grid-template-columns: minmax(205px, .78fr) minmax(0, 1.72fr) !important;
  gap: 20px !important;
}
.champion-identity { min-width: 0; padding-right: 18px !important; }
.champion-winning-grid {
  min-width: 0;
  width: 100%;
  grid-template-columns: repeat(3, minmax(112px, 1fr)) !important;
  grid-auto-rows: minmax(62px, auto) !important;
  gap: 10px !important;
  align-content: center !important;
}
.champion-winning-stat {
  min-width: 0;
  min-height: 62px !important;
  padding: 10px 12px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}
.champion-winning-stat > span:not(.metric-icon):not(.champion-winning-tooltip) {
  width: 100% !important;
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
}
@media (max-width: 1180px) {
  .champion { grid-template-columns: minmax(185px, .75fr) minmax(0, 1.6fr) !important; }
  .champion-winning-grid { grid-template-columns: repeat(3, minmax(94px, 1fr)) !important; }
}
@media (max-width: 760px) {
  .champion { grid-template-columns: 1fr !important; }
  .champion-identity { padding-right: 0 !important; }
  .champion-winning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Profilkopf weiter verdichten und näher an den oberen Inhaltsrand ziehen. */
.profile-back-row { margin: 8px 0 5px !important; }
.profile-back-row .back-button { min-height: 31px; }
.profile-hero {
  min-height: 252px !important;
  padding: 17px 28px !important;
  grid-template-columns: 190px minmax(0, 1fr) 132px !important;
  gap: 27px !important;
}
.profile-skin-stage { min-height: 218px !important; }
.profile-skin { max-height: 218px !important; max-width: 176px !important; }
.profile-skin-stage::after { width: 142px; }
.profile-uuid { margin-top: 6px !important; margin-bottom: 10px !important; }
.profile-page-updated { margin-bottom: 9px !important; }
.profile-meta-grid > div { padding: 11px 14px !important; }
.profile-avatar-card { padding: 15px 11px !important; gap: 9px !important; }
.profile-avatar-card .champion-avatar { width: 92px !important; height: 92px !important; }
@media (max-width: 900px) {
  .profile-hero { grid-template-columns: 150px minmax(0,1fr) !important; }
  .profile-avatar-card { display: none !important; }
}
@media (max-width: 620px) {
  .profile-back-row { margin-top: 6px !important; }
  .profile-hero { grid-template-columns: 1fr !important; padding: 15px !important; }
  .profile-skin-stage { min-height: 180px !important; }
  .profile-skin { max-height: 180px !important; }
}

/* Trophäen-Tooltip als echtes Viewport-Portal: nie mehr am unteren Rand eines
   transformierten Containers oder hinter nachfolgenden Sektionen. */
.trophy-hover-card {
  position: fixed !important;
  z-index: 100000 !important;
  display: none !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100vh - 28px);
  overflow: auto;
  pointer-events: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.58));
}
.trophy-hover-card.is-visible { display: block !important; }
.trophy-tile:hover > .trophy-hover-card,
.trophy-tile:focus-within > .trophy-hover-card { display: none !important; }
.trophy-hover-card > .trophy-card {
  min-height: 220px;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  grid-template-areas: "visual copy" "source source" !important;
}
.trophy-hover-card .trophy-card > .item-visual { grid-area: visual; }
.trophy-hover-card .trophy-card > .elite-loot-copy { grid-area: copy; }
.trophy-tooltip-source-panel {
  grid-area: source;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.trophy-tooltip-boss-head {
  display: grid;
  place-items: center;
}
.trophy-tooltip-boss-head .boss-visual {
  width: 82px !important;
  height: 82px !important;
  border-radius: 16px;
}
.trophy-tooltip-boss-head .boss-head-image,
.trophy-tooltip-boss-head .boss-portrait-canvas { width: 100% !important; height: 100% !important; }
.trophy-tooltip-sources {
  grid-column: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  align-content: center;
}
.trophy-tooltip-sources small { font-size: 9px !important; }
.trophy-tooltip-sources a { width: fit-content; font-size: 10px !important; }
@media (max-width: 620px) {
  .trophy-hover-card { display: none !important; }
}

/* Globale Karten behalten ihre identische Leaderboard-Reihenfolge auch bei
   dynamischen API-Antworten. */
.global-stats-grid { align-content: start; }

/* Einheitliche Seitennavigation: linke Schaltfläche ist "Vor" (neuere
   Seite), rechte Schaltfläche "Zurück" (ältere Seite). */
.combat-pagination .pagination-button,
.task-feed-pagination button { text-align: center; }


/* =====================================================================
   WANAStatsWeb 2.3 – kompakter Hero, Profilaufrufe, sichere Sprungziele
   und dreireihiges Kampflog
   ===================================================================== */

/* Gesamt-Spitzenreiter: nur Kategoriesymbole. 13 erste Plätze passen damit
   in fünf Spalten und höchstens drei Reihen. */
.champion-winning-grid {
  grid-template-columns: repeat(5, minmax(48px, 1fr)) !important;
  grid-auto-rows: 54px !important;
  gap: 8px !important;
  align-content: center !important;
}
.champion-winning-stat {
  min-height: 54px !important;
  height: 54px !important;
  padding: 6px !important;
  display: grid !important;
  place-items: center !important;
}
.champion-winning-stat > .metric-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--winning-stat-color) !important;
}
.champion-winning-stat > .metric-icon svg {
  width: 24px !important;
  height: 24px !important;
}
.champion-winning-stat > span:not(.metric-icon):not(.champion-winning-tooltip) { display: none !important; }

/* Hero und Aufgabenfeed bewusst niedriger. Vier Einträge bleiben pro Seite. */
.hero {
  min-height: 300px !important;
  padding-top: 24px !important;
  padding-bottom: 26px !important;
  align-items: stretch !important;
}
.task-feed-panel,
.hero-panel {
  min-height: 294px !important;
  height: 294px !important;
}
.task-feed-panel { padding: 14px 16px 12px !important; }
.task-feed-heading { padding-bottom: 9px !important; }
.task-feed-list {
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: min-content !important;
  margin-top: 2px !important;
  overflow: hidden;
}
.task-feed-entry {
  min-height: 47px !important;
  padding: 5px 0 !important;
}
.task-feed-entry .player-avatar { width: 32px !important; height: 32px !important; }
.task-feed-copy strong { font-size: 10px !important; }
.task-feed-copy time { font-size: 8px !important; }
.task-feed-pagination { padding-top: 7px !important; }
.hero-panel { padding: 15px 16px !important; }
.champion { gap: 14px !important; }
.champion-identity { padding-right: 12px !important; }

/* Das kleine Profil beim Scrollen sitzt im freien Raum links neben der
   geöffneten Profilsektion statt auf deren Überschrift. */
.profile-sticky { left: 8px; }
details.profile-collapsible > summary,
details.advancement-category > summary,
details.elite-page-collapsible > summary,
details.elite-boss-card > summary { scroll-margin-top: 82px; }

/* Kampflog: vier schmale Karten pro Reihe, zwölf Einträge = drei Reihen. */
.combat-fights-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.combat-fight-row {
  min-width: 0;
  min-height: 208px !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(54px, auto) minmax(54px, auto) minmax(54px, auto) !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.combat-fighter {
  min-width: 0;
  width: 100%;
  padding: 7px 9px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: center !important;
  text-align: left !important;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-strong) 75%, transparent);
}
.combat-fighter .player-avatar { width: 36px !important; height: 36px !important; }
.combat-fighter-copy {
  min-width: 0;
  display: grid !important;
  gap: 2px !important;
  text-align: left !important;
}
.combat-fighter-copy small { font-size: 7px !important; }
.combat-fighter-copy .player-link {
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  font-size: 11px !important;
  line-height: 1.15 !important;
}
.combat-fight-center {
  min-width: 0;
  min-height: 54px !important;
  padding: 6px 8px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  column-gap: 7px !important;
  border-inline: 0 !important;
  border-block: 1px solid var(--line) !important;
  text-align: left !important;
}
.combat-fight-symbol { grid-row: 1 / 3; align-self: center; }
.combat-weapon-name {
  min-width: 0;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
}
.combat-fight-center small { font-size: 7px !important; }

@media (max-width: 1280px) {
  .champion-winning-grid { grid-template-columns: repeat(5, minmax(44px, 1fr)) !important; }
  .combat-fights-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .task-feed-panel, .hero-panel { height: auto !important; min-height: 280px !important; }
  .champion-winning-grid { grid-template-columns: repeat(5, minmax(42px, 1fr)) !important; }
  .combat-fights-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .champion-winning-grid { grid-template-columns: repeat(4, minmax(42px, 1fr)) !important; }
  .combat-fights-list { grid-template-columns: 1fr !important; }
  .combat-fight-row { min-height: 0 !important; }
}


/* =====================================================================
   WANAStatsWeb 2.4 – starres Kampflog, stabile Klappbereiche
   ===================================================================== */

/* Sieger und Verlierer nutzen in den vertikalen Kampfkarten dieselbe
   linksbündige Ausrichtung. */
.combat-fighter.winner,
.combat-fighter.loser {
  justify-content: stretch !important;
  justify-items: stretch !important;
  text-align: left !important;
}
.combat-fighter.winner .combat-fighter-copy,
.combat-fighter.loser .combat-fighter-copy { text-align: left !important; }

/* Die Ranglistenzeilen dürfen beim Hover ihre Position nicht verändern. */
.combat-winner-row:hover {
  transform: none !important;
}

/* Profil-Pagination bleibt auch auf Seite 1 sichtbar; deaktivierte Buttons
   zeigen an, dass spätere weitere Seiten unterstützt werden. */
.profile-section-pagination {
  margin-top: 14px;
}

/* =====================================================================
   WANAStatsWeb 2.5 – Stabilität, mobile Rendering-Sicherheit, Safe Areas
   Diese Regeln ändern das Desktop-Design nicht, sondern liefern belastbare
   Fallbacks für ältere Android-WebViews und eindeutige responsive Grenzen.
   ===================================================================== */

html, body { min-height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: clip;
}
.topbar-wrap { padding-top: env(safe-area-inset-top, 0px); }
#app { min-height: calc(100dvh - 155px); }
.leaderboard-dialog,
.trophy-hover-card {
  max-height: calc(100dvh - 28px);
}

/* Normale Farbwerte stehen jeweils vor color-mix und bleiben deshalb auch
   in älteren WebViews lesbar, welche color-mix noch nicht verstehen. */
.glass-card,
.metric-card,
.spotlight-card,
.profile-stat-card,
.elite-boss-card,
.profile-collapsible,
.elite-page-collapsible,
.advancement-category { background-color: var(--surface-solid); }
.search-field,
.header-search-field,
.dialog-row,
.combat-fighter,
.combat-fight-center { background-color: var(--surface-strong); }
.error-banner { background-color: #241214; }

/* Der Menüwechsel ist jetzt eindeutig: bis einschließlich Tablet/Querformat
   wird ausschließlich das kompakte Menü verwendet. */
@media (max-width: 1180px) {
  .main-nav { display: none !important; }
  .mobile-menu-button { display: inline-flex !important; }
}
@media (min-width: 1181px) {
  .main-nav { display: flex !important; }
  .mobile-menu-button,
  .mobile-menu-panel { display: none !important; }
}

/* Lang unterhalb des Viewports liegende Seitenbereiche werden vom Browser
   bis zum Scrollen nicht vollständig gezeichnet. Das reduziert GPU- und
   Layoutlast, ohne die sichtbare Gestaltung zu verändern. */
.home-section,
.profile-collapsible,
.elite-page-collapsible,
.global-section,
.combat-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* Safe-Modus: kein Blur/Blend/Canvas. Wird auf Android, WebViews, bei
   ?safe=1 und nach einem Renderfehler aktiviert. */
html.render-safe .ambient,
html.render-safe .page-texture,
html.android-render-safe .ambient { display: none !important; }
html.render-safe *,
html.android-render-safe * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}
html.render-safe *::before,
html.render-safe *::after,
html.android-render-safe *::before,
html.android-render-safe *::after {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}
html.render-safe .boss-portrait-canvas,
html.render-safe .boss-entity-render-host { display: none !important; }
html.render-safe .boss-safe-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--orange);
  font-weight: 900;
  background: var(--surface-strong);
}
html.render-safe .glass-card,
html.render-safe .topbar-wrap,
html.render-safe .mobile-menu-panel,
html.render-safe .trophy-hover-card { background-color: var(--surface-solid) !important; }

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

/* Touch-Geräte öffnen Trophäendetails per Tippen; die Karte erhält dafür
   eine eindeutige Interaktionsfläche. */
@media (hover: none), (pointer: coarse) {
  .trophy-tile { cursor: pointer; touch-action: manipulation; }
  .trophy-hover-card {
    width: min(720px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* Diagnoseansicht ausschließlich bei ?debug=1. */
.wana-debug-panel {
  position: fixed;
  z-index: 100000;
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  width: min(310px, calc(100vw - 16px));
  padding: 10px 12px;
  border: 1px solid rgba(255,151,28,.55);
  border-radius: 10px;
  background: #0c0b09;
  color: #f5f1e8;
  white-space: pre-line;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  pointer-events: none;
}

@media (max-width: 620px) {
  .shell { width: min(100% - 20px, var(--shell)); }
  .leaderboard-dialog { max-height: calc(100dvh - 16px); }
  .dialog-shell { padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  .profile-sticky { display: none !important; }
  .trophy-hover-card { inset-inline: 10px auto !important; }
}

/* =====================================================================
   WANAStatsWeb 2.6 – lesbare Kartenaktionen, globale Beitragsanteile,
   einheitliche Seitennavigation und größere Spielerfilter
   ===================================================================== */

/* Der bestehende Kartenrahmen bleibt unverändert. Nur der bereits freie
   Footerbereich wird typografisch besser genutzt. */
.metric-card .card-footer,
.global-stat-card .card-footer {
  min-height: 26px !important;
  padding-top: 7px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.metric-card .card-footer b,
.global-stat-card .card-footer b {
  font-size: 18px !important;
  line-height: .8 !important;
}
.global-stat-card {
  padding-bottom: 12px !important;
}
.global-stat-card.is-interactive {
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.global-stat-card.is-interactive:hover,
.global-stat-card.is-interactive:focus-visible {
  border-color: color-mix(in srgb, var(--card-color) 56%, var(--line));
  background: var(--surface-hover);
  outline: none;
}
.global-card-footer { margin-top: auto !important; }
.global-contribution-row .dialog-value { min-width: 150px; }

/* Alle Vor-/Zurück-Leisten verwenden dieselben Abmessungen und eine besser
   lesbare Typografie, ohne die Höhe des umgebenden Feldes zu verändern. */
.combat-pagination,
.task-feed-pagination,
.profile-section-pagination,
.trophy-history-pagination {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}
.combat-pagination .pagination-button,
.task-feed-pagination button,
.profile-section-pagination .pagination-button,
.trophy-history-pagination .pagination-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  justify-content: center !important;
  justify-self: stretch !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.combat-pagination > span,
.task-feed-pagination > span,
.profile-section-pagination > span,
.trophy-history-pagination > span {
  min-width: 78px;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

/* Spielerlistenfilter: größere, eindeutig anklickbare Beschriftungen bei
   unverändertem Rahmen. */
.player-type-filters button,
.alphabet-filter button {
  font-size: 11px !important;
  font-weight: 900 !important;
}
.player-type-filters button { padding-inline: 13px !important; }
.alphabet-filter button { min-width: 35px !important; padding-inline: 10px !important; }

@media (max-width: 620px) {
  .metric-card .card-footer,
  .global-stat-card .card-footer { font-size: 10px !important; }
  .combat-pagination .pagination-button,
  .task-feed-pagination button,
  .profile-section-pagination .pagination-button,
  .trophy-history-pagination .pagination-button { font-size: 10px !important; }
  .player-type-filters button,
  .alphabet-filter button { font-size: 10.5px !important; }
}


/* =====================================================================
   WANAStatsWeb 2.7 – konsistente Rangplätze, Spielerflächen und Kampflog
   ===================================================================== */

/* Global-Karten: die Trennlinie sitzt wie bei den normalen Leaderboards
   fest am unteren Kartenrand, ohne die Karte selbst zu vergrößern. */
.global-stat-card.is-interactive {
  position: relative !important;
  padding-bottom: 48px !important;
}
.global-stat-card .global-card-footer {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  margin: 0 !important;
  padding-top: 9px !important;
}

/* Ranglisten zeigen überall echte Rangnummern. Der Erstplatzierte ist grün,
   beim Hover wird jede Zeile orange hervorgehoben. */
.dialog-rank { min-width: 36px; font-size: 13px !important; }
.dialog-row:first-child,
.combat-winner-row:first-child,
.combat-rivalry-row:first-child {
  border-color: color-mix(in srgb, var(--green) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 10%, var(--surface-solid)) !important;
}
.dialog-row:first-child .dialog-rank,
.combat-winner-row:first-child .combat-rank,
.combat-rivalry-row:first-child > .combat-rank { color: var(--green) !important; }
.dialog-row:hover,
.dialog-row:first-child:hover,
.combat-winner-row:hover,
.combat-winner-row:first-child:hover,
.combat-rivalry-row:hover,
.combat-rivalry-row:first-child:hover {
  border-color: color-mix(in srgb, var(--orange) 64%, var(--line)) !important;
  background: var(--orange-soft) !important;
}
.dialog-row:hover .dialog-rank,
.combat-winner-row:hover .combat-rank,
.combat-rivalry-row:hover > .combat-rank { color: var(--orange) !important; }

/* Transparente Spielerflächen sind komplett anklickbar und wechseln beim
   Hover einheitlich auf Orange. */
.player-surface-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}
.player-surface-link:hover,
.player-surface-link:focus-visible {
  color: inherit !important;
  border-color: color-mix(in srgb, var(--orange) 64%, var(--line)) !important;
  background: var(--orange-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 12%, transparent);
  outline: none;
}
.metric-leader.player-surface-link,
.mini-rank-row.player-surface-link,
.combat-fighter.player-surface-link,
.profile-combat-player.player-surface-link,
.elite-kill-player.player-surface-link,
.elite-boss-slayer-row.player-surface-link { border: 1px solid var(--line); }
.mini-rank-row.player-surface-link { border-radius: 10px; }
.mini-rank-row .mini-player-link {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mini-rank-row .mini-player-link > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-combat-player-copy strong,
.combat-player-copy strong,
.combat-rivalry-player strong,
.combat-fighter-copy strong,
.elite-slayer-copy strong,
.elite-kill-player strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
  font-weight: 900;
}

/* Kategorie-Filter wachsen leicht, bleiben aber innerhalb ihres Rahmens. */
.category-filter-button {
  min-height: 42px !important;
  gap: 8px !important;
  padding: 5px 13px 5px 7px !important;
}
.category-filter-button .metric-icon {
  width: 29px !important;
  height: 29px !important;
  flex-basis: 29px !important;
}
.category-filter-button .metric-icon svg {
  width: 16px !important;
  height: 16px !important;
}
.category-filter-button > span:last-child { font-size: 10.7px !important; }

/* Die beiden typografisch tiefer liegenden Navigationsglyphen werden auf
   dieselbe Grundlinie wie die übrigen Menüsymbole gezogen. */
.main-nav a > span {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  flex: 0 0 16px;
}
#navOverview > span,
#navGlobal > span { transform: translateY(-1.5px); }

/* Letzte Kämpfe: beide Spieler mittig, zwei Kampfsymbole um die Waffe und
   weniger ungenutzter Seitenabstand. */
.combat-fight-row {
  padding: 10px 8px !important;
  gap: 7px !important;
}
.combat-fighter,
.combat-fighter.winner,
.combat-fighter.loser {
  width: 100%;
  grid-template-columns: 38px minmax(0, auto) !important;
  justify-content: center !important;
  justify-items: start !important;
  padding-inline: 8px !important;
  text-align: left !important;
}
.combat-fighter-copy { max-width: min(190px, 100%) !important; }
.combat-fighter-copy small { font-size: 8px !important; }
.combat-fighter-copy strong {
  font-size: 12.5px !important;
  line-height: 1.15 !important;
}
.combat-fight-center {
  grid-template-columns: 22px minmax(0, 1fr) 22px !important;
  grid-template-rows: auto auto !important;
  justify-items: center !important;
  text-align: center !important;
  padding-inline: 7px !important;
}
.combat-fight-symbol {
  grid-row: 1 !important;
  align-self: center !important;
  font-size: 14px !important;
}
.combat-fight-symbol-left { grid-column: 1 !important; }
.combat-weapon-name { grid-column: 2 !important; }
.combat-fight-symbol-right { grid-column: 3 !important; }
.combat-fight-center small {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
}

/* Die Ranglisten im Kampflog sind komplette Spielerlinks. */
.combat-winner-row { text-decoration: none; }
.combat-player-copy strong { font-size: 12px; }
.combat-rivalry-player {
  min-height: 44px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.combat-rivalry-player-first { justify-self: stretch; }
.combat-rivalry-player-second { justify-self: stretch; }

@media (max-width: 900px) {
  .category-filter-button {
    min-height: 40px !important;
    padding-inline: 7px 10px !important;
  }
  .category-filter-button .metric-icon {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }
  .category-filter-button > span:last-child { font-size: 10.2px !important; }
}
@media (max-width: 620px) {
  .global-stat-card.is-interactive { padding-bottom: 45px !important; }
  .global-stat-card .global-card-footer { left: 12px !important; right: 12px !important; bottom: 10px !important; }
  .category-filter-button > span:last-child { font-size: 9.8px !important; }
  .combat-fighter-copy strong { font-size: 12px !important; }
}

/* 2.7 Nachjustierung: kompakte Köpfe und starre Hover-Zeilen. */
.combat-fighter .champion-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
}
.dialog-row:hover,
.combat-winner-row:hover,
.combat-rivalry-row:hover { transform: none !important; }


/* 2.8: Einheitlicher Projekt-WANA-Scrollbalken. Firefox nutzt
   scrollbar-color/-width, Chromium/Edge/Safari die WebKit-Pseudoelemente. */
:root {
  --scrollbar-track: #242424;
  --scrollbar-thumb: var(--orange);
  --scrollbar-thumb-hover: #ffb14a;
}

html,
body,
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 3px solid var(--scrollbar-track);
  border-radius: 999px;
  background: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--orange-2);
}

*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* =====================================================================
   WANAStatsWeb 2.9 – Boss-Synchronisierung und typografischer Feinschliff
   ===================================================================== */

/* Die Großen Vier behalten vollständig anklickbare Spielerflächen, nutzen
   aber wieder die kompakte, kollisionsfreie Top-3-Typografie. */
.spotlight-card .mini-ranking {
  gap: 8px !important;
  margin-top: 14px !important;
}
.spotlight-card .mini-rank-row.player-surface-link {
  box-sizing: border-box;
  min-height: 54px !important;
  padding: 7px 8px 10px !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}
.spotlight-card .mini-rank-row .rank {
  font-size: 14px !important;
  line-height: 1 !important;
}
.spotlight-card .mini-player-link {
  min-width: 0 !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  line-height: 1.1 !important;
}
.spotlight-card .mini-player-link .player-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}
.spotlight-card .mini-rank-row .value {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px !important;
  line-height: 1 !important;
}
.spotlight-card .mini-progress {
  left: 42px !important;
  right: 8px !important;
  bottom: 4px !important;
  height: 3px !important;
}

/* Letzte Kämpfe: etwas schmalere Karten, besser lesbares Datum und weiterhin
   genug Raum für längere Spielernamen. */
.combat-fight-row {
  padding-inline: 7px !important;
}
.combat-fighter,
.combat-fighter.winner,
.combat-fighter.loser {
  padding-inline: 7px !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 8px !important;
}
.combat-fighter .champion-avatar {
  width: 34px !important;
  height: 34px !important;
}
.combat-fighter-copy strong,
.combat-fighter-copy .player-link:not(.avatar-link) {
  font-size: 12px !important;
  line-height: 1.12 !important;
}
.combat-fight-center {
  padding-inline: 5px !important;
  grid-template-columns: 20px minmax(0, 1fr) 20px !important;
}
.combat-weapon-name {
  font-size: 11.5px !important;
  line-height: 1.15 !important;
}
.combat-fight-center small {
  font-size: 9.5px !important;
  line-height: 1.2 !important;
}

/* Aufgaben-Feed: Datum/Uhrzeit klarer, bleibt aber optisch untergeordnet. */
.task-feed-copy time {
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  font-weight: 700;
}

/* Bosschronik: Bossname, Datum und Teilnehmerzahl werden besser lesbar,
   ohne die Quellenzeile oder das Kartenraster zu verschieben. */
.elite-kill-boss > div,
.elite-kill-player > div {
  gap: 3px !important;
}
.elite-kill-boss h3 {
  font-size: 15px !important;
  line-height: 1.08 !important;
}
.elite-kill-boss span {
  font-size: 9px !important;
  line-height: 1.15 !important;
}
.elite-kill-player strong {
  font-size: 15px !important;
  line-height: 1.08 !important;
}
.elite-kill-center b {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}
.elite-kill-center small {
  font-size: 9px !important;
  line-height: 1.15 !important;
}

/* PvP-Bilanz im Profil: kompakte Köpfe und Namen, größerer Metabereich,
   ohne Überlappungen in den vier Spalten. */
.profile-combat-row {
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 10px !important;
}
.profile-combat-player {
  min-width: 0 !important;
  gap: 6px !important;
  padding: 5px 6px !important;
}
.profile-combat-player .champion-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
}
.profile-combat-player-copy {
  min-width: 0 !important;
  gap: 2px !important;
}
.profile-combat-player-copy small {
  font-size: 6.8px !important;
  line-height: 1 !important;
}
.profile-combat-player-copy strong,
.profile-combat-player-copy .player-link {
  display: block;
  max-width: 104px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}
.profile-combat-score {
  width: 58px !important;
  min-height: 48px !important;
}
.profile-combat-score strong {
  font-size: 15px !important;
}
.profile-combat-meta {
  padding-top: 8px !important;
}
.profile-combat-meta b {
  font-size: 9.5px !important;
}
.profile-combat-meta small {
  font-size: 8.5px !important;
  line-height: 1.15 !important;
}

@media (max-width: 900px) {
  .spotlight-card .mini-rank-row.player-surface-link {
    min-height: 51px !important;
    grid-template-columns: 31px minmax(0, 1fr) auto !important;
  }
  .spotlight-card .mini-player-link .player-avatar {
    width: 28px !important;
    height: 28px !important;
  }
  .spotlight-card .mini-progress { left: 39px !important; }
  .task-feed-copy time { font-size: 9px !important; }
}

@media (max-width: 620px) {
  .combat-fight-center small { font-size: 9px !important; }
  .elite-kill-boss h3,
  .elite-kill-player strong { font-size: 14px !important; }
  .elite-kill-center b { font-size: 10px !important; }
  .profile-combat-player-copy strong,
  .profile-combat-player-copy .player-link {
    max-width: 150px !important;
    font-size: 11.5px !important;
  }
}


/* =====================================================================
   WANAStatsWeb 2.10 – Gerade-online-Übersicht, kompakteres Kampflog,
   vollständige Boss-Siegerlisten und klickbare Bossquellen
   ===================================================================== */

/* Der frühere Status-Chip bleibt technisch als Fallback erhalten, ist in der
   Kopfzeile aber vollständig ausgeblendet. */
#serverStatusArea { display: none !important; }

.home-online-panel {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  min-height: 280px !important;
  padding: 14px 16px 13px !important;
}
.home-online-heading {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.home-online-heading > span { color: var(--text-strong); }
.home-online-heading > span b {
  color: var(--green);
  margin-right: 8px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--green) 72%, transparent);
}
.home-online-heading > small {
  color: var(--green);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-online-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(45px, auto);
  gap: 7px;
  align-content: start;
  padding-top: 10px;
}
.home-online-player {
  min-width: 0;
  min-height: 45px;
  padding: 6px 7px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--green) 6%, var(--surface));
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.home-online-player:hover,
.home-online-player:focus-visible {
  background: var(--orange-soft);
  border-color: color-mix(in srgb, var(--orange) 72%, var(--line));
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  outline: none;
}
.home-online-player .player-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
}
.home-online-player-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.home-online-player-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
  font-size: 9.6px;
  line-height: 1.05;
}
.home-online-player-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--green);
  font-size: 6.8px;
  line-height: 1.05;
  font-weight: 760;
}
.home-online-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}

/* Letzte Kämpfe: beide Spieler exakt zentriert, Schwerter unmittelbar an der
   Waffe und insgesamt kompaktere Karten. */
.combat-fights-list {
  grid-template-columns: repeat(4, minmax(245px, 315px)) !important;
  justify-content: start !important;
  gap: 11px !important;
}
.combat-fight-row {
  min-height: 196px !important;
  padding: 9px 7px !important;
  gap: 6px !important;
}
.combat-fighter,
.combat-fighter.winner,
.combat-fighter.loser {
  grid-template-columns: 36px minmax(0, auto) !important;
  justify-content: center !important;
  justify-items: start !important;
  width: 100% !important;
  padding: 6px 7px !important;
  text-align: left !important;
}
.combat-fighter-copy {
  max-width: 190px !important;
  text-align: left !important;
}
.combat-fight-center {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  justify-items: center !important;
  align-content: center !important;
  min-height: 50px !important;
  padding: 5px 4px !important;
  text-align: center !important;
}
.combat-weapon-line {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.combat-weapon-line .combat-fight-symbol {
  grid-column: auto !important;
  grid-row: auto !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.combat-weapon-name {
  grid-column: auto !important;
  font-size: 11.5px !important;
  text-align: center !important;
}
.combat-fight-center small {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: center !important;
  margin-top: 3px;
  font-size: 9.5px !important;
  text-align: center !important;
}

/* Im geöffneten Boss bleibt der erste Sieger kompakt sichtbar. Die komplette
   Liste öffnet sich wie eine Top-10-Rangliste. */
.elite-slayer-rank {
  font-size: 15px !important;
  line-height: 1 !important;
}
.elite-slayer-copy small,
.elite-boss-slayer-row time {
  font-size: 10px !important;
  line-height: 1.15 !important;
}
.elite-boss-slayer-row time {
  align-self: center;
  white-space: nowrap;
}
.elite-boss-all-slayers-button {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.elite-boss-all-slayers-button b {
  color: var(--orange);
  font-size: 16px;
}
.elite-boss-all-slayers-button:hover,
.elite-boss-all-slayers-button:focus-visible {
  background: var(--orange-soft);
  color: var(--orange);
  outline: none;
}
.dialog-header .dialog-boss-visual,
.dialog-boss-visual {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 12px !important;
}
.boss-slayers-dialog-row .dialog-value {
  white-space: normal;
  text-align: right;
  line-height: 1.2;
}

/* In der Bosschronik bleibt der Spielerkopf sicher innerhalb der Karte. */
.elite-boss-kill-row .elite-kill-player .champion-avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 9px !important;
}

/* Trophäen-Overlay: Lootbild und Bosskopf gleich groß; Bossquelle deutlich
   lesbarer und das Bossbild selbst führt direkt zum Katalogeintrag. */
.trophy-tooltip-source-panel {
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 22px !important;
}
.trophy-tooltip-boss-head {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  text-decoration: none;
  cursor: pointer;
}
.trophy-tooltip-boss-head .boss-visual {
  width: 118px !important;
  height: 118px !important;
  border-radius: 18px !important;
}
.trophy-tooltip-boss-head:hover .boss-visual,
.trophy-tooltip-boss-head:focus-visible .boss-visual {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange-soft), 0 12px 28px rgba(0,0,0,.3);
}
.trophy-tooltip-sources small {
  font-size: 11px !important;
  line-height: 1.1 !important;
}
.trophy-tooltip-sources a {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

@media (max-width: 1500px) {
  .home-online-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .combat-fights-list { grid-template-columns: repeat(3, minmax(245px, 1fr)) !important; }
}
@media (max-width: 1080px) {
  .home-online-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combat-fights-list { grid-template-columns: repeat(2, minmax(245px, 1fr)) !important; }
}
@media (max-width: 720px) {
  .home-online-panel { min-height: 0 !important; }
  .home-online-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combat-fights-list { grid-template-columns: 1fr !important; }
  .combat-fight-row { max-width: 100%; }
  .elite-boss-slayer-row time { white-space: normal; }
}
@media (max-width: 410px) {
  .home-online-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   WANAStatsWeb 2.11 – lesbare Online-Übersicht, bündige Highlights,
   Trophäen-Sammler, Boss-Teamdetails und breitere PvP-Karten
   ===================================================================== */

/* Startseite: dieselbe klare Überschriftenleiste wie beim Aufgaben-Feed. */
.home-online-panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
}
.home-online-heading {
  position: relative;
  z-index: 2;
  min-height: 33px;
  padding-bottom: 11px !important;
  border-bottom: 1px solid var(--line) !important;
}
.home-online-heading > span {
  color: var(--text-strong) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
}
.home-online-heading > small {
  color: var(--green) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
}
.home-online-grid {
  min-width: 0;
  grid-auto-rows: minmax(50px, auto) !important;
  max-height: 242px;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 8px !important;
  padding: 11px 4px 2px 0 !important;
}
.home-online-player {
  min-height: 50px !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 6px 7px !important;
}
.home-online-player .player-avatar {
  width: 28px !important;
  height: 28px !important;
}
.home-online-player-copy strong {
  font-size: 9.4px !important;
  line-height: 1.08 !important;
}
.home-online-player-copy small {
  font-size: 7.8px !important;
  line-height: 1.1 !important;
}

/* Der Online-Block behält die kompakte Hero-Breite. Weniger Karten pro Reihe
   geben jedem einzelnen Spieler genug Platz für Name und Onlinezeit. */
@media (min-width: 1420px) {
  .hero {
    grid-template-columns: minmax(250px, .78fr) minmax(330px, 1fr) minmax(390px, 1.12fr) !important;
    gap: 22px !important;
  }
  .home-online-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1081px) and (max-width: 1419px) {
  .home-online-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Die Großen Vier: Kopf und Fortschrittsleiste beginnen exakt bündig. */
.spotlight-card .mini-rank-row.player-surface-link {
  grid-template-columns: 26px minmax(0, 1fr) auto !important;
  gap: 6px !important;
}
.spotlight-card .mini-progress {
  left: 40px !important;
}

/* In der Trophäen-Chronik steht der Sammler kompakt unter dem Itemnamen,
   ohne die bestehende Kachelhöhe zu vergrößern. */
.trophy-history-tile {
  min-height: 142px !important;
  padding: 9px 8px 8px !important;
  gap: 4px !important;
}
.trophy-history-tile > .item-visual.large {
  width: 68px !important;
  height: 68px !important;
  flex-basis: 68px !important;
}
.trophy-history-tile .trophy-tile-name {
  min-height: 18px !important;
  -webkit-line-clamp: 1 !important;
  font-size: 9.5px !important;
}
.trophy-tile-collector {
  width: 100%;
  min-width: 0;
  min-height: 22px;
  margin-top: auto;
  padding: 3px 5px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  color: var(--orange);
  text-decoration: none;
}
.trophy-tile-collector .player-avatar {
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
}
.trophy-tile-collector > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7.5px;
  line-height: 1;
  font-weight: 900;
}
.trophy-tile-collector:hover,
.trophy-tile-collector:focus-visible {
  border-color: color-mix(in srgb, var(--orange) 58%, var(--line));
  background: var(--orange-soft);
  outline: none;
}

/* Boss-Sieger: Datum bleibt als klar abgegrenztes Element innerhalb der
   Siegerzeile; +N öffnet die Beteiligten des zugehörigen Sieges. */
.elite-boss-slayer-row {
  grid-template-columns: 34px auto minmax(150px, 1fr) 90px 110px minmax(170px, 205px) !important;
}
.elite-boss-slayer-row time {
  box-sizing: border-box;
  min-height: 42px;
  padding: 8px 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent);
  color: var(--text) !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-weight: 800;
  text-align: center !important;
  white-space: normal !important;
}
.elite-slayer-name-line,
.elite-killer-name-line,
.boss-dialog-name-line {
  display: flex !important;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.boss-team-count {
  flex: 0 0 auto;
  min-width: 25px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--green) 48%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 11%, var(--surface));
  color: var(--green);
  font-size: 8px;
  line-height: 1;
  font-weight: 950;
  text-align: center;
}
.elite-kill-player:hover .boss-team-count,
.elite-boss-slayer-row:hover .boss-team-count,
.dialog-row:hover .boss-team-count {
  border-color: color-mix(in srgb, var(--orange) 66%, var(--line));
  background: var(--orange-soft);
  color: var(--orange);
}
.boss-team-dialog-row.is-final-killer {
  border-color: color-mix(in srgb, var(--green) 52%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}
.boss-team-dialog-row.is-final-killer:hover {
  border-color: var(--orange);
  background: var(--orange-soft);
}

/* Persönliche PvP-Bilanz: drei gut lesbare Karten pro Reihe. */
.profile-combat-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.profile-combat-row {
  grid-template-columns: minmax(145px, 1fr) 64px minmax(145px, 1fr) !important;
  min-height: 118px !important;
  gap: 9px !important;
  padding: 11px 12px !important;
}
.profile-combat-player {
  padding: 6px 7px !important;
}
.profile-combat-player .champion-avatar {
  width: 38px !important;
  height: 38px !important;
}
.profile-combat-player-copy strong,
.profile-combat-player-copy .player-link {
  max-width: 155px !important;
  font-size: 11.5px !important;
}
.profile-combat-meta b { font-size: 10px !important; }
.profile-combat-meta small { font-size: 9px !important; }

@media (max-width: 1280px) {
  .profile-combat-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .elite-boss-slayer-row {
    grid-template-columns: 34px auto minmax(130px, 1fr) 86px 102px !important;
  }
  .elite-boss-slayer-row time {
    grid-column: 3 / -1;
    justify-self: stretch;
  }
}
@media (max-width: 760px) {
  .profile-combat-list { grid-template-columns: 1fr !important; }
  .profile-combat-row {
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr) !important;
  }
  .home-online-player-copy strong { font-size: 9px !important; }
  .home-online-player-copy small { font-size: 7.1px !important; }
}


/* =====================================================================
   WANAStatsWeb 2.12 – kompakter Online-Block mit breiteren Spielerkarten
   ===================================================================== */
/* Die Hero-Spalten entsprechen wieder der kompakten Aufteilung vor 2.11.
   Innerhalb der Online-Karte werden weniger, dafür breitere Spielerfelder
   pro Reihe verwendet. */


/* =====================================================================
   WANAStatsWeb 2.13 – einheitliche, verlässliche Chronik-Navigation
   Seite 1 ist immer die neueste Seite. "Zurück" führt zu älteren,
   "Vor" wieder zu neueren Einträgen.
   ===================================================================== */
.pagination-button,
.task-feed-pagination button,
.pagination button {
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}

.pagination-button.is-available,
.task-feed-pagination button.is-available,
.pagination button.is-available {
  color: #1a1107 !important;
  background: linear-gradient(180deg, #ffad43, var(--orange)) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 7px 20px rgba(255, 151, 28, .18) !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

.pagination-button.is-available:hover,
.pagination-button.is-available:focus-visible,
.task-feed-pagination button.is-available:hover,
.task-feed-pagination button.is-available:focus-visible,
.pagination button.is-available:hover,
.pagination button.is-available:focus-visible {
  color: #120b03 !important;
  background: linear-gradient(180deg, #ffc16f, #ff9f27) !important;
  border-color: #ffc16f !important;
  box-shadow: 0 9px 24px rgba(255, 151, 28, .28) !important;
  outline: none !important;
}

.pagination-button:disabled,
.task-feed-pagination button:disabled,
.pagination button:disabled {
  color: var(--muted-2) !important;
  background: transparent !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  opacity: .38 !important;
  cursor: not-allowed !important;
}


/* =====================================================================
   WANAStatsWeb 2.16 – funktionierende Chronik und optischer Feinschliff
   ===================================================================== */

/* Boss-Sieger: Die letzte Siegzeit ist Teil der großen Siegerzeile, nicht
   mehr ein zusätzlich umrahmtes Kästchen. Sie bleibt rechts lesbar und
   nutzt den vorhandenen Raum ohne die Karte zu vergrößern. */
.elite-boss-slayer-row {
  grid-template-columns: 34px auto minmax(170px, 1fr) 90px 110px minmax(150px, 190px) !important;
}
.elite-boss-slayer-row time {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 4px !important;
  display: block !important;
  justify-self: end !important;
  align-self: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: right !important;
  white-space: normal !important;
}

/* Top-5-Duelle verwenden exakt dieselbe Namensgröße wie Sieger und
   Verlierer. Frühere CSS-Patches hatten die Rivalitätsnamen abweichend
   skaliert. */
.combat-rivalry-player .player-link:not(.avatar-link),
.combat-rivalry-player strong {
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

@media (max-width: 1280px) {
  .elite-boss-slayer-row {
    grid-template-columns: 34px auto minmax(145px, 1fr) 86px 102px !important;
  }
  .elite-boss-slayer-row time {
    grid-column: 3 / -1 !important;
    justify-self: end !important;
    padding-top: 2px !important;
  }
}
@media (max-width: 760px) {
  .elite-boss-slayer-row time {
    grid-column: 3 / -1 !important;
    justify-self: start !important;
    text-align: left !important;
    font-size: 10px !important;
  }
  .combat-rivalry-player .player-link:not(.avatar-link),
  .combat-rivalry-player strong { font-size: 11px !important; }
}

/* =====================================================================
   WANAStatsWeb 2.17 – kompaktere Profil-Kategoriezeilen
   ===================================================================== */
/* Die einklappbaren Hauptbereiche im Spielerprofil bleiben funktional
   unverändert, nehmen im geschlossenen Zustand aber deutlich weniger Höhe
   ein. Die großen Titel sind zwei Größenstufen kleiner. */
#profileContent details.profile-collapsible > summary {
  min-height: 68px !important;
  padding: 12px 18px !important;
}
#profileContent details.profile-collapsible > summary h2 {
  margin-top: 3px !important;
  font-size: clamp(22px, 2.15vw, 30px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.032em !important;
}
#profileContent details.profile-collapsible[open] > summary {
  margin-bottom: 14px !important;
}
#profileContent details.profile-collapsible[open] {
  padding-bottom: 16px !important;
}

/* Der Durchschnittsrang richtet sich nach seinem Inhalt statt nach einer
   künstlich breiten Mindestgröße. Beide Textzeilen beginnen linksbündig. */
#profileAverageRank.average-rank-badge {
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  min-height: 42px !important;
  padding: 6px 12px !important;
  justify-items: start !important;
  text-align: left !important;
}
#profileAverageRank.average-rank-badge b,
#profileAverageRank.average-rank-badge span {
  width: 100%;
  text-align: left !important;
}

@media (max-width: 760px) {
  #profileAverageRank.average-rank-badge {
    width: 166px !important;
    max-width: 166px !important;
  }
}
@media (max-width: 620px) {
  #profileContent details.profile-collapsible > summary {
    min-height: 62px !important;
    padding: 10px 12px !important;
  }
  #profileContent details.profile-collapsible > summary h2 {
    font-size: 20px !important;
  }
  #profileAverageRank.average-rank-badge {
    width: auto !important;
    max-width: 154px !important;
    min-height: 38px !important;
    padding: 5px 9px !important;
  }
}

/* =====================================================================
   WANAStatsWeb 2.18 – noch kompaktere Profil- und Elite-Boss-Kategorien
   ===================================================================== */
/* Spielerprofil und Elite-Boss-Seite verwenden exakt dieselben Größen.
   Die weißen Hauptüberschriften sind nochmals zwei Stufen kleiner und die
   grünen Statusfelder richten ihre Maße eng am tatsächlichen Inhalt aus. */
:is(#profileContent, #eliteBossesView) details.profile-collapsible > summary {
  min-height: 56px !important;
  padding: 9px 16px !important;
}
:is(#profileContent, #eliteBossesView) details.profile-collapsible > summary h2 {
  margin-top: 2px !important;
  font-size: clamp(18px, 1.75vw, 25px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.028em !important;
}
:is(#profileContent, #eliteBossesView) details.profile-collapsible[open] > summary {
  margin-bottom: 12px !important;
}
:is(#profileContent, #eliteBossesView) .profile-heading-actions {
  gap: 9px !important;
}
:is(#profileContent, #eliteBossesView) .profile-heading-actions .profile-combat-summary,
#profileContent .profile-heading-actions .advancement-total-badge {
  width: max-content !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#profileContent .profile-heading-actions .advancement-total-badge b,
#profileContent .profile-heading-actions .advancement-total-badge span {
  font-size: 13px !important;
  line-height: 1 !important;
}
#profileAverageRank.average-rank-badge {
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 34px !important;
  padding: 5px 10px !important;
  gap: 2px !important;
  border-radius: 11px !important;
}
#profileAverageRank.average-rank-badge b {
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#profileAverageRank.average-rank-badge span {
  font-size: 6.5px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  :is(#profileContent, #eliteBossesView) details.profile-collapsible > summary {
    min-height: 52px !important;
    padding: 8px 11px !important;
  }
  :is(#profileContent, #eliteBossesView) details.profile-collapsible > summary h2 {
    font-size: 18px !important;
  }
  :is(#profileContent, #eliteBossesView) .profile-heading-actions .profile-combat-summary,
  #profileContent .profile-heading-actions .advancement-total-badge {
    min-height: 31px !important;
    padding-inline: 9px !important;
    font-size: 11px !important;
  }
  #profileContent .profile-heading-actions .advancement-total-badge b,
  #profileContent .profile-heading-actions .advancement-total-badge span {
    font-size: 11px !important;
  }
  #profileAverageRank.average-rank-badge {
    min-height: 31px !important;
    padding: 4px 8px !important;
  }
  #profileAverageRank.average-rank-badge b { font-size: 10.5px !important; }
  #profileAverageRank.average-rank-badge span { font-size: 6px !important; }
}

@media (max-width: 520px) {
  :is(#profileContent, #eliteBossesView) details.profile-collapsible > summary h2 {
    font-size: 16px !important;
  }
  :is(#profileContent, #eliteBossesView) .profile-heading-actions .profile-combat-summary,
  #profileContent .profile-heading-actions .advancement-total-badge {
    font-size: 10px !important;
  }
}



/* =====================================================================
   WANAStatsWeb 2.19 – kompakte Global-Seite ohne redundanten Introbereich
   ===================================================================== */
.global-stats-section-compact {
  padding-top: 40px;
}
.global-main-heading {
  margin-bottom: 22px;
}
.global-main-heading h1 {
  margin: 8px 0 0;
  color: var(--text-strong);
  font-size: clamp(39px, 4.1vw, 54px);
  line-height: .96;
  letter-spacing: -.055em;
}
@media (max-width: 620px) {
  .global-stats-section-compact { padding-top: 28px; }
  .global-main-heading { margin-bottom: 16px; }
  .global-main-heading h1 { font-size: 41px; }
}


/* =====================================================================
   WANAStatsWeb 2.21 - Hilfe, Detailseiten und groessere Bedienleiste
   ===================================================================== */
.help-page-hero { align-items: stretch; }
.help-page-hero > div:first-child { max-width: 760px; }
.help-quick-note {
  align-self: center;
  max-width: 420px;
  padding: 20px 22px;
  display: grid;
  gap: 6px;
  border-left: 3px solid var(--orange);
}
.help-quick-note b { color: var(--text-strong); font-size: 15px; }
.help-quick-note span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.help-toolbar {
  margin: 0 0 38px;
  min-height: 78px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: 78px;
  z-index: 24;
}
.help-tabs {
  order: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.help-tab {
  min-height: 48px;
  padding: 0 19px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: .18s ease;
}
.help-tab:hover,
.help-tab.active {
  color: var(--text-strong);
  border-color: var(--line-strong);
  background: var(--orange-soft);
}
.help-search-field {
  order: 2;
  flex: 1 1 420px;
  min-width: 260px;
  margin-left: auto;
}
.help-search-field input { min-height: 48px; font-size: 13px; }
.help-content { padding-bottom: 64px; }
.help-section-heading { margin-bottom: 20px; }
.help-section-heading h2 { font-size: clamp(30px, 3vw, 40px); }
.help-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.help-feature-card {
  min-height: 150px;
  padding: 21px 48px 21px 21px;
  position: relative;
  display: block;
  border-top: 2px solid color-mix(in srgb, var(--orange) 52%, transparent);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.help-feature-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--orange) 76%, transparent);
  background: var(--surface-hover);
}
.help-feature-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.help-feature-card h3 {
  margin: 0 0 10px;
  color: var(--text-strong);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.help-feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.help-feature-card-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--orange);
  font-size: 22px;
  font-weight: 900;
  transition: transform .18s ease;
}
.help-feature-card:hover .help-feature-card-arrow { transform: translateX(4px); }
.help-command-group { margin-bottom: 30px; }
.help-command-group-title {
  margin-bottom: 12px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.help-command-group-title h3 { margin: 0; color: var(--text-strong); font-size: 20px; }
.help-command-group-title p { margin: 0; color: var(--muted-2); font-size: 13px; }
.help-command-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent);
}
.help-command-row {
  min-height: 68px;
  padding: 13px 17px;
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.help-command-row:last-child { border-bottom: 0; }
.help-command-row:hover { background: var(--surface-hover); }
.help-command-row code {
  width: fit-content;
  max-width: 100%;
  color: var(--orange);
  font: 850 13.5px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.help-command-row span { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Feature details */
.help-detail-view { padding-bottom: 72px; }
.help-detail-page { display: grid; gap: 20px; }
.help-detail-back {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}
.help-detail-back:hover { color: var(--orange); }
.help-detail-back span { font-size: 18px; }
.help-detail-hero {
  padding: clamp(28px, 4vw, 48px);
  border-top: 3px solid var(--orange);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--orange) 17%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-solid) 88%, transparent);
}
.help-detail-hero h1 {
  max-width: 900px;
  margin: 8px 0 12px;
  color: var(--text-strong);
  font-size: clamp(38px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
}
.help-detail-hero p { max-width: 900px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.help-detail-commands { padding: 24px; }
.help-detail-section-heading { margin-bottom: 16px; }
.help-detail-section-heading h2 { margin: 5px 0 0; color: var(--text-strong); font-size: 25px; }
.help-detail-command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.help-detail-command {
  min-height: 72px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-solid) 74%, transparent);
  text-decoration: none;
}
.help-detail-command:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.help-detail-command code { color: var(--orange); font: 850 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.help-detail-command span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.help-detail-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .72fr); gap: 20px; align-items: start; }
.help-detail-copy { padding: clamp(25px, 3vw, 38px); }
.help-detail-copy h2 { margin: 30px 0 9px; color: var(--text-strong); font-size: 23px; letter-spacing: -.02em; }
.help-detail-copy h2:first-child { margin-top: 0; }
.help-detail-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.76; }
.help-detail-copy code { color: var(--orange); font: 800 .9em/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.help-detail-copy strong { color: var(--text-strong); }
.help-detail-facts { padding: 25px; position: sticky; top: 178px; }
.help-detail-facts h2 { margin: 7px 0 15px; color: var(--text-strong); font-size: 22px; }
.help-detail-facts ul { margin: 0; padding: 0; display: grid; gap: 0; list-style: none; }
.help-detail-facts li { padding: 11px 0 11px 20px; position: relative; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; }
.help-detail-facts li:last-child { border-bottom: 0; }
.help-detail-facts li::before { content: ''; width: 7px; height: 7px; position: absolute; left: 0; top: 17px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }

@media (max-width: 1120px) {
  .help-toolbar { align-items: stretch; flex-direction: column; }
  .help-tabs { width: 100%; }
  .help-tab { flex: 1 1 0; }
  .help-search-field { width: 100%; max-width: none; margin-left: 0; }
  .help-detail-layout { grid-template-columns: 1fr; }
  .help-detail-facts { position: static; }
}
@media (max-width: 1000px) {
  .help-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .help-toolbar { top: 72px; margin-bottom: 24px; padding: 12px; }
  .help-tabs { overflow-x: auto; justify-content: flex-start; scrollbar-width: thin; }
  .help-tab { min-width: max-content; min-height: 44px; padding: 0 15px; }
  .help-search-field input { min-height: 44px; }
  .help-feature-grid { grid-template-columns: 1fr; }
  .help-feature-card { min-height: auto; }
  .help-command-group-title { align-items: start; flex-direction: column; gap: 4px; }
  .help-command-row { grid-template-columns: 1fr; gap: 7px; padding: 14px; }
  .help-command-row code { font-size: 12.5px; }
  .help-detail-command-grid { grid-template-columns: 1fr; }
  .help-detail-hero h1 { font-size: 41px; }
  .help-detail-hero p { font-size: 14px; }
  .help-detail-copy p { font-size: 14px; }
}

/* =====================================================================
   WANAStatsWeb 2.22 - Connecten, groessere Befehle, kompakte Detailtitel
   ===================================================================== */
.help-connect-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) repeat(2, minmax(260px, 1fr));
  gap: 14px;
}
.help-connect-card {
  min-height: 235px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 2px solid color-mix(in srgb, var(--orange) 55%, transparent);
}
.help-connect-overview {
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--orange) 18%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface-solid) 88%, transparent);
}
.help-connect-label {
  margin-bottom: 14px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .13em;
}
.help-connect-card h3 {
  margin: 0 0 13px;
  color: var(--text-strong);
  font-size: 24px;
  line-height: 1.15;
}
.help-connect-card p,
.help-connect-card li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
}
.help-connect-card p { margin: 0; }
.help-connect-card ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.help-connect-card code {
  color: var(--orange);
  font: 850 .95em/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.help-connect-address {
  margin: 0 0 19px;
  color: var(--text-strong) !important;
  font-size: clamp(27px, 2.5vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em;
}
.help-connect-facts {
  width: 100%;
  display: grid;
  gap: 0;
  margin-top: auto;
}
.help-connect-facts span {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.help-connect-facts span:last-child { border-bottom: 0; }
.help-connect-facts b { color: var(--text-strong); }
.help-connect-guide {
  margin-top: auto;
  min-height: 44px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--orange-soft);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}
.help-connect-guide:hover { border-color: var(--orange); }
.help-connect-guide span { color: var(--orange); font-size: 18px; }
.help-connect-note {
  margin-top: 14px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-left: 3px solid var(--orange);
}
.help-connect-note b { color: var(--text-strong); font-size: 15px; white-space: nowrap; }
.help-connect-note span { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Spieler- und Adminbefehle besser lesbar */
.help-command-group-title h3 { font-size: 23px; }
.help-command-group-title p { font-size: 15px; }
.help-command-row {
  min-height: 76px;
  padding: 15px 19px;
}
.help-command-row code {
  font-size: 15.5px;
  line-height: 1.5;
}
.help-command-row span {
  font-size: 16px;
  line-height: 1.55;
}

/* Auch die Befehle auf Detailseiten groesser */
.help-detail-command code { font-size: 15px; }
.help-detail-command span { font-size: 14.5px; }

/* Detailseiten kompakter: der Inhalt beginnt schneller */
.help-detail-hero {
  padding: clamp(23px, 3vw, 35px);
}
.help-detail-hero h1 {
  margin: 6px 0 10px;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.help-detail-hero p {
  font-size: 15px;
  line-height: 1.62;
}
.help-official-guide {
  margin-top: 20px;
  min-height: 44px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--text-strong);
  background: var(--orange-soft);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}
.help-official-guide:hover { border-color: var(--orange); }

@media (max-width: 1120px) {
  .help-connect-grid { grid-template-columns: 1fr 1fr; }
  .help-connect-overview { grid-column: 1 / -1; min-height: 205px; }
}
@media (max-width: 700px) {
  .help-connect-grid { grid-template-columns: 1fr; }
  .help-connect-overview { grid-column: auto; }
  .help-connect-card { min-height: auto; }
  .help-connect-note { align-items: flex-start; flex-direction: column; gap: 6px; }
  .help-command-row code { font-size: 14.5px; }
  .help-command-row span { font-size: 15px; }
  .help-detail-hero h1 { font-size: 32px; }
}

/* =====================================================================
   WANAStatsWeb 2.23 - Hilfetreffer, Deep Links und BedrockConnect
   ===================================================================== */
.help-search-suggestion .help-search-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--orange) 48%, var(--line));
  border-radius: 10px;
  color: var(--orange);
  background:
    radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 60%),
    var(--orange-soft);
  font-size: 19px;
  font-weight: 1000;
}
.help-suggestion-badge {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.bedrock-method-notice {
  margin: 15px 0;
  padding: 18px 21px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  border-left: 3px solid var(--orange);
}
.bedrock-method-notice b {
  color: var(--text-strong);
  font-size: 15px;
  white-space: nowrap;
}
.bedrock-method-notice span {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.bedrock-method-notice strong { color: var(--text-strong); }

.bedrock-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
}
.bedrock-guide-section {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 4px 0 26px;
  border-bottom: 1px solid var(--line);
}
.bedrock-guide-section + .bedrock-guide-section { padding-top: 25px; }
.bedrock-guide-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--line));
  border-radius: 10px;
  color: var(--orange);
  background: var(--orange-soft);
  font-size: 14px;
  font-weight: 1000;
}
.bedrock-guide-section h2 {
  margin-top: 2px !important;
}
.bedrock-steps {
  margin: 14px 0 0;
  padding-left: 23px;
  display: grid;
  gap: 9px;
}
.bedrock-steps li {
  padding-left: 3px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.bedrock-steps li::marker {
  color: var(--orange);
  font-weight: 950;
}

.bedrock-platform-guide {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
}
.bedrock-platform-guide > summary {
  min-height: 59px;
  padding: 13px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  list-style: none;
  color: var(--text-strong);
  cursor: pointer;
}
.bedrock-platform-guide > summary::-webkit-details-marker { display: none; }
.bedrock-platform-guide > summary::after {
  content: '+';
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--orange);
  font-size: 18px;
  font-weight: 900;
}
.bedrock-platform-guide[open] > summary::after { content: '−'; }
.bedrock-platform-guide > summary span {
  font-size: 17px;
  font-weight: 900;
}
.bedrock-platform-guide > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}
.bedrock-platform-body {
  padding: 4px 18px 20px;
  border-top: 1px solid var(--line);
}
.bedrock-dns-values,
.bedrock-server-entry {
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.bedrock-server-entry {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bedrock-dns-values span,
.bedrock-server-entry span {
  min-width: 0;
  padding: 13px 14px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-soft);
}
.bedrock-dns-values b,
.bedrock-server-entry b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.bedrock-dns-values code,
.bedrock-server-entry code {
  overflow-wrap: anywhere;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 850;
}
.bedrock-troubleshooting ul {
  margin: 12px 0 15px;
  padding-left: 20px;
}
.bedrock-troubleshooting li {
  margin: 7px 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.bedrock-side-facts {
  position: sticky;
  top: calc(var(--topbar-height, 90px) + 20px);
  align-self: start;
}
.bedrock-side-facts .help-official-guide + .help-official-guide {
  margin-top: 9px;
}
.bedrock-third-party-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .bedrock-detail-layout { grid-template-columns: 1fr; }
  .bedrock-side-facts { position: static; }
}
@media (max-width: 650px) {
  .bedrock-method-notice { grid-template-columns: 1fr; gap: 6px; }
  .bedrock-method-notice b { white-space: normal; }
  .bedrock-guide-section { grid-template-columns: 31px minmax(0, 1fr); gap: 12px; }
  .bedrock-guide-number { width: 29px; height: 29px; border-radius: 8px; }
  .bedrock-dns-values,
  .bedrock-server-entry { grid-template-columns: 1fr; }
  .bedrock-platform-guide > summary { align-items: flex-start; flex-wrap: wrap; }
  .bedrock-platform-guide > summary small { order: 3; width: 100%; margin-left: 0; }
}

/* =====================================================================
   WANAStatsWeb 2.24 - vollstaendige Mobile-/Tablet-Haertung
   Getestete Klassen: Android Chrome/WebView, iOS Safari, kleine Phones,
   grosse Phones, Tablets sowie Querformat.
   ===================================================================== */

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-width: 0;
  max-width: 100%;
}
@supports not (overflow: clip) {
  html,
  body { overflow-x: hidden; }
}

/* Der Hilfe-Filter bleibt immer unter der Hauptnavigation. */
.help-toolbar { z-index: 18; }

/* Tabletts und Mobilgeraete: flex-basis von 420px darf in einer
   Spaltenanordnung niemals als Hoehe interpretiert werden. */
@media (max-width: 1120px) {
  .help-toolbar {
    position: static;
    top: auto;
    min-height: 0;
    height: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .help-tabs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .help-search-field {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    margin-left: 0;
    align-self: stretch;
  }
  .help-search-field input {
    width: 100%;
    min-height: 0;
    height: auto;
  }
}

@media (max-width: 760px) {
  /* 16px verhindert den automatischen Seitenzoom von iOS Safari. */
  input[type="search"] {
    font-size: 16px !important;
  }

  .header-search-field,
  .search-field,
  .help-search-field {
    min-height: 46px;
  }

  .help-toolbar {
    margin-bottom: 20px;
    padding: 10px;
  }
  .help-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .help-tab {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 44px;
    padding-inline: 15px;
    scroll-snap-align: start;
  }

  .help-page-hero {
    padding-top: 29px;
    padding-bottom: 24px;
    gap: 16px;
  }
  .help-page-hero h1 {
    font-size: clamp(39px, 12vw, 48px);
  }
  .help-quick-note {
    width: 100%;
    max-width: none;
  }
  .help-section-heading h2 {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.08;
  }

  .help-detail-view { padding-bottom: 46px; }
  .help-detail-page { gap: 14px; }
  .help-detail-back {
    min-height: 44px;
    padding: 0 4px;
  }
  .help-detail-hero {
    padding: 22px 20px;
  }
  .help-detail-hero h1 {
    font-size: clamp(28px, 9vw, 36px);
    line-height: 1.06;
  }
  .help-detail-commands,
  .help-detail-copy,
  .help-detail-facts {
    padding: 20px;
  }
  .help-detail-section-heading h2,
  .help-detail-copy h2,
  .help-detail-facts h2 {
    font-size: 21px;
  }

  .help-command-row code {
    font-size: 14.5px;
  }
  .help-command-row span {
    font-size: 15px;
  }

  /* Alle oft verwendeten mobilen Aktionen erhalten eine belastbare
     Touchflaeche, ohne das Desktoplayout zu vergroessern. */
  .pagination-button,
  .back-button {
    min-height: 44px;
  }

  /* Dropdowns duerfen in kleinen Querformat-Viewports nicht aus dem
     sichtbaren Bereich herauslaufen. */
  .mobile-menu-panel {
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .player-suggestions {
    max-height: min(62dvh, 430px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .suggestion-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Lange technische Werte und Befehle duerfen Karten nie verbreitern. */
  code,
  .help-connect-facts span,
  .bedrock-dns-values span,
  .bedrock-server-entry span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 380px) {
  :root { --shell: calc(100% - 18px); }

  .topbar { gap: 5px; }
  .brand-logo {
    width: 60px;
    height: 46px;
  }
  .top-actions { gap: 4px; }
  .icon-button {
    width: 38px;
    min-height: 38px;
  }
  .mobile-menu-button {
    min-height: 38px;
    padding-inline: 9px;
    gap: 7px;
  }
  .mobile-menu-button .hamburger i { width: 13px; }

  .help-tab { padding-inline: 13px; }
  .help-feature-card { padding: 19px 44px 19px 18px; }
  .help-connect-card { padding: 21px 20px; }
  .help-connect-address {
    font-size: clamp(25px, 9vw, 30px) !important;
  }
  .help-connect-facts span {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .help-connect-guide {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .bedrock-platform-guide > summary {
    padding-inline: 14px;
  }
  .bedrock-platform-body { padding-inline: 14px; }
}

/* Niedrige Querformat-Displays: weniger vertikale Chrome, weiterhin
   vollstaendige Bedienbarkeit. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1100px) {
  .topbar {
    gap: 5px;
    padding-block: 4px;
  }
  .brand-logo {
    height: 42px;
  }
  .header-search {
    margin-bottom: 3px;
  }
  .header-search-field {
    min-height: 40px;
  }
  .help-page-hero {
    padding-top: 22px;
    padding-bottom: 18px;
  }
  .help-toolbar {
    margin-bottom: 16px;
  }
  .mobile-menu-panel {
    max-height: calc(100dvh - 64px);
  }
}

/* Letzter plattformuebergreifender Feinschliff */
@media (max-width: 1180px) {
  input[type="search"] {
    font-size: 16px !important;
  }
}
@media (max-width: 760px) {
  .pagination-button,
  .back-button {
    min-height: 44px !important;
    height: auto !important;
  }
}
@media (max-width: 380px) {
  .icon-button {
    width: 40px;
    min-height: 40px;
  }
  .mobile-menu-button {
    min-height: 40px;
  }
}

@media (max-width: 1180px) {
  .help-detail-back,
  .back-button,
  .task-feed-pagination button,
  .combat-pagination .pagination-button,
  .profile-section-pagination .pagination-button,
  .trophy-history-pagination .pagination-button {
    min-height: 44px !important;
    height: auto !important;
  }
}



/* =====================================================================
   WANAStatsWeb 2.26.1 - Plan-Leistungsleiste mit Google-Netzping und kompakter Hilfe-Einstieg
   ===================================================================== */
.plan-metrics-strip {
  min-height: 46px;
  display: grid;
  grid-template-columns: auto repeat(4, minmax(52px, auto));
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: border-color .2s ease, opacity .2s ease, background .2s ease;
}
.plan-metrics-heading,
.plan-metric {
  min-width: 0;
  padding: 6px 10px;
  display: grid;
  align-content: center;
  gap: 2px;
}
.plan-metrics-heading {
  padding-inline: 12px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--orange) 8%, transparent);
}
.plan-metrics-heading b {
  color: var(--orange);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .15em;
}
.plan-metrics-heading small {
  color: var(--muted-2);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}
.plan-metric + .plan-metric { border-left: 1px solid var(--line); }
.plan-metric span {
  color: var(--muted-2);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}
.plan-metric strong {
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}
.plan-metric.is-good strong { color: var(--green); }
.plan-metric.is-warning strong { color: var(--gold); }
.plan-metric.is-bad strong { color: var(--danger); }
.plan-metrics-strip.is-loading { opacity: .72; }
.plan-metrics-strip.is-loading .plan-metrics-heading b::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border: 1px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.plan-metrics-strip.is-unavailable .plan-metric strong { color: var(--muted-2); }
.plan-metrics-strip.is-stale { border-style: dashed; }

/* Der grosse Hilfe-Introbereich ist entfernt; die Bedienleiste startet direkt. */
#helpOverview { padding-top: 30px; }
#helpOverview > .help-toolbar { margin-top: 0; }

@media (min-width: 1451px) {
  .plan-metrics-strip { min-width: 355px; }
}
@media (max-width: 1450px) {
  .plan-metrics-heading { display: none; }
  .plan-metrics-strip { grid-template-columns: repeat(4, minmax(48px, auto)); }
  .plan-metric { padding-inline: 8px; }
}
@media (max-width: 1280px) {
  .plan-metrics-strip { min-height: 42px; }
  .plan-metric { padding-inline: 7px; }
  .plan-metric strong { font-size: 10px; }
}
@media (max-width: 1080px) {
  .plan-metrics-strip { grid-template-columns: repeat(4, minmax(46px, 1fr)); }
  .plan-metric { padding-inline: 6px; }
}
@media (max-width: 860px) {
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .plan-metrics-strip {
    order: 10;
    flex: 1 0 100%;
    width: 100%;
    min-height: 40px;
  }
  .plan-metric { padding-block: 5px; }
  #helpOverview { padding-top: 20px; }
}
@media (max-width: 620px) {
  .plan-metrics-strip { min-height: 38px; }
  .plan-metric { padding-inline: 4px; }
  .plan-metric strong { font-size: 9px; }
  .plan-metric span { font-size: 6.5px; }
  #helpOverview { padding-top: 14px; }
}
@media (max-width: 390px) {
  .plan-metric strong { font-size: 8.5px; }
}

/* Mehr horizontale Flaeche nur fuer die Kopfzeile; der Seiteninhalt bleibt 1380px. */
@media (min-width: 861px) {
  .topbar.shell { width: min(1760px, calc(100% - 32px)); }
}
@media (min-width: 1181px) and (max-width: 1600px) {
  .brand-copy { display: none; }
  .brand { min-width: auto; }
  .main-nav a { padding-inline: 8px; font-size: 11px; }
  .header-search { width: min(225px, 15vw); }
  .server-status-chip small { display: none; }
  .plan-metrics-strip { grid-template-columns: repeat(4, minmax(46px, auto)); }
}
@media (min-width: 1181px) and (max-width: 1450px) {
  .main-nav a span { display: none; }
  .header-search-field kbd { display: none; }
  .plan-metric { padding-inline: 6px; }
}


/* 2.26.1: OFFLINE muss auch im kompakten Kopfbereich lesbar bleiben. */
.plan-metric[data-plan-metric="ping"] strong { min-width: 40px; }
.plan-metric[data-plan-metric="ping"].is-bad strong { letter-spacing: -.02em; }
@media (max-width: 620px) {
  .plan-metric[data-plan-metric="ping"] strong { font-size: 8px; }
}


/* =====================================================================
   WANAStatsWeb 2.26.2 - mehrere Zeitfenster, nur Darkmode
   ===================================================================== */
html { color-scheme: dark; }
.plan-metrics-strip { overflow: visible; }
.plan-metric {
  position: relative;
  cursor: help;
  outline: none;
}
.plan-metric:focus-visible {
  background: var(--orange-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.plan-metric-tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 90;
  width: 278px;
  padding: 12px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text);
  background: #11100e;
  box-shadow: 0 18px 48px rgba(0,0,0,.62);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.plan-metric:hover .plan-metric-tooltip,
.plan-metric:focus .plan-metric-tooltip,
.plan-metric:focus-within .plan-metric-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.plan-metric-tooltip::before {
  content: '';
  position: absolute;
  right: 18px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  background: #11100e;
  transform: rotate(45deg);
}
.plan-tooltip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.plan-tooltip-head b {
  color: var(--orange);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
}
.plan-tooltip-head small {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}
.plan-tooltip-row {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.plan-tooltip-row:last-child { border-bottom: 0; }
.plan-tooltip-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
}
.plan-tooltip-row strong {
  color: var(--text-strong) !important;
  font-size: 10px !important;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .plan-metric-tooltip {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(env(safe-area-inset-top, 0px) + 82px);
    width: auto;
    max-width: 420px;
    margin-inline: auto;
  }
  .plan-metric-tooltip::before { display: none; }
}


/* =====================================================================
   WANAStatsWeb 2.26.3 - kompakte Kopfzeile
   ===================================================================== */
@media (min-width: 861px) {
  .topbar {
    justify-content: flex-start;
    gap: 14px;
  }
  .main-nav {
    gap: 0;
    align-items: center;
  }
  .main-nav a:not(.nav-map-button) {
    padding-inline: 10px;
  }
  .header-search {
    margin-left: 14px;
  }
  .top-actions {
    margin-left: 0;
  }
}

.main-nav .nav-map-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  align-self: center;
  justify-content: center;
  padding: 0;
  margin-right: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--orange);
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent);
}
.main-nav .nav-map-button::after { display: none; }
.main-nav .nav-map-button:hover {
  border-color: var(--line-strong);
  color: var(--text-strong);
  background: var(--orange-soft);
  transform: translateY(-1px);
}
.main-nav .nav-map-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 1181px) and (max-width: 1600px) {
  .header-search { margin-left: 8px; }
  .main-nav a:not(.nav-map-button) { padding-inline: 7px; }
  .main-nav .nav-map-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}

@media (max-width: 860px) {
  .main-nav .nav-map-button {
    flex: 0 0 42px;
    padding: 0;
  }
}


/* =====================================================================
   WANAStatsWeb 2.26.4 - Navigation unten ausrichten, Metrikstatus sichtbar
   ===================================================================== */
@media (min-width: 861px) {
  .main-nav {
    align-self: stretch;
    align-items: stretch;
    min-height: 76px;
  }
  .main-nav a:not(.nav-map-button) {
    align-self: stretch;
    min-height: 76px;
  }
  .main-nav a:not(.nav-map-button)::after {
    bottom: 0;
  }
  .main-nav .nav-map-button {
    align-self: center;
  }
}

.plan-metrics-strip.is-unavailable .plan-metrics-heading small {
  color: var(--danger);
}

/* 2.26.5: erzwungene unverwechselbare Asset-Version nach Metrik-/Caddy-Reparatur. */


/* =====================================================================
   WANAStatsWeb 2.27.0 - Home, kompakte Metriken, 12-Stunden-Graphen
   ===================================================================== */
.plan-metrics-strip {
  grid-template-columns: repeat(4, minmax(54px, auto));
  min-width: 0;
}
.plan-metrics-heading { display: none !important; }
.plan-metric-tooltip {
  width: 372px;
  padding: 13px 14px 12px;
}
.plan-history-chart {
  min-height: 166px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 9px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--muted-2);
  font-size: 10px;
  background: linear-gradient(180deg, rgba(255,153,0,.025), rgba(255,255,255,.006));
}
.plan-history-chart svg { width: 100%; height: auto; display: block; }
.plan-chart-grid { stroke: rgba(255,255,255,.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan-chart-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.plan-chart-average {
  stroke: rgba(255,255,255,.42);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.plan-chart-peak {
  fill: #11100e;
  stroke: var(--gold);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.plan-chart-y-label,
.plan-chart-x-label {
  fill: var(--muted-2);
  font-family: inherit;
  font-size: 8px;
  font-weight: 800;
}
.plan-chart-summary {
  min-height: 28px;
  padding: 7px 1px 6px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .015em;
  white-space: normal;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 861px) {
  .main-nav a:not(.nav-map-button) { padding-inline: 8px; }
  .header-search { margin-left: 8px; }
  .plan-metrics-strip { flex: 0 0 auto; }
}
@media (min-width: 1181px) and (max-width: 1600px) {
  .main-nav a:not(.nav-map-button) { padding-inline: 6px; }
  .header-search { width: min(210px, 14vw); }
}
@media (max-width: 860px) {
  .plan-metric-tooltip {
    top: calc(env(safe-area-inset-top, 0px) + 74px);
    width: auto;
    max-width: min(372px, calc(100vw - 16px));
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 430px) {
  .plan-metric-tooltip { left: 8px; right: 8px; padding: 11px; }
  .plan-history-chart { min-height: 148px; }
  .plan-chart-summary { font-size: 7.5px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .plan-metric-tooltip {
    top: calc(env(safe-area-inset-top, 0px) + 54px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 62px);
  }
  .plan-history-chart { min-height: 132px; }
}

/* 2.27.0 responsive hardening for very narrow phones. */
@media (max-width: 860px) {
  .mobile-menu-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    right: 8px;
    left: auto;
    width: min(240px, calc(100vw - 16px));
  }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 860px) {
  .mobile-menu-panel { top: calc(env(safe-area-inset-top, 0px) + 54px); }
}

/* 2.27.0 final narrow-phone header and tooltip refinement. */
@media (max-width: 380px) {
  .top-actions {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  .plan-metrics-strip { min-width: 0; }
  .plan-tooltip-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .plan-tooltip-head small {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* =====================================================================
   WANAStatsWeb 2.27.1 - lesbare Graphen, groessere Tooltips, Spielerwert
   ===================================================================== */
.plan-metrics-strip {
  grid-template-columns: repeat(5, minmax(54px, auto));
}
.plan-metric-tooltip {
  width: 526px;
  padding: 17px 18px 16px;
  border-radius: 14px;
}
.plan-tooltip-head {
  padding-bottom: 12px;
  margin-bottom: 7px;
}
.plan-tooltip-head b {
  font-size: 14px;
  font-weight: 800;
}
.plan-tooltip-head small {
  font-size: 10px;
  font-weight: 550;
}
.plan-history-chart {
  min-height: 220px;
  margin-top: 10px;
  border-radius: 10px;
  font-size: 11px;
}
.plan-history-chart svg {
  width: 100%;
  height: auto;
  text-rendering: geometricPrecision;
}
.plan-chart-y-label,
.plan-chart-x-label {
  fill: var(--muted);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  font-synthesis: none;
}
.plan-chart-summary {
  min-height: 35px;
  padding: 9px 2px 8px;
  font-size: 10px;
  font-weight: 550;
  line-height: 1.45;
}
.plan-tooltip-row {
  min-height: 35px;
}
.plan-tooltip-row span {
  font-size: 11px;
  font-weight: 550;
}
.plan-tooltip-row strong {
  font-size: 11px !important;
  font-weight: 700;
}
@media (min-width: 861px) and (max-width: 1500px) {
  .plan-metrics-strip { grid-template-columns: repeat(5, minmax(48px, auto)); }
  .plan-metric { padding-inline: 6px; }
  .plan-metric > span { font-size: 6.5px; }
  .plan-metric > strong { font-size: 9.5px; }
}
@media (max-width: 860px) {
  .plan-metrics-strip { grid-template-columns: repeat(5, minmax(48px, 1fr)); }
  .plan-metric-tooltip {
    max-width: min(526px, calc(100vw - 16px));
    padding: 15px;
  }
}
@media (max-width: 560px) {
  .plan-metrics-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .plan-metric { padding-inline: 4px; }
  .plan-metric > span { font-size: 6px; }
  .plan-metric > strong { font-size: 8.5px; }
  .plan-history-chart { min-height: 190px; }
  .plan-chart-y-label, .plan-chart-x-label { font-size: 10px; }
}
@media (max-width: 360px) {
  .plan-metric > span { font-size: 5.5px; letter-spacing: .035em; }
  .plan-metric > strong { font-size: 8px; }
  .plan-history-chart { min-height: 176px; }
}
@media (max-height: 650px) and (orientation: landscape) {
  .plan-history-chart { min-height: 170px; }
  .plan-tooltip-row { min-height: 31px; }
}

/* 2.27.1: grosse Metrik-Tooltips auf kompakten Desktop-/Tabletbreiten
   viewport-zentriert halten, statt sie an einem schmalen Einzelwert
   links aus dem Bildschirm heraus auszurichten. */
@media (max-width: 1100px) {
  .plan-metric-tooltip {
    position: fixed;
    left: 8px;
    right: 8px;
    top: calc(env(safe-area-inset-top, 0px) + 74px);
    width: auto;
    max-width: min(526px, calc(100vw - 16px));
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 82px);
    margin-inline: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .plan-metric-tooltip::before { display: none; }
}
@media (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .plan-metric-tooltip {
    top: calc(env(safe-area-inset-top, 0px) + 54px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 62px);
  }
}


/* =====================================================================
   WANAStatsWeb 2.28.0 - zentrierte Kopfzeile, Livewerte, interaktive Graphen
   ===================================================================== */
@media (min-width: 861px) {
  .topbar.shell {
    width: min(1920px, calc(100% - 24px));
    justify-content: center !important;
    gap: 10px;
  }
  .brand, .main-nav, .header-search, .top-actions { flex: 0 0 auto; }
  .header-search { margin-left: 0 !important; width: clamp(190px, 13vw, 250px); }
  .top-actions { margin-left: 0 !important; }
  .main-nav a:not(.nav-map-button) { padding-inline: 7px; }
}

.plan-metric { cursor: default; }
.plan-metric::after {
  content: "";
  position: absolute;
  z-index: 89;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 16px;
}
.plan-metric-tooltip {
  width: 640px;
  padding: 18px 20px 19px;
  pointer-events: none;
  left: 50%;
  right: auto;
  transform: translate(-50%, -5px);
}
.plan-metric:hover .plan-metric-tooltip,
.plan-metric:focus-within .plan-metric-tooltip,
.plan-metric.is-hover-open .plan-metric-tooltip,
.plan-metric-tooltip:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.plan-metric:first-child .plan-metric-tooltip,
.plan-metric:nth-child(2) .plan-metric-tooltip {
  left: 0;
  transform: translateY(-5px);
}
.plan-metric:first-child:hover .plan-metric-tooltip,
.plan-metric:nth-child(2):hover .plan-metric-tooltip,
.plan-metric:first-child:focus-within .plan-metric-tooltip,
.plan-metric:nth-child(2):focus-within .plan-metric-tooltip,
.plan-metric:first-child.is-hover-open .plan-metric-tooltip,
.plan-metric:nth-child(2).is-hover-open .plan-metric-tooltip {
  transform: translateY(0);
}
.plan-metric:nth-last-child(-n+2) .plan-metric-tooltip {
  left: auto;
  right: 0;
  transform: translateY(-5px);
}
.plan-metric:nth-last-child(-n+2):hover .plan-metric-tooltip,
.plan-metric:nth-last-child(-n+2):focus-within .plan-metric-tooltip,
.plan-metric:nth-last-child(-n+2).is-hover-open .plan-metric-tooltip {
  transform: translateY(0);
}
.plan-metric-tooltip::before { top: -7px; }
.plan-tooltip-head b { font-size: 15px; }
.plan-tooltip-head small { font-size: 10.5px; font-weight: 550; }
.plan-history-chart {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  cursor: crosshair;
}
.plan-history-chart svg { touch-action: none; }
.plan-chart-y-label, .plan-chart-x-label { font-size: 11px; font-weight: 500; }
.plan-chart-crosshair {
  stroke: rgba(255, 184, 77, .78);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.plan-chart-hover-dot {
  fill: #11100e;
  stroke: var(--orange);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.plan-chart-pointer-label {
  position: absolute;
  z-index: 4;
  transform: translate(10px, -105%);
  padding: 7px 9px;
  max-width: 220px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text-strong);
  background: rgba(10, 9, 8, .96);
  box-shadow: 0 8px 24px rgba(0,0,0,.42);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
}
.plan-chart-pointer-label.align-right { transform: translate(calc(-100% - 10px), -105%); }
.plan-chart-summary { font-size: 11px; font-weight: 600; }
.plan-window-list {
  display: grid;
  gap: 4px;
  padding-top: 5px;
}
.plan-window-row {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(116px, 1.25fr) repeat(3, minmax(92px, 1fr));
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .15s ease;
}
.plan-window-row:hover {
  border-color: var(--line);
  background: rgba(255,255,255,.025);
}
.plan-window-row.is-selected {
  border-color: color-mix(in srgb, var(--orange) 52%, var(--line));
  background: var(--orange-soft);
}
.plan-window-row.has-no-data { opacity: .55; }
.plan-window-label {
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 750;
}
.plan-window-stat {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 1px;
}
.plan-window-stat small {
  color: var(--muted-2);
  font-size: 7.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.plan-window-stat b {
  color: var(--text-strong);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.plan-metrics-strip.is-loading { opacity: .88; }
.plan-metrics-strip.has-endpoint-error .plan-metric strong { color: var(--danger); }

@media (min-width: 861px) and (max-width: 1450px) {
  .plan-metric-tooltip {
    position: fixed;
    left: 50% !important;
    right: auto !important;
    top: 84px;
    width: min(640px, calc(100vw - 24px));
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    transform: translate(-50%, -5px) !important;
  }
  .plan-metric:hover .plan-metric-tooltip,
  .plan-metric:focus-within .plan-metric-tooltip,
  .plan-metric.is-hover-open .plan-metric-tooltip {
    transform: translate(-50%, 0) !important;
  }
  .plan-metric-tooltip::before { display: none; }
}


/* WANAStatsWeb 2.28.1 - kompaktere, immer linkswaerts geoeffnete Metrik-Overlays */
@media (min-width: 861px) {
  .plan-metric-tooltip {
    position: fixed !important;
    left: 12px;
    right: auto !important;
    top: 84px;
    width: 548px !important;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 96px);
    padding: 12px 14px 13px !important;
    overflow-y: auto;
    transform: translateY(-4px) !important;
  }
  .plan-metric:hover .plan-metric-tooltip,
  .plan-metric:focus-within .plan-metric-tooltip,
  .plan-metric.is-hover-open .plan-metric-tooltip,
  .plan-metric-tooltip:hover {
    transform: translateY(0) !important;
  }
  .plan-metric:first-child .plan-metric-tooltip,
  .plan-metric:nth-child(2) .plan-metric-tooltip,
  .plan-metric:nth-last-child(-n+2) .plan-metric-tooltip {
    left: 12px;
    right: auto !important;
    transform: translateY(-4px) !important;
  }
  .plan-metric:first-child:hover .plan-metric-tooltip,
  .plan-metric:nth-child(2):hover .plan-metric-tooltip,
  .plan-metric:nth-last-child(-n+2):hover .plan-metric-tooltip,
  .plan-metric:first-child:focus-within .plan-metric-tooltip,
  .plan-metric:nth-child(2):focus-within .plan-metric-tooltip,
  .plan-metric:nth-last-child(-n+2):focus-within .plan-metric-tooltip,
  .plan-metric:first-child.is-hover-open .plan-metric-tooltip,
  .plan-metric:nth-child(2).is-hover-open .plan-metric-tooltip,
  .plan-metric:nth-last-child(-n+2).is-hover-open .plan-metric-tooltip {
    transform: translateY(0) !important;
  }
  .plan-metric-tooltip::before { display: none !important; }

  .plan-tooltip-head {
    gap: 8px;
    padding-bottom: 7px;
  }
  .plan-tooltip-head b {
    font-size: 15.5px;
    line-height: 1.15;
  }
  .plan-tooltip-head small {
    font-size: 10.5px;
    line-height: 1.2;
  }

  .plan-history-chart {
    min-height: 220px;
  }
  .plan-chart-y-label,
  .plan-chart-x-label {
    font-size: 11.5px;
    font-weight: 500;
  }
  .plan-chart-summary {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.25;
    font-weight: 600;
  }

  .plan-window-list {
    gap: 2px;
    padding-top: 3px;
  }
  .plan-window-row {
    min-height: 36px;
    grid-template-columns: minmax(108px, 1.14fr) repeat(3, minmax(78px, 1fr));
    gap: 5px;
    padding: 4px 7px;
    border-radius: 8px;
  }
  .plan-window-label {
    font-size: 13px;
    line-height: 1.15;
    font-weight: 720;
  }
  .plan-window-stat {
    gap: 0;
  }
  .plan-window-stat small {
    font-size: 8.5px;
    line-height: 1.05;
    font-weight: 650;
    letter-spacing: .055em;
  }
  .plan-window-stat b {
    font-size: 12px;
    line-height: 1.12;
    font-weight: 700;
  }
}


/* =====================================================================
   WANAStatsWeb 2.29.0 – einzeilige Projekt-WANA-Kopfzeile + drei Home-Blöcke
   (Aufgaben-Feed, Online-Spieler, read-only Konsole)
   ===================================================================== */
.hero {
  min-height: 0 !important;
  padding: 18px 0 32px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto 340px !important;
  gap: 14px 18px !important;
  align-items: stretch !important;
}
.hero-copy {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 0 1px !important;
  display: block !important;
  text-align: left !important;
}
.hero-copy::before { display: none !important; }
.hero h1 {
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  width: max-content;
  max-width: 100%;
  white-space: nowrap !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
}
.hero h1 span,
.hero h1 em { white-space: nowrap !important; }
.hero h1 em {
  font-size: .72em !important;
  letter-spacing: -.025em !important;
}
.task-feed-panel,
.home-online-panel,
.home-console-panel {
  min-width: 0 !important;
  width: 100% !important;
  height: 340px !important;
  min-height: 340px !important;
  max-height: 340px !important;
  border-radius: 20px !important;
  padding: 14px 16px 12px !important;
  box-sizing: border-box !important;
}
.task-feed-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
.home-online-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
.home-online-grid {
  max-height: none !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.home-online-empty { min-height: 0 !important; height: 100% !important; }

.home-console-panel {
  position: relative;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  border-color: color-mix(in srgb, var(--orange) 32%, var(--line)) !important;
}
.home-console-heading {
  position: relative;
  z-index: 2;
  min-height: 33px;
  padding-bottom: 11px !important;
  border-bottom: 1px solid var(--line) !important;
}
.home-console-heading > span b {
  display: inline-block;
  min-width: 23px;
  color: var(--orange) !important;
  margin-right: 4px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: -.08em;
}
.home-console-heading > small {
  color: var(--green) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
}
.home-console-heading > small.offline { color: var(--muted-2) !important; }
.home-console-viewport {
  min-width: 0;
  min-height: 0;
  margin-top: 10px;
  padding: 9px 10px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--orange) 18%, var(--line));
  border-radius: 11px;
  background: rgba(0, 0, 0, .28);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--orange) 38%, transparent) transparent;
}
.home-console-log {
  margin: 0;
  min-width: 0;
  color: color-mix(in srgb, var(--text) 92%, white 8%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 9px;
  font-weight: 530;
  line-height: 1.42;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.home-console-readonly {
  padding-top: 7px;
  color: var(--muted-2);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
}

@media (max-width: 1120px) {
  .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto 330px 330px !important;
  }
  .task-feed-panel,
  .home-online-panel,
  .home-console-panel {
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
  }
  .home-console-panel { grid-column: 1 / -1 !important; }
}

@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto repeat(3, auto) !important;
    gap: 12px !important;
    padding-top: 13px !important;
  }
  .hero-copy { grid-column: auto !important; overflow: hidden; }
  .hero h1 {
    gap: 8px !important;
    font-size: clamp(21px, 6.4vw, 31px) !important;
    letter-spacing: -.04em !important;
  }
  .hero h1 em { font-size: .66em !important; }
  .task-feed-panel,
  .home-online-panel,
  .home-console-panel {
    grid-column: auto !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
  .home-console-log { font-size: 8.6px; }
}


/* =====================================================================
   WANAStatsWeb 2.29.1 – mobile Home-Akkordeons + zentrierte Metrikleiste
   ===================================================================== */
.home-panel-toggle {
  display: none;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  border-radius: 9px;
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-panel-toggle > span {
  display: block;
  font-size: 17px;
  line-height: 1;
  transform: translateY(-1px) rotate(0deg);
  transition: transform .18s ease;
}

/* Auf Mobile werden die Elemente der top-actions zu direkten Flex-Items der
   Kopfzeile. Dadurch kann die Metrikleiste die komplette Shell-Breite nutzen
   und liegt auf iPhone/Android wirklich mittig statt am rechten Rand. */
@media (max-width: 860px) {
  .top-actions { display: contents !important; }
  .server-status-area {
    order: 2 !important;
    margin-left: auto !important;
  }
  .mobile-menu-wrap { order: 2 !important; }
  .plan-metrics-strip {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }
  .header-search { order: 4 !important; }
}

/* Nur schmale Hochkant-Ansichten starten kompakt. Tablets, Querformat und
   Desktop behalten die drei Home-Bloecke sofort vollstaendig sichtbar. */
@media (max-width: 720px) and (orientation: portrait) {
  .home-panel-toggle { display: grid; }

  .home-collapsible-panel .task-feed-heading {
    gap: 9px !important;
  }
  .home-collapsible-panel .task-feed-heading > span {
    min-width: 0;
    flex: 1 1 auto;
  }
  .home-collapsible-panel .task-feed-heading > small {
    flex: 0 1 auto;
    margin-left: auto;
    white-space: nowrap;
  }
  .home-collapsible-panel:not(.is-mobile-collapsed) .home-panel-toggle > span {
    transform: translateY(1px) rotate(180deg);
  }

  .home-collapsible-panel.is-mobile-collapsed {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 11px 13px !important;
    border-radius: 14px !important;
  }
  .home-collapsible-panel.is-mobile-collapsed > :not(.task-feed-heading) {
    display: none !important;
  }
  .home-collapsible-panel.is-mobile-collapsed > .task-feed-heading {
    min-height: 32px;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .home-collapsible-panel.is-mobile-collapsed .home-panel-toggle > span {
    transform: translateY(-1px) rotate(0deg);
  }

  /* Geoeffnet bleibt die bisherige mobile Kartenhoehe erhalten. */
  .home-collapsible-panel:not(.is-mobile-collapsed) {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
}

@media (max-width: 420px) and (orientation: portrait) {
  .home-collapsible-panel .task-feed-heading > small {
    font-size: 6.4px !important;
    letter-spacing: .08em !important;
  }
  .home-panel-toggle {
    width: 29px;
    height: 29px;
  }
}


/* 2.30.0 – Profilkopf: fuenf Kennzahlen ohne zusaetzliche Hoehe + ein wechselnder Fun Fact
   nutzt die vorhandene Update-Zeile, damit der Hero-Block nicht groesser werden muss. */
.profile-meta-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.profile-meta-grid > div {
  min-width: 0;
  border-top: 0 !important;
  border-left: 0 !important;
}
.profile-meta-grid > div + div {
  border-left: 1px solid var(--line) !important;
}
.profile-page-updated {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.profile-page-updated > span:first-child {
  flex: 0 0 auto;
}
.profile-page-updated #profileUpdated {
  flex: 0 0 auto;
}
.profile-funfact-separator {
  flex: 0 0 auto;
  margin: 0 7px;
  opacity: .42;
}
.profile-funfact {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
  opacity: .9;
}

@media (max-width: 720px) {
  /* Vier Felder waren bislang zwei Reihen. Mit drei Spalten passen fuenf Felder
     weiterhin in genau zwei Reihen und vergroessern den Profilkopf nicht. */
  .profile-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .profile-meta-grid > div {
    border-left: 1px solid var(--line) !important;
    border-top: 0 !important;
  }
  .profile-meta-grid > div:nth-child(1),
  .profile-meta-grid > div:nth-child(4) {
    border-left: 0 !important;
  }
  .profile-meta-grid > div:nth-child(n+4) {
    border-top: 1px solid var(--line) !important;
  }

  /* Auf schmalen Ansichten bekommt der Fun Fact die komplette bereits vorhandene
     Statuszeile. Der technische Live-Hinweis wird nur visuell ausgeblendet. */
  .profile-page-updated #profileUpdated,
  .profile-page-updated .profile-funfact-separator {
    display: none !important;
  }
  .profile-funfact {
    flex: 1 1 auto;
    width: 100%;
    font-size: 9px;
    letter-spacing: .02em;
    text-align: left;
  }
}

@media (max-width: 420px) {
  .profile-meta-grid {
    column-gap: 0 !important;
  }
  .profile-meta-grid > div {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .profile-meta-grid > div > span {
    font-size: 6.5px !important;
    letter-spacing: .055em !important;
  }
  .profile-meta-grid > div > b {
    font-size: 10px !important;
  }
}

/* =====================================================================
   WANAStatsWeb 3.0 – Landingpage + zentrale Statistikseite + Hall of Fame
   ===================================================================== */

/* Home endet nach den grossen Vier. Dadurch bleibt die Landingpage bewusst
   kompakt und die drei Live-Karten sind weiterhin der visuelle Einstieg. */
#homeView { padding-bottom: 8px; }
#homeView .spotlight { margin-bottom: 22px; }

.statistics-view { padding-bottom: 44px; }
.statistics-page-hero {
  min-height: 0 !important;
  margin-bottom: 16px;
  padding-bottom: 4px;
}
.statistics-page-hero > div { max-width: 820px; }
.statistics-page-hero h1 { margin-bottom: 8px; }
.statistics-page-hero p { max-width: 760px; margin-top: 10px; }

.statistics-accordion-stack {
  display: grid;
  gap: 13px;
  margin: 0 0 34px;
}
.statistics-collapsible {
  margin: 0 !important;
  border-color: color-mix(in srgb, var(--orange) 12%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--orange) 3%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}
.statistics-collapsible > summary {
  min-height: 92px;
  padding: 18px 22px !important;
  display: flex;
  justify-content: space-between;
  gap: 22px;
}
.statistics-collapsible[open] > summary { margin-bottom: 0 !important; }
.statistics-collapsible[open] { padding-bottom: 0 !important; }
.statistics-collapsible > .statistics-section-body {
  margin: 0 !important;
  padding: 20px 22px 24px;
}
.statistics-summary-copy { min-width: 0; }
.statistics-summary-copy .kicker { display: block; margin-bottom: 3px; }
.statistics-summary-copy h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.03;
}
.statistics-summary-copy p {
  margin: 6px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.statistics-collapsible > summary .profile-collapse-indicator { align-self: center; }
.statistics-section-body > .toolbar { margin-top: 0 !important; }
.statistics-section-body.global-stats-section {
  margin: 0 !important;
  padding-top: 20px !important;
}
.statistics-section-body .global-stats-grid,
.statistics-section-body .stats-grid { margin-bottom: 0; }

.records-body { padding-top: 18px !important; }
.records-intro {
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--orange) 18%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--orange) 4%, var(--surface-strong));
}
.records-intro > div { display: flex; align-items: center; gap: 9px; }
.records-intro > div > span { color: var(--orange); font-size: 18px; }
.records-intro b { font-size: 12px; }
.records-intro p { margin: 4px 0 0 27px; color: var(--muted); font-size: 10px; line-height: 1.45; }

.records-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.record-card {
  --record-accent: var(--orange);
  position: relative;
  min-width: 0;
  min-height: 235px;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--record-accent) 24%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--record-accent) 12%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-strong) 90%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.record-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--record-accent);
  opacity: .72;
}
.record-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.record-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--record-accent) 35%, var(--line));
  border-radius: 11px;
  color: var(--record-accent);
  background: color-mix(in srgb, var(--record-accent) 8%, var(--surface));
  font-size: 15px;
  font-weight: 950;
}
.record-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--record-accent);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .14em;
}
.record-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.12;
}
.record-value-wrap {
  margin: 17px 0 12px;
  min-width: 0;
}
.record-value {
  display: block;
  color: var(--text);
  font-size: clamp(23px, 2.25vw, 31px);
  line-height: 1;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.record-metric {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.record-holder {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.record-player {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}
.record-player .avatar-shell,
.record-player .player-avatar { width: 31px !important; height: 31px !important; min-width: 31px; border-radius: 8px; }
.record-player b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.record-versus { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.record-second-player { color: var(--record-accent); font-size: 10px; font-weight: 900; text-decoration: none; }
.record-blurb {
  margin: auto 0 0;
  padding-top: 13px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

/* Alte Hash-Links duerfen weiterhin auf die neue Seite zeigen, aber auf Home
   existiert bewusst keine Leaderboard-Sprungmarke mehr. */

@media (max-width: 1100px) {
  .records-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .statistics-page-hero { text-align: center; }
  .statistics-page-hero .updated { justify-content: center; }
  .statistics-collapsible > summary {
    min-height: 78px;
    padding: 14px 14px !important;
    gap: 12px;
  }
  .statistics-summary-copy h2 { font-size: 23px; }
  .statistics-summary-copy p { font-size: 10px; }
  .statistics-collapsible > .statistics-section-body { padding: 14px 12px 16px; }
  .records-intro { margin-bottom: 12px; }
  .records-intro p { margin-left: 0; }
  .records-grid { grid-template-columns: 1fr; gap: 10px; }
  .record-card { min-height: 0; padding: 14px; }
  .record-value { font-size: 26px; }
}


/* =====================================================================
   WANAStatsWeb 3.0.1 – echte Spezialrekorde + auffällige WANA-Fakten
   ===================================================================== */
/* Der Hinweis im Profil ist kein unscheinbarer Anhang an der Updatezeile
   mehr, sondern eine kompakte Highlight-Leiste. Sie ersetzt weiterhin nur
   die vorhandene Zeile und erzeugt keinen separaten großen Profilblock. */
.profile-page-updated {
  min-height: 34px !important;
  padding: 6px 9px !important;
  border: 1px solid color-mix(in srgb, var(--orange) 28%, var(--line)) !important;
  border-radius: 11px !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--orange) 9%, var(--surface)), color-mix(in srgb, var(--surface) 94%, transparent)) !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.profile-page-updated > span:first-child {
  margin-left: 1px;
}
.profile-page-updated #profileUpdated {
  color: var(--muted-2) !important;
  font-size: 8px !important;
  font-weight: 750 !important;
}
.profile-page-updated .profile-funfact-separator {
  margin: 0 8px !important;
}
.profile-funfact-label {
  flex: 0 0 auto;
  margin-right: 7px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--orange) 42%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--orange);
  font-size: 7px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.profile-funfact {
  color: var(--text) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
}

/* Die Hall-of-Fame-Karten tragen jetzt längere, eindeutig definierende Titel.
   Etwas mehr Zeilenhöhe verhindert, dass die Definition wie eine Nebeninfo wirkt. */
.record-card h3 {
  font-size: 13px !important;
  line-height: 1.18 !important;
  text-wrap: balance;
}
.record-kicker {
  letter-spacing: .095em !important;
}
.record-blurb {
  font-size: 9.5px !important;
  line-height: 1.48 !important;
}
.records-loading {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .profile-page-updated {
    justify-content: flex-start !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
  }
  .profile-page-updated > span:first-child,
  .profile-page-updated #profileUpdated,
  .profile-page-updated .profile-funfact-separator {
    display: none !important;
  }
  .profile-funfact-label {
    margin-right: 6px;
    font-size: 6.5px;
  }
  .profile-funfact {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    font-size: 9px !important;
  }
}

/* =====================================================================
   WANAStatsWeb 3.0.2 – echter Inhaltsfluss + Live-Extremrekorde
   ===================================================================== */
/* Der Hauptbereich reserviert nicht mehr künstlich fast eine Viewport-Höhe.
   Der Footer folgt dadurch direkt auf das letzte sichtbare Element. Wenn die
   Seite kürzer als der Bildschirm ist, entsteht auch kein nutzloser Scrollweg. */
#app {
  min-height: 0 !important;
}
.app-view,
.statistics-view {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
#homeView { padding-bottom: 0 !important; }
.statistics-accordion-stack { margin-bottom: 0 !important; }
.footer {
  margin-top: 22px !important;
  padding-top: 22px !important;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
}

/* Geschlossene Bereiche besitzen garantiert keinerlei Resthöhe oder eigene
   Scrollfläche. Das ergänzt das native <details>-Verhalten für Safari/WebViews. */
details.profile-collapsible:not([open]),
details.statistics-collapsible:not([open]) {
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
details.profile-collapsible:not([open]) > :not(summary),
details.statistics-collapsible:not([open]) > :not(summary) {
  display: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Die persönliche Bestmarke bleibt im bestehenden Profilkopf, ist aber nun
   klar als Rekordfläche erkennbar und nicht mehr nur eine winzige Nebeninfo. */
.profile-page-updated {
  min-height: 42px !important;
  padding: 7px 10px !important;
  border-color: color-mix(in srgb, var(--orange) 48%, var(--line)) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--orange) 16%, var(--surface)), color-mix(in srgb, var(--orange) 4%, var(--surface))) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 7%, transparent);
}
.profile-funfact-label {
  padding: 4px 7px !important;
  font-size: 7.5px !important;
  letter-spacing: .095em !important;
}
.profile-funfact {
  color: var(--text-strong) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

/* Spezialrekorde sind bewusst Ereignis-/Extremkarten. Lange, eindeutige Titel
   dürfen zwei bis drei Zeilen nutzen, ohne dass der Rekordwert untergeht. */
.statistics-records-section .record-card {
  min-height: 248px;
}
.statistics-records-section .record-card h3 {
  font-size: 14px !important;
  line-height: 1.2 !important;
}
.statistics-records-section .record-value {
  color: var(--record-accent) !important;
}
.statistics-records-section .record-blurb {
  color: color-mix(in srgb, var(--muted) 94%, white 6%);
}

@media (max-width: 720px) {
  .footer { margin-top: 15px !important; }
  .profile-page-updated {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }
  .profile-funfact-label { font-size: 6.8px !important; }
  .profile-funfact { font-size: 9.5px !important; }
  .statistics-records-section .record-card { min-height: 0; }
}


/* =====================================================================
   WANAStatsWeb 3.0.4 - echte MSPT-basierte Tick-Auslastung
   ===================================================================== */
.plan-metrics-strip { grid-template-columns: repeat(6, minmax(54px, auto)); }
.plan-metric[data-plan-metric="tickload"] strong { min-width: 48px; }
@media (min-width: 861px) and (max-width: 1500px) {
  .plan-metrics-strip { grid-template-columns: repeat(6, minmax(46px, auto)); }
  .plan-metric { padding-inline: 5px; }
}
@media (max-width: 860px) {
  .plan-metrics-strip { grid-template-columns: repeat(6, minmax(46px, 1fr)); }
}
@media (max-width: 560px) {
  .plan-metrics-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .plan-metric { padding-inline: 3px; }
  .plan-metric > span { font-size: 5.7px; }
  .plan-metric > strong { font-size: 8.1px; }
}
@media (max-width: 390px) {
  .plan-metric > span { font-size: 5.2px; letter-spacing: .025em; }
  .plan-metric > strong { font-size: 7.6px; }
}


/* =====================================================================
   WANAStatsWeb 3.0.5 – Responsive-Audit, Kampflog-Bilanz und Hilfe-Glossar
   ===================================================================== */

/* 3.0.4 enthielt den Tick-Block versehentlich als escaped Text. Die bereinigte
   3.0.5-Datei enthält ihn wieder als echtes CSS; TICK bleibt damit der sechste
   Live-Wert auf Desktop und Mobile. */
.plan-metrics-strip { grid-template-columns: repeat(6, minmax(54px, auto)); }
.plan-metric[data-plan-metric="tickload"] strong { min-width: 48px; }

/* Das kompakte Menü gilt bis Tablet/iPhone-Querformat wirklich für den ganzen
   Wrapper und nicht nur für den darin unsichtbaren Button. */
@media (max-width: 1180px) {
  .main-nav { display: none !important; }
  .mobile-menu-wrap { display: inline-flex !important; }
  .mobile-menu-button { display: inline-flex !important; }
}
@media (min-width: 1181px) {
  .mobile-menu-wrap { display: none !important; }
}

/* iPhone-Querformat: Safe-Area nur einmal berücksichtigen. Vorher addierten
   Body-Padding und Shell-Rand sich und ließen rechts unnötig viel Leerraum. */
@media (max-width: 1180px) and (orientation: landscape) {
  body { padding-left: 0 !important; padding-right: 0 !important; }
  .shell {
    width: auto !important;
    margin-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    margin-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }
  .topbar { max-width: none !important; }
}

.mobile-menu-panel .nav-text-glyph {
  display: inline-flex;
  width: 18px;
  justify-content: center;
  color: var(--orange);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
}

/* Auf schmalem Hochkant-Handy ist nicht nur der Pfeil, sondern die komplette
   geschlossene Karte bzw. die Kopfzeile ein eindeutiger Tap-Bereich. */
@media (max-width: 720px) and (orientation: portrait) {
  .home-collapsible-panel.is-mobile-collapsed,
  .home-collapsible-panel .task-feed-heading { cursor: pointer; }
}

/* Glow und Hintergrund dürfen niemals über die abgerundete Karte hinausragen. */
.home-online-panel,
.home-console-panel,
.task-feed-panel {
  overflow: hidden !important;
  isolation: isolate;
}
.home-online-panel .panel-glow,
.home-console-panel .panel-glow {
  inset: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  z-index: 0;
}
.home-online-panel > :not(.panel-glow),
.home-console-panel > :not(.panel-glow) { position: relative; z-index: 1; }

/* Kampflog: Verlust ist semantisch rot, Sieg grün – unabhängig vom Viewport. */
.combat-fighter.winner .combat-fighter-copy small { color: var(--green) !important; }
.combat-fighter.loser .combat-fighter-copy small { color: var(--danger) !important; }

/* Vier Überblickskarten ergeben ein ruhiges 2x2-Raster. */
.combat-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.combat-winrate-value { color: var(--green) !important; min-width: 70px; text-align: right; }
.combat-winrate-row .combat-player-copy small { white-space: nowrap; }

/* Direkte Bilanz im Zentrum jedes historischen Kampfes. */
.combat-fight-center { gap: 4px; }
.combat-direct-record {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--orange) 22%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--orange) 5%, var(--surface-strong));
}
.combat-direct-record span {
  color: var(--muted-2);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}
.combat-direct-record strong {
  color: var(--text-strong);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* Mobile: beide Köpfe benutzen exakt dieselbe feste Mittelspalte. Lange Namen
   verändern die Kopfposition nicht mehr. */
@media (max-width: 620px) {
  .combat-fighter,
  .combat-fighter.winner,
  .combat-fighter.loser {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important;
    width: 100% !important;
    justify-items: stretch !important;
    align-items: center !important;
    text-align: left !important;
    gap: 9px !important;
  }
  .combat-fighter .avatar-link,
  .combat-fighter.winner .avatar-link,
  .combat-fighter.loser .avatar-link {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    order: 0 !important;
    transform: none !important;
  }
  .combat-fighter-copy,
  .combat-fighter.winner .combat-fighter-copy,
  .combat-fighter.loser .combat-fighter-copy {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    text-align: left !important;
    min-width: 0;
    max-width: 100% !important;
  }
  .combat-fighter-copy strong { max-width: min(45vw, 220px); }
  .combat-direct-record { padding: 4px 8px; }
  .combat-direct-record span { font-size: 6.3px; }
  .combat-direct-record strong { font-size: 11px; }
  .combat-overview-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 621px) and (max-width: 980px) {
  .combat-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Hilfe: wichtige Begriffe sind sichtbar erklärbar, ohne den Fließtext mit
   langen Klammererklärungen zu überladen. */
.help-glossary-term {
  color: color-mix(in srgb, var(--orange) 84%, white 16%);
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
  border-radius: 4px;
  outline: none;
}
.help-glossary-term:hover,
.help-glossary-term:focus-visible {
  color: var(--gold);
  background: color-mix(in srgb, var(--orange) 8%, transparent);
}
.help-glossary-tooltip {
  position: fixed;
  z-index: 220;
  display: none;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--orange) 44%, var(--line));
  border-radius: 14px;
  background: rgba(16, 14, 11, .98);
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
  color: var(--text);
  pointer-events: auto;
}
.help-glossary-tooltip.is-visible { display: block; }
.help-glossary-tooltip .help-glossary-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--orange);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .18em;
}
.help-glossary-tooltip > strong { display: block; font-size: 14px; line-height: 1.2; }
.help-glossary-tooltip p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.52; }
.help-glossary-commands { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.help-glossary-commands code {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-strong);
  color: var(--text-strong);
  font-size: 8.5px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .plan-metrics-strip { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .plan-metric { padding-inline: 3px !important; }
  .plan-metric > span { font-size: 5.7px !important; }
  .plan-metric > strong { font-size: 8.1px !important; }
  .help-glossary-tooltip { padding: 12px 13px; }
  .help-glossary-tooltip > strong { font-size: 13px; }
  .help-glossary-tooltip p { font-size: 9.5px; }
}

/* =====================================================================
   WANAStatsWeb 3.1.0 – Homepage, Metriken, Kampflog und Profil-Rekorde
   ===================================================================== */

/* Der Landingpage-Abschluss rückt etwas hoch, ohne die drei Live-Panels zu
   verkleinern. Dadurch passt die Startseite auf typischen Desktop-Höhen eher
   ohne vertikalen Scrollbalken. */
.hero { padding-bottom: 13px !important; }
#homeView .spotlight { margin-top: -3px !important; margin-bottom: 12px !important; }

/* Exakt fünf Live-Metriken in der gewünschten Reihenfolge. */
.plan-metrics-strip { grid-template-columns: repeat(5, minmax(58px, auto)) !important; }
.plan-metric { text-align: center !important; }
.plan-metric > span {
  width: 100%;
  display: block;
  text-align: center !important;
}

/* Lesbarere, bewusst nicht so fette Graph-Beschriftungen. */
.plan-chart-y-label,
.plan-chart-x-label {
  fill: color-mix(in srgb, var(--text) 78%, var(--muted) 22%) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  font-synthesis: none;
}
.plan-chart-summary {
  font-size: 12px !important;
  font-weight: 500 !important;
}
.plan-window-label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.plan-window-stat small {
  font-size: 8.8px !important;
  font-weight: 500 !important;
}
.plan-window-stat b {
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.plan-window-row.is-health-good .plan-window-label,
.plan-window-row.is-health-good .plan-window-stat b,
.plan-chart-summary.is-health-good { color: var(--green) !important; }
.plan-window-row.is-health-bad .plan-window-label,
.plan-window-row.is-health-bad .plan-window-stat b,
.plan-chart-summary.is-health-bad { color: var(--danger) !important; }
.plan-window-row.is-health-good { background: color-mix(in srgb, var(--green) 4%, transparent); }
.plan-window-row.is-health-bad { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.plan-window-row.is-selected.is-health-good { border-color: color-mix(in srgb, var(--green) 48%, var(--line)) !important; }
.plan-window-row.is-selected.is-health-bad { border-color: color-mix(in srgb, var(--danger) 52%, var(--line)) !important; }

/* Fünf Aufgaben passen in das vorhandene Panel; ältere Breakpoints dürfen die
   fünfte Zeile nicht mehr verstecken. */
.task-feed-panel .task-feed-entry { display: grid !important; }
.task-feed-list { min-height: 0 !important; overflow: hidden !important; }
.task-feed-entry { padding-top: 6px !important; padding-bottom: 6px !important; }
.task-feed-copy strong { line-height: 1.2 !important; }
.task-feed-copy time { margin-top: 2px !important; }

/* Gerade-online bekommt dieselbe klare Seitensteuerung wie Chroniken. */
.home-online-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}
.home-online-pagination {
  margin-top: 7px;
  padding-top: 7px !important;
}
.home-online-grid { align-content: start; overflow: hidden; }
.home-online-empty { min-height: 0 !important; }

/* Kampflog in zwei einklappbaren Themenblöcken. */
.combat-page-collapsible {
  margin: 0 0 14px !important;
  border: 1px solid color-mix(in srgb, var(--orange) 14%, var(--line));
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  overflow: clip;
}
.combat-page-collapsible > summary {
  min-height: 78px;
  padding: 16px 20px !important;
}
.combat-collapsible-body { padding: 0 14px 14px; }
.combat-top-section .combat-overview-grid { margin: 0 !important; }
.combat-history-body .combat-pagination { margin-top: 14px; }

/* Auf breiten Desktops nutzen die vier Chronikkarten die volle verfügbare
   Breite – keine schmale Insel mehr links mit leerem Raum rechts. */
.combat-fights-list {
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
}
.combat-fight-row { width: 100% !important; max-width: none !important; }
@media (max-width: 1500px) {
  .combat-fights-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1000px) {
  .combat-fights-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .combat-fights-list { grid-template-columns: 1fr !important; }
  .combat-collapsible-body { padding-inline: 8px; }
}

/* Profilkopf: persönliche Bestmarke beginnt ganz links. */
.profile-page-updated {
  justify-content: flex-start !important;
  gap: 8px !important;
}
.profile-page-updated .profile-funfact-label { margin-left: 0 !important; }
.profile-meta-grid > div > span {
  white-space: normal !important;
  line-height: 1.15 !important;
}

/* Dynamische Server-Rekorde eines Spielers. */
.profile-server-records-section { margin-top: 0 !important; }
.profile-server-records-intro {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}
.profile-server-records-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.profile-server-record-card {
  --record-accent: var(--orange);
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-color: color-mix(in srgb, var(--record-accent) 32%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--record-accent) 8%, var(--surface)), var(--surface));
}
.profile-server-record-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--record-accent);
  background: color-mix(in srgb, var(--record-accent) 10%, transparent);
  font-size: 19px;
  font-weight: 800;
}
.profile-server-record-copy { min-width: 0; }
.profile-server-record-copy small {
  display: block;
  margin-bottom: 3px;
  color: var(--record-accent);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .1em;
}
.profile-server-record-copy h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 11px;
  line-height: 1.2;
}
.profile-server-record-value {
  display: block;
  margin-top: 5px;
  color: var(--record-accent);
  font-size: 14px;
  line-height: 1.1;
}
.profile-server-records-empty { margin-top: 4px; }
@media (max-width: 980px) {
  .profile-server-records-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .profile-server-records-grid { grid-template-columns: 1fr; }
}


/* 3.1.0 Feinschliff: Startseiten-Hauptwertung etwas höher und Kampflog
   auf großen Monitoren bewusst breiter als die übrigen Inhaltsseiten. */
#homeView .spotlight { padding-top: 16px !important; }
@media (min-width: 1450px) {
  body[data-view="combat"] #app.shell {
    width: min(1720px, calc(100% - 42px));
  }
}


/* =====================================================================
   WANAStatsWeb 3.1.1 – einheitliche Klappkarten, 6 Live-Metriken,
   lesbare Graph-Achsen und ruhige Profil-Serverrekorde
   ===================================================================== */

/* TPS, TICK, CPU, RAM, PING und SPIELER – Spieler ist wieder Teil der Leiste. */
.plan-metrics-strip { grid-template-columns: repeat(6, minmax(58px, auto)) !important; }
@media (min-width: 861px) and (max-width: 1500px) {
  .plan-metrics-strip { grid-template-columns: repeat(6, minmax(48px, auto)) !important; }
}
@media (max-width: 860px) {
  .plan-metrics-strip { grid-template-columns: repeat(6, minmax(48px, 1fr)) !important; }
}
@media (max-width: 560px) {
  .plan-metrics-strip { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* Achsen bewusst dünn, reinweiß und ohne Kontur/Filter. */
.plan-chart-y-label,
.plan-chart-x-label {
  fill: #fff !important;
  stroke: none !important;
  filter: none !important;
  opacity: .92;
  font-size: 12.5px !important;
  font-weight: 300 !important;
  font-synthesis: none !important;
  paint-order: normal !important;
}

/* Statistiken und Kampflog verwenden exakt dieselbe Überschriftengröße wie Elite-Bosse. */
:is(#globalView, #combatView, #eliteBossesView) details.profile-collapsible > summary h2 {
  margin-top: 2px !important;
  font-size: clamp(18px, 1.75vw, 25px) !important;
  line-height: 1.04 !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
}
@media (max-width: 760px) {
  :is(#globalView, #combatView, #eliteBossesView) details.profile-collapsible > summary h2 { font-size: 18px !important; }
}
@media (max-width: 520px) {
  :is(#globalView, #combatView, #eliteBossesView) details.profile-collapsible > summary h2 { font-size: 16px !important; }
}

/* Server-Rekorde: offizielle Kategorie-SVGs statt Sonderzeichen und etwas größere Typografie. */
.profile-server-record-card {
  min-height: 114px;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}
.profile-server-record-icon {
  width: 42px;
  height: 42px;
  font-size: 0;
}
.profile-server-record-icon .metric-icon {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--record-accent);
}
.profile-server-record-icon .metric-icon svg { width: 23px; height: 23px; }
.profile-server-record-copy small { font-size: 8.2px; line-height: 1.15; }
.profile-server-record-copy h3 { font-size: 13px; line-height: 1.22; }
.profile-server-record-value { font-size: 16px; line-height: 1.12; }

/* =====================================================================
   WANAStatsWeb 3.1.2 – visuelle Gleichheit der Klappüberschriften,
   kollisionsfreier Profil-Rekord und 6 Metriken garantiert in EINER Zeile
   ===================================================================== */

/*
 * EINHEITLICHE WEISSE KLAPP-ÜBERSCHRIFTEN
 * Statistiken, Kampflog und Elite-Bosse benutzen absichtlich exakt dieselbe
 * Typografie. Explizite Selektoren stehen ganz am Dateiende, damit keine
 * ältere Seitenregel (z. B. 34px auf der Statistikseite) mehr gewinnen kann.
 */
#globalView details.statistics-collapsible > summary .statistics-summary-copy h2,
#combatView details.combat-page-collapsible > summary.section-heading h2,
#eliteBossesView details.elite-page-collapsible > summary.section-heading h2 {
  margin: 2px 0 0 !important;
  font-size: clamp(18px, 1.75vw, 25px) !important;
  line-height: 1.04 !important;
  font-weight: 850 !important;
  letter-spacing: -.028em !important;
}
@media (max-width: 760px) {
  #globalView details.statistics-collapsible > summary .statistics-summary-copy h2,
  #combatView details.combat-page-collapsible > summary.section-heading h2,
  #eliteBossesView details.elite-page-collapsible > summary.section-heading h2 {
    font-size: 18px !important;
  }
}
@media (max-width: 520px) {
  #globalView details.statistics-collapsible > summary .statistics-summary-copy h2,
  #combatView details.combat-page-collapsible > summary.section-heading h2,
  #eliteBossesView details.elite-page-collapsible > summary.section-heading h2 {
    font-size: 16px !important;
  }
}

/*
 * PROFILKOPF: Label und weißer Rekordtext bekommen eigene Grid-Spalten.
 * Dadurch können sie sich unabhängig von Namens-/Rekordlänge niemals
 * überlagern oder übereinander zeichnen.
 */
#profileContent .profile-page-updated {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 9px !important;
  row-gap: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
#profileContent .profile-page-updated .profile-funfact-label {
  grid-column: 1 !important;
  min-width: max-content !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
#profileContent .profile-page-updated .profile-funfact {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 1 !important;
}
@media (max-width: 520px) {
  #profileContent .profile-page-updated {
    grid-template-columns: 1fr !important;
    row-gap: 5px !important;
  }
  #profileContent .profile-page-updated .profile-funfact-label,
  #profileContent .profile-page-updated .profile-funfact {
    grid-column: 1 !important;
    justify-self: start !important;
  }
  #profileContent .profile-page-updated .profile-funfact {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
  }
}

/*
 * LEISTUNGSLEISTE: exakt sechs Spalten und exakt eine Zeile.
 * Auch falls eine ältere responsive Regel noch fünf Spalten definiert, ist
 * SPIELER fest die sechste Spalte und kann nicht in eine zweite Grid-Zeile
 * fallen. Die komplette Leiste darf auf Mobile als Block in die nächste
 * Header-Zeile wechseln – die sechs Werte selbst bleiben aber nebeneinander.
 */
#planMetrics.plan-metrics-strip {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(54px, auto)) !important;
  grid-template-rows: minmax(42px, auto) !important;
  grid-auto-flow: column !important;
  grid-auto-rows: 0 !important;
  align-items: stretch !important;
  white-space: nowrap !important;
}
#planMetrics > .plan-metric { min-width: 0 !important; }
#planMetrics > .plan-metric:nth-of-type(1) { grid-column: 1 !important; grid-row: 1 !important; }
#planMetrics > .plan-metric:nth-of-type(2) { grid-column: 2 !important; grid-row: 1 !important; }
#planMetrics > .plan-metric:nth-of-type(3) { grid-column: 3 !important; grid-row: 1 !important; }
#planMetrics > .plan-metric:nth-of-type(4) { grid-column: 4 !important; grid-row: 1 !important; }
#planMetrics > .plan-metric:nth-of-type(5) { grid-column: 5 !important; grid-row: 1 !important; }
#planMetrics > .plan-metric:nth-of-type(6) { grid-column: 6 !important; grid-row: 1 !important; }
@media (min-width: 861px) and (max-width: 1500px) {
  #planMetrics.plan-metrics-strip {
    grid-template-columns: repeat(6, minmax(47px, auto)) !important;
  }
  #planMetrics > .plan-metric { padding-inline: 5px !important; }
}
@media (max-width: 860px) {
  #planMetrics.plan-metrics-strip {
    width: 100% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  #planMetrics > .plan-metric { padding-inline: 3px !important; }
  #planMetrics > .plan-metric > span { font-size: 5.7px !important; letter-spacing: .025em !important; }
  #planMetrics > .plan-metric > strong { font-size: 8.1px !important; }
}
@media (max-width: 360px) {
  #planMetrics > .plan-metric > span { font-size: 5.1px !important; }
  #planMetrics > .plan-metric > strong { font-size: 7.5px !important; }
}


/* =====================================================================
   WANAStatsWeb 3.1.3 – finaler Kategorien-/Profilkopf-Fix
   ===================================================================== */

/* Statistiken, Kampflog und Elite-Bosse: identische weiße Klapptitel.
   Feste gemeinsame Regel statt separater Größen, damit sie pixelgleich sind. */
#globalView details.statistics-collapsible > summary .statistics-summary-copy h2,
#combatView details.combat-page-collapsible > summary.section-heading h2,
#eliteBossesView details.elite-page-collapsible > summary.section-heading h2 {
  margin: 2px 0 0 !important;
  font-size: clamp(18px, 1.75vw, 25px) !important;
  line-height: 1.04 !important;
  font-weight: 850 !important;
  letter-spacing: -.028em !important;
}
@media (max-width: 760px) {
  #globalView details.statistics-collapsible > summary .statistics-summary-copy h2,
  #combatView details.combat-page-collapsible > summary.section-heading h2,
  #eliteBossesView details.elite-page-collapsible > summary.section-heading h2 {
    font-size: 18px !important;
  }
}
@media (max-width: 520px) {
  #globalView details.statistics-collapsible > summary .statistics-summary-copy h2,
  #combatView details.combat-page-collapsible > summary.section-heading h2,
  #eliteBossesView details.elite-page-collapsible > summary.section-heading h2 {
    font-size: 16px !important;
  }
}

/* Die generische .updated-Regel zeichnet das ERSTE span als grünen Live-Punkt.
   Im Profil ist dieses erste span aber das Label "PERSÖNLICHE BESTMARKE".
   Deshalb werden die Punkt-Eigenschaften hier vollständig zurückgesetzt. */
#profileContent .profile-page-updated > .profile-funfact-label:first-child {
  width: auto !important;
  height: auto !important;
  min-width: max-content !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 7px !important;
  border: 1px solid color-mix(in srgb, var(--orange) 42%, var(--line)) !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--orange) 12%, transparent) !important;
  box-shadow: none !important;
  color: var(--orange) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: none !important;
}

/* Label und Rekordwert sind zwei echte, getrennte Spalten. */
#profileContent .profile-page-updated {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
#profileContent .profile-page-updated > .profile-funfact {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  position: static !important;
}
@media (max-width: 520px) {
  #profileContent .profile-page-updated {
    grid-template-columns: 1fr !important;
    row-gap: 5px !important;
  }
  #profileContent .profile-page-updated > .profile-funfact-label:first-child,
  #profileContent .profile-page-updated > .profile-funfact {
    justify-self: start !important;
  }
  #profileContent .profile-page-updated > .profile-funfact {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}


/* =====================================================================
   WANAStatsWeb 3.1.4 – Beschreibungen + einheitliche Kampflog-Breite
   ===================================================================== */

/* Kampflog und Elite-Bosse bekommen unter jedem Klapptitel dieselbe kleine
   Inhaltsbeschreibung wie die Statistik-Kategorien. */
#combatView .collapsible-summary-copy,
#eliteBossesView .collapsible-summary-copy {
  min-width: 0;
}
#combatView .collapsible-summary-copy .kicker,
#eliteBossesView .collapsible-summary-copy .kicker {
  display: block;
  margin-bottom: 3px;
}
#combatView .collapsible-summary-copy p,
#eliteBossesView .collapsible-summary-copy p {
  margin: 6px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}

/* Der Kampflog benutzt wieder exakt die normale Seitenbreite der Statistik-
   seite. Die alte 1720px-Sonderbreite wird damit bewusst aufgehoben. */
body[data-view="combat"] #app.shell {
  width: var(--shell) !important;
}

/* Auch die beiden großen Kampflog-Rahmen und ihr Inhalt bleiben innerhalb der
   normalen 1380px-Shell und springen beim Seitenwechsel nicht mehr breiter. */
#combatView .combat-page-collapsible {
  width: 100% !important;
  max-width: 100% !important;
}
#combatView .combat-collapsible-body {
  width: 100% !important;
  max-width: 100% !important;
}

/* TOP 5 bleibt ein kompaktes 2x2-Raster. Durch die normale Seitenbreite sind
   alle vier Karten deutlich schmaler und entsprechen optisch den übrigen
   Unterkategorien. */
#combatView .combat-overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Letzte Kämpfe: sechs Einträge pro Seite = 3 Spalten x 2 Reihen auf Desktop. */
#combatView .combat-fights-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (max-width: 1000px) {
  #combatView .combat-fights-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  #combatView .collapsible-summary-copy p,
  #eliteBossesView .collapsible-summary-copy p {
    font-size: 10px;
    line-height: 1.4;
  }
}
@media (max-width: 620px) {
  #combatView .combat-overview-grid,
  #combatView .combat-fights-list {
    grid-template-columns: 1fr !important;
  }
  #combatView .collapsible-summary-copy p,
  #eliteBossesView .collapsible-summary-copy p {
    display: none;
  }
}


/* =====================================================================
   WANAStatsWeb 3.1.5 – Elite-Boss Hero & Katalog-Pagination
   ===================================================================== */

/* Der Status-Chip unter der Elite-Boss-Beschreibung ist entfernt. Dadurch
   entspricht die linke Hero-Spalte wieder exakt den anderen Unterseiten und
   der KPI-Kasten rechts sitzt auf derselben Höhe wie z.B. bei "Alle Spieler". */
#eliteBossesView .elite-boss-page-hero {
  align-items: end !important;
}
#eliteBossesView .elite-boss-page-hero > div:first-child {
  align-self: auto !important;
}
#eliteBossesView .elite-boss-kpis {
  align-self: end !important;
  margin-bottom: 0 !important;
}

/* Die dynamisch erzeugte Navigation des Boss-Katalogs hatte bisher nur den
   Klassennamen .pagination und damit kein eigenes Layout. Das führte dazu,
   dass Buttons und Seitenzähler direkt nebeneinander liefen bzw. überlappten.
   Jetzt nutzt sie dasselbe 3-Spalten-Prinzip wie die übrigen Paginationen,
   hält die Buttons aber bewusst kompakt. */
#eliteBossesView .elite-catalog-pagination {
  width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 16px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
}
#eliteBossesView .elite-catalog-pagination > span {
  min-width: 88px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
#eliteBossesView .elite-catalog-pagination .pagination-button {
  width: auto !important;
  min-width: 94px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: start !important;
  white-space: nowrap !important;
}
#eliteBossesView .elite-catalog-pagination .pagination-button:last-child {
  justify-self: end !important;
}

@media (max-width: 620px) {
  #eliteBossesView .elite-catalog-pagination {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #eliteBossesView .elite-catalog-pagination > span {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  #eliteBossesView .elite-catalog-pagination .pagination-button {
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
}


/* =====================================================================
   WANAStatsWeb 3.1.10 - Hilfe im Seitenstil + einklappbare Befehlsgruppen
   ===================================================================== */
/* Die Hilfe verwendet dieselben weichen Kartenradien wie Statistik,
   Kampflog und Bossseite statt kantiger Sonderboxen. */
#helpView .glass-card {
  border-radius: 18px !important;
}

/* Spieler- und Adminbefehle: gleiche Details-/Summary-Sprache wie die
   einklappbaren Bereiche bei Kämpfen und Elite-Bossen. */
#helpView details.help-command-collapsible {
  margin: 0 0 14px !important;
  padding: 0 !important;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--orange) 14%, var(--line));
  border-radius: 18px !important;
  background-color: var(--surface-solid);
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: var(--shadow-soft);
}
#helpView details.help-command-collapsible > summary.help-command-group-summary {
  list-style: none;
  min-height: 78px;
  margin: 0 !important;
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  user-select: none;
  transition: background .2s ease, border-color .2s ease;
}
#helpView details.help-command-collapsible > summary.help-command-group-summary::-webkit-details-marker { display: none; }
#helpView details.help-command-collapsible > summary.help-command-group-summary::marker { content: ''; }
#helpView details.help-command-collapsible > summary.help-command-group-summary:hover { background: var(--surface-hover); }
#helpView details.help-command-collapsible[open] > summary.help-command-group-summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--orange) 4%, var(--surface));
}
#helpView .help-command-group-summary .collapsible-summary-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
#helpView .help-command-group-summary .collapsible-summary-copy h2 {
  margin: 2px 0 0 !important;
  color: var(--text-strong);
  font-size: clamp(18px, 1.75vw, 25px) !important;
  line-height: 1.04 !important;
  font-weight: 850 !important;
  letter-spacing: -.028em !important;
}
#helpView .help-command-group-summary .collapsible-summary-copy p {
  margin: 0;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.45;
}
#helpView details.help-command-collapsible[open] .profile-collapse-indicator { transform: rotate(180deg); }
#helpView .help-command-collapsible-body {
  padding: 14px;
}
#helpView details.help-command-collapsible .help-command-list {
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-solid) 74%, transparent);
}

/* Die übrigen Hilfekarten folgen ebenfalls der Rundung der restlichen Seite. */
#helpView .help-detail-command,
#helpView .help-connect-guide,
#helpView .help-glossary-tooltip {
  border-radius: 13px;
}

@media (max-width: 760px) {
  #helpView .help-command-group-summary .collapsible-summary-copy h2 { font-size: 18px !important; }
}
@media (max-width: 620px) {
  #helpView .glass-card,
  #helpView details.help-command-collapsible { border-radius: 15px !important; }
  #helpView details.help-command-collapsible > summary.help-command-group-summary {
    min-height: 70px;
    padding: 14px 13px !important;
    gap: 10px;
  }
  #helpView .help-command-collapsible-body { padding: 8px; }
  #helpView .help-command-group-summary .collapsible-summary-copy p { font-size: 12px; }
}
@media (max-width: 520px) {
  #helpView .help-command-group-summary .collapsible-summary-copy h2 { font-size: 16px !important; }
}

/* 3.1.11: keine Layout-Aenderung; Cache-Bust fuer aktualisierte Hilfe. */

/* =====================================================================
   WANAStatsWeb 3.1.13 - Hilfe: sauberer Abstand Intro -> Kategorien
   ===================================================================== */
/* Die allgemeine Erklaerungsbox der Spieler-/Adminbefehle darf nicht
   direkt an der ersten einklappbaren Kategorie kleben. */
#helpView .help-section[data-help-section="player"] > .help-connect-note,
#helpView .help-section[data-help-section="admin"] > .help-connect-note {
  margin-bottom: 20px !important;
}

/* Falls Filter/Suche die erste sichtbare Gruppe aendert, bleibt der
   Abstand trotzdem stabil und unabhaengig von der konkreten Kategorie. */
#helpView .help-section[data-help-section="player"] > .help-connect-note + details.help-command-collapsible,
#helpView .help-section[data-help-section="admin"] > .help-connect-note + details.help-command-collapsible {
  margin-top: 0 !important;
}

@media (max-width: 620px) {
  #helpView .help-section[data-help-section="player"] > .help-connect-note,
  #helpView .help-section[data-help-section="admin"] > .help-connect-note {
    margin-bottom: 16px !important;
  }
}

/* =====================================================================
   WANAStatsWeb 3.1.14 - Hilfe: Intro-Karten sauber im Seitenlayout
   ===================================================================== */
/* Spieler/Admin-Erklaerung bekommt eine robuste 2-Spalten-Struktur.
   Lange Texte werden nicht mehr in eine horizontale Flex-Zeile gepresst. */
#helpView .help-command-intro {
  margin-top: 14px;
  margin-bottom: 20px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: clamp(22px, 2.2vw, 34px);
  align-items: start;
  border-left: 3px solid var(--orange);
  box-sizing: border-box;
}
#helpView .help-command-intro,
#helpView .help-command-intro * {
  box-sizing: border-box;
}
#helpView .help-command-intro-label {
  min-width: 0;
  color: var(--text-strong);
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 850;
  overflow-wrap: break-word;
}
#helpView .help-command-intro-copy {
  min-width: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
  overflow-wrap: anywhere;
  word-break: normal;
}
#helpView .help-command-intro-copy p {
  margin: 0;
}
#helpView .help-command-intro-copy p + p {
  margin-top: 9px;
}
#helpView .help-command-intro-highlight {
  color: color-mix(in srgb, var(--text-strong) 92%, var(--muted));
  font-weight: 750;
}
#helpView .help-command-intro code {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  #helpView .help-command-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 21px 22px;
  }
}
@media (max-width: 620px) {
  #helpView .help-command-intro {
    margin-bottom: 16px;
    padding: 18px 16px;
    gap: 10px;
  }
  #helpView .help-command-intro-label {
    font-size: 14.5px;
  }
  #helpView .help-command-intro-copy {
    font-size: 14px;
    line-height: 1.55;
  }
}

/* =====================================================================
   WANAStatsWeb 3.1.18 – Arena-Wetterkarte + halbhohe Konsole
   ===================================================================== */
.home-weather-console-stack {
  grid-column: auto;
  min-width: 0;
  width: 100%;
  height: 340px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.home-weather-console-stack .home-weather-panel,
.home-weather-console-stack .home-console-panel {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}
.home-weather-panel {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  padding: 10px 13px 10px !important;
  border-color: color-mix(in srgb, #7cc8ff 26%, var(--line)) !important;
  background:
    radial-gradient(circle at 13% 8%, rgba(89, 169, 255, .12), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(255, 179, 71, .09), transparent 31%),
    color-mix(in srgb, var(--surface) 95%, #0b1622 5%) !important;
}
.home-weather-panel .panel-glow {
  inset: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  z-index: 0;
}
.home-weather-panel > :not(.panel-glow) { position: relative; z-index: 1; }
.home-weather-heading {
  min-height: 24px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid color-mix(in srgb, #7cc8ff 14%, var(--line)) !important;
}
.home-weather-heading > span b {
  color: #7cc8ff !important;
  font-size: 14px;
  line-height: 1;
  margin-right: 4px;
}
.home-weather-heading > small {
  color: var(--green) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
}
.home-weather-heading > small.offline { color: var(--muted-2) !important; }
.home-weather-body {
  min-height: 0;
  display: grid;
  grid-template-rows: 43px 27px minmax(0, 1fr);
  gap: 5px;
  padding-top: 6px;
}
.weather-now-row {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.weather-main-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 4px 12px rgba(44, 142, 220, .12));
}
.weather-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
}
.weather-svg.compact { width: 22px; height: 22px; stroke-width: 3.6; }
.weather-svg .wi-cloud { fill: rgba(213, 231, 244, .14); stroke: #c9d9e5; }
.weather-svg .wi-sun-core { fill: rgba(255, 190, 76, .22); stroke: #ffbd4a; }
.weather-svg .wi-sun-ray { stroke: #ffbd4a; }
.weather-svg .wi-rain { stroke: #68b8f4; }
.weather-svg .wi-snow { stroke: #cceeff; stroke-width: 2.6; }
.weather-svg .wi-bolt { fill: rgba(255, 196, 65, .22); stroke: #ffc441; }
.weather-now-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.weather-now-copy strong {
  flex: 0 0 auto;
  color: var(--text-strong);
  font-size: 28px;
  line-height: .94;
  font-weight: 830;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.weather-now-copy strong.is-cold { color: #79c9ff; }
.weather-now-copy strong.is-hot { color: #ff8b67; }
.weather-now-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
  font-size: 8.5px;
  font-weight: 760;
  letter-spacing: .01em;
}
.weather-calendar {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: end;
  gap: 1px 5px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, #7cc8ff 18%, var(--line));
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  white-space: nowrap;
}
.weather-calendar span {
  grid-column: 1 / -1;
  color: #dca04a;
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .03em;
}
.weather-calendar span[data-season="spring"] { color: #78d58a; }
.weather-calendar span[data-season="summer"] { color: #ffc75b; }
.weather-calendar span[data-season="autumn"] { color: #d99848; }
.weather-calendar span[data-season="winter"] { color: #84d5ff; }
.weather-calendar b,
.weather-calendar small {
  color: var(--text);
  font-size: 7px;
  line-height: 1;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}
.weather-calendar small { color: var(--muted-2); }
.weather-probabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.weather-probabilities > div {
  min-width: 0;
  height: 27px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, #7cc8ff 12%, var(--line));
  border-radius: 8px;
  background: rgba(255,255,255,.018);
}
.weather-prob-icon {
  width: 13px;
  text-align: center;
  font-size: 9px;
  line-height: 1;
}
.weather-prob-icon.rain { color: #68b8f4; }
.weather-prob-icon.snow { color: #cceeff; }
.weather-prob-icon.thunder { color: #ffc441; }
.weather-prob-icon.precip { color: #9baebc; }
.weather-probabilities small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted-2);
  font-size: 6.3px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .02em;
}
.weather-probabilities b {
  color: var(--text-strong);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.weather-forecast-strip {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.weather-forecast-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  grid-template-rows: 13px 16px;
  align-items: center;
  column-gap: 4px;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, #7cc8ff 10%, var(--line));
  border-radius: 8px;
  background: rgba(255,255,255,.014);
  overflow: hidden;
}
.weather-forecast-card.is-now {
  border-color: color-mix(in srgb, #7cc8ff 34%, var(--line));
  background: color-mix(in srgb, #62b9f3 7%, transparent);
}
.weather-forecast-card small {
  grid-column: 1;
  grid-row: 1;
  color: var(--muted-2);
  font-size: 6.1px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.weather-forecast-icon {
  grid-column: 1;
  grid-row: 2;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
}
.weather-forecast-card b {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--text-strong);
  font-size: 8.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.weather-forecast-card em {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%);
  font-size: 5.8px;
  font-style: normal;
  font-weight: 760;
}
.home-weather-unavailable {
  height: calc(100% - 30px);
  display: grid;
  place-items: center;
  padding: 8px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}

/* Die Konsole teilt sich jetzt die bisherige rechte Kartenhöhe mit dem Wetter. */
.home-weather-console-stack .home-console-panel {
  padding: 9px 13px 8px !important;
}
.home-weather-console-stack .home-console-heading {
  min-height: 23px !important;
  padding-bottom: 5px !important;
}
.home-weather-console-stack .home-console-viewport {
  margin-top: 5px;
  padding: 5px 7px;
  border-radius: 8px;
}
.home-weather-console-stack .home-console-log {
  font-size: 7.25px;
  line-height: 1.32;
}
.home-weather-console-stack .home-console-readonly {
  padding-top: 4px;
  font-size: 6.4px;
}

@media (max-width: 1120px) {
  .home-weather-console-stack {
    grid-column: 1 / -1 !important;
    height: 330px;
  }
}

@media (max-width: 720px) {
  .home-weather-console-stack {
    grid-column: auto !important;
    height: auto !important;
    display: grid;
    grid-template-rows: auto auto;
    gap: 12px;
  }
  .home-weather-console-stack .home-weather-panel,
  .home-weather-console-stack .home-console-panel {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
  .home-weather-body {
    grid-template-rows: 58px 38px minmax(0,1fr);
    gap: 8px;
    padding-top: 9px;
  }
  .weather-now-row { grid-template-columns: 55px minmax(0,1fr) auto; gap: 9px; }
  .weather-main-icon { width: 54px; height: 54px; }
  .weather-now-copy { display: grid; gap: 3px; align-content: center; }
  .weather-now-copy strong { font-size: 34px; }
  .weather-now-copy span { font-size: 9.5px; }
  .weather-calendar { padding: 7px 8px; }
  .weather-calendar span { font-size: 9px; }
  .weather-calendar b, .weather-calendar small { font-size: 7.5px; }
  .weather-probabilities > div { height: 38px; grid-template-columns: 15px minmax(0,1fr) auto; }
  .weather-probabilities small { font-size: 7.2px; }
  .weather-probabilities b { font-size: 9.5px; }
  .weather-forecast-card {
    grid-template-columns: 24px minmax(0,1fr);
    grid-template-rows: 16px 22px;
    padding: 5px 6px;
  }
  .weather-forecast-card small { font-size: 7px; }
  .weather-forecast-card b { font-size: 10px; }
  .weather-forecast-card em { font-size: 6.6px; }
  .weather-forecast-icon { width: 24px; height: 24px; }
  .home-weather-console-stack .home-console-log { font-size: 8.2px; }
}

@media (max-width: 720px) and (orientation: portrait) {
  .home-weather-console-stack .home-collapsible-panel.is-mobile-collapsed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 480px) {
  .weather-probabilities { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-weather-body { grid-template-rows: 58px 82px minmax(0,1fr); }
  .weather-forecast-strip {
    grid-template-columns: repeat(5, 72px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .weather-forecast-strip::-webkit-scrollbar { display: none; }
}

/* =====================================================================
   WANAStatsWeb 3.1.19 – Weather app redesign
   ===================================================================== */
.home-weather-panel {
  padding: 9px 13px 9px !important;
  border-color: color-mix(in srgb, #6fbdf3 20%, var(--line)) !important;
  background:
    radial-gradient(circle at 7% -15%, rgba(78, 165, 224, .10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.016), transparent 46%),
    color-mix(in srgb, var(--surface) 97%, #0b141b 3%) !important;
}
.home-weather-heading {
  min-height: 24px !important;
  padding-bottom: 6px !important;
  border-bottom-color: var(--line) !important;
}
.home-weather-heading-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-weather-title-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: rgba(115, 195, 245, .08);
  stroke: #72c6f7;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-weather-heading > small {
  color: var(--green) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}
.home-weather-body {
  min-height: 0;
  display: grid;
  grid-template-rows: 53px minmax(0, 1fr);
  gap: 7px;
  padding-top: 7px;
}
.weather-current-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 103px;
  gap: 10px;
  align-items: center;
}
.weather-main-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 6px 13px rgba(66, 162, 224, .10));
}
.weather-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.7;
}
.weather-svg.compact { width: 19px; height: 19px; stroke-width: 3.1; }
.weather-current-copy {
  min-width: 0;
  height: 49px;
  display: grid;
  align-content: center;
  gap: 3px;
}
.weather-current-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.weather-current-head > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
}
.weather-current-time {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted-2);
  font-size: 7.4px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.weather-current-time svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.weather-current-bottom {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.weather-current-temp {
  flex: 0 0 auto;
  color: var(--text-strong);
  font-size: 27px;
  line-height: .95;
  font-weight: 850;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.weather-current-temp.is-cold { color: #7dcfff; }
.weather-current-temp.is-hot { color: #ff9673; }
.weather-calendar-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--muted-2);
  font-size: 6.9px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.weather-calendar-line > span {
  color: #d99848;
  font-size: 7.5px;
  font-weight: 900;
}
.weather-calendar-line > span[data-season="spring"] { color: #78d58a; }
.weather-calendar-line > span[data-season="summer"] { color: #ffc75b; }
.weather-calendar-line > span[data-season="autumn"] { color: #d99848; }
.weather-calendar-line > span[data-season="winter"] { color: #84d5ff; }
.weather-calendar-line i {
  color: color-mix(in srgb, var(--muted-2) 45%, transparent);
  font-size: 5px;
  font-style: normal;
}
.weather-calendar-line b,
.weather-calendar-line small {
  color: var(--muted-2);
  font-size: inherit;
  font-weight: 800;
}
.weather-precip-card {
  height: 44px;
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, #72c6f7 18%, var(--line));
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(105, 188, 239, .055), rgba(255,255,255,.012));
}
.weather-precip-card > svg {
  width: 19px;
  height: 19px;
  fill: rgba(91, 182, 239, .07);
  stroke: #68b8f4;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.weather-precip-card > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.weather-precip-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-2);
  font-size: 6.2px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .025em;
}
.weather-precip-card strong {
  color: #8fd3ff;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.weather-forecast-row {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}
.weather-forecast-label {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}
.weather-forecast-label strong {
  color: var(--text-strong);
  font-size: 7.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.weather-forecast-label small {
  color: var(--muted-2);
  font-size: 5.8px;
  line-height: 1.25;
  font-weight: 760;
}
.weather-forecast-strip {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #72c6f7 13%, var(--line));
  border-radius: 11px;
  background: rgba(255,255,255,.012);
}
.weather-forecast-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: 13px 19px;
  align-content: center;
  align-items: center;
  column-gap: 4px;
  padding: 2px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
.weather-forecast-card + .weather-forecast-card {
  border-left: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
}
.weather-forecast-card small {
  grid-column: 1 / -1;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-2);
  font-size: 5.8px;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.weather-forecast-core {
  grid-column: 1;
  grid-row: 2;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}
.weather-forecast-icon {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
}
.weather-forecast-card b {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: start;
  color: var(--text-strong);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.weather-forecast-card em {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  align-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text) 68%, var(--muted) 32%);
  font-size: 5.5px;
  line-height: 1;
  font-style: normal;
  font-weight: 740;
  padding-bottom: 1px;
}
.weather-forecast-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  padding: 0 10px;
  color: var(--muted-2);
  font-size: 7px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 720px) {
  .home-weather-console-stack .home-weather-panel,
  .home-weather-console-stack .home-console-panel {
    height: 258px !important;
    min-height: 258px !important;
    max-height: 258px !important;
  }
  .home-weather-body {
    grid-template-rows: 66px 78px;
    gap: 10px;
    padding-top: 10px;
  }
  .weather-current-row {
    grid-template-columns: 54px minmax(0,1fr) 112px;
    gap: 10px;
  }
  .weather-main-icon { width: 52px; height: 52px; }
  .weather-current-copy { height: 58px; gap: 5px; }
  .weather-current-head > strong { font-size: 12px; }
  .weather-current-time { font-size: 8px; }
  .weather-current-temp { font-size: 32px; }
  .weather-calendar-line { font-size: 7.4px; }
  .weather-calendar-line > span { font-size: 8px; }
  .weather-precip-card { height: 52px; }
  .weather-precip-card small { font-size: 6.8px; }
  .weather-precip-card strong { font-size: 16px; }
  .weather-forecast-row { grid-template-columns: 70px minmax(0,1fr); gap: 9px; }
  .weather-forecast-label strong { font-size: 8px; }
  .weather-forecast-label small { font-size: 6.3px; }
  .weather-forecast-card { grid-template-columns: 24px minmax(0,1fr); grid-template-rows: 16px 25px; padding: 4px 7px; }
  .weather-forecast-card small { font-size: 6.6px; }
  .weather-forecast-icon, .weather-forecast-core { width: 23px; height: 23px; }
  .weather-forecast-card b { font-size: 10px; }
  .weather-forecast-card em { font-size: 6.2px; }
}

@media (max-width: 480px) {
  .home-weather-heading-title { font-size: 8.5px; letter-spacing: .07em; }
  .weather-current-row { grid-template-columns: 46px minmax(0,1fr) 94px; gap: 7px; }
  .weather-main-icon { width: 44px; height: 44px; }
  .weather-current-temp { font-size: 28px; }
  .weather-calendar-line { gap: 3px; font-size: 6.6px; }
  .weather-precip-card { grid-template-columns: 18px minmax(0,1fr); gap: 5px; padding: 0 7px; }
  .weather-precip-card > svg { width: 16px; height: 16px; }
  .weather-precip-card small { font-size: 5.8px; }
  .weather-precip-card strong { font-size: 14px; }
  .weather-forecast-row { grid-template-columns: 1fr; grid-template-rows: 20px 55px; gap: 5px; }
  .weather-forecast-label { display: flex; align-items: center; gap: 7px; }
  .weather-forecast-label small { font-size: 5.8px; }
  .weather-forecast-strip { overflow-x: auto; grid-auto-columns: 88px; scrollbar-width: none; }
  .weather-forecast-strip::-webkit-scrollbar { display: none; }
}

/* 3.1.19 review pass 1: Hero cards are flex containers in the base layout.
   Force the weather card into the intended vertical app layout. */
.home-weather-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
.home-weather-heading {
  width: 100% !important;
  flex: 0 0 auto !important;
  box-sizing: border-box;
}
.home-weather-body {
  width: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box;
}

/* 3.1.19 review pass 2: four wider forecast columns for legibility. */
.weather-forecast-row { grid-template-columns: 58px minmax(0, 1fr) !important; gap: 7px !important; }
.weather-forecast-label { align-content: center !important; }
.weather-forecast-label strong { font-size: 7.8px !important; }
.weather-forecast-card { padding-left: 7px !important; padding-right: 7px !important; }
.weather-forecast-card small { font-size: 6.4px !important; }
.weather-forecast-card b { font-size: 10.2px !important; }
.weather-forecast-card em { font-size: 6.1px !important; }
@media (max-width: 720px) {
  .weather-forecast-row { grid-template-columns: 64px minmax(0,1fr) !important; }
  .weather-forecast-label strong { font-size: 8.4px !important; }
  .weather-forecast-card small { font-size: 7px !important; }
  .weather-forecast-card b { font-size: 11px !important; }
  .weather-forecast-card em { font-size: 6.7px !important; }
}
@media (max-width: 480px) {
  .weather-forecast-row { grid-template-columns: 1fr !important; grid-template-rows: 18px 57px !important; }
}

/* 3.1.19 review pass 3: use the complete width for the forecast itself. */
.weather-forecast-row {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}


/* 3.1.20 Synced Weather UI ------------------------------------------------- */
.home-weather-body {
  grid-template-rows: 22px 62px minmax(58px, 1fr) !important;
  gap: 7px !important;
  padding-top: 7px !important;
}
.weather-calendar-top {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0 3px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.weather-calendar-top > span {
  color: #c77a36;
  font-size: 10.5px;
  font-weight: 900;
}
.weather-calendar-top > span[data-season="spring"] { color: #72cf85; }
.weather-calendar-top > span[data-season="summer"] { color: #f0c652; }
.weather-calendar-top > span[data-season="autumn"] { color: #c77a36; }
.weather-calendar-top > span[data-season="winter"] { color: #83d1ff; }
.weather-calendar-top i { color: color-mix(in srgb, var(--muted-2) 48%, transparent); font-style: normal; }
.weather-calendar-top small,
.weather-calendar-top b { color: var(--text); font-size: 9px; font-weight: 800; }
.weather-current-row {
  grid-template-columns: 58px minmax(0, 1fr) 128px !important;
  gap: 12px !important;
  align-items: center !important;
}
.weather-main-icon { width: 56px !important; height: 56px !important; }
.weather-current-copy {
  height: auto !important;
  min-width: 0;
  display: grid !important;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: center;
  gap: 1px !important;
  text-align: center;
}
.weather-current-condition {
  color: var(--text-strong);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.weather-current-temp {
  font-size: 30px !important;
  line-height: .98 !important;
  margin-top: 2px;
}
.weather-current-time {
  margin-top: 1px;
  justify-content: center;
  font-size: 7.5px !important;
}
.weather-precip-card {
  height: 50px !important;
  grid-template-columns: 22px minmax(0,1fr) !important;
  gap: 8px !important;
  padding: 0 11px !important;
}
.weather-precip-card small {
  font-size: 6.6px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow: visible !important;
}
.weather-precip-card strong { font-size: 16px !important; }
.weather-forecast-strip {
  grid-auto-columns: minmax(0, 1fr) !important;
  min-height: 58px;
}
.weather-forecast-card {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 17px 27px 13px !important;
  place-items: center !important;
  align-content: center !important;
  gap: 0 !important;
  padding: 4px 8px 3px !important;
}
.weather-forecast-card small {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  color: var(--text) !important;
  font-size: 7.4px !important;
  font-weight: 900 !important;
  text-align: center;
}
.weather-forecast-core {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: auto !important;
  height: 27px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.weather-forecast-icon { width: 25px !important; height: 25px !important; }
.weather-forecast-card b {
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  color: var(--text-strong);
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900;
}
.weather-forecast-card b.is-cold { color: #75c8ff; }
.weather-forecast-card b.is-hot { color: #ff9878; }
.weather-forecast-card em {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: center !important;
  justify-self: center !important;
  max-width: 100%;
  padding: 0 !important;
  color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%);
  font-size: 6.7px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-align: center;
}
@media (max-width: 720px) {
  .home-weather-body { grid-template-rows: 23px 68px 72px !important; gap: 7px !important; }
  .weather-calendar-top > span { font-size: 11px; }
  .weather-calendar-top small, .weather-calendar-top b, .weather-calendar-top { font-size: 9.3px; }
  .weather-current-row { grid-template-columns: 58px minmax(0,1fr) 116px !important; gap: 10px !important; }
  .weather-current-condition { font-size: 12px; }
  .weather-current-temp { font-size: 32px !important; }
  .weather-forecast-card small { font-size: 7.8px !important; }
  .weather-forecast-card b { font-size: 12.5px !important; }
  .weather-forecast-card em { font-size: 7px !important; }
}
@media (max-width: 480px) {
  .home-weather-body { grid-template-rows: 22px 64px 64px !important; }
  .weather-calendar-top { gap: 5px; }
  .weather-calendar-top > span { font-size: 10px; }
  .weather-calendar-top small, .weather-calendar-top b, .weather-calendar-top { font-size: 8.2px; }
  .weather-current-row { grid-template-columns: 48px minmax(0,1fr) 100px !important; gap: 7px !important; }
  .weather-main-icon { width: 46px !important; height: 46px !important; }
  .weather-current-condition { font-size: 10.5px; }
  .weather-current-temp { font-size: 28px !important; }
  .weather-precip-card { height: 48px !important; padding: 0 8px !important; }
  .weather-precip-card small { font-size: 5.8px !important; }
  .weather-forecast-strip { overflow-x: auto !important; grid-auto-columns: 94px !important; }
}


/* =====================================================================
   WANAStatsWeb 3.1.21 – Arena weather: compact split layout
   Meta on top. Current weather left. Intensity + forecast right.
   ===================================================================== */
.home-weather-panel {
  padding: 9px 13px 9px !important;
  overflow: hidden !important;
}
.home-weather-heading {
  min-height: 24px !important;
  flex: 0 0 24px !important;
  padding-bottom: 5px !important;
}
.home-weather-body {
  width: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-rows: 19px minmax(0, 1fr) !important;
  gap: 5px !important;
  padding-top: 5px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.weather-calendar-top {
  height: 19px !important;
  min-height: 19px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding: 0 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  font-variant-numeric: tabular-nums;
}
.weather-calendar-top > span {
  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}
.weather-calendar-top > b,
.weather-calendar-top > small {
  color: var(--text) !important;
  font-size: 8.2px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}
.weather-calendar-top > i {
  color: color-mix(in srgb, var(--muted-2) 42%, transparent) !important;
  font-style: normal !important;
  font-size: 7px !important;
}
.weather-dashboard-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}
.weather-current-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 40px minmax(0, 1fr);
  column-gap: 7px;
  row-gap: 0;
  align-items: center;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, #7cc8ff 15%, var(--line));
  border-radius: 11px;
  background: rgba(255,255,255,.018);
  overflow: hidden;
  box-sizing: border-box;
}
.weather-current-card .weather-main-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  justify-self: start;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}
.weather-current-card .weather-current-temp {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  margin: 0 !important;
  color: var(--text-strong);
  font-size: 22px !important;
  line-height: .95 !important;
  font-weight: 850 !important;
  letter-spacing: -.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.weather-current-card .weather-current-temp.is-cold { color: #75c8ff !important; }
.weather-current-card .weather-current-temp.is-hot { color: #ff9878 !important; }
.weather-current-card .weather-current-condition {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  max-width: 100%;
  margin-top: 2px;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
  font-size: 6.4px !important;
  line-height: 1.08 !important;
  font-weight: 780 !important;
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-detail-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  gap: 4px;
  overflow: hidden;
}
.weather-detail-top {
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.weather-intensity-card {
  flex: 0 0 90px;
  height: 28px;
  min-width: 0;
  display: grid;
  grid-template-columns: 15px minmax(0,1fr);
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, #70b7ff 22%, var(--line));
  border-radius: 9px;
  background: rgba(112,183,255,.035);
  box-sizing: border-box;
}
.weather-intensity-card > svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #70b7ff;
  stroke-width: 1.8;
}
.weather-intensity-card > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
.weather-intensity-card small {
  color: var(--muted-2);
  font-size: 5.7px;
  line-height: 1;
  font-weight: 800;
}
.weather-intensity-card strong {
  color: #75c8ff;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.weather-forecast-title {
  min-width: 0;
  color: var(--text-strong);
  font-size: 7.2px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .02em;
}
.weather-detail-card .weather-forecast-strip {
  min-width: 0;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-columns: initial !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.weather-detail-card .weather-forecast-card {
  min-width: 0;
  min-height: 0;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 12px minmax(24px, 1fr) 10px !important;
  place-items: center !important;
  align-content: stretch !important;
  gap: 0 !important;
  padding: 3px 3px 2px !important;
  border-radius: 8px !important;
  box-sizing: border-box;
  overflow: hidden !important;
}
.weather-detail-card .weather-forecast-card small {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  color: var(--text) !important;
  font-size: 6.1px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-align: center;
  white-space: nowrap;
}
.weather-detail-card .weather-forecast-core {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}
.weather-detail-card .weather-forecast-icon {
  width: 20px !important;
  height: 20px !important;
}
.weather-detail-card .weather-svg.compact {
  width: 20px !important;
  height: 20px !important;
}
.weather-detail-card .weather-forecast-card b {
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
  color: var(--text-strong);
  font-size: 9.8px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.weather-detail-card .weather-forecast-card em {
  grid-column: 1 !important;
  grid-row: 3 !important;
  max-width: 100%;
  align-self: center !important;
  justify-self: center !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--text) 76%, var(--muted) 24%);
  font-size: 5.3px !important;
  line-height: 1 !important;
  font-style: normal;
  font-weight: 780 !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-detail-card .weather-forecast-empty {
  grid-column: 1 / -1;
  align-self: center;
  color: var(--muted-2);
  font-size: 6.5px;
  text-align: center;
}
@media (max-width: 720px) {
  .home-weather-console-stack .home-weather-panel { height: 235px !important; min-height: 235px !important; max-height: 235px !important; }
  .home-weather-body { grid-template-rows: 22px minmax(0,1fr) !important; gap: 7px !important; padding-top: 7px !important; }
  .weather-calendar-top { height: 22px !important; min-height: 22px !important; gap: 6px !important; }
  .weather-calendar-top > span { font-size: 11px !important; }
  .weather-calendar-top > b, .weather-calendar-top > small { font-size: 9.5px !important; }
  .weather-dashboard-grid { grid-template-columns: 132px minmax(0,1fr); gap: 10px; }
  .weather-current-card { grid-template-columns: 48px minmax(0,1fr); grid-template-rows: 48px minmax(0,1fr); padding: 8px 9px; }
  .weather-current-card .weather-main-icon { width: 46px !important; height: 46px !important; }
  .weather-current-card .weather-current-temp { font-size: 27px !important; }
  .weather-current-card .weather-current-condition { font-size: 7.5px !important; }
  .weather-detail-card { grid-template-rows: 32px minmax(0,1fr); gap: 6px; }
  .weather-detail-top { height: 32px; }
  .weather-intensity-card { height: 32px; flex-basis: 108px; }
  .weather-intensity-card small { font-size: 6.7px; }
  .weather-intensity-card strong { font-size: 14px; }
  .weather-detail-card .weather-forecast-card small { font-size: 7px !important; }
  .weather-detail-card .weather-forecast-card b { font-size: 11px !important; }
  .weather-detail-card .weather-forecast-card em { font-size: 6.2px !important; }
}
@media (max-width: 480px) {
  .home-weather-console-stack .home-weather-panel { height: 300px !important; min-height: 300px !important; max-height: 300px !important; }
  .weather-dashboard-grid { grid-template-columns: 1fr !important; grid-template-rows: 82px minmax(0,1fr); gap: 7px; }
  .weather-current-card { grid-template-columns: 58px minmax(0,1fr); grid-template-rows: 46px 26px; }
  .weather-current-card .weather-main-icon { width: 50px !important; height: 50px !important; }
  .weather-detail-card .weather-forecast-strip { overflow-x: auto !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: 86px !important; scrollbar-width: none; }
  .weather-detail-card .weather-forecast-strip::-webkit-scrollbar { display: none; }
}

/* 3.1.21 final placement: current condition is deliberately a narrow, vertical left column. */
.weather-dashboard-grid { grid-template-columns: 88px minmax(0, 1fr) !important; }
.weather-current-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 1px !important;
  padding: 5px 8px !important;
}
.weather-current-card .weather-main-icon {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 0 1px 0 !important;
  align-self: flex-start !important;
}
.weather-current-card .weather-current-temp {
  flex: 0 0 auto !important;
  margin: 0 !important;
  align-self: flex-start !important;
  font-size: 20px !important;
  line-height: .95 !important;
}
.weather-current-card .weather-current-condition {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 1px 0 0 !important;
  align-self: flex-start !important;
  font-size: 6px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 720px) {
  .weather-dashboard-grid { grid-template-columns: 108px minmax(0, 1fr) !important; }
  .weather-current-card { padding: 8px 10px !important; gap: 2px !important; }
  .weather-current-card .weather-main-icon { width: 44px !important; height: 44px !important; }
  .weather-current-card .weather-current-temp { font-size: 27px !important; }
  .weather-current-card .weather-current-condition { font-size: 7.5px !important; }
}
@media (max-width: 480px) {
  .weather-dashboard-grid { grid-template-columns: 1fr !important; }
  .weather-current-card {
    min-height: 76px;
    display: grid !important;
    grid-template-columns: 54px minmax(0,1fr) !important;
    grid-template-rows: 43px 25px !important;
    column-gap: 8px !important;
  }
  .weather-current-card .weather-main-icon { grid-column:1; grid-row:1 / 3; width:50px !important; height:50px !important; }
  .weather-current-card .weather-current-temp { grid-column:2; grid-row:1; align-self:end !important; }
  .weather-current-card .weather-current-condition { grid-column:2; grid-row:2; align-self:start !important; }
}

/* =====================================================================
   WANAStatsWeb 3.1.22 – wide responsive shell + dense Arena weather row
   ===================================================================== */
/* Use large desktop displays instead of leaving a wide empty frame. The
   clamp keeps the same layout comfortable on notebooks and small windows. */
:root {
  --shell: min(2200px, calc(100% - clamp(24px, 3vw, 56px)));
}

/* Larger, readable calendar/meta line. */
.home-weather-body {
  grid-template-rows: 23px minmax(0, 1fr) !important;
  gap: 6px !important;
  padding-top: 6px !important;
}
.weather-calendar-top {
  height: 23px !important;
  min-height: 23px !important;
  gap: 8px !important;
  padding: 0 2px 1px !important;
}
.weather-calendar-top > span {
  font-size: 12px !important;
  font-weight: 850 !important;
}
.weather-calendar-top > b,
.weather-calendar-top > small {
  font-size: 10.5px !important;
  font-weight: 760 !important;
}
.weather-calendar-top > i {
  font-size: 7.6px !important;
}

/* Three peers: current weather, intensity, forecast. No nested header row. */
.weather-dashboard-grid {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 104px 104px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
.weather-current-card,
.weather-dashboard-grid > .weather-intensity-card {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 11px !important;
  box-sizing: border-box !important;
}

/* Fill the entire current-weather tile instead of pinning everything to top-left. */
.weather-current-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(38px, 1fr) auto auto !important;
  place-items: center !important;
  align-content: center !important;
  gap: 1px !important;
  padding: 5px 7px 6px !important;
  text-align: center !important;
}
.weather-current-card .weather-main-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 47px !important;
  height: 47px !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
}
.weather-current-card .weather-current-temp {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
  font-size: 25px !important;
  line-height: .92 !important;
  font-weight: 850 !important;
}
.weather-current-card .weather-current-condition {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  align-self: center !important;
  justify-self: center !important;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%) !important;
  font-size: 7.2px !important;
  line-height: 1.05 !important;
  font-weight: 760 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Intensity is now a full-height tile exactly as large as current weather. */
.weather-dashboard-grid > .weather-intensity-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(36px, 1fr) auto !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 7px !important;
  border: 1px solid color-mix(in srgb, #70b7ff 22%, var(--line)) !important;
  background: rgba(112,183,255,.035) !important;
}
.weather-dashboard-grid > .weather-intensity-card > svg {
  grid-row: 1 !important;
  width: 33px !important;
  height: 33px !important;
  align-self: end !important;
  fill: none !important;
  stroke: #70b7ff !important;
  stroke-width: 1.7 !important;
}
.weather-dashboard-grid > .weather-intensity-card > div {
  grid-row: 2 !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
}
.weather-dashboard-grid > .weather-intensity-card small {
  color: var(--muted-2) !important;
  font-size: 7px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  text-align: center !important;
}
.weather-dashboard-grid > .weather-intensity-card strong {
  color: #75c8ff !important;
  font-size: 22px !important;
  line-height: .95 !important;
  font-weight: 880 !important;
  font-variant-numeric: tabular-nums;
}

.weather-forecast-area {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.weather-forecast-area .weather-forecast-strip {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 5px !important;
  overflow: hidden !important;
}
.weather-forecast-area .weather-forecast-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 15px minmax(32px, 1fr) 12px !important;
  place-items: center !important;
  align-content: stretch !important;
  gap: 1px !important;
  padding: 4px 4px 3px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.weather-forecast-area .weather-forecast-card small {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  color: var(--text) !important;
  font-size: 7.4px !important;
  line-height: 1 !important;
  font-weight: 880 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.weather-forecast-area .weather-forecast-core {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.weather-forecast-area .weather-forecast-icon,
.weather-forecast-area .weather-svg.compact {
  width: 25px !important;
  height: 25px !important;
}
.weather-forecast-area .weather-forecast-card b {
  margin: 0 !important;
  color: var(--text-strong) !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 880 !important;
}
.weather-forecast-area .weather-forecast-card b.is-cold { color: #75c8ff !important; }
.weather-forecast-area .weather-forecast-card b.is-hot { color: #ff9878 !important; }
.weather-forecast-area .weather-forecast-card em {
  grid-column: 1 !important;
  grid-row: 3 !important;
  max-width: 100% !important;
  align-self: center !important;
  justify-self: center !important;
  color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%) !important;
  font-size: 7.1px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 760 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* On medium screens the weather stack already spans the full row, so the
   same three-part layout remains readable. */
@media (max-width: 1120px) {
  .weather-dashboard-grid {
    grid-template-columns: 116px 116px minmax(0, 1fr) !important;
  }
  .weather-current-card .weather-main-icon { width: 52px !important; height: 52px !important; }
  .weather-current-card .weather-current-temp { font-size: 29px !important; }
  .weather-current-card .weather-current-condition { font-size: 8px !important; }
  .weather-dashboard-grid > .weather-intensity-card strong { font-size: 25px !important; }
  .weather-forecast-area .weather-forecast-card small { font-size: 8px !important; }
  .weather-forecast-area .weather-forecast-card b { font-size: 12.5px !important; }
  .weather-forecast-area .weather-forecast-card em { font-size: 7px !important; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100% - 24px); }
  .home-weather-console-stack .home-weather-panel {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
  .home-weather-body {
    grid-template-rows: 28px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .weather-calendar-top { height: 28px !important; min-height: 28px !important; gap: 7px !important; }
  .weather-calendar-top > span { font-size: 12px !important; }
  .weather-calendar-top > b, .weather-calendar-top > small { font-size: 10.3px !important; }
  .weather-dashboard-grid {
    grid-template-columns: 110px 110px minmax(410px, 1fr) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .weather-dashboard-grid::-webkit-scrollbar { display: none; }
}

@media (max-width: 480px) {
  :root { --shell: calc(100% - 18px); }
  .weather-calendar-top { gap: 5px !important; }
  .weather-calendar-top > span { font-size: 10.5px !important; }
  .weather-calendar-top > b, .weather-calendar-top > small { font-size: 8.8px !important; }
}


/* =====================================================================
   WANAStatsWeb 3.1.23 – 110% desktop UI scale + +10% content width
   Keep tablet/mobile at native scale so responsive breakpoints remain safe.
   ===================================================================== */
:root {
  /* Previous production shell was 1380px. +10% = 1518px. */
  --shell: min(1518px, calc(100% - 42px));
}

/* A real browser zoom also makes every pixel-based control larger. CSS zoom
   is the closest equivalent without rewriting thousands of legacy pixel
   declarations. It is deliberately restricted to roomy desktop viewports. */
@media (min-width: 1600px) {
  body {
    zoom: 1.10;
    width: 90.9090909091%;
  }
}

/* Keep the established compact shell behavior below desktop size. */
@media (max-width: 720px) {
  :root { --shell: calc(100% - 24px); }
}
@media (max-width: 480px) {
  :root { --shell: calc(100% - 18px); }
}

/* Intensity mirrors the current-weather tile exactly:
   icon -> big value -> white condition-style label. */
.weather-dashboard-grid > .weather-intensity-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(38px, 1fr) auto auto !important;
  place-items: center !important;
  align-content: center !important;
  gap: 1px !important;
  padding: 5px 7px 6px !important;
  text-align: center !important;
}
.weather-dashboard-grid > .weather-intensity-card > svg {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 47px !important;
  height: 47px !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
}
.weather-dashboard-grid > .weather-intensity-card > div {
  display: contents !important;
}
.weather-dashboard-grid > .weather-intensity-card strong {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
  color: #75c8ff !important;
  font-size: 25px !important;
  line-height: .92 !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums;
}
.weather-dashboard-grid > .weather-intensity-card small {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  align-self: center !important;
  justify-self: center !important;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%) !important;
  font-size: 7.2px !important;
  line-height: 1.05 !important;
  font-weight: 760 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1120px) {
  .weather-dashboard-grid > .weather-intensity-card > svg {
    width: 52px !important;
    height: 52px !important;
  }
  .weather-dashboard-grid > .weather-intensity-card strong {
    font-size: 29px !important;
  }
  .weather-dashboard-grid > .weather-intensity-card small {
    font-size: 8px !important;
  }
}

@media (max-width: 480px) {
  .weather-dashboard-grid > .weather-intensity-card > svg {
    width: 50px !important;
    height: 50px !important;
  }
}


/* =====================================================================
   WANAStatsWeb 3.1.24 – centered 110% desktop UI + wider shell + console
   ===================================================================== */
/* 3.1.23 scaled the BODY itself. That shortened the sticky header backdrop
   and made the complete page look left-shifted. Keep the viewport/body at
   native size and scale only the centered UI shells. */
@media (min-width: 1440px) {
  body {
    zoom: 1 !important;
    width: auto !important;
  }
  :root {
    /* 1380px production shell +10% width. The shell is then rendered at 110%. */
    --shell: min(1518px, calc(90.9090909vw - 30px));
  }
  .topbar.shell,
  #app.shell,
  .footer.shell {
    zoom: 1.10;
    margin-inline: auto !important;
  }
  .leaderboard-dialog .dialog-shell,
  .console-full-dialog .console-full-shell {
    zoom: 1.10;
  }
}

/* The sticky background/border always spans the complete browser viewport. */
.topbar-wrap {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
}
.topbar.shell,
#app.shell,
.footer.shell { margin-inline: auto !important; }

/* Weather: current + intensity are deliberately slimmer so the five forecast
   cards get the valuable width. */
.weather-dashboard-grid {
  grid-template-columns: 88px 88px minmax(0, 1fr) !important;
  gap: 6px !important;
}
.weather-current-card,
.weather-dashboard-grid > .weather-intensity-card {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
.weather-current-card .weather-main-icon,
.weather-dashboard-grid > .weather-intensity-card > svg {
  width: 43px !important;
  height: 43px !important;
}
.weather-current-card .weather-current-temp,
.weather-dashboard-grid > .weather-intensity-card strong {
  font-size: 24px !important;
}
.weather-forecast-area .weather-forecast-strip { gap: 4px !important; }
.weather-forecast-area .weather-forecast-card {
  padding: 4px 6px 3px !important;
}
.weather-forecast-area .weather-forecast-card small {
  font-size: 7.8px !important;
}
.weather-forecast-area .weather-forecast-icon,
.weather-forecast-area .weather-svg.compact {
  width: 27px !important;
  height: 27px !important;
}
.weather-forecast-area .weather-forecast-card b {
  font-size: 12px !important;
}
.weather-forecast-area .weather-forecast-card em {
  font-size: 7.3px !important;
}

/* Console card footer/button. */
.home-console-panel {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
.home-console-footer {
  min-width: 0;
  min-height: 24px;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.home-console-footer > span {
  min-width: 0;
  color: var(--muted-2);
  font-size: 6.9px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-console-full-button,
.console-full-bottom {
  flex: 0 0 auto;
  min-height: 23px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--orange-soft) 55%, transparent);
  color: var(--text-strong);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .025em;
  cursor: pointer;
}
.home-console-full-button:hover,
.console-full-bottom:hover {
  border-color: color-mix(in srgb, var(--orange) 70%, var(--line));
  background: color-mix(in srgb, var(--orange-soft) 90%, transparent);
}

/* Large read-only console dialog. */
html.console-full-open { overflow: hidden; }
.console-full-dialog {
  width: min(1180px, calc(100vw - 42px));
  max-width: none;
  height: min(78dvh, 790px);
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.console-full-dialog::backdrop {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(5px);
}
.console-full-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: 10px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--orange) 42%, var(--line));
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(17,16,14,.985), rgba(10,9,8,.985));
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
  box-sizing: border-box;
}
.console-full-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.console-full-head h2 {
  margin: 2px 0 0;
  color: var(--text-strong);
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.025em;
}
.console-full-head-actions { display: flex; align-items: center; gap: 10px; }
.console-full-head-actions > small {
  color: var(--green);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}
.console-full-head-actions > small.offline { color: var(--muted-2); }
.console-full-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.console-full-close:hover { border-color: var(--line-strong); color: var(--orange); }
.console-full-viewport {
  min-width: 0;
  min-height: 0;
  padding: 12px 13px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--orange) 20%, var(--line));
  border-radius: 11px;
  background: #050504;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--orange) 42%, transparent) transparent;
}
.console-full-log {
  margin: 0;
  min-width: max-content;
  color: #eeeae3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.48;
  white-space: pre;
  tab-size: 2;
}
.console-full-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-2);
  font-size: 7.5px;
  font-weight: 760;
}

@media (max-width: 1439px) {
  /* Native scale on normal notebooks/tablets, but keep the centered wider shell
     only where there is actual room. */
  body { zoom: 1 !important; width: auto !important; }
}
@media (max-width: 1120px) {
  .weather-dashboard-grid { grid-template-columns: 104px 104px minmax(0,1fr) !important; }
}
@media (max-width: 720px) {
  .weather-dashboard-grid { grid-template-columns: 104px 104px minmax(430px,1fr) !important; }
  .home-console-footer > span { display: none; }
  .home-console-full-button { width: 100%; min-height: 28px; font-size: 8px; }
  .console-full-dialog {
    width: calc(100vw - 16px);
    height: 88dvh;
  }
  .console-full-shell { padding: 11px; gap: 8px; border-radius: 14px; }
  .console-full-head h2 { font-size: 17px; }
  .console-full-log { font-size: 9px; }
  .console-full-footer > span { display: none; }
}

/* =====================================================================
   WANAStatsWeb 3.1.26 – forecast alignment, profile spacing, console hues
   ===================================================================== */
/* Give the five forecast cells the majority of the horizontal space. */
.home-weather-panel {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.weather-dashboard-grid {
  grid-template-columns: 78px 78px minmax(0, 1fr) !important;
  gap: 5px !important;
}
.weather-current-card,
.weather-dashboard-grid > .weather-intensity-card {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.weather-current-card .weather-main-icon,
.weather-dashboard-grid > .weather-intensity-card > svg {
  width: 40px !important;
  height: 40px !important;
}
.weather-current-card .weather-current-temp,
.weather-dashboard-grid > .weather-intensity-card strong {
  font-size: 23px !important;
}

.weather-forecast-area .weather-forecast-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 3px !important;
}
.weather-forecast-area .weather-forecast-card {
  grid-template-columns: 1fr !important;
  grid-template-rows: 11px 10px minmax(0, 1fr) !important;
  padding: 3px 3px 4px !important;
  text-align: center !important;
}
.weather-forecast-area .weather-forecast-card > small {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: stretch !important;
  align-self: center !important;
  text-align: center !important;
  font-size: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.weather-forecast-area .weather-forecast-core {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: center !important;
}
.weather-forecast-area .forecast-game-time {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  width: 100% !important;
  color: #75c8ff !important;
  font-size: 7.2px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.weather-forecast-area .weather-forecast-icon,
.weather-forecast-area .weather-svg.compact {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
}
.weather-forecast-area .weather-forecast-card b {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 13.2px !important;
  line-height: .95 !important;
  text-align: center !important;
}
.weather-forecast-area .weather-forecast-card em {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%) !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 780 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* All collapsed profile sections use exactly the same vertical rhythm again. */
#profileContent .profile-server-records-section {
  margin-top: 16px !important;
}

/* Console colors are applied to every individual log row in both views. */
.home-console-log .console-line,
.console-full-log .console-line { display: block; }
.home-console-log .console-error,
.console-full-log .console-error { color: #ff626b !important; }
.home-console-log .console-warn,
.console-full-log .console-warn { color: #ffb347 !important; }
.home-console-log .console-ok,
.console-full-log .console-ok { color: #73e6a2 !important; }
.home-console-log .console-info,
.console-full-log .console-info { color: #eeeae3 !important; }
.home-console-log .console-command,
.console-full-log .console-command { color: #78d7ff !important; }
.home-console-log .console-debug,
.console-full-log .console-debug { color: #9aa4b5 !important; }

@media (max-width: 1120px) and (min-width: 721px) {
  .weather-dashboard-grid {
    grid-template-columns: 90px 90px minmax(0, 1fr) !important;
  }
  .weather-forecast-area .weather-forecast-card > small { font-size: 7.8px !important; }
  .weather-forecast-area .weather-forecast-card b { font-size: 12.5px !important; }
  .weather-forecast-area .weather-forecast-card em { font-size: 7px !important; }
}
@media (max-width: 720px) {
  .home-weather-panel { padding-inline: 10px !important; }
  .weather-dashboard-grid {
    grid-template-columns: 100px 100px minmax(440px, 1fr) !important;
  }
  .weather-forecast-area .weather-forecast-card > small { font-size: 7.6px !important; }
  .weather-forecast-area .forecast-game-time { font-size: 6.9px !important; }
  .weather-forecast-area .weather-forecast-card b { font-size: 12px !important; }
  .weather-forecast-area .weather-forecast-card em { font-size: 6.9px !important; }
  #profileContent .profile-server-records-section { margin-top: 11px !important; }
}

/* =====================================================================
   WANAStatsWeb 3.1.32 – Console wrapping + compact mobile weather tiles
   ===================================================================== */

/* Console: no horizontal scrolling, even for long stack traces / commands. */
.home-console-viewport,
.console-full-viewport {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.home-console-log,
.console-full-log {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}
.home-console-log .console-line,
.console-full-log .console-line {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* The full-console button belongs at the lower left on every viewport. */
.home-console-footer {
  justify-content: flex-start !important;
  align-items: center !important;
}
.home-console-full-button {
  order: 1 !important;
  width: auto !important;
  max-width: 100% !important;
}
.home-console-footer > span {
  order: 2 !important;
  margin-left: 2px;
}

/* Weather heading: one continuous, subtle header shade instead of the
   rectangular dark patch ending before the mobile toggle. */
.home-weather-heading {
  position: relative !important;
  isolation: isolate;
  background: transparent !important;
  box-shadow: none !important;
}
.home-weather-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10px;
  right: -10px;
  top: -9px;
  bottom: -6px;
  border-radius: 13px 13px 4px 4px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,.11) 72%, rgba(0,0,0,.055));
  pointer-events: none;
}

/* Mobile weather uses two vertical tiles per horizontal step:
   current/intensity in the first column, then +1/+5, +10/+15, +20.
   This keeps the cards nearly square and cuts horizontal travel sharply. */
@media (max-width: 720px) {
  .home-weather-console-stack .home-weather-panel,
  .home-collapsible-panel:not(.is-mobile-collapsed).home-weather-panel {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }

  .home-weather-body {
    grid-template-rows: 28px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding-top: 7px !important;
    overflow: hidden !important;
  }

  .weather-calendar-top {
    height: 28px !important;
    min-height: 28px !important;
  }

  .weather-dashboard-grid {
    --weather-mobile-tile: 102px;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: var(--weather-mobile-tile) max-content !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: initial !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .weather-dashboard-grid::-webkit-scrollbar { display: none; }

  .weather-current-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: var(--weather-mobile-tile) !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(38px,1fr) auto auto !important;
    place-items: center !important;
    gap: 1px !important;
    padding: 6px !important;
    scroll-snap-align: start;
  }
  .weather-current-card .weather-main-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }
  .weather-current-card .weather-current-temp {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: .92 !important;
  }
  .weather-current-card .weather-current-condition {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    font-size: 7.4px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .weather-dashboard-grid > .weather-intensity-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: var(--weather-mobile-tile) !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(38px,1fr) auto auto !important;
    place-items: center !important;
    gap: 1px !important;
    padding: 6px !important;
    scroll-snap-align: start;
  }
  .weather-dashboard-grid > .weather-intensity-card > svg {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }
  .weather-dashboard-grid > .weather-intensity-card > div {
    display: contents !important;
  }
  .weather-dashboard-grid > .weather-intensity-card strong {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: .92 !important;
  }
  .weather-dashboard-grid > .weather-intensity-card small {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    font-size: 7.4px !important;
    line-height: 1.05 !important;
    color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .weather-forecast-area {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    width: max-content !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .weather-forecast-area .weather-forecast-strip {
    width: max-content !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--weather-mobile-tile) !important;
    gap: 6px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }
  .weather-forecast-area .weather-forecast-card {
    width: var(--weather-mobile-tile) !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    grid-template-columns: 1fr !important;
    grid-template-rows: 14px 12px minmax(0,1fr) !important;
    padding: 5px 5px 6px !important;
    border: 1px solid color-mix(in srgb, #72c6f7 13%, var(--line)) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.012) !important;
    scroll-snap-align: start;
  }
  .weather-forecast-area .weather-forecast-card + .weather-forecast-card {
    border-left: 1px solid color-mix(in srgb, #72c6f7 13%, var(--line)) !important;
  }
  .weather-forecast-area .weather-forecast-card > small {
    font-size: 8.1px !important;
  }
  .weather-forecast-area .forecast-game-time {
    font-size: 7.2px !important;
  }
  .weather-forecast-area .weather-forecast-core {
    gap: 3px !important;
  }
  .weather-forecast-area .weather-forecast-icon,
  .weather-forecast-area .weather-svg.compact {
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
  }
  .weather-forecast-area .weather-forecast-card b {
    font-size: 12.4px !important;
  }
  .weather-forecast-area .weather-forecast-card em {
    font-size: 7.1px !important;
  }

  .home-console-footer > span { display: inline !important; }
  .home-console-full-button {
    width: auto !important;
    min-height: 28px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 480px) {
  .weather-dashboard-grid {
    --weather-mobile-tile: 96px;
  }
  .weather-current-card .weather-main-icon,
  .weather-dashboard-grid > .weather-intensity-card > svg {
    width: 39px !important;
    height: 39px !important;
  }
  .weather-current-card .weather-current-temp,
  .weather-dashboard-grid > .weather-intensity-card strong {
    font-size: 22px !important;
  }
  .weather-current-card .weather-current-condition,
  .weather-dashboard-grid > .weather-intensity-card small {
    font-size: 7px !important;
  }
  .weather-forecast-area .weather-forecast-card > small {
    font-size: 7.8px !important;
  }
  .weather-forecast-area .forecast-game-time {
    font-size: 6.9px !important;
  }
  .weather-forecast-area .weather-forecast-card b {
    font-size: 11.8px !important;
  }
  .weather-forecast-area .weather-forecast-card em {
    font-size: 6.8px !important;
  }
}

/* On very narrow phones keep the footer clean: button stays left, hint may hide. */
@media (max-width: 420px) {
  .home-console-footer > span { display: none !important; }
}



/* =====================================================================
   WANAStatsWeb 3.1.33 – complete mobile feed + solar row + console rhythm
   ===================================================================== */
/* Every item returned by the paginated API must remain visible on every
   viewport. Older responsive rules intentionally hid item 4/5; those rules
   made mobile pages look incomplete. */
.task-feed-list > .task-feed-entry,
.task-feed-panel .task-feed-entry {
  display: grid !important;
}

/* Small optical separation between console records without turning each line
   into a full paragraph. Wrapping from 3.1.32 remains unchanged. */
.home-console-log .console-line,
.console-full-log .console-line {
  margin: 0 0 .34em !important;
}
.home-console-log .console-line:last-child,
.console-full-log .console-line:last-child {
  margin-bottom: 0 !important;
}

/* Remove the synthetic rectangular heading shade completely. The weather
   panel already owns the continuous glass/background treatment. */
.home-weather-heading,
.weather-calendar-top {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.home-weather-heading::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.weather-solar-events {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.weather-solar-event {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.4px;
  font-weight: 800;
  line-height: 1;
}
.weather-solar-event > span { font-size: 10px; line-height: 1; }
.weather-solar-rise > span { color: #ffd46a; }
.weather-solar-set > span { color: #f2a35b; }
.weather-solar-event > b {
  color: var(--text) !important;
  font-size: inherit !important;
  font-weight: 800 !important;
}
.weather-solar-divider { color: color-mix(in srgb, var(--muted-2) 42%, transparent); }

@media (max-width: 720px) {
  .home-weather-console-stack .home-weather-panel,
  .home-collapsible-panel:not(.is-mobile-collapsed).home-weather-panel {
    height: 314px !important;
    min-height: 314px !important;
    max-height: 314px !important;
  }
  .home-weather-body {
    grid-template-rows: 41px minmax(0, 1fr) !important;
  }
  .weather-calendar-top {
    height: 41px !important;
    min-height: 41px !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    row-gap: 4px !important;
    column-gap: 6px !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  .weather-solar-separator { display: none !important; }
  .weather-solar-events {
    flex: 0 0 100%;
    width: 100%;
    gap: 8px;
    padding-left: 0;
  }
  .weather-solar-event { font-size: 8.4px; }
  .weather-solar-event > span { font-size: 9px; }
}

@media (max-width: 420px) {
  .weather-calendar-top { column-gap: 5px !important; }
  .weather-calendar-top > span { font-size: 10px !important; }
  .weather-calendar-top > b,
  .weather-calendar-top > small { font-size: 8.1px !important; }
  .weather-solar-event { font-size: 8px; }
}

/* =====================================================================
   WANAStatsWeb 3.1.34 – weather header band + 3-column mobile online grid
   ===================================================================== */

/* Weather header:
   Use the real heading box itself as the full-width dark band.
   No pseudo-element / overlay is used anymore, so there is no clipped
   rectangular shadow ending before LIVE / the mobile toggle. */
.home-weather-heading {
  isolation: auto !important;
  box-sizing: border-box !important;
  width: calc(100% + 20px) !important;
  margin: -9px -10px 0 !important;
  min-height: 39px !important;
  padding: 8px 10px 7px !important;
  border-radius: 19px 19px 0 0 !important;
  border-bottom: 1px solid color-mix(in srgb, #7cc8ff 14%, var(--line)) !important;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.26) 0%,
      rgba(0,0,0,.17) 58%,
      rgba(0,0,0,.09) 100%) !important;
  box-shadow: none !important;
  filter: none !important;
}
.home-weather-heading::before,
.home-weather-heading::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* The content starts directly below the real header band. */
.home-weather-body {
  padding-top: 7px !important;
}

/* Mobile online players:
   six players per page -> 3 columns x 2 rows.
   Vertical cards keep names readable within ~100-110px columns. */
@media (max-width: 720px) {
  .home-online-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(72px, auto) !important;
    gap: 6px !important;
    padding: 9px 0 2px !important;
    overflow: hidden !important;
  }

  .home-online-player {
    min-width: 0 !important;
    min-height: 72px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
    text-align: center !important;
  }

  .home-online-player .player-avatar {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 8px !important;
  }

  .home-online-player-copy {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 2px !important;
  }

  .home-online-player-copy strong {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 8.4px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .home-online-player-copy small {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 6.5px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Explicitly override the legacy <=410px 1-column rule. */
@media (max-width: 410px) {
  .home-online-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .home-online-player {
    min-height: 68px !important;
    padding: 5px 3px !important;
  }

  .home-online-player .player-avatar {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  .home-online-player-copy strong { font-size: 8px !important; }
  .home-online-player-copy small { font-size: 6.2px !important; }
}

/* In collapsed portrait mode the weather heading is the whole compact card.
   Fill the complete card width/height with the same band instead of leaving
   13px inset margins. */
@media (max-width: 720px) and (orientation: portrait) {
  .home-collapsible-panel.is-mobile-collapsed.home-weather-panel {
    padding: 0 !important;
  }

  .home-collapsible-panel.is-mobile-collapsed.home-weather-panel .home-weather-heading {
    width: 100% !important;
    margin: 0 !important;
    min-height: 54px !important;
    padding: 11px 13px !important;
    border-radius: 14px !important;
    border-bottom: 0 !important;
  }

  .home-collapsible-panel:not(.is-mobile-collapsed).home-weather-panel .home-weather-heading {
    width: calc(100% + 20px) !important;
    margin: -9px -10px 0 !important;
    border-radius: 19px 19px 0 0 !important;
  }
}

/* =====================================================================
   WANAStatsWeb 3.1.35 – full console search + live category filters
   ===================================================================== */
.console-full-shell {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.console-full-tools {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.console-full-search-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.console-full-search {
  min-width: 0;
  flex: 1 1 460px;
  max-width: 620px;
  height: 34px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 30px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--orange) 20%, var(--line));
  border-radius: 9px;
  background: rgba(0,0,0,.34);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.console-full-search:focus-within {
  border-color: color-mix(in srgb, var(--orange) 64%, var(--line));
  background: rgba(0,0,0,.46);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 10%, transparent);
}

.console-search-icon {
  display: grid;
  place-items: center;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1;
  user-select: none;
}

.console-full-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-strong);
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.console-full-search input::placeholder {
  color: var(--muted-2);
  opacity: .82;
}

.console-full-search input::-webkit-search-cancel-button {
  display: none;
}

.console-search-clear {
  width: 24px;
  height: 24px;
  place-self: center;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.console-search-clear[hidden] { display: none !important; }
.console-search-clear:hover { background: rgba(255,255,255,.055); color: var(--text-strong); }

.console-filter-summary {
  flex: 0 0 auto;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 820;
  letter-spacing: .025em;
  white-space: nowrap;
}

.console-filter-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--orange) 24%, transparent) transparent;
}

.console-filter-chip {
  flex: 0 0 auto;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 7.6px;
  font-weight: 840;
  letter-spacing: .018em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.console-filter-chip > span {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--muted-2);
  font-size: 6.7px;
  font-weight: 900;
  text-align: center;
}

.console-filter-chip:hover {
  border-color: var(--line-strong);
  color: var(--text-strong);
}

.console-filter-chip.is-active {
  border-color: color-mix(in srgb, var(--orange) 60%, var(--line));
  background: color-mix(in srgb, var(--orange-soft) 68%, transparent);
  color: var(--text-strong);
}

.console-filter-chip.is-active > span {
  background: color-mix(in srgb, var(--orange) 15%, rgba(255,255,255,.04));
  color: var(--text-strong);
}

.console-filter-chip.console-filter-warn.is-active {
  border-color: rgba(255,179,71,.58);
  background: rgba(255,179,71,.11);
  color: #ffd097;
}

.console-filter-chip.console-filter-error.is-active {
  border-color: rgba(255,98,107,.58);
  background: rgba(255,98,107,.11);
  color: #ff9ca2;
}

@media (max-width: 720px) {
  .console-full-search-row {
    align-items: stretch;
    gap: 6px;
  }

  .console-full-search {
    max-width: none;
    height: 32px;
  }

  .console-filter-summary {
    display: grid;
    place-items: center;
    min-width: 63px;
    font-size: 7px;
  }

  .console-filter-row {
    gap: 5px;
    padding-bottom: 3px;
  }

  .console-filter-chip {
    min-height: 26px;
    padding-inline: 8px;
    font-size: 7.1px;
  }

  .console-filter-chip > span {
    min-width: 16px;
    padding-inline: 4px;
    font-size: 6.3px;
  }
}



/* WANAStatsWeb 3.1.36 – weather icons only */
.weather-current-condition,
.weather-forecast-card em { display: none !important; }
.weather-current-card { align-content: center; }


/* =====================================================================
   WANAStatsWeb 3.1.37 – mobile weather cleanup + deliberate touch popups
   ===================================================================== */

/* Mobile: remove the second dark header slab. Desktop is untouched. */
@media (max-width: 720px) {
  .home-weather-heading,
  .home-collapsible-panel:not(.is-mobile-collapsed).home-weather-panel .home-weather-heading,
  .home-collapsible-panel.is-mobile-collapsed.home-weather-panel .home-weather-heading {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .home-weather-heading::before,
  .home-weather-heading::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Mobile only: +20 min is the fifth forecast card. */
  .weather-forecast-area .weather-forecast-card:nth-child(5) {
    display: none !important;
  }
}

/* Touch browsers can synthesize hover/focus while scrolling. Do not let those
   states open either online-player or performance popovers. */
@media (hover: none), (pointer: coarse) {
  .server-status-area:not(.is-open):hover .online-players-popover,
  .server-status-area:not(.is-open):focus-within .online-players-popover {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-7px) scale(.985) !important;
  }
  .server-status-area.is-open .online-players-popover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .plan-metric:hover .plan-metric-tooltip,
  .plan-metric:focus .plan-metric-tooltip,
  .plan-metric:focus-within .plan-metric-tooltip,
  .plan-metric-tooltip:hover {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-5px) !important;
  }
  .plan-metric.is-hover-open .plan-metric-tooltip,
  .plan-metric.is-hover-open .plan-metric-tooltip:hover {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* =====================================================================
   WANAStatsWeb 3.1.38 – mobile metric viewport lock + weather separator
   ===================================================================== */

/* On narrow layouts the metric detail is a viewport overlay, never an
   element-relative popover. This deliberately wins over the later 2.28.x
   left:50% rules and over the 3.1.37 touch transform override. */
@media (max-width: 860px) {
  .plan-metric-tooltip,
  .plan-metric:first-child .plan-metric-tooltip,
  .plan-metric:nth-child(2) .plan-metric-tooltip,
  .plan-metric:nth-last-child(-n+2) .plan-metric-tooltip {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: calc(env(safe-area-inset-top, 0px) + 74px) !important;
    width: auto !important;
    max-width: 526px !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 82px) !important;
    margin-inline: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    transform: translateY(-5px) !important;
  }

  .plan-metric:hover .plan-metric-tooltip,
  .plan-metric:focus .plan-metric-tooltip,
  .plan-metric:focus-within .plan-metric-tooltip,
  .plan-metric.is-hover-open .plan-metric-tooltip,
  .plan-metric.is-hover-open .plan-metric-tooltip:hover,
  .plan-metric:first-child:hover .plan-metric-tooltip,
  .plan-metric:nth-child(2):hover .plan-metric-tooltip,
  .plan-metric:nth-last-child(-n+2):hover .plan-metric-tooltip,
  .plan-metric:first-child:focus-within .plan-metric-tooltip,
  .plan-metric:nth-child(2):focus-within .plan-metric-tooltip,
  .plan-metric:nth-last-child(-n+2):focus-within .plan-metric-tooltip,
  .plan-metric:first-child.is-hover-open .plan-metric-tooltip,
  .plan-metric:nth-child(2).is-hover-open .plan-metric-tooltip,
  .plan-metric:nth-last-child(-n+2).is-hover-open .plan-metric-tooltip {
    transform: translateY(0) !important;
  }

  .plan-metric-tooltip::before { display: none !important; }

  /* 3.1.37 correctly removed the dark weather header slab on mobile, but
     also made its separator transparent. Keep the clean header and restore
     the same divider used by the other expanded home panels. */
  .home-collapsible-panel:not(.is-mobile-collapsed).home-weather-panel .home-weather-heading {
    border-bottom: 1px solid var(--line) !important;
  }
}

@media (max-width: 860px) and (max-height: 520px) and (orientation: landscape) {
  .plan-metric-tooltip,
  .plan-metric:first-child .plan-metric-tooltip,
  .plan-metric:nth-child(2) .plan-metric-tooltip,
  .plan-metric:nth-last-child(-n+2) .plan-metric-tooltip {
    top: calc(env(safe-area-inset-top, 0px) + 54px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 62px) !important;
  }
}


/* =====================================================================
   WANAStatsWeb 3.1.42 - RAM-Diagnose im ausgeklappten RAM-Overlay
   ===================================================================== */
.ram-monitor-panel {
  margin: 8px 0 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 86%, #000 14%);
  display: grid;
  gap: 8px;
}
.ram-monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ram-monitor-head > div { min-width: 0; display: grid; gap: 1px; }
.ram-monitor-head b { color: var(--text-strong); font-size: 12.5px; font-weight: 700; }
.ram-monitor-head small { color: var(--muted-2); font-size: 9px; font-weight: 500; }
.ram-monitor-status {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ram-monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.ram-monitor-card {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  display: grid;
  gap: 2px;
}
.ram-monitor-card small {
  color: var(--muted-2);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.ram-monitor-card strong {
  color: var(--text-strong) !important;
  font-size: 16px !important;
  line-height: 1.08;
  font-weight: 680 !important;
  text-align: left !important;
}
.ram-monitor-card span {
  color: var(--muted);
  font-size: 8.8px;
  line-height: 1.25;
  white-space: normal;
}
.ram-monitor-evaluation {
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.018);
  font-size: 9.5px;
  font-weight: 550;
  line-height: 1.35;
}
.ram-monitor-panel.is-good .ram-monitor-status,
.ram-monitor-panel.is-good .ram-monitor-evaluation { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.ram-monitor-panel.is-warning .ram-monitor-status,
.ram-monitor-panel.is-warning .ram-monitor-evaluation { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 35%, var(--line)); }
.ram-monitor-panel.is-bad .ram-monitor-status,
.ram-monitor-panel.is-bad .ram-monitor-evaluation { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); }
.ram-monitor-panel.is-loading { opacity: .72; }

@media (max-width: 520px) {
  .ram-monitor-panel { padding: 8px; gap: 7px; }
  .ram-monitor-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
  .ram-monitor-card { padding: 7px; }
  .ram-monitor-card strong { font-size: 14px !important; }
  .ram-monitor-card span { font-size: 8px; }
  .ram-monitor-evaluation { font-size: 9px; }
}


/* =====================================================================
   WANAStatsWeb 3.1.43 - flickerfreie Hardware-Liveupdates
   ===================================================================== */

/* Periodische 5-Sekunden-Abrufe dürfen weder die Hardwareleiste noch ein
   geöffnetes Overlay abdunkeln. Der Initial-Spinner bleibt ohne Opacity-Sprung. */
#planMetrics.plan-metrics-strip.is-loading {
  opacity: 1 !important;
}

/* Ein explizit geöffnetes Overlay bleibt während Live-Wert-Updates sichtbar. */
#planMetrics .plan-metric.is-hover-open .plan-metric-tooltip {
  opacity: 1 !important;
}


/* =====================================================================
   WANAStatsWeb 3.1.45 - kompakte RAM-Diagnose / sauberer Textumbruch
   Desktop + Mobile
   ===================================================================== */

/* Die RAM-Diagnose darf niemals breiter als das Hardware-Overlay werden. */
.ram-monitor-panel,
.ram-monitor-head,
.ram-monitor-grid,
.ram-monitor-card,
.ram-monitor-evaluation {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Insgesamt deutlich kompakter, damit der Block weniger Höhe verbraucht. */
.ram-monitor-panel {
  padding: 8px 9px !important;
  gap: 6px !important;
  margin: 6px 0 5px !important;
}

.ram-monitor-head {
  gap: 7px !important;
}

.ram-monitor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

/* Kürzere Diagnose-Kacheln. */
.ram-monitor-card {
  padding: 5px 7px !important;
  gap: 1px !important;
  min-height: 50px !important;
  align-content: center !important;
}

.ram-monitor-card small {
  font-size: 8px !important;
  line-height: 1.05 !important;
}

.ram-monitor-card strong {
  font-size: 14.5px !important;
  line-height: 1.02 !important;
  margin: 1px 0 !important;
}

/* Unterzeile darf umbrechen und bleibt innerhalb der Kachel. */
.ram-monitor-card span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 8.2px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Der lange Bewertungstext unter den vier Kacheln wird bewusst umgebrochen. */
.ram-monitor-evaluation {
  display: block !important;
  padding: 6px 7px !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-wrap: pretty;
}

/* Desktop: etwas mehr Luft in der Breite, aber nicht in der Höhe. */
@media (min-width: 861px) {
  .ram-monitor-card {
    min-height: 48px !important;
  }
  .ram-monitor-evaluation {
    padding-right: 9px !important;
  }
}

/* Mobile: weiterhin 2x2, aber noch etwas flacher. */
@media (max-width: 520px) {
  .ram-monitor-panel {
    padding: 7px !important;
    gap: 5px !important;
  }
  .ram-monitor-grid {
    gap: 4px !important;
  }
  .ram-monitor-card {
    padding: 5px 6px !important;
    min-height: 47px !important;
  }
  .ram-monitor-card strong {
    font-size: 13.5px !important;
  }
  .ram-monitor-card span {
    font-size: 7.7px !important;
    line-height: 1.12 !important;
  }
  .ram-monitor-evaluation {
    padding: 6px !important;
    font-size: 8.5px !important;
    line-height: 1.3 !important;
  }
}

/* Sehr schmale Handys: Kacheln bleiben 2-spaltig, Text darf sauber umbrechen. */
@media (max-width: 360px) {
  .ram-monitor-card {
    padding-inline: 5px !important;
  }
  .ram-monitor-card small {
    font-size: 7.6px !important;
  }
  .ram-monitor-card strong {
    font-size: 12.8px !important;
  }
  .ram-monitor-card span {
    font-size: 7.3px !important;
  }
}


/* =====================================================================
   WANAStatsWeb 3.1.46 - vollständige Konsole + Kopieren
   ===================================================================== */
.console-full-footer {
  gap: 10px !important;
}
.console-full-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.console-full-copy {
  appearance: none;
  border: 1px solid rgba(255, 153, 0, .46);
  background: rgba(255, 153, 0, .08);
  color: #ff9f0a;
  border-radius: 10px;
  padding: 8px 13px;
  min-width: 86px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, opacity .16s ease;
}
.console-full-copy:hover {
  border-color: rgba(255, 153, 0, .8);
  background: rgba(255, 153, 0, .15);
}
.console-full-copy:disabled {
  cursor: wait;
  opacity: .72;
}
.console-full-copy.is-copied {
  color: #31e98b;
  border-color: rgba(49, 233, 139, .5);
  background: rgba(49, 233, 139, .09);
}
.console-full-copy.is-error {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, .5);
  background: rgba(255, 107, 107, .08);
}
@media (max-width: 640px) {
  .console-full-footer {
    align-items: flex-start !important;
    flex-wrap: wrap;
  }
  .console-full-footer > span {
    flex: 1 1 100%;
  }
  .console-full-footer-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .console-full-copy,
  .console-full-bottom {
    min-height: 36px;
  }
}


/* =====================================================================
   WANAStatsWeb 3.1.47 - RAM-Diagnose standardmäßig eingeklappt
   ===================================================================== */

details.ram-monitor-panel {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
}

details.ram-monitor-panel > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  padding: 8px 9px !important;
  min-width: 0;
  border-radius: inherit;
  outline: none;
}

details.ram-monitor-panel > summary::-webkit-details-marker {
  display: none;
}

details.ram-monitor-panel > summary::marker {
  content: "";
}

.ram-monitor-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  flex: 0 0 auto;
}

.ram-monitor-chevron {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform .16s ease, color .16s ease;
}

details.ram-monitor-panel[open] .ram-monitor-chevron {
  transform: rotate(0deg);
  color: var(--text-strong);
}

.ram-monitor-body {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0 9px 8px !important;
  box-sizing: border-box;
}

details.ram-monitor-panel:not([open]) .ram-monitor-body {
  display: none !important;
}

/* Im geschlossenen Zustand wirklich nur eine kurze Kopfzeile. */
details.ram-monitor-panel:not([open]) {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

details.ram-monitor-panel:not([open]) .ram-monitor-head {
  min-height: 36px;
}

/* Status und Pfeil bleiben sichtbar, damit sofort klar ist, dass die Diagnose
   live ist und ausgeklappt werden kann. */
details.ram-monitor-panel:not([open]) .ram-monitor-status {
  opacity: .92;
}

details.ram-monitor-panel > summary:hover .ram-monitor-chevron,
details.ram-monitor-panel > summary:focus-visible .ram-monitor-chevron {
  color: var(--orange);
}

/* Bei geöffneter Diagnose darf das Hardware-Popup auch am Desktop scrollen,
   falls der Bildschirm für Graph + Diagnose + Zeiträume nicht hoch genug ist. */
@media (min-width: 861px) {
  .plan-metric[data-plan-metric="ram"] .plan-metric-tooltip {
    max-height: calc(100dvh - 34px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

@media (max-width: 520px) {
  details.ram-monitor-panel > summary {
    padding: 7px !important;
  }

  .ram-monitor-body {
    padding: 0 7px 7px !important;
    gap: 4px;
  }

  .ram-monitor-head-actions {
    gap: 5px;
  }

  .ram-monitor-chevron {
    width: 16px;
    height: 16px;
    font-size: 14px;
  }
}


/* =====================================================================
   WANAStatsWeb 3.1.48 - Mobile Hardware Overlay: kein Horizontal-Scroll
   ===================================================================== */

@media (max-width: 860px) {
  /* Das komplette Hardwarefenster bleibt IMMER innerhalb des Viewports.
     overflow-x:hidden verhindert, dass overflow-y:auto automatisch auch
     horizontales Scrollen freischaltet. */
  #planMetrics .plan-metric-tooltip,
  #planMetrics .plan-metric:first-child .plan-metric-tooltip,
  #planMetrics .plan-metric:nth-child(2) .plan-metric-tooltip,
  #planMetrics .plan-metric:nth-last-child(-n+2) .plan-metric-tooltip {
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }

  /* Kein Kind darf die Tooltipbreite wieder künstlich aufziehen. */
  #planMetrics .plan-metric-tooltip *,
  #planMetrics .plan-history-chart,
  #planMetrics .plan-history-chart svg,
  #planMetrics .plan-window-list,
  #planMetrics .plan-window-row,
  #planMetrics .plan-tooltip-head,
  #planMetrics .plan-chart-summary {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #planMetrics .plan-history-chart {
    width: 100% !important;
    overflow: hidden !important;
  }

  #planMetrics .plan-history-chart svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* Zeitraumzeilen: die früheren Mindestbreiten (116px + 3x92px) waren
     breiter als ein Handy. Label + Min/Ø/Max werden jetzt flexibel verteilt. */
  #planMetrics .plan-window-row {
    width: 100% !important;
    grid-template-columns: minmax(76px, 1.05fr) repeat(3, minmax(0, .9fr)) !important;
    column-gap: 3px !important;
    row-gap: 1px !important;
    padding: 5px 5px !important;
  }

  #planMetrics .plan-window-label {
    min-width: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  #planMetrics .plan-window-stat {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-items: end !important;
    overflow: hidden !important;
  }

  #planMetrics .plan-window-stat small {
    font-size: 7.2px !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
  }

  #planMetrics .plan-window-stat b {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  /* Kopfzeile darf sich ebenfalls zusammenziehen. */
  #planMetrics .plan-tooltip-head {
    width: 100% !important;
    gap: 6px !important;
  }

  #planMetrics .plan-tooltip-head b {
    min-width: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  #planMetrics .plan-tooltip-head small {
    min-width: 0 !important;
    max-width: 58% !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: right !important;
  }

  #planMetrics .plan-chart-summary {
    width: 100% !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Auf normalen iPhone-/Android-Breiten wird der Untertitel unter den Titel
   gesetzt. Das spart horizontalen Platz und verhindert abgeschnittene Köpfe. */
@media (max-width: 520px) {
  #planMetrics .plan-metric-tooltip {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  #planMetrics .plan-tooltip-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 2px !important;
  }

  #planMetrics .plan-tooltip-head small {
    max-width: 100% !important;
    text-align: left !important;
    font-size: 8.5px !important;
  }

  #planMetrics .plan-window-row {
    grid-template-columns: minmax(70px, 1.08fr) repeat(3, minmax(0, .86fr)) !important;
    column-gap: 2px !important;
    padding-inline: 4px !important;
  }

  #planMetrics .plan-window-label {
    font-size: 10.8px !important;
  }

  #planMetrics .plan-window-stat small {
    font-size: 6.9px !important;
  }

  #planMetrics .plan-window-stat b {
    font-size: 9.9px !important;
  }
}

/* Sehr schmale Geräte: noch kompakter, aber weiterhin vier Spalten in einer
   Zeile, damit Min / Ø / Max direkt vergleichbar bleiben. */
@media (max-width: 370px) {
  #planMetrics .plan-metric-tooltip {
    left: 6px !important;
    right: 6px !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  #planMetrics .plan-window-row {
    grid-template-columns: minmax(62px, 1fr) repeat(3, minmax(0, .82fr)) !important;
    column-gap: 1px !important;
    padding-inline: 3px !important;
  }

  #planMetrics .plan-window-label {
    font-size: 10px !important;
  }

  #planMetrics .plan-window-stat small {
    font-size: 6.4px !important;
  }

  #planMetrics .plan-window-stat b {
    font-size: 9.1px !important;
  }
}


/* =====================================================================
   WANA Online Scroll Grid Patch 1.0.0
   Gerade-online: keine Pagination, alle Spieler in sauberem Scroll-Grid.
   Desktop: 4/3/2 Spalten; Mobile: lesbare 2-Spalten-Liste.
   ===================================================================== */
.home-online-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
}
.home-online-pagination,
#homeOnlinePagination {
  display: none !important;
}
.home-online-grid {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 58px !important;
  align-content: start !important;
  gap: 8px !important;
  max-height: 256px !important;
  padding: 10px 7px 4px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--green) 42%, var(--line-strong)) transparent !important;
  -webkit-overflow-scrolling: touch;
}
.home-online-grid:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--green) 48%, var(--line-strong));
  outline-offset: 4px;
  border-radius: 10px;
}
.home-online-grid::-webkit-scrollbar { width: 7px; }
.home-online-grid::-webkit-scrollbar-track { background: transparent; }
.home-online-grid::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--green) 38%, var(--line-strong));
  border-radius: 999px;
}
.home-online-player {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 58px !important;
  height: 58px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 9px !important;
  padding: 7px 9px !important;
  border-radius: 11px !important;
  text-align: left !important;
}
.home-online-player .player-avatar {
  width: 34px !important;
  height: 34px !important;
  flex: none !important;
  border-radius: 8px !important;
}
.home-online-player-copy {
  width: auto !important;
  min-width: 0 !important;
  display: grid !important;
  justify-items: start !important;
  align-content: center !important;
  gap: 3px !important;
}
.home-online-player-copy strong {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 10.5px !important;
  line-height: 1.08 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.home-online-player-copy small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 7.8px !important;
  line-height: 1.08 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.home-online-empty { min-height: 170px !important; }

@media (min-width: 1081px) and (max-width: 1419px) {
  .home-online-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-height: 256px !important;
  }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .home-online-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 256px !important;
  }
}
@media (max-width: 720px) {
  .home-online-panel { min-height: 0 !important; }
  .home-online-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 66px !important;
    gap: 7px !important;
    max-height: 226px !important;
    padding: 10px 5px 3px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .home-online-player {
    min-height: 66px !important;
    height: 66px !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 7px !important;
    text-align: left !important;
  }
  .home-online-player .player-avatar {
    width: 36px !important;
    height: 36px !important;
    flex: none !important;
    border-radius: 9px !important;
  }
  .home-online-player-copy {
    width: auto !important;
    justify-items: start !important;
    gap: 4px !important;
  }
  .home-online-player-copy strong {
    font-size: 10px !important;
    text-align: left !important;
  }
  .home-online-player-copy small {
    font-size: 7.4px !important;
    text-align: left !important;
  }
}
@media (max-width: 410px) {
  .home-online-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 64px !important;
    max-height: 220px !important;
    gap: 6px !important;
  }
  .home-online-player {
    min-height: 64px !important;
    height: 64px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 7px 6px !important;
  }
  .home-online-player .player-avatar {
    width: 34px !important;
    height: 34px !important;
  }
  .home-online-player-copy strong { font-size: 9.4px !important; }
  .home-online-player-copy small { font-size: 7px !important; }
}

/* =====================================================================
   WANA NoJitter Complete Audit 1.0.0
   Livewerte dürfen sich ändern, aber ihre Boxen behalten Geometrie und
   Scrollanker. Verhindert sichtbares Reload-/Reflow-Zittern auf Mobile/Desktop.
   ===================================================================== */
.home-online-grid,
.online-players-grid,
.home-console-log,
.console-log,
.task-feed-list,
.weather-forecast-grid,
#homeWeatherForecast,
.players-grid,
.stats-grid,
.spotlight-grid,
.global-stats-grid,
#globalStatsGrid,
#recordsGrid,
#profileStatsGrid,
#profileCombatList,
#profileTrophyGrid,
#profileEliteBossList,
#profileAdvancementCategories,
#eliteBossRecentList,
#eliteBossCatalog,
#eliteTrophyHistoryGrid,
#combatFights {
  overflow-anchor: none;
}

.home-online-player,
.online-player-card,
.player-card,
.metric-card,
.spotlight-card,
.weather-forecast-card,
.profile-stat-card {
  contain: layout paint style;
}

.player-avatar,
.champion-avatar,
.avatar-shell {
  contain: layout paint;
}
.player-avatar img,
.champion-avatar img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* Zahlen ändern sich live; tabellarische Ziffern verhindern horizontales Wandern. */
.online-since,
.online-since-compact,
.updated,
#homeOnlineCount,
#homeWeatherTemp,
#homeWeatherTime,
#homeWeatherDay,
#homeWeatherYear,
#homeWeatherSunrise,
#homeWeatherSunset,
#homePrecipChance,
.forecast-game-time,
.weather-forecast-core > b,
.plan-metric-value,
.plan-window-stat b,
.profile-stat-value,
.profile-stat-rank,
.combat-win-count,
.combat-versus-score,
.metric-leader-info span,
.mini-rank-row .value {
  font-variant-numeric: tabular-nums;
}

/* Der Gerade-online-Bereich besitzt immer dieselbe Karten-Geometrie. */
.home-online-grid {
  min-height: 0;
  scroll-behavior: auto !important;
}
.home-online-player {
  transform: none;
  will-change: auto;
}
.home-online-player:hover,
.home-online-player:focus-visible {
  transform: none !important;
}

/* Automatische Live-Aktualisierung soll keine Ein-/Ausblendanimation auslösen. */
.home-online-player,
.online-player-card,
.weather-forecast-card,
.console-line,
.profile-stat-card,
.metric-card,
.spotlight-card {
  animation: none;
}

/* Reserviert Breite für häufig wechselnde Livewerte. */
.home-online-player-copy small { min-inline-size: 0; }
#homeWeatherTime { min-inline-size: 4.8ch; }
.forecast-game-time { min-inline-size: 7.2ch; }
#planMetrics .plan-metric-value { min-inline-size: 4.5ch; }


/* WANA NoJitter Phase 3: feste Live-Geometrie + keine Timer-Reflow-Animationen. */
.home-online-grid {
  block-size: 204px !important;
  max-block-size: 204px !important;
  min-block-size: 204px !important;
}
@media (max-width: 720px) {
  .home-online-grid {
    block-size: 226px !important;
    max-block-size: 226px !important;
    min-block-size: 226px !important;
  }
}
@media (max-width: 410px) {
  .home-online-grid {
    block-size: 220px !important;
    max-block-size: 220px !important;
    min-block-size: 220px !important;
  }
}

/* Häufig aktualisierte Werte bekommen stabile Ziffern/Breiten, damit der Text
   innerhalb seiner Box wechseln kann, ohne Nachbarelemente zu verschieben. */
#navUpdatedAge,
#lastUpdated,
[data-page-updated],
#serverStatusText,
#serverOnlineCount,
#homeWeatherCondition,
.plan-metric-value {
  font-variant-numeric: tabular-nums;
}
#navUpdatedAge { min-inline-size: 8.5em; }
#serverOnlineCount { min-inline-size: 4ch; text-align: end; }
#homeWeatherCondition { min-block-size: 1.2em; }

/* Automatische Live-Klassen dürfen Farbe ändern, aber nicht durch eine
   transition wie ein Reload-Puls wirken. Interaktive Hover-Elemente außerhalb
   der Livewerte behalten ihre normalen Übergänge. */
#planMetrics.plan-metrics-strip,
#planMetrics .plan-metric,
.home-online-player,
.online-player-card,
.weather-forecast-card,
.console-line {
  transition-property: none !important;
}

/* Finale Online-Rasterregel: drei Karten auf normalen Ansichten, zwei nur
   auf wirklich schmalen Mobilgeraeten. Diese Regel steht absichtlich zuletzt. */
.online-players-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 620px) {
  .online-players-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* WANA-LIVE-HOME-GRID3-1.1.0-BEGIN */
/*
  Finale Override-Regel fuer die Startseiten-Kachel "Gerade online".
  Absichtlich am Dateiende und mit !important, damit die alte spaete
  4-Spalten-Regel nicht wieder gewinnt.

  Desktop/Tablet: maximal exakt 3 Karten pro Reihe.
  Schmale Mobilansichten behalten 2 Karten pro Reihe.
*/
@media (min-width: 721px) {
  .home-online-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1081px) {
  .home-online-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    block-size: 256px !important;
    max-block-size: 256px !important;
    min-block-size: 256px !important;
  }
}
/* WANA-LIVE-HOME-GRID3-1.1.0-END */
/* WANA-PLAYER-ACTIVITY-WEB-1.0.0-BEGIN */
.home-online-player-copy .online-activity,
.online-player-copy .online-activity {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-inline-size: 0 !important;
  margin: 0 !important;
  color: color-mix(in srgb, var(--green) 78%, #ffffff) !important;
  font-size: 7.2px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.online-activity.is-hidden { display: none !important; }
.home-online-player-copy { gap: 2px !important; }

/* Gerade Online bleibt auf Desktop/Tablet exakt bei 3 Karten pro Reihe. */
@media (min-width: 721px) {
  .home-online-grid,
  .online-players-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* WANA-PLAYER-ACTIVITY-WEB-1.0.0-END */