/* Spielerseiten (/spieler/<name>) und Erfolgs-Übersicht (/erfolge) – baut auf style.css auf. */

/* ---------- Kopf: Zurück-Knopf links, Logo in der Mitte ---------- */
.sub-top {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 8px 20px;
  background: rgba(7, 5, 6, .75); border-bottom: 2px solid var(--wow-frame);
}
.sub-logo img { display: block; height: 64px; width: auto; }
.back {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px 7px 9px;
  border: 2px solid var(--wow-frame); border-radius: 6px;
  background: linear-gradient(180deg, #8a1a0e, #5a0d06); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .2);
  color: var(--wow-yellow); text-decoration: none; font: 400 1rem/1 "Finest Display", Georgia, serif; text-shadow: 0 1px 2px #000;
}
.back svg { width: 18px; height: 18px; }
.back:hover, .back:focus-visible { color: #fff; border-color: #c9a44a; }

.sub-main-area { display: grid; gap: var(--gap); max-width: 1500px; margin: 0 auto; padding: 16px 20px 40px; }
.empty-note, .loading { margin: 14px; color: var(--muted); }

/* ---------- Kopf der Spielerseite ---------- */
.hero-body { display: flex; align-items: center; gap: 20px; padding: 16px 20px; }
.portrait {
  position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%;
  border: 3px solid var(--cls, #7d7a74); box-shadow: 0 0 0 2px #000, 0 0 18px color-mix(in srgb, var(--cls, #000) 35%, transparent);
  background: #111;
}
.portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.portrait.empty { background: radial-gradient(circle, #2a2620, #0c0b09); }
.portrait-level {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  min-width: 30px; padding: 1px 6px; border: 2px solid #7d7a74; border-radius: 10px;
  background: #140c06; color: var(--wow-yellow); font-size: .85rem; text-align: center;
}
.portrait-class { position: absolute; right: -8px; top: -6px; }
.portrait-class img { display: block; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #000; }
.hero-text { flex: 1; min-width: 0; }
.hero-text h1 { margin: 0; font: 400 clamp(1.6rem, 4vw, 2.4rem)/1.1 "Finest Display", Georgia, serif; text-shadow: 0 2px 4px #000; overflow-wrap: anywhere; }
.hero-player { margin: 0 0 2px; color: var(--wow-yellow); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-sub { margin: 4px 0 0; color: #fff; font-size: .95rem; }
.hero-sub.faint { color: var(--muted); font-size: .82rem; }
.hero-sub .guild { color: #40ff40; }
.updated { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--muted); font-size: .82rem; }
.updated b { color: #fff; font-weight: 400; }
.hero-points { flex: none; text-align: center; padding: 8px 14px; border: 1px solid rgba(137, 135, 129, .55); border-radius: 6px; background: rgba(0, 0, 0, .4); }
.hero-points span { display: block; color: var(--wow-yellow); font: 400 2rem/1 "Finest Display", Georgia, serif; }
.hero-points small { color: var(--muted); font-size: .72rem; }

/* Erfahrungsbalken (auch für den Erfolgs-Fortschritt) */
.xp {
  position: relative; height: 16px; margin-top: 10px; max-width: 520px;
  border: 1px solid #000; border-radius: 3px; background: rgba(0, 0, 0, .6); overflow: hidden;
}
.xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #b58ae8, #6a3fb0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.xp span { position: relative; display: block; text-align: center; font-size: .72rem; line-height: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.ach-progress { padding: 4px 14px 0; }
.ach-bar { max-width: none; height: 20px; }
.ach-bar i { background: linear-gradient(180deg, #ffe37a, #b98a12); }
.ach-bar span { line-height: 18px; font-size: .8rem; }

/* Mehrere Charaktere */
.char-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.char-tabs button {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border: 1px solid #7d7a74; border-radius: 5px; background: rgba(0, 0, 0, .55);
  color: var(--cls); font: inherit; cursor: pointer;
}
.char-tabs button img { width: 20px; height: 20px; border-radius: 50%; }
.char-tabs button small { color: var(--muted); }
.char-tabs button[aria-current="true"] { border-color: var(--wow-yellow); background: rgba(255, 209, 0, .12); }

/* Zahlen-Leiste */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1px;
  border: 2px solid var(--wow-frame); border-radius: 6px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px #000;
}
.stat-cell { padding: 8px 12px; background: var(--wow-window); min-width: 0; }
.stat-cell span { display: block; color: var(--wow-yellow); font-size: .72rem; }
.stat-cell b { display: block; margin-top: 2px; color: #fff; font-weight: 400; font-size: 1.05rem; overflow-wrap: anywhere; }
.stat-cell b small { color: var(--muted); font-size: .75rem; }

.player-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }

/* ---------- Charakterfenster ---------- */
.paperdoll { padding: 12px; }
.doll { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
.doll-col { display: grid; gap: 6px; align-content: start; }
.doll-bottom { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.slot {
  position: relative; width: 46px; height: 46px; padding: 0; display: grid; place-items: center;
  border: 2px solid var(--q, #3a3833); border-radius: 5px; background: #0d0b09;
  box-shadow: 0 0 0 1px #000, 0 0 8px color-mix(in srgb, var(--q, #000) 30%, transparent);
  color: #fff; cursor: pointer; font: inherit;
}
.slot img { display: block; width: 100%; height: 100%; border-radius: 3px; }
.slot .noicon { font-size: .8rem; color: var(--q); }
.slot.empty { border-color: #2c2a26; box-shadow: 0 0 0 1px #000, inset 0 0 10px #000; cursor: default; }
.slot.empty span { font-size: .5rem; color: #6d675c; text-align: center; line-height: 1.1; padding: 2px; }
.slot:hover, .slot:focus-visible { filter: brightness(1.2); }
.doll-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  border: 1px solid rgba(137, 135, 129, .35); border-radius: 6px;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--cls) 22%, transparent), rgba(0, 0, 0, .55) 70%);
  padding: 14px 8px; text-align: center;
}
.doll-portrait { width: min(160px, 70%); height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--cls); box-shadow: 0 0 0 2px #000, 0 0 30px color-mix(in srgb, var(--cls) 40%, transparent); }
.doll-name { font: 400 1.3rem/1.1 "Finest Display", Georgia, serif; text-shadow: 0 2px 3px #000; overflow-wrap: anywhere; }
.doll-sub { color: var(--muted); font-size: .8rem; }
.gear-list { list-style: none; margin: 12px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(137, 135, 129, .3); columns: 2 240px; column-gap: 18px; }
.gear-list li { display: flex; gap: 8px; align-items: baseline; padding: 1px 0; font-size: .8rem; break-inside: avoid; }
.gl-slot { flex: none; width: 88px; color: var(--muted); font-size: .72rem; }
.gl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-ilvl { flex: none; color: var(--faint); font-size: .72rem; }

.gear-tip { position: absolute; z-index: 50; width: min(320px, calc(100vw - 16px)); pointer-events: none; }
.gear-tip .tooltip { zoom: 1; height: auto; }

/* ---------- Zeitleiste ---------- */
.timeline { list-style: none; margin: 6px; padding: 4px 0; max-height: 640px; overflow-y: auto; border: 1px solid rgba(137, 135, 129, .55); border-radius: 5px; }
.tl-day { margin: 8px 10px 2px; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 209, 0, .25); color: var(--wow-yellow); font-size: .78rem; }
.tl-line { display: flex; align-items: center; gap: 10px; padding: 3px 10px; font-size: .88rem; }
.tl-ico {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px;
  border: 1px solid var(--q, #555); background: #0d0b09; color: var(--wow-yellow); font-size: .8rem;
}
.tl-ico.lvl { border-color: #a68a3a; color: #fff; background: radial-gradient(circle, #6b4a10, #1c1204); }
.tl-ico.fun { color: #ff9a6a; }
.tl-text { flex: 1; min-width: 0; }
.tl-text em { color: var(--wow-yellow); font-style: normal; }
.tl-text em.ach { color: #fff; }
.tl-text small { color: var(--muted); }
.tl-line time { flex: none; color: var(--faint); font-size: .75rem; }

/* ---------- Erfolge (Karten mit dem Rahmen aus style.css) ---------- */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px 12px; padding: 8px 12px 12px; }
.ach-grid > .ach-group { grid-column: 1 / -1; }
.ach-group { margin: 12px 12px 0; color: #fff; font: 400 1.1rem/1.2 "Finest Display", Georgia, serif; }
.ach-group small { margin-left: 8px; color: var(--muted); font: .75rem "Friz", Georgia, serif; }
.ach-grid .ach-group { margin: 8px 0 0; }
.ach-card { min-width: 0; }
.ach-card .ach-toast { height: 62px; }
.ach-who { margin: 3px 4px 0 64px; color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.ach-who a { color: var(--wow-yellow); text-decoration: none; }
.ach-who b { color: #fff; font-weight: 400; }

/* noch nicht erreicht: grau, etwas dunkler */
.ach-card.open .ach-toast { filter: grayscale(1) brightness(.72); }
.ach-card.open:hover .ach-toast { filter: grayscale(.6) brightness(.9); }

/* geheim: ganze Karte grau und verschwommen, Icon bleibt erkennbar, Text unlesbar */
.ach-card.secret .ach-toast { filter: grayscale(1) brightness(.8) blur(1px); }
.ach-card.secret .ach-toast .name,
.ach-card.secret .ach-toast .desc { filter: blur(5px); user-select: none; }
.ach-card.secret .ach-toast .who { color: #2a1f14; }

/* Erfolgs-Übersicht */
.ach-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.ach-filter button {
  padding: 4px 12px; border: 1px solid #7d7a74; border-radius: 4px; background: rgba(0, 0, 0, .5);
  color: var(--wow-yellow); font: inherit; font-size: .85rem; cursor: pointer;
}
.ach-filter button[aria-pressed="true"] { border-color: var(--wow-yellow); background: rgba(255, 209, 0, .14); color: #fff; }
.personal-row { padding: 4px 0 0; }
.personal-name { display: inline-block; margin: 8px 12px 0; color: var(--wow-yellow); text-decoration: none; font-size: .95rem; }

/* ---------- Beute ---------- */
.loot { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 10px 12px 12px; }
.loot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.loot-head img { border: 1px solid var(--q, #555); border-radius: 4px; }
.loot-head small { color: var(--muted); font-size: .72rem; }
.loot .tooltip { zoom: .85; height: auto; }

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  .player-grid { grid-template-columns: minmax(0, 1fr); }
  .timeline { max-height: 420px; }
}
@media (max-width: 640px) {
  .sub-top { min-height: 64px; padding: 6px 12px; }
  .sub-logo img { height: 48px; }
  .back { left: 12px; padding: 6px 10px 6px 6px; font-size: .9rem; }
  .sub-main-area { padding: 12px 10px 30px; }
  .hero-body { flex-wrap: wrap; gap: 14px; padding: 14px; }
  .portrait { width: 72px; height: 72px; }
  .hero-points { order: 3; width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
  .hero-points span { display: inline; font-size: 1.5rem; }
  .ach-grid { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .slot { width: 40px; height: 40px; }
  .doll { gap: 6px; }
  .paperdoll { padding: 8px; }
  .doll-center { padding: 10px 4px; }
  .ach-who { margin-left: 8px; }
}

/* Hintergrund als feste Ebene statt "background-attachment: fixed" (ruckelt am Handy und beim Scrollen) */
body.sub-page { background: transparent; }
body.sub-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 5, 10, .3), rgba(4, 5, 10, .5)), url("/wallpaper.webp?v=1") center / cover no-repeat;
}