/* Pixelpokal-Teaser für die Startseite (Komponente .pp-teaser)
   Stand: 03.10.2026. Alle Werte sind feste Styleguide-v1-Werte und sollen später als Variablen laufen.
   Schrift: Barlow Semi Condensed, 600 (woff2 selbst hosten, Lizenz SIL OFL). Pfad unten an die App anpassen. */

@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-display:swap;src:url("../fonts/barlow-semi-condensed-600.64a19a7cafc2.woff2") format("woff2")}

.pp-teaser{display:block;background:#1a2133;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px;color:#f4f5ff;text-decoration:none}
.pp-teaser__head{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center}
.pp-teaser__logo{width:84px;height:84px;display:block}
.pp-teaser__title{margin:0;font:600 clamp(20px,6.2vw,30px)/1.05 "Barlow Semi Condensed",system-ui,sans-serif;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.pp-teaser__date{margin:6px 0 0;font:600 clamp(18px,5.4vw,26px)/1.1 "Barlow Semi Condensed",system-ui,sans-serif;text-transform:uppercase;color:#a7f36b}

.pp-teaser__win{margin:14px 0 0;font:400 16px/1.45 system-ui,sans-serif;color:#dfe5f5}
.pp-teaser__win b{color:#f4f5ff;font-weight:700}

.pp-teaser__live{display:flex;align-items:center;gap:9px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font:700 14px/1.2 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.pp-teaser__live i{width:8px;height:8px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 4px 1px rgba(255,59,59,.65);animation:pp-rec 1.4s ease-in-out infinite}
@keyframes pp-rec{0%,100%{opacity:1;box-shadow:0 0 4px 1px rgba(255,59,59,.65)}50%{opacity:.4;box-shadow:0 0 2px 0 rgba(255,59,59,.3)}}
@media (prefers-reduced-motion:reduce){.pp-teaser__live i{animation:none}}

.pp-teaser__bar{height:8px;margin:12px 0 0;border-radius:4px;background:#2a3350;overflow:hidden}
.pp-teaser__bar i{display:block;height:100%;width:var(--pp-progress,0%);background:#a7f36b}
.pp-teaser__meta{display:flex;justify-content:space-between;gap:10px;margin:8px 0 0;font:400 14px/1.3 system-ui,sans-serif;color:#bac4de}
.pp-teaser__meta b{color:#f4f5ff}

.pp-teaser__status{display:flex;gap:10px;align-items:center;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#111424;border:1px solid rgba(255,255,255,.1);font:400 15px/1.4 system-ui,sans-serif}
.pp-teaser__status b{color:#f4f5ff}
.pp-teaser__dot{flex:none;width:12px;height:12px;border-radius:50%;background:#8a93ad}      /* nicht qualifiziert */
.pp-teaser__status--close .pp-teaser__dot{background:#ffe879}                              /* auf Kurs */
.pp-teaser__status--in .pp-teaser__dot{background:#a7f36b}                                 /* qualifiziert */

.pp-teaser__btn{display:flex;align-items:center;justify-content:center;min-height:48px;margin:14px 0 0;border-radius:12px;background:#a7f36b;color:#132208;font:700 16px/1 system-ui,sans-serif}

.pp-home{margin:0 0 24px}
.pp-home .pp-teaser+.pp-teaser{margin-top:16px}
.pp-teaser:hover,.pp-teaser:focus-visible{text-decoration:none}

/* The app scroll area already excludes bottom navigation; leave a small gap for its raised scan button. */
.pp-page{--pp-sticky-bottom:12px;overflow:visible}
.pp-page #pp-stand,.pp-page #pp-personal,.pp-page #pp-wertung{scroll-margin-top:16px}
.pp-page__explanation{padding:16px 14px;border:1px solid rgba(255,255,255,.1);background:#111424;font:400 15px/1.5 system-ui,sans-serif}
.pp-page__explanation h3{margin:0 0 10px;font:600 21px/1.1 "Barlow Semi Condensed",system-ui,sans-serif;text-transform:uppercase}
.pp-page__explanation p{margin:0 0 12px}
.pp-page__points{font-size:14px}
.pp-page__timeline{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.pp-page__timeline li{display:grid;gap:2px;border-left:2px solid #a7f36b;padding-left:10px}
.pp-page__timeline span{color:#bac4de;font-size:13px}
.pp-page__allocation{padding:12px 14px;background:#111424;border:1px solid rgba(255,255,255,.1);font:400 14px/1.4 system-ui,sans-serif}
.pp-page__allocation p{margin:0 0 8px}
.pp-page__you-wrap{margin:-14px 0 0}

.pp-page__you-text{min-width:0}
.pp-page__you .pp-page__name{display:flex;align-items:center;gap:6px}
.pp-page__you small{display:block;font:400 13px/1.35 system-ui,sans-serif}
.pp-page__you .pp-page__val{text-align:right}

.pp-page__name{overflow-wrap:anywhere}
.pp-page__btn{padding:12px;text-align:center;line-height:1.3}
.pp-page__btn:hover,.pp-page__btn:focus-visible,.pp-page__status:hover,.pp-page__status:focus-visible,.pp-page__tab:hover{text-decoration:none}
.xp-pixel-note{padding:14px;border-left:3px solid #a7f36b;background:#1a2133}
@media(min-width:768px){.pp-page{max-width:850px;margin:0 auto}.pp-page__timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== BEGIN HI-SCORE-ERGAENZUNG · Stand 03.10.2026 =====
   Einbau: In custom.css den kompletten Block zwischen BEGIN und END durch die neue Version ersetzen
   (nicht ergänzen). Gibt es den Block noch nicht, ans Ende der custom.css einfügen. Davor bleibt alles unverändert. */
/* EINE Datei, wird laufend erweitert. Stand 03.10.2026. Teil 1: Design-Basics (Styleguide v1). Teil 2: Pixelpokal-Seite. */

/* ECKEN (Stand 03.10.2026): drei Stufen. Karten 6px, Buttons/Felder 4px, Chips 3px. Kreise und Oktagone bleiben. Zentrale Variablen: --card-radius, --button-radius, --ci-radius, --ci-control-radius. */

/* TYPOGRAFIE-REGELN (gelten für alles, was wir bauen)
   1. Schrift folgt der Rolle, nicht dem HTML-Tag. Titelschrift (Barlow Semi Condensed, Gewicht 600): Seiten-, Abschnitts- und Kartentitel, Spielername als Titel einer Karte, große Zahlen. Systemschrift: Fließtext, Buttons, Navigation, Formulare, Tabellen, Listen, kleine Beschriftungen.
   2. Titel in Barlow stehen in normaler Groß-/Kleinschreibung (kein Capslock). Großbuchstaben nur bei kleinen Beschriftungen in Systemschrift (Eyebrow, Gruppenlabels wie ERREICHT), nie bei Spielernamen.
   3. Links "mehr ansehen" stehen rechtsbündig, am besten in der Kopfzeile des Abschnitts, mit "›" dahinter.
   4. Gewichte: Barlow nur 600, Systemschrift 400 und 700. Keine Zwischenwerte (650, 750 ...).
   5. Größen: 13 (klein), 15 (Button), 17 (Text), 20 (Kartentitel), 24 (Abschnitt), 30 bis 38 (Seitentitel). */

/* Design-Basics v2 (Stand 03.10.2026): Styleguide v1. Ans Ende der custom.css anhängen.
   Rang bewusst über :is(.ci-visitor,.ci-staff,.profile-styles) main … erhöht, ohne !important. */
:root{--panel:#1a2133;--ci-surface:#1a2133;--ci-control:#111424}
main :is(h1,h2,h3):not(.visitor-eyebrow,.nav-page-title,.ranking-identity,.champion-heading,.museum-index-caption *,.player-card *,.personal-chronicle-entry *){font-family:"Barlow Semi Condensed",var(--font-body);font-weight:600;text-transform:none;letter-spacing:.01em;line-height:1.1}
:is(.ci-visitor,.ci-staff,.profile-styles) main :is(.card,.pixel-highlight,.champion-choices .champion-choice,.task-menu-items,.museum-index-card,.ranking-game-row){background:#1a2133;background-image:none;box-shadow:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .champion-choices .champion-choice{border:1px solid rgba(255,255,255,.12);border-radius:6px}
:is(.ci-visitor,.ci-staff,.profile-styles) main .champion-choices .champion-choice::after{color:#bac4de}
:is(.ci-visitor,.ci-staff,.profile-styles) main .champion-choice .app-icon{color:#dc8ede}
:is(.ci-visitor,.ci-staff,.profile-styles) main .admin-critical-link{background:transparent;color:#bac4de;border:1px solid rgba(255,255,255,.2);border-radius:4px}
header .header-actions>.button,header .header-actions>form>button{border-radius:4px}
input,select,textarea{border-radius:4px}
/* Startseite: Profilkarte wie eine normale Karte, leeren Avatar-Platz ausblenden */
:is(.ci-visitor,.ci-staff,.profile-styles) main .player-card.home-dashboard{background:#242e43;border:1px solid rgba(255,255,255,.14);border-radius:6px;box-shadow:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-avatar-level:empty{display:none}
/* Buttons (Styleguide): Primär grün, Sekundär transparent mit Rand, 12 px, 15 px/700, 48 px; Kopfzeile 44 px */
:is(.ci-visitor,.ci-staff,.profile-styles) :is(main,header) :is(a.button,button.button,button[type=submit]):not([class*=secondary],.danger,.admin-critical-link,.ui-action){background:#a7f36b;color:#132208;border:0;border-radius:4px;font-size:15px;font-weight:700;min-height:48px;box-shadow:none}
:is(.ci-visitor,.ci-staff,.profile-styles) :is(main,header) :is(.header-secondary,.ui-action,.home-all-events,.home-qr-action,.button.secondary,button.secondary,.header-actions>form>button){background:transparent;color:#f4f5ff;border:1px solid #8398aa;border-radius:4px;font-size:15px;font-weight:700;box-shadow:none}
:is(.ci-visitor,.ci-staff,.profile-styles) header :is(.header-secondary,.header-actions>form>button,.header-actions>.button){min-height:44px;font-size:14px}
/* Seitentitel (H1) einheitlich */
:is(.ci-visitor,.ci-staff,.profile-styles) main h1:not(.visitor-eyebrow,.nav-page-title,.ranking-identity){font-size:clamp(30px,8vw,38px);font-weight:600}
/* Museum-Areale (70er bis Moderne): flache Karten, neutral, kein Farbstreifen */
:is(.ci-visitor,.ci-staff,.profile-styles) main .museum-areas .museum-area{background:#1a2133;background-image:none;border:1px solid rgba(255,255,255,.12);border-left-color:rgba(255,255,255,.12);border-radius:6px;box-shadow:none}

/* Startseite: Name in Titelschrift (Barlow, aber ohne Großbuchstaben, Spielernamen bleiben wie geschrieben), XP-Balken wie der Pixelpokal-Balken (8 px, Grün auf #2a3350), QR-Button als Sekundärbutton (Primär ist nur "Jetzt qualifizieren") */
:is(.ci-visitor,.ci-staff,.profile-styles) main .player-card h1{font-family:"Barlow Semi Condensed",var(--font-body);font-weight:600;text-transform:none;letter-spacing:.01em;font-size:30px;line-height:1.1}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-level-meter{display:block;height:auto;border:0;border-radius:0;background:none;overflow:visible}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-level-meter::after{display:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-level-meter .xp-progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border:0;border-radius:4px;background:#101625;overflow:hidden}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-level-meter .xp-progress::-webkit-progress-bar{background:#101625;border-radius:4px}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-level-meter .xp-progress::-webkit-progress-value{background:#a7f36b;border-radius:4px;box-shadow:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-level-meter .xp-progress::-moz-progress-bar{background:#a7f36b;border-radius:4px;box-shadow:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-level-meter .home-level-meter-labels{position:static;display:flex;justify-content:space-between;align-items:baseline;height:auto;padding:8px 0 0;font:400 13px/1.3 system-ui,sans-serif;color:#bac4de}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-level-meter-labels span:first-child{font-weight:700;color:#f4f5ff}

/* Untere Navigation: Linien-Icons (24 px, 1,75 px Strich) statt Textzeichen. Die Icons sind SVG-Masken und übernehmen die Textfarbe (aktiv = grün). */
.bottom-nav a>span[aria-hidden="true"]{display:block;width:24px;height:24px;font-size:0;line-height:0;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.bottom-nav a:nth-child(2)>span[aria-hidden]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021v-8h5v8M9%2021V6h6v15M15%2021v-5h5v5M3%2021h18%22%2F%3E%3C%2Fsvg%3E")}
.bottom-nav a:nth-child(3)>span[aria-hidden]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208V5a1%201%200%200%201%201-1h3M16%204h3a1%201%200%200%201%201%201v3M20%2016v3a1%201%200%200%201-1%201h-3M8%2020H5a1%201%200%200%201-1-1v-3%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")}
.bottom-nav a:nth-child(4)>span[aria-hidden]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2011h4M9%209v4M15.5%2012h.01M18%2014h.01M17.3%206H6.7a4%204%200%200%200-3.9%203.2l-1.3%206.1A2.9%202.9%200%200%200%204.4%2019c.8%200%201.5-.4%202-1l1.6-2h8l1.6%202c.5.6%201.2%201%202%201a2.9%202.9%200%200%200%202.9-3.7l-1.3-6.1A4%204%200%200%200%2017.3%206Z%22%2F%3E%3C%2Fsvg%3E")}
.bottom-nav a:nth-child(5)>span[aria-hidden]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-6.2-7-11.2a7%207%200%200%201%2014%200C19%2014.8%2012%2021%2012%2021Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.8%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E")}

/* Teil 2: Pixelpokal-Seite (/pixelpokal/1/), siehe seite/pixelpokal-seite-markup.html */
/* Pixelpokal-Seite /pixelpokal/1/ (Komponente .pp-page): Kopf, Preise, Finale, Startplätze und Qualifikationsstand in einer Seite. Stand 03.10.2026.
   Schriftpfad siehe pixelpokal-teaser.css. */

.pp-page{display:block;background:#1a2133;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:18px;color:#f4f5ff}
.pp-page *{box-sizing:border-box}
.pp-page__head{container-type:inline-size;display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center}
.pp-page__logo{width:84px;height:84px;display:block}
.pp-page__title{margin:0;font:600 min(30px,calc((100cqw - 98px)/9.9))/1.05 "Barlow Semi Condensed",system-ui,sans-serif;letter-spacing:.01em;text-transform:none;white-space:nowrap}
.pp-page__date{margin:6px 0 0;font:600 min(26px,calc((100cqw - 98px)/9.9))/1.1 "Barlow Semi Condensed",system-ui,sans-serif;text-transform:none;color:#a7f36b}
.pp-page__lead{margin:16px 0 0;font:400 16px/1.5 system-ui,sans-serif;color:#dfe5f5}

.pp-page__live{display:flex;align-items:center;gap:9px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font:700 14px/1.2 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.pp-page__live i{width:8px;height:8px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 4px 1px rgba(255,59,59,.65);animation:pp-rec 1.4s ease-in-out infinite}
@keyframes pp-rec{0%,100%{opacity:1;box-shadow:0 0 4px 1px rgba(255,59,59,.65)}50%{opacity:.4;box-shadow:0 0 2px 0 rgba(255,59,59,.3)}}
@media (prefers-reduced-motion:reduce){.pp-page__live i{animation:none}}
.pp-page__bar{height:8px;margin:12px 0 0;border-radius:4px;background:#2a3350;position:relative}
.pp-page__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#a7f36b;width:var(--pp-progress,0%)}
.pp-page__bar u{position:absolute;top:-4px;bottom:-4px;width:2px;background:#f4f5ff;left:var(--pp-quali-end,82%)}
.pp-page__ticks{display:flex;justify-content:space-between;gap:8px;margin:8px 0 0;font:400 13px/1.3 system-ui,sans-serif;color:#bac4de}
.pp-page__ticks b{color:#f4f5ff}
.pp-page__count{margin:18px 0 0;font:400 14px/1.3 system-ui,sans-serif;color:#bac4de}
.pp-page__count strong{color:#f4f5ff;font-weight:700}

.pp-page__status{display:flex;gap:10px;align-items:center;margin:14px 0 0;padding:12px 14px;border-radius:4px;background:#111424;border:1px solid rgba(255,255,255,.1);font:400 15px/1.4 system-ui,sans-serif}
.pp-page__status b{color:#f4f5ff}
.pp-page__dot{flex:none;width:12px;height:12px;border-radius:50%;background:#8a93ad}
.pp-page__status--close .pp-page__dot{background:#ffe879}
.pp-page__status--in .pp-page__dot{background:#a7f36b}

.pp-page__sec{margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.pp-page__h{margin:0;font:600 24px/1.1 "Barlow Semi Condensed",system-ui,sans-serif;letter-spacing:.01em;text-transform:none}
.pp-page__sub{margin:6px 0 14px;font:400 15px/1.45 system-ui,sans-serif;color:#bac4de}

.pp-page__prize{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;margin:10px 0 0;padding:10px 12px;border:2px solid #a7f36b;border-radius:4px}
.pp-page__prize-ico{width:40px;height:40px;border-radius:4px;background:#a7f36b;color:#132208;display:flex;align-items:center;justify-content:center}
.pp-page__prize-ico svg{width:24px;height:24px}
.pp-page__prize small{display:block;font:700 12px/1.2 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#a7f36b}
.pp-page__prize b{display:block;margin-top:2px;font:600 18px/1.1 "Barlow Semi Condensed",system-ui,sans-serif;text-transform:none}
.pp-page__prize span{display:block;margin-top:3px;font:400 14px/1.35 system-ui,sans-serif;color:#dfe5f5}

.pp-page__path{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;margin:10px 0 0;padding:14px;background:#111424;border:1px solid rgba(255,255,255,.1);border-radius:4px}
.pp-page__num{font:600 36px/1 "Barlow Semi Condensed",system-ui,sans-serif;color:#a7f36b;text-align:center}
.pp-page__path b{display:block;font:600 20px/1.1 "Barlow Semi Condensed",system-ui,sans-serif;text-transform:none}
.pp-page__path p{margin:4px 0 0;font:400 15px/1.4 system-ui,sans-serif;color:#dfe5f5}

.pp-page__list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.pp-page__list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;font:400 15px/1.4 system-ui,sans-serif;color:#dfe5f5}
.pp-page__list svg{width:24px;height:24px;color:#a7f36b}
.pp-page__note{margin:14px 0 0;font:400 14px/1.45 system-ui,sans-serif;color:#bac4de}
.pp-page__note a{color:#a7f36b;font-weight:700}

.pp-page__btns{display:grid;gap:10px;margin:24px 0 0}
.pp-page__btn{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:4px;font:700 16px/1 system-ui,sans-serif;text-decoration:none;background:#a7f36b;color:#132208}
.pp-page__btn--sec{background:transparent;color:#f4f5ff;border:1px solid rgba(255,255,255,.22)}

/* Hauptpreise nebeneinander */
.pp-page__prizes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.pp-page__prize{display:block;margin:0;padding:12px}
.pp-page__prize-ico{width:40px;height:40px}
.pp-page__prize-ico svg{width:24px;height:24px}
.pp-page__prize b{margin-top:10px}
.pp-page__prize b{font-size:18px}
.pp-page__prize span{font-size:13px}
@media (max-width:330px){.pp-page__prizes{grid-template-columns:1fr}}
.pp-page__list{margin:14px 0 0;gap:6px}

/* Wege: reine Info, ohne Kasten */
.pp-page__path{margin:0;padding:10px 0;background:none;border:0;border-radius:0;border-top:1px solid rgba(255,255,255,.1);grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center}
.pp-page__sub+.pp-page__path{border-top:0}
.pp-page__num{font-size:32px}
.pp-page__path b{font-size:18px}
.pp-page__path p{margin:2px 0 0;font-size:14px}

/* Aktueller Qualifikationsstand: Tabs, Tabelle, eigener Stand */
.pp-page__tabs,.ui-tabs{display:flex;gap:4px;margin:14px 0 0;position:relative;z-index:1}
.pp-page__tab,.ui-tab{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px;border:1px solid rgba(255,255,255,.1);border-bottom:0;border-radius:4px 4px 0 0;background:#0b0e1a;color:#bac4de;font:700 15px/1 system-ui,sans-serif;text-decoration:none;cursor:pointer}
.pp-page__tab:hover,.ui-tab:hover{background:#151a2c;color:#f4f5ff}
.pp-page__tab[aria-selected="true"],.pp-page__tab[aria-current="page"],.ui-tab[aria-selected="true"]{margin-bottom:-1px;min-height:48px;background:#111424;border-color:rgba(255,255,255,.1);color:#a7f36b}
.pp-page__tabhint{margin:6px 0 0;font:400 14px/1.45 system-ui,sans-serif;color:#bac4de}
.pp-page__panel{margin:0}
.pp-page__panel[hidden]{display:none}
.pp-page__hint{margin:12px 0 0;font:400 13px/1.4 system-ui,sans-serif;color:#bac4de}
.pp-page__row--free{opacity:.45}
.pp-page__row--free .pp-page__av{background:none;border:1px dashed rgba(255,255,255,.35)}
.pp-page__row--free .pp-page__name{font:italic 400 13px/1.2 system-ui,sans-serif;color:#bac4de}
.pp-page__slotrow{display:block;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.14);background:#111424}
.pp-page__slotrow b{display:flex;align-items:center;gap:8px;font:700 15px/1.2 system-ui,sans-serif;color:#f4f5ff}
.pp-page__slotrow svg{width:22px;height:22px;color:#a7f36b}
.pp-page__slotrow span{display:block;margin-top:3px;font:400 13px/1.35 system-ui,sans-serif;color:#bac4de}
.pp-page__slotrow+.pp-page__table,.pp-page__slotrow+.pp-page__empty{border-top:0}
.pp-page__table{margin:0;padding:0;list-style:none;border:1px solid rgba(255,255,255,.1);border-bottom:0;border-radius:0;padding-bottom:14px;background:#111424;overflow:hidden}
.pp-page__row{display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid rgba(255,255,255,.08)}
.pp-page__row:first-child{border-top:0}
.pp-page__rank{display:flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 4px;border-radius:3px;background:rgba(255,255,255,.06);font:600 15px/1 system-ui,sans-serif;color:#bac4de}
.pp-page__av{width:40px;height:40px;border-radius:3px;background:#2a3350;color:#dfe5f5;display:flex;align-items:center;justify-content:center;overflow:hidden;font:700 14px/1 system-ui,sans-serif}
.pp-page__av img,.pp-page__av svg{width:100%;height:100%;object-fit:cover;display:block}
.pp-page__name{display:block;font:600 16px/1.2 system-ui,sans-serif;color:#f4f5ff;text-decoration:none}
.pp-page__status{color:inherit;text-decoration:none}
.pp-page__row small{display:block;margin-top:2px;font:400 13px/1.2 system-ui,sans-serif;color:#bac4de}
.pp-page__val{font:600 20px/1 "Barlow Semi Condensed",system-ui,sans-serif;color:#f4f5ff}
.pp-page__cut{margin:0;padding:8px 14px;border-top:1px dashed rgba(255,255,255,.25);font:700 12px/1.2 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#bac4de}
.pp-page__empty{margin:0;padding:14px;border:1px solid rgba(255,255,255,.1);border-bottom:0;border-radius:0;padding-bottom:14px;background:#111424;font:400 15px/1.4 system-ui,sans-serif;color:#bac4de}
/* eigener Stand, bleibt beim Scrollen der Liste unten sichtbar. --pp-sticky-bottom = Höhe der unteren Navigation (ca. 76px) */
.pp-page__you-wrap{position:sticky;bottom:var(--pp-sticky-bottom,0px);z-index:2;margin:-14px 0 0}
.pp-page__you{display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border:1px solid rgba(167,243,107,.5);border-radius:4px;background:#1b2c2a}
.pp-page__you .pp-page__rank{background:rgba(255,255,255,.1);color:#f4f5ff}
.pp-page__you small{color:#dfe5f5}
.pp-page__rules{margin:16px 0 0;border:1px solid rgba(255,255,255,.14);border-radius:4px}
.pp-page__rules summary{padding:14px;cursor:pointer;font:700 15px/1.2 system-ui,sans-serif;color:#f4f5ff}
.pp-page__rules div{padding:0 14px 6px}
.pp-page__rules p{margin:0 0 12px;font:400 14px/1.5 system-ui,sans-serif;color:#dfe5f5}
/* ---- Spielerkarte (/players/<id>/) ---- */
/* Alle Rahmen flach: kein Verlauf, kein Glow. Unterschied nur ueber Rahmenfarbe/-staerke. */
.profile-card-page section.player-card{position:relative;overflow:hidden;background:#1a2133;background-image:none;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:32px 20px 24px;box-shadow:none}
.profile-card-page .player-card-identity{flex-direction:column;text-align:center;gap:18px}
.profile-card-page .player-card-avatar{width:112px;height:112px;border-radius:0;image-rendering:pixelated;border:3px solid var(--prestige)}
.profile-card-page .player-card-level{display:inline-block;margin:0 0 12px;padding:4px 12px;border:1px solid var(--prestige);border-radius:3px;font:700 13px/1.2 system-ui,sans-serif;letter-spacing:.1em;color:#f4f5ff}
.profile-card-page section.player-card h1{font-family:"Barlow Semi Condensed",var(--font-body);font-weight:600;text-transform:none;letter-spacing:.01em;font-size:36px;line-height:1.1;margin:0}
.profile-card-page section.player-card.champion-frame,.profile-card-page section.player-card.tournament-winner-frame{border:2px solid var(--prestige);background:#1a2133}
.profile-card-page section.player-card.pixel-team-frame{border:4px solid var(--prestige);border-radius:0;background:#1a2133}
.profile-card-page section.player-card.pixel-winner-frame{border:4px solid var(--prestige);border-radius:0;background:#1a2133;box-shadow:inset 0 0 0 4px #1a2133,inset 0 0 0 6px #b69afb}
.profile-card-page section.player-card[class*="-frame"] .player-card-level{background:var(--prestige);color:#10131f}
.profile-card-page .profile-card-links .button{background:transparent;color:#f4f5ff;border:1px solid #8398aa;border-radius:4px;font-size:15px;font-weight:700;min-height:48px;box-shadow:none}
/* Vorgeschlagener Inhalt (braucht Markup von Codex, siehe OFFENE-PUNKTE): Zahlenband, Top-Highscores, Badges */
.player-card-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0 0;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:#111424}
.player-card-stats div{padding:14px 6px;text-align:center}
.player-card-stats div+div{border-left:1px solid rgba(255,255,255,.12)}
.player-card-stats b{display:block;font:600 30px/1 "Barlow Semi Condensed",var(--font-body);color:#f4f5ff}
.player-card-stats span{display:block;margin-top:6px;font:500 12px/1.2 system-ui,sans-serif;color:#bac4de}
.player-card-section{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);text-align:left}
.player-card-section h2{font:600 20px/1.2 "Barlow Semi Condensed",var(--font-body);margin:0 0 8px;color:#f4f5ff}
.player-card-more{display:block;margin-top:12px;text-align:right;font:600 14px/1.2 system-ui,sans-serif;color:#8fb6ff;text-decoration:none}
.player-card-more::after{content:" ›"}
/* Highscores: <ol class="player-card-highscores"><li><span class="hs-place" data-place="1">1</span><span class="hs-game">Spiel<small>Datum</small></span><span class="hs-score">48.200</span></li> */
.player-card-highscores{list-style:none;margin:0;padding:0}
.player-card-highscores li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:0 12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.player-card-highscores .hs-game{font:600 16px/1.2 system-ui,sans-serif;color:#f4f5ff}
.player-card-highscores .hs-game small{display:block;margin-top:3px;font:400 12px/1.2 system-ui,sans-serif;color:#8398aa}
.player-card-highscores .hs-score{font:600 24px/1 "Barlow Semi Condensed",var(--font-body);font-variant-numeric:tabular-nums;color:#f4f5ff}
.player-card-highscores .hs-place{position:relative;width:30px;height:30px;display:grid;place-items:center;padding:0;color:var(--d,#c9d3e8);font:500 17px/1 "Barlow Semi Condensed",system-ui,sans-serif;background:linear-gradient(145deg,color-mix(in srgb,var(--c,#34425e) 55%,#fff) 0%,var(--c,#34425e) 42%,color-mix(in srgb,var(--c,#34425e) 78%,#000) 100%);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpolygon%20points%3D%2213%2C3%2027%2C3%2037%2C13%2037%2C27%2027%2C37%2013%2C37%203%2C27%203%2C13%22%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpolygon%20points%3D%2213%2C3%2027%2C3%2037%2C13%2037%2C27%2027%2C37%2013%2C37%203%2C27%203%2C13%22%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.player-card-highscores .hs-place::before{content:"";position:absolute;left:18%;top:10%;width:46%;height:20%;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(-35deg);opacity:.25}
.player-card-highscores .hs-place::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpolygon%20points%3D%2214%2C8%2026%2C8%2032%2C14%2032%2C26%2026%2C32%2014%2C32%208%2C26%208%2C14%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C.28)%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.player-card-highscores .hs-place[data-place="1"],.player-card-highscores .hs-place[data-place="2"],.player-card-highscores .hs-place[data-place="3"]{font-weight:700}
.player-card-highscores .hs-place[data-place="1"]::before,.player-card-highscores .hs-place[data-place="2"]::before,.player-card-highscores .hs-place[data-place="3"]::before{opacity:1}
.player-card-highscores .hs-place[data-place="1"]{--c:#ffbf1f;--d:#4a2f00}
.player-card-highscores .hs-place[data-place="2"]{--c:#b9d3f0;--d:#1f3350}
.player-card-highscores .hs-place[data-place="3"]{--c:#ee8a3a;--d:#4a1f05}
/* Badges: <ul class="player-card-badges"><li><i>🏅</i>Name</li><li class="rare"><i>👑</i>Name</li><li><i data-k="target">🎯</i>Punktlandung</li><li class="locked"><i data-k="lock">🔒</i>???</li> -- data-k nur fuer optische Mittenkorrektur einzelner Emojis; .rare = goldener Rand fuer besonders seltene Achievements (siehe OFFENE-PUNKTE) */
.player-card-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px 8px;margin:0;padding:0;list-style:none}
.player-card-badges li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font:600 12px/1.2 system-ui,sans-serif;color:#f4f5ff}
.player-card-badges i{display:block;width:64px;height:64px;font-style:normal;font-size:28px;line-height:64px;text-align:center;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2262%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232b3552%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23252e4a%22%2F%3E%3Cstop%20offset%3D%22.75%22%20stop-color%3D%22%23161c30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230e1220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23a9b6d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2356648a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232c3552%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2213%2C3.5%2027%2C3.5%2036.5%2C13%2036.5%2C27%2027%2C36.5%2013%2C36.5%203.5%2C27%203.5%2C13%22%20fill%3D%22url(%23g)%22%20stroke%3D%22url(%23r)%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpolygon%20points%3D%2214.5%2C6.2%2025.5%2C6.2%2033.8%2C14.5%2033.8%2C25.5%2025.5%2C33.8%2014.5%2C33.8%206.2%2C25.5%206.2%2C14.5%22%20fill%3D%22none%22%20stroke%3D%22%233d4868%22%20stroke-width%3D%22.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.player-card-badges li.rare i{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2262%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232b3552%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23252e4a%22%2F%3E%3Cstop%20offset%3D%22.75%22%20stop-color%3D%22%23161c30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230e1220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffe08a%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23b88a2e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236a4d14%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2213%2C3.5%2027%2C3.5%2036.5%2C13%2036.5%2C27%2027%2C36.5%2013%2C36.5%203.5%2C27%203.5%2C13%22%20fill%3D%22url(%23g)%22%20stroke%3D%22url(%23r)%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpolygon%20points%3D%2214.5%2C6.2%2025.5%2C6.2%2033.8%2C14.5%2033.8%2C25.5%2025.5%2C33.8%2014.5%2C33.8%206.2%2C25.5%206.2%2C14.5%22%20fill%3D%22none%22%20stroke%3D%22%237a5c1c%22%20stroke-width%3D%22.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
.player-card-badges i[data-k="target"]{line-height:60px;text-indent:4px}
.player-card-badges i[data-k="lock"]{line-height:60px}
.player-card-badges li.locked{opacity:.5}
.player-card-badges li.locked i{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2216.5%22%20fill%3D%22none%22%20stroke%3D%22%237a8aa8%22%20stroke-width%3D%221.2%22%20stroke-dasharray%3D%223.24%203.24%22%2F%3E%3C%2Fsvg%3E")}
/* Eigene Spielerkarte: nur sichtbar, wenn man selbst der Spieler ist.
   Markup: in section.player-card ganz vorn <div class="player-card-tools"><a class="edit" href=".../profile/edit/" aria-label="Profil bearbeiten"></a></div>
   direkt nach der Karte <a class="player-card-qr" href=".../profile/qr/">Mein Spieler-QR</a>, danach nav.home-actions mit den Gruppen "Community" und "Mein Fortschritt" */
.player-card-section h2 a{float:right;font:600 14px/1.6 system-ui,sans-serif;color:#8fb6ff;text-decoration:none}
/* Kopfzeile als Link: <a class="ach-head" href=".../achievements/"><h2>Achievements</h2><span>2 von 19</span></a> */
.ach-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:inherit;text-decoration:none}
.ach-head h2{margin:0}
.ach-head span{display:inline-flex;align-items:center;gap:4px;font:600 14px/1 system-ui,sans-serif;color:#bac4de}
.ach-head span::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ach-head+.player-card-badges{margin-top:16px}
.player-card-section p{margin:0;font:400 14px/1.5 system-ui,sans-serif;color:#bac4de}
.player-card-tools{position:absolute;top:12px;right:12px;display:flex;gap:8px}
.player-card-tools a{width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:4px;display:grid;place-items:center;color:#bac4de;text-decoration:none}
.player-card-tools a::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.player-card-tools a.edit{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020l1-4L16.5%204.5a2%202%200%200%201%203%203L8%2019z%22%2F%3E%3Cpath%20d%3D%22M14.5%206.5l3%203%22%2F%3E%3C%2Fsvg%3E")}
.player-card-qr{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:0 14px;min-height:40px;border:1px solid #8398aa;border-radius:4px;color:#f4f5ff;font:700 14px/1 system-ui,sans-serif;text-decoration:none;background:transparent}
.player-card-qr::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214.5%22%20y%3D%223.5%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223.5%22%20y%3D%2214.5%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M14.5%2014.5h2.5v2.5M20.5%2014.5v.01M14.5%2020.5h.01M17.5%2020.5h3v-3%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214.5%22%20y%3D%223.5%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223.5%22%20y%3D%2214.5%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M14.5%2014.5h2.5v2.5M20.5%2014.5v.01M14.5%2020.5h.01M17.5%2020.5h3v-3%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
/* ---- Achievements-Seite (Referenz fuer alle Achievement-Darstellungen) ----
   Vorbild Steam. Erreicht = Oktagon, noch offen = gestrichelter Kreis in Grau, selten = goldener Oktagon-Rand.
   Markup (eigene Seite und Seite eines anderen Spielers, dort <div class="ach-who"><img class="ach-avatar"><h1>Achievements von <Name></h1></div>):
   <div class="ach"><h1>Achievements</h1><div class="ach-sum"><span>2 von 19 erreicht</span><span>11 %</span></div><div class="ach-bar"><i style="width:11%"></i></div>
   <div class="ui-tabs"><a class="ui-tab" aria-selected="true">Persoenlich</a><a class="ui-tab">Global</a></div>
   <div class="ach-panel"><div class="ach-tools"> .ui-select (Vergleichen mit) ODER label.ui-switch (Eigene anzeigen) </div>
   <div class="ach-label">Erreicht</div>
   <article class="ach-row"><i class="ach-badge">🏅</i><div><h2>Name</h2><p>Beschreibung</p></div><div class="ach-side">02.10.2026</div></article>  (selten: class="ach-row is-rare")
   <div class="ach-label">Noch offen</div>
   <article class="ach-row is-open"><i class="ach-badge">🕹️</i><div>..</div><div class="ach-side"><div class="ach-prog">1 / 3<div class="t"><i style="width:33%"></i></div></div></div></article>
   Vergleich: im .ach-side <div class="ach-dates"><div>Datum<img src=Avatar></div><div>Datum<img src=Avatar></div></div> (fehlt: img mit style="opacity:.25")
   Global-Reiter: <div class="ach-g"><article class="ach-row" style="--p:41%"><i class="ach-check"></i><i class="ach-badge">..</i><div>..</div><div class="ach-pc">41 %</div></article> ...</div> (nicht erreicht: class is-open, ach-check leer) */
.ach{color:#f4f5ff}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ach h1{font:600 clamp(30px,8vw,38px)/1.1 "Barlow Semi Condensed",var(--font-body);margin:8px 0 14px;text-transform:none;letter-spacing:.01em}
.ach-who{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.ach-who h1{margin:0!important}
.ach-avatar{width:44px;height:44px;flex:none;image-rendering:pixelated;border:0}
.ach-sum{display:flex;justify-content:space-between;font:600 14px/1 system-ui,sans-serif;color:#bac4de;margin-bottom:8px}
.ach-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.ach-bar i{display:block;height:100%;background:#5d86c9;border-radius:2px}
.ach .ui-tabs{margin-top:18px}
.ach-panel{padding:14px 12px 6px;border:1px solid rgba(255,255,255,.1);border-radius:0 0 4px 4px;background:#111424}
.ach-tools{display:flex;align-items:center;margin:0 0 12px}
.ach-label{margin:18px 0 8px;font:700 12px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8398aa}
.ach-panel>.ach-label:first-child,.ach-tools+.ach-label{margin-top:4px}
.ach-row{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:0 14px;margin:0 0 8px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:#1a2133}
.ach-row .ach-badge{width:56px;height:56px;font-size:25px;line-height:56px;text-align:center;font-style:normal;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2262%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232b3552%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23252e4a%22%2F%3E%3Cstop%20offset%3D%22.75%22%20stop-color%3D%22%23161c30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230e1220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23a9b6d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2356648a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232c3552%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2213%2C3.5%2027%2C3.5%2036.5%2C13%2036.5%2C27%2027%2C36.5%2013%2C36.5%203.5%2C27%203.5%2C13%22%20fill%3D%22url(%23g)%22%20stroke%3D%22url(%23r)%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpolygon%20points%3D%2214.5%2C6.2%2025.5%2C6.2%2033.8%2C14.5%2033.8%2C25.5%2025.5%2C33.8%2014.5%2C33.8%206.2%2C25.5%206.2%2C14.5%22%20fill%3D%22none%22%20stroke%3D%22%233d4868%22%20stroke-width%3D%22.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.ach-row.is-rare .ach-badge{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2262%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232b3552%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23252e4a%22%2F%3E%3Cstop%20offset%3D%22.75%22%20stop-color%3D%22%23161c30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230e1220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffe08a%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23b88a2e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236a4d14%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2213%2C3.5%2027%2C3.5%2036.5%2C13%2036.5%2C27%2027%2C36.5%2013%2C36.5%203.5%2C27%203.5%2C13%22%20fill%3D%22url(%23g)%22%20stroke%3D%22url(%23r)%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpolygon%20points%3D%2214.5%2C6.2%2025.5%2C6.2%2033.8%2C14.5%2033.8%2C25.5%2025.5%2C33.8%2014.5%2C33.8%206.2%2C25.5%206.2%2C14.5%22%20fill%3D%22none%22%20stroke%3D%22%237a5c1c%22%20stroke-width%3D%22.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
.ach-row.is-open{background:#161c2c}
.ach-row.is-open .ach-badge{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2216.5%22%20fill%3D%22none%22%20stroke%3D%22%235f6b82%22%20stroke-width%3D%221.2%22%20stroke-dasharray%3D%223.24%203.24%22%2F%3E%3C%2Fsvg%3E");filter:grayscale(1) brightness(.75) contrast(.9)}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ach-row h2{margin:0;font:600 18px/1.2 "Barlow Semi Condensed",var(--font-body);text-transform:none;letter-spacing:.01em;color:#f4f5ff}
.ach-row.is-open h2{color:#a0abc2!important}
.ach-row p{margin:3px 0 0;font:400 13px/1.4 system-ui,sans-serif;color:#bac4de}
.ach-row.is-open p{color:#8b97ae}
.ach-side{text-align:right;font:400 12px/1.3 system-ui,sans-serif;color:#8398aa;white-space:nowrap}
.ach-side small{display:none}
.ach-prog{display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:60px;font:600 12px/1 system-ui,sans-serif;color:#bac4de}
.ach-prog .t{width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.ach-prog .t i{display:block;height:100%;background:#5d86c9}
.ach-dates{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ach-dates>div{display:flex;align-items:center;gap:8px;font:400 11px/1.2 system-ui,sans-serif;color:#8398aa}
.ach-dates img{width:22px;height:22px;image-rendering:pixelated;border:1px solid rgba(255,255,255,.3)}
.ach-me{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 13px/1 system-ui,sans-serif;color:#bac4de}
.ach-me img{width:28px;height:28px;image-rendering:pixelated;border:1px solid rgba(255,255,255,.3)}
/* Global-Reiter: Streifen links (Haekchen), Hintergrund als feiner Anteilsbalken */
.ach-g .ach-row{position:relative;overflow:hidden;grid-template-columns:34px 48px 1fr auto;gap:0 12px;padding:10px 14px 10px 0;background:linear-gradient(90deg,rgba(143,182,255,.09) var(--p),transparent var(--p)),#1f2740}
.ach-g .ach-row.is-open{background:linear-gradient(90deg,rgba(143,182,255,.07) var(--p),transparent var(--p)),#1b2236}
.ach-g .ach-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34px;background:#1a2133}
.ach-g .ach-row.is-open::before{background:#161c2c}
.ach-g .ach-badge{width:48px;height:48px;font-size:22px;line-height:48px}
.ach-check{position:relative;z-index:1;justify-self:center;width:18px;height:18px}
.ach-row:not(.is-open) .ach-check{background:#bac4de;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ach-pc{font:700 15px/1 "Barlow Semi Condensed",var(--font-body);color:#f4f5ff}
.ach-row.is-open .ach-pc{color:#bac4de}
@media(min-width:720px){.ach{max-width:880px;margin:0 auto}.ach-panel{padding:18px 18px 10px}.ach-row{grid-template-columns:64px 1fr auto;gap:0 18px;padding:14px 18px}.ach-row .ach-badge{width:64px;height:64px;font-size:28px;line-height:64px}:is(.ci-visitor,.ci-staff,.profile-styles) main .ach-row h2{font-size:20px}.ach-row p{font-size:14px}.ach-side{font-size:13px}.ach-side small{display:inline}.ach-prog{width:84px}.ach-g .ach-row{grid-template-columns:40px 56px 1fr auto}.ach-g .ach-row::before{width:40px}.ach-g .ach-badge{width:56px;height:56px;line-height:56px}}
/* Schalter (Komponente): <label class="ui-switch"><input type="checkbox"><span class="tr"></span>Eigene anzeigen</label> */
.ui-switch{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font:600 14px/1 system-ui,sans-serif;color:#f4f5ff;cursor:pointer}
.ui-switch input{position:absolute;opacity:0;pointer-events:none}
.ui-switch .tr{position:relative;width:42px;height:24px;border-radius:12px;background:#2a3350;transition:background .15s}
.ui-switch .tr::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#bac4de;transition:transform .15s,background .15s}
.ui-switch input:checked+.tr{background:#3f67a8}
.ui-switch input:checked+.tr::after{transform:translateX(18px);background:#fff}
.ui-switch input:focus-visible+.tr{outline:2px solid #8fb6ff;outline-offset:2px}
/* ---- Auswahlfeld (Komponente fuer alle Dropdowns dieser Art, z. B. "Vergleichen mit") ----
   Markup: <label class="ui-select"><select><option value="">Vergleichen mit …</option>...</select></label> (wie bei Steam: Platzhaltertext links, Pfeil rechts, kein extra Label) */
.ui-select{position:relative;display:flex;align-items:center;width:100%;min-height:44px;padding:0;border:1px solid transparent;border-radius:3px;background:#1a2133;box-sizing:border-box}
.ui-select:focus-within{border-color:#8fb6ff}
.ui-select:hover{background:#202941}
.ui-select select{flex:1;min-width:0;height:44px;min-height:0;padding:0 26px 0 0;border:0;border-radius:0;outline:0;background:transparent;color:#f4f5ff;font:600 15px/1 system-ui,sans-serif;text-align:left;appearance:none;-webkit-appearance:none;cursor:pointer}
.ui-select::after{content:"";position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;background:#8fb6ff;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;pointer-events:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select{width:100%;height:44px;min-height:0;padding:0 40px 0 14px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#f4f5ff;font:600 15px/1 system-ui,sans-serif}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select{color-scheme:dark}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select:focus,:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select:focus-visible{outline:0;box-shadow:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select:focus-within{border-color:#8fb6ff;outline:0}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select option{background:#1a2133;color:#f4f5ff;font:600 15px/1.4 system-ui,sans-serif;padding:8px 12px}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select option:checked,:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select option:hover{background:#2d4a8a;color:#fff}
/* Geoeffnete Liste: wo der Browser es kann (Chrome/Edge ab 135, "customizable select") komplett eigenes Aussehen, sonst die normale Browserliste in dunkel */
@supports(appearance:base-select){
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select,:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select::picker(select){appearance:base-select}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select{display:flex;align-items:center}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select::picker-icon{display:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select::picker(select){margin-top:4px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:4px;background:#1a2133;box-shadow:0 8px 24px rgba(0,0,0,.45);width:anchor-size(width);min-width:0}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select option{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:3px;background:transparent;color:#f4f5ff;font:600 15px/1.2 system-ui,sans-serif}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select option::checkmark{display:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select option:hover,:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select option:focus-visible{background:#2d4a8a;color:#fff}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-select select option:checked{background:rgba(143,182,255,.16);color:#fff}
}
@media(min-width:720px){.ui-select.is-compact{width:320px}}
/* ---- Achievement-Meldungen (nach dem Freischalten) im gleichen Stil ---- */
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-celebration{margin:20px 0;padding:20px;border:1px solid #8398aa;border-radius:4px;background:#1a2133;background-image:none;box-shadow:none;color:#f4f5ff}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-celebration-title{justify-content:flex-start;gap:14px}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-celebration .achievement-badge{order:-1;width:64px;height:64px;margin:0;font-size:28px;line-height:64px;text-align:center;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2262%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232b3552%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23252e4a%22%2F%3E%3Cstop%20offset%3D%22.75%22%20stop-color%3D%22%23161c30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230e1220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23a9b6d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2356648a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232c3552%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2213%2C3.5%2027%2C3.5%2036.5%2C13%2036.5%2C27%2027%2C36.5%2013%2C36.5%203.5%2C27%203.5%2C13%22%20fill%3D%22url(%23g)%22%20stroke%3D%22url(%23r)%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpolygon%20points%3D%2214.5%2C6.2%2025.5%2C6.2%2033.8%2C14.5%2033.8%2C25.5%2025.5%2C33.8%2014.5%2C33.8%206.2%2C25.5%206.2%2C14.5%22%20fill%3D%22none%22%20stroke%3D%22%233d4868%22%20stroke-width%3D%22.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-celebration h2{font:600 clamp(24px,6vw,30px)/1.15 "Barlow Semi Condensed",var(--font-body);text-transform:none;letter-spacing:.01em}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-celebration p{font:400 14px/1.5 system-ui,sans-serif;color:#bac4de}
.achievement-kicker{font:700 12px/1.2 system-ui,sans-serif;letter-spacing:.1em;color:#8fb6ff}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-new{position:absolute;top:12px;right:12px;padding:3px 8px;border:1px solid #8fb6ff;border-radius:4px;color:#8fb6ff;font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ach-row{position:relative}
:is(.ci-visitor,.ci-staff,.profile-styles) main .ui-notice.achievement-unlocked-notice{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#f4f5ff;border:1px solid rgba(255,255,255,.14);border-radius:3px;background:#1a2133;font:400 14px/1.5 system-ui,sans-serif}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-unlocked-notice a{margin-left:auto;color:#8fb6ff;font-weight:600;white-space:nowrap;text-decoration:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-unlocked-notice a::after{content:" ›"}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-seen{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:3px;background:#161c2c;color:#a0abc2;font:400 13px/1.4 system-ui,sans-serif}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-seen a{margin-left:auto;color:#8fb6ff;font-weight:600;white-space:nowrap;text-decoration:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-seen a::after{content:" ›"}
:is(.ci-visitor,.ci-staff,.profile-styles) main .secret-achievements{margin:8px 0;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:#161c2c}
:is(.ci-visitor,.ci-staff,.profile-styles) main .secret-achievements h2{margin:0 0 4px;font:600 18px/1.2 "Barlow Semi Condensed",var(--font-body);text-transform:none;color:#a0abc2}
:is(.ci-visitor,.ci-staff,.profile-styles) main .secret-achievements p{margin:0;font:400 13px/1.4 system-ui,sans-serif;color:#8b97ae}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-celebration .achievement-badge{width:72px;height:72px;font-size:32px;line-height:72px}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-celebration .button{display:flex;justify-content:flex-end;align-items:center;min-height:0;margin:12px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#8fb6ff;font:600 14px/1.2 system-ui,sans-serif;text-decoration:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-celebration .button::after{content:"›";margin-left:6px;font-size:18px;line-height:1}
/* ---- Gewichtung (Stand 03.10.2026): Gruen und gefuellt nur fuer die EINE Hauptaktion einer Seite. Zweite Ebene: Rand ohne Fuellung. Dritte Ebene: Textlink mit ›.
   Kopfzeile = Navigation, daher nie gruen: "Meine Scores" mit hellem Rand, "Abmelden" als stiller Textlink. Suchknopf im Museum, "QR neu erzeugen" und "SCAN oeffnen": zweite Ebene. Gilt nur fuer Besucherseiten; Mitarbeiter- und Verwaltungsseiten sind bewusst noch nicht umgestellt (spaeter gesondert). ---- */
:is(.ci-visitor,.ci-staff,.profile-styles) header .header-actions>a.header-scores{background:transparent;color:#f4f5ff;border:1px solid rgba(255,255,255,.28);box-shadow:none;font-weight:600}
:is(.ci-visitor,.ci-staff,.profile-styles) header .header-actions>form>button{background:transparent;border:0;color:#bac4de;box-shadow:none;font-weight:600;padding-left:6px;padding-right:6px}
:is(.ci-visitor,.ci-staff,.profile-styles) main form.museum-search button,:is(.ci-visitor,.ci-staff,.profile-styles) main .player-qr-page form button,:is(.ci-visitor,.ci-staff,.profile-styles) main .acquaintance-start a.button{background:transparent;color:#f4f5ff;border:1px solid #8398aa;box-shadow:none}
/* Spielerkarte: Darstellungssicherheit (Badges als Links, schmale Bildschirme) */
.player-card-badges li>a{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;color:inherit;font:inherit;text-align:center;text-decoration:none}
.player-card-badges li>a:hover{color:#fff}
.player-card-badges li>a:focus-visible{outline:2px solid #8fb6ff;outline-offset:4px;border-radius:4px}
.player-card-highscores .hs-game a{color:inherit;text-decoration:none;overflow-wrap:break-word}
.player-card-highscores .hs-game a:hover{text-decoration:underline;text-underline-offset:3px}
.player-card-highscores .hs-game a:focus-visible{outline:2px solid #8fb6ff;outline-offset:2px;border-radius:2px}
.player-card-highscores li{grid-template-columns:34px minmax(0,1fr) auto}
.player-card-highscores .hs-game{overflow-wrap:break-word}
.player-card-highscores .hs-score{white-space:nowrap;overflow-wrap:normal}
.player-card-stats span{overflow-wrap:normal;word-break:normal}
@media(max-width:380px){.player-card-highscores .hs-score{font-size:20px}.player-card-highscores li{gap:8px}}
/* Spielerkarte: Level ohne Rahmen, Trennstrich vor Achievements */
.player-card .player-card-level{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;border-radius:0;background:transparent;color:#8fb6ff;font:700 12px/1 system-ui,sans-serif;letter-spacing:.14em}
.player-card .player-card-level::before,.player-card .player-card-level::after{content:"";width:22px;height:1px;background:rgba(143,182,255,.45)}
.player-card .ach-head{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.player-card-highscores li:last-child{border-bottom:0}
/* Emoji in Badges: mittig, feste Emoji-Schriftreihenfolge (Zwischenloesung; verbindlich nur mit SVG-Icons) */
.player-card-badges i{display:flex;align-items:center;justify-content:center;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:28px;text-indent:0}
/* Spielerkarte: grosse Zahlen in der Statistik (bis ca. 6 Stellen, kein Umbruch, Schrift passt sich der Kartenbreite an) */
.player-card-stats{container-type:inline-size;display:flex}
.player-card-stats>div{flex:1 1 auto;min-width:0;padding-left:6px;padding-right:6px}
.player-card-stats b{white-space:nowrap;overflow-wrap:normal;font-size:clamp(22px,9cqw,30px)}
/* ===== END HI-SCORE-ERGAENZUNG ===== */



/* Integration: apply supplied component declarations over existing app selectors. */
#main .pp-page__title{margin:0;font:600 min(30px,calc((100cqw - 98px)/9.9))/1.05 "Barlow Semi Condensed",system-ui,sans-serif;letter-spacing:.01em;text-transform:none;white-space:nowrap}

/* Keep a visible starting hint at zero XP; numeric progress remains zero. */
:is(.ci-visitor,.ci-staff,.profile-styles) main :is(.home-dashboard,.xp-journal-page) .home-level-meter:has(.xp-progress[value="0"])::after{display:block;inset:0 auto auto 0;width:8px;height:8px;border-radius:var(--radius-chip);background:#a7f36b;pointer-events:none}

/* Visible staff queue indicator, matching the qualification live dot. */
.staff-task-dot{display:inline-block;position:relative;top:-1px;flex:none;width:8px;height:8px;margin-left:9px;vertical-align:middle;border-radius:50%;background:#ff3b3b;box-shadow:0 0 4px 1px rgba(255,59,59,.65);animation:pp-rec 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.staff-task-dot{animation:none}}

.ci-staff main button.monitor-copy-url{display:block;max-width:100%;padding:0;border:0;border-radius:0;background:transparent;color:var(--subtle);font:400 .875rem/1.5 system-ui,sans-serif;text-align:left;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;cursor:pointer}

.champion-month{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:1rem;line-height:1.5}
.champion-month>span{white-space:nowrap}
.champion-month-separator{margin-right:4px}
.champion-month-reward{color:var(--accent);font-weight:600}

.champion-rank-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffe879;vertical-align:middle}

.ci-visitor .champion-choice>.app-icon{grid-row:1}
.champion-choice::after{grid-row:1}
.champion-choice-podium{grid-column:2 / -1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px;font-size:.8125rem;color:var(--subtle);min-width:0}
.champion-podium-place{display:flex;align-items:center;gap:4px;min-width:0}
.champion-podium-place-2{justify-content:flex-start}
.champion-podium-place-3{justify-content:flex-start}
.champion-podium-medal{flex:0 0 18px;width:18px;text-align:center}
.champion-podium-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.museum-collection-hint a{text-decoration:none}


.ranking-game-result{grid-template-columns:8.5rem minmax(0,1fr)}
.ranking-game-result>span:first-child{white-space:nowrap}


.xp-help-followup{text-decoration:none}

.champion-ranking th:first-child,.champion-ranking td:first-child{text-align:center}

.champion-month>span:first-child{font-weight:700}


/* Qualifizierter persönlicher Stand; keine Änderung an der Vergabe. */
.pp-page__you--qualified .pp-page__name,.pp-page__you--qualified .pp-page__val{color:#f4f5ff}
.pp-page__you--qualified .pp-page__rank{background:rgba(255,216,107,.13);color:#ffe9a6}
.pp-page__you--qualified small{color:#ffe9a6}
.pp-page__you[data-pixel-xp-hint]{cursor:pointer}
.pp-page__you[data-pixel-xp-hint]:focus-visible{outline:2px solid #ffe079;outline-offset:3px}
.pp-xp-hint{width:min(420px,calc(100vw - 32px));box-sizing:border-box;max-height:calc(100dvh - 32px);overflow:auto;margin:auto}
.pp-xp-hint::backdrop{background:#000c}

.ci-visitor .pp-page__you.pixel-personal-qualified{border-radius:4px}

main .imprint-content a,main .imprint-content a:hover,main .imprint-content a:focus-visible{text-decoration:none}

.museum-brand-nowrap{white-space:nowrap}

.ranking-champion-links{display:flex;gap:16px;margin:0 0 20px;font-size:14px;white-space:nowrap;overflow-x:auto}
main .ranking-champion-links a{text-decoration:none}
.champion-choice[id],#current-champions{scroll-margin-top:20px}

@media(prefers-reduced-motion:no-preference){html:has(.ranking-directory){scroll-behavior:smooth}}

/* Home panels share the secondary action border colour. */
main:has(.home-dashboard) :is(.home-dashboard,.home-action-group>div,.home-events .event-card){border-color:#8398aa}

/* Shared neutral outline for Home Pixelpokal, area selection and places. */
main:has(.home-dashboard) :is(.pp-teaser,.day-player,.pixel-seat-card),:is(.ci-visitor,.ci-staff,.profile-styles) main .museum-areas .museum-area,.ci-visitor .places-list .place-row{border-color:#8398aa}

/* Arcade ranking tables. */
.ci-visitor .score-ranking-table{border:1px solid #8398aa;background:#141b2b;border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;border-radius:6px;overflow:hidden;background-clip:padding-box}
.ci-visitor .score-ranking-table :is(th,td){border:0;padding:14px 12px;vertical-align:middle}
.ci-visitor .score-ranking-table thead{background:#253044}
.ci-visitor .score-ranking-table th{color:#b8c9dc;letter-spacing:.08em;font-size:.72rem}
.ci-visitor .score-ranking-table th:first-child{width:48px}
.ci-visitor .score-ranking-table th:last-child{width:36%}
.ci-visitor .score-ranking-table tbody tr:nth-child(even){background:#202a3c}
.ci-visitor .score-ranking-table tbody td{border-top:1px solid #ffffff08}
.ci-visitor .score-ranking-table td:nth-child(2){font-weight:600;font-size:1rem}
.ci-visitor .score-ranking-table td:last-child{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:clamp(1rem,4vw,1.35rem);letter-spacing:-.04em;white-space:nowrap;color:#f4f5ff}
.ci-visitor .score-ranking-table .score-place-1 td:last-child{color:#ffe080}
.ci-visitor .score-ranking-table .score-place-2 td:last-child{color:#d5e2ef}
.ci-visitor .score-ranking-table .score-place-3 td:last-child{color:#e9b790}
.score-ranking-table .score-rank{display:inline-flex;align-items:center;justify-content:center;width:28px;min-height:28px;color:#b8c9dc;font-weight:700;font-size:.95rem}
.score-ranking-table .score-rank span{font-size:1.35rem}
.ci-visitor .score-ranking-table tr.is-self{background:#b5ff6512;box-shadow:inset 3px 0 #b5ff65}
@media(max-width:380px){.ci-visitor .score-ranking-table :is(th,td){padding:12px 7px}.ci-visitor .score-ranking-table th:first-child{width:40px}}

/* Continuous corners and consistent arcade typography. */
.ci-visitor .score-ranking-table thead{background:transparent}
.ci-visitor .score-ranking-table thead th{background:#253044}
.ci-visitor .score-ranking-table thead th:first-child{border-top-left-radius:5px}
.ci-visitor .score-ranking-table thead th:last-child{border-top-right-radius:5px}
.ci-visitor .score-ranking-table tbody tr:last-child td:first-child{border-bottom-left-radius:5px}
.ci-visitor .score-ranking-table tbody tr:last-child td:last-child{border-bottom-right-radius:5px}
.ci-visitor .score-ranking-table tbody td,.ci-visitor .score-ranking-table .score-rank{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.ci-visitor .score-ranking-table .score-place-1 .score-rank{color:#ffe080}
.ci-visitor .score-ranking-table .score-place-2 .score-rank{color:#d5e2ef}
.ci-visitor .score-ranking-table .score-place-3 .score-rank{color:#e9b790}

.ci-visitor .score-ranking-table th{font-family:ui-monospace,monospace}
.ci-visitor .score-ranking-table td:nth-child(2) a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ci-visitor .score-ranking-table th{letter-spacing:0}
.ci-visitor .score-ranking-table td:nth-child(2),.ci-visitor .score-ranking-table td:nth-child(2) a,.ci-visitor .score-ranking-table .score-rank{letter-spacing:0}

.ci-visitor .score-ranking-table th{font-size:.875rem}

.ci-visitor .score-ranking-table .score-place-2 :is(.score-rank,td:last-child){color:#d5e2ef;text-shadow:none}

.ci-visitor .score-ranking-table tbody tr:not(.score-place-1):not(.score-place-2):not(.score-place-3) :is(.score-rank,td:last-child){color:#96a4b9;font-weight:500}

.ci-visitor .score-ranking-table thead th{background:#344158}

.ci-visitor .score-ranking-table td:last-child{letter-spacing:0}
.ci-visitor .score-ranking-table tbody tr:not(.score-place-1):not(.score-place-2):not(.score-place-3) :is(.score-rank,td:last-child){font-weight:700}

/* Pixelpokal ranking list: shared appearance, existing tabs and personal status untouched. */
.pp-ranking-head{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:14px;background:#344158;border:1px solid #8398aa;border-bottom:0;border-radius:6px 6px 0 0;color:#b8c9dc;font:700 14px/1.6 ui-monospace,monospace}
.pp-ranking-head span:last-child{text-align:right}
.pp-page__panel .pp-page__table{border:1px solid #8398aa;border-top:0;border-radius:0 0 6px 6px;padding-bottom:0;background:#141b2b}
.pp-page__table .pp-page__row{background:transparent;border-top:1px solid #ffffff08;min-height:58px}
.pp-page__table .pp-page__row:nth-child(even){background:#202a3c}
.pp-page__table :is(.pp-page__name,.pp-page__rank,.pp-page__val){font-family:ui-monospace,monospace;letter-spacing:0}
.pp-page__table .pp-page__rank{background:none;font-weight:700}
.pp-page__table .pp-page__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-page__table .pp-page__val{font-weight:700;font-size:clamp(1rem,4vw,1.35rem);font-variant-numeric:tabular-nums;white-space:nowrap;color:#96a4b9}
.pp-page__table .score-place-1 :is(.pp-page__rank,.pp-page__val){color:#ffe080}
.pp-page__table .score-place-2 :is(.pp-page__rank,.pp-page__val){color:#d5e2ef}
.pp-page__table .score-place-3 :is(.pp-page__rank,.pp-page__val){color:#e9b790}

/* Champion cards: heading and arrow above the three trophy rows. */
:is(.ci-visitor,.ci-staff,.profile-styles) main .champion-choices .champion-choice{border-color:#8398aa;padding:16px;grid-template-columns:minmax(0,1fr) 12px;gap:10px;background:#141b2b}
:is(.ci-visitor,.ci-staff,.profile-styles) main .champion-choices .champion-choice .champion-choice-title{grid-column:1;grid-row:1;font-size:1.2rem;line-height:1.4}
.champion-choice .champion-choice-title small{display:inline;font:inherit;margin-right:.25em}
.champion-choice::after{grid-column:2;grid-row:1}
.champion-choice .champion-choice-podium{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:4px;background:#1a2133;border-radius:4px;overflow:hidden;color:#f4f5ff;font:600 .95rem/1.5 ui-monospace,monospace}
.champion-choice .champion-podium-place{padding:8px 12px;gap:10px;justify-content:flex-start}
.champion-choice .champion-podium-place:nth-child(even){background:#202a3c}
.champion-choice .champion-podium-place[aria-hidden=true]{display:none}
.champion-choice .champion-podium-medal{width:22px;flex-basis:22px}
main .champion-choice .champion-podium-medal .app-icon,.champion-ranking td:first-child .app-icon{width:20px;height:20px;vertical-align:middle}
main .champion-choice .champion-podium-place-1 .app-icon,.champion-ranking .score-place-1 .app-icon{color:#ffe080}
main .champion-choice .champion-podium-place-2 .app-icon,.champion-ranking .score-place-2 .app-icon{color:#d5e2ef}
main .champion-choice .champion-podium-place-3 .app-icon,.champion-ranking .score-place-3 .app-icon{color:#e9b790}
:is(.ci-visitor,.ci-staff,.profile-styles) main h1.champion-heading{font-size:clamp(1.125rem,5vw,1.5rem);line-height:1.3;white-space:nowrap}
.ranking-game-result>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}

:is(.ci-visitor,.ci-staff,.profile-styles) main .champion-choices .champion-choice .champion-choice-leader{grid-column:1 / -1;grid-row:2;min-width:0}

/* Neutral outer surfaces share the existing light frame; nested controls and prestige/status frames retain their colors. */
:is(.ci-visitor,.ci-staff,.profile-styles) main :is(
.card:not(.player-card):not(.card .card),
.profile-editor-section,
.ach-panel,
.xp-journal-page .home-progress,
.personal-chronicle,
.xp-chronicle,
.submission-entry,
.monthly-personal-scores,
.acquaintance-start,
.acquaintance-request,
.acquaintances-page>details,
.xp-earn-list,
.xp-earn .next-reward,
.pp-page,
.champion-empty,
.museum-detail-grid .museum-facts,
.ci-empty,
.admin-work-row,
.visit-work-row,
.event-participant,
.staff-score-summary,
.monitor-slide-form,
.proof-viewer,
.visitor-paths>section
){border-color:#8398aa}
:is(.ci-visitor,.ci-staff,.profile-styles) main :is(.ui-disclosure,.admin-accordion,.past-events):not(:is(.card,.player-card,.pp-page,.ach-panel) *){border-color:#8398aa}
.ci-form-page main>form:not(.filters){border-color:#8398aa}
.profile-card-page section.player-card:not([class*="-frame"]):not([class*="level-"]):not(.frame-swatch){border-color:#8398aa}
.profile-card-page .home-action-group>div{border-color:#8398aa}

/* Keep nested highscore and champion explanation surfaces subdued; connect the active achievement tab to its outer panel. */
.ci-visitor main section.card#rankings{border-color:var(--ci-line)}
.ci-visitor main:has(.champion-heading) details.card.ui-disclosure.admin-accordion{border-color:var(--ci-line)}
.ach .ui-tab[aria-selected="true"]{position:relative;z-index:1;border-color:#8398aa;background:#111424}

.pp-page__tab[aria-current="page"]{position:relative;z-index:1;border-color:#8398aa;background:#111424}
.pp-page__panel>.pp-page__slotrow{border-color:#8398aa}

/* Joined active tabs have a clean square inner corner, without decorative overlays. */
.ach .ui-tab[aria-selected="true"],.pp-page__tab[aria-current="page"]{border-radius:4px 4px 0 0;border-bottom:0;margin-bottom:-1px}

/* Draw the join once: inactive tabs provide the horizontal line, not the panel behind the active tab. */
.ach .ui-tabs{gap:0}
.ach .ui-tab{border-bottom:1px solid #8398aa}
.ach .ui-tab[aria-selected="true"]{margin-bottom:0;border-bottom:0}
.ach .ach-panel{border-top:0}
.pp-page__tabs{gap:0}
.pp-page__tab{border-bottom:1px solid #8398aa}
.pp-page__tab[aria-current="page"]{margin-bottom:0;border-bottom:0}
.pp-page__panel>.pp-page__slotrow{border-top:0}

.ach .ui-tabs,.pp-page__tabs{align-items:flex-end}
.pp-page__panel>.pp-page__slotrow{border-radius:0 0 6px 6px;margin-bottom:6px}

.profile-styles main .profile-introduction-link{max-width:760px;margin:36px 0 0;padding-top:24px;border-top:1px solid #ffffff1f}
.profile-styles main .profile-introduction-link .profile-secondary,.ci-visitor main .museum-actions .button.ux-secondary{border:1px solid #8398aa}

.profile-styles main .profile-introduction-link .profile-secondary{border-color:#8398aa!important}

.support-page .support-player-result{margin:12px 0;padding:0;border:0;background:none}
.ci-staff main .support-player-choice{display:flex;align-items:center;gap:16px;width:100%;padding:14px 16px;text-align:left;background:#1b2435;color:#e5edf4;border:1px solid #8398aa;border-radius:6px;cursor:pointer}
.support-player-choice img{flex:0 0 56px;object-fit:contain}
.support-player-choice span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-staff main .support-player-choice:hover{background:#263247}
.ci-staff main .support-player-choice:focus-visible{outline:2px solid #a7f36b;outline-offset:3px}

.support-action-title{display:flex;align-items:center;gap:10px}
.support-action-icon{width:1em;height:1em;object-fit:contain;flex:0 0 1em}
.support-brand-icon{filter:invert(1)}

.support-player-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.support-player-badges{display:grid;gap:10px;margin-left:auto;font-size:18px}
.support-player-badges>div{display:flex;justify-content:flex-end;align-items:center;gap:10px;min-height:18px}
.support-player-badges>div>span{display:flex;align-items:center}

.ci-visitor main .acquaintance-remove{padding-inline:14px}

.player-card-stats>div{box-shadow:inset 0 0 0 1px #8398aa}

.home-notice-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.home-notice-actions form{margin:0;padding:0;border:0;background:none}
:is(.ci-visitor,.ci-staff,.profile-styles) main .home-notice-ok{min-height:36px;padding:6px 14px;font-size:14px}

/* XP receipts reuse the achievement celebration surface. */
.xp-notice .achievement-kicker { margin: 0 0 12px; }
.xp-notice .achievement-badge { display: flex; align-items: center; justify-content: center; }
.xp-notice .achievement-badge .level-up-star { width: 30px; height: 30px; margin: 0; color: #ffd86b; animation: none; filter: none; }

/* More breathing room between the three player-card statistics. */
.player-card-stats{gap:8px;border:0;background:transparent}
.player-card-stats>div{flex:1 1 0;border-radius:4px;background:#111424}
.player-card-stats>div+div{border-left:0}

/* Consistent spacing between Home topics and around their dividers. */
.profile-styles main:has(.home-dashboard){--home-section-space:24px}
.profile-styles main .home-dashboard{margin-bottom:var(--home-section-space)}
.profile-styles main .home-start{margin-block:var(--home-section-space)}
.profile-styles main:has(.home-dashboard) .home-actions{margin-block:var(--home-section-space);row-gap:var(--home-section-space)}
.profile-styles main:has(.home-dashboard) .home-actions .home-action-group{margin:0}
.profile-styles main:has(.home-dashboard)>.pp-home{margin-block:var(--home-section-space)}
.profile-styles main .home-start-pixel-lower{margin-top:var(--home-section-space);padding-block:var(--home-section-space)}
.profile-styles main:has(.home-dashboard) .home-events,.profile-styles main:has(.home-dashboard) .profile-introduction-link{margin-top:var(--home-section-space);padding-top:var(--home-section-space)}
.profile-styles main .home-start-pixel-lower+.home-events{margin-top:0;border-top:0}

/* Home identity accent. */
.profile-styles main .home-dashboard .home-identity h1,:is(.ci-visitor,.ci-staff,.profile-styles) main .player-card h1{color:#a7f36b}

/* Distinguish another player from your own identity. */
:is(.ci-visitor,.ci-staff,.profile-styles) main .profile-card-page.is-other-player .player-card h1{color:#ffad5c}

/* Linked player statistics keep the existing tile layout. */
.player-card-stats>div{padding:0}
.player-card-stats>div>a{display:block;padding:14px 6px;color:inherit;text-decoration:none;border-radius:inherit}
.player-card-stats>div>a:hover{background:rgba(255,255,255,.04)}
.player-card-stats>div>a:focus-visible{outline:2px solid #a7f36b;outline-offset:-3px}
/* Uniform, compact game titles above the Highscores heading. */
:is(.ci-visitor,.ci-staff,.profile-styles) main .ranking-game-heading h1{font-size:22px;line-height:1.2}

/* Let player highscore headings wrap only when needed. */
.public-player-heading.public-player-heading-flow>span{display:inline;margin-top:0}
.player-qr-page .personal-qr-image{margin-bottom:12px}
.player-qr-page .personal-qr-name{text-align:center;color:#f4f5ff;font-size:22px;font-weight:600;line-height:1.3;margin:0 0 22px;overflow-wrap:anywhere}

/* Dark button surfaces within acquaintance cards. */
.ci-visitor main .acquaintances-page :is(a.button,a.ui-action,button){background:var(--bg)}

/* Discreet removal action in each acquaintance card. */
.acquaintance-person{position:relative;padding-right:44px}
.ci-visitor main .acquaintance-person .acquaintance-remove{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:0;margin:0;padding:0;border:0;background:transparent;color:var(--subtle);font:400 22px/1 system-ui,sans-serif;text-decoration:none;box-sizing:border-box}
.ci-visitor main .acquaintance-person .acquaintance-remove:hover{color:var(--ink)}

/* Compact entries in a player highscore history, with balanced vertical spacing. */
.ci-visitor main article.card.player-score-entry{padding:12px 16px}
.ci-visitor main .player-score-entry>h2{margin:0 0 6px}
.ci-visitor main .player-score-entry>p{margin:0;line-height:1.4}

/* Match the saved player-card nickname in the profile editor preview. */
:is(.ci-visitor,.ci-staff,.profile-styles) main .profile-card-page .player-card-identity h2{font-family:"Barlow Semi Condensed",var(--font-body);font-weight:600;text-transform:none;letter-spacing:.01em;font-size:36px;line-height:1.1;margin:0;color:#a7f36b}

/* Balance the complete text block in visit and entrance navigation cards. */
.ci-staff main .visit-work-nav .card{padding:18px}
.ci-staff main .visit-work-nav .card>h2{margin:0 0 6px}
.ci-staff main .visit-work-nav .card>h2:last-child{margin-bottom:0}
.ci-staff main .visit-work-nav .ui-row-link{min-height:0}
.ci-staff main .visit-work-nav .card>p{margin:0}

/* Local photo-led scan choices; existing scanner controls retain their IDs. */
.scan-photo-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.ci-visitor main #scan-controls .scan-photo-choice{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:0;overflow:hidden;border:1px solid #8398aa;border-radius:8px;background:#1a2133;color:#f4f5ff;text-decoration:none;text-align:left;box-shadow:none;font:inherit;cursor:pointer}
.scan-choice-photo{display:block;width:100%;height:180px;object-fit:cover}
.scan-choice-entrance{object-position:43% 52%}
.scan-choice-score{object-position:50% 38%}
.scan-choice-copy{display:flex;flex:1;flex-direction:column;gap:6px;padding:14px 10px}
.scan-choice-copy strong{font:600 clamp(16px,4.2vw,22px)/1.2 "Barlow Semi Condensed",var(--font-body);white-space:nowrap}
.scan-choice-copy>span{font-size:var(--text-size);line-height:1.4;color:#bac4de}
.scan-photo-choice:hover{border-color:#a7f36b!important}
.scan-photo-choice:focus-visible{outline:2px solid #a7f36b;outline-offset:3px}
.scan-choice-hint{font-size:var(--text-size);line-height:1.5;color:#bac4de}
@media(min-width:600px){.scan-choice-photo{height:260px}.scan-choice-copy{padding:16px}.scan-choice-copy>span{font-size:var(--text-size)}}

/* Give the date a little more room beneath the NEW badge. */
.ach-row:has(.achievement-new) .ach-side{transform:translateY(4px)}

/* Email sign-in: submit left, request another code right. */
.ci-form-page main .admin-email-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ci-form-page main .admin-email-actions>.ui-action{margin-left:auto}

/* Keep submission title and proof action on one row. */
.ci-visitor main .submission-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ci-visitor main .submission-heading h2{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-visitor main .submission-heading>.ui-action{flex:none;margin-left:auto;white-space:nowrap}

/* Balance achievement notices against the top and bottom frame. */
:is(.ci-visitor,.ci-staff,.profile-styles) main .achievement-celebration>:first-child{margin-top:0}

/* Player administration: compact date metadata and reversible sorting. */
.player-sort{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:20px 0}
.ci-staff main .player-sort .ui-action[aria-current="true"]{border-color:#a7f36b;color:#a7f36b}
.ci-staff main .moderation-player-summary .player-account-dates{font-size:14px;line-height:1.6;color:var(--subtle)}

/* Emphasize only first-place player names across multi-player rankings. */
.champion-podium-place-1 .champion-podium-name,
.ci-visitor main .score-ranking-table .score-place-1>td:nth-child(2)>a,
.pp-page__table .score-place-1 .pp-page__name{font-weight:800}

/* A single location marker identifies the Places heading. */
.places-heading{display:flex;align-items:center;gap:12px}
.places-heading>.app-icon{width:1em;height:1em;flex:none;margin:0}

/* Highlight only the signed-in player's home museum border. */
.ci-visitor main .places-list .place-row.is-home-place{border-color:#a7f36b}



/* Home fallback for guests and players without an avatar. */
.bottom-nav a:first-child>span[aria-hidden="true"]{--ic:url("../img/icons/home.4f047e9abaf1.svg")}

/* Tap-readable achievement emblems on Home and player cards. */
body main .achievement-symbol-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
body main .achievement-symbol-wrap .achievement-symbol-trigger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;background:transparent;border:0;border-radius:4px;box-shadow:none;color:inherit;font-size:30px;line-height:1;cursor:pointer}
body main .achievement-symbol-trigger:focus-visible{outline:2px solid #35cc68;outline-offset:3px}
body main .achievement-symbol-wrap .achievement-symbol-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:5;width:max-content;max-width:180px;padding:7px 10px;background:#101622;border:1px solid #77869c;border-radius:6px;color:#fff;font:600 14px/1.35 system-ui;text-align:center;box-shadow:0 4px 12px #0008;pointer-events:none}
body main .achievement-symbol-tip[hidden]{display:none}
body main .achievement-symbol-tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;width:7px;height:7px;background:#101622;border-right:1px solid #77869c;border-bottom:1px solid #77869c;transform:translateY(-3px) rotate(45deg)}

/* Compact account navigation replaces two rarely used header actions. */
body .app-scroll>header .account-menu{position:relative;margin:0;flex:0 0 auto;padding:0;border:0;background:none}
body .app-scroll>header .account-menu>summary{display:flex;align-items:center;justify-content:center;gap:7px;min-width:54px;min-height:44px;padding:5px 8px;list-style:none;cursor:pointer;background:#101622;border:1px solid #48566b;border-radius:6px;color:#c3ccda}
body .account-menu>summary::-webkit-details-marker{display:none}
body .account-menu>summary::after{display:none}
body .account-menu>summary img{display:block;width:30px;height:30px;object-fit:cover;border-radius:3px}
body .account-menu[open]>summary{border-color:#77869c}
body .app-scroll>header .account-menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:100;display:flex;flex-direction:column;gap:0;width:210px;max-width:calc(100vw - 32px);padding:5px;background:#101622;border:1px solid #77869c;border-radius:6px;box-shadow:0 8px 24px #0008}
body .app-scroll>header .account-menu-panel>a,body .app-scroll>header .account-menu-panel form>button{display:flex;align-items:center;width:100%;min-height:42px;padding:9px 11px;margin:0;background:transparent;border:0;border-radius:3px;color:#fff;text-decoration:none;text-align:left;font:600 14px/1.4 system-ui;box-shadow:none}
body .app-scroll>header .account-menu-panel>form{display:block;margin:4px 0 0;padding:4px 0 0;border:0;border-top:1px solid #303d50;background:none}
body .app-scroll>header .account-menu-panel :is(a,button):hover{background:#192337}
body .app-scroll>header .account-menu :is(summary,a,button):focus-visible{outline:2px solid #35cc68;outline-offset:2px}

body .app-scroll>header .account-menu-panel form>button{background:transparent!important;color:#fff!important;border:0!important;box-shadow:none!important}
body .app-scroll>header .account-menu-panel form>button:hover{background:#192337!important}

body .app-scroll>header .account-menu-panel{width:max-content;min-width:0}
body .app-scroll>header .account-menu[open]>summary{border-color:#b8c2d1}
body .account-menu[open]>summary>svg{transform:rotate(180deg)}

body .app-scroll>header .account-menu>summary,body .app-scroll>header .account-menu[open]>summary{background:transparent;border-color:transparent;box-shadow:none}

/* Role menus share the current account-menu surface and typography. */
body .app-scroll>header .header-role-menus nav.task-menu-items{background:#101622;background-image:none;border:1px solid #77869c;border-radius:6px;padding:5px;gap:0;box-shadow:0 8px 24px #0008}
body .app-scroll>header .header-role-menus nav.task-menu-items a{min-height:44px;padding:9px 11px;color:#fff;font:600 14px/1.4 system-ui;border-radius:3px;grid-template-columns:24px minmax(0,1fr);column-gap:10px}
body .app-scroll>header .header-role-menus nav.task-menu-items a>span:first-child{width:24px}
body .app-scroll>header .header-role-menus nav.task-menu-items a:hover{background:#192337}
body .app-scroll>header .header-role-menus nav.task-menu-items a:focus-visible{outline:2px solid #35cc68;outline-offset:-2px}