/* Interview-Seite */
.interview-photo {
    float: right;
    width: 280px;
    max-width: 45%;
    margin: 0.25rem 0 1rem 1.5rem;
    text-align: center;
    border: 3px solid var(--retro-navy);
    background: #fff;
    padding: 8px 8px 6px;
    box-shadow: 4px 4px 0 rgba(10, 26, 51, 0.25);
}
.interview-photo img {
    width: 100%;
    height: auto;
    display: block;
}
.interview-photo-wide {
    width: 485px;
    max-width: 75%;
}
.interview-photo-narrow {
    width: 190px;
    max-width: 35%;
}
.interview-photo-left {
    float: left;
    margin: 0.25rem 1.5rem 1rem 0;
}
.interview-photo-pair {
    width: 490px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.interview-photo-pair > div {
    flex: 1;
    min-width: 150px;
}
.interview-photo-pair img {
    width: 100%;
    height: auto;
    display: block;
}
.interview-photo-pair .interview-caption {
    width: 100%;
}
.interview-body h2 {
    clear: both;
}
.interview-caption {
    font-size: 0.8rem;
    color: var(--retro-navy);
    font-style: italic;
    margin: 0.4rem 0 0;
}
.interview-source {
    clear: both;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.55);
    font-style: italic;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 0.75rem;
}

.like-heart-icon {
    color: var(--retro-red);
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 6px;
}

/* Figuren-Detailseite: Foto-Bereich und Info-Tabelle im Navy-Look statt
   weisser Boxen, passend zum restlichen Retro-Design. */
.figure-photo-panel {
    background: var(--retro-navy);
    border: 3px solid #000;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
    padding: 12px;
}
.figure-photo-panel .carousel-caption,
.figure-photo-panel p.small {
    color: rgba(255, 255, 255, 0.75);
}
.figure-photo-panel .photo-copyright {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}
.figure-photo-panel .placeholder {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.figure-info-table {
    background: var(--retro-navy);
    border: 3px solid #000;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
    color: #fff;
    margin-bottom: 0;
}
.figure-info-table > :not(caption) > * > * {
    background: transparent;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.15);
    vertical-align: middle;
}
.figure-info-table th {
    font-family: "Press Start 2P", monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: normal;
    width: 40%;
    /* Kleiner Ausgleich fuer die Schriftmetrik von "Press Start 2P",
       damit die Zeile optisch mittig zum Wert daneben sitzt. */
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem - 1px);
}
.figure-info-table td {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--retro-yellow);
    font-weight: 700;
}
/* Level-Name in der eigenen Level-Farbe statt Standardgelb, jeweils eine
   helle Variante der Abzeichenfarben fuer genug Kontrast auf dem Navy. */
.figure-info-table .level-tier-name {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}
.figure-info-table .level-tier-name.tier-mvp { color: #6bcf6b; }
.figure-info-table .level-tier-name.tier-allstar { color: #b48be0; }
.figure-info-table .level-tier-name.tier-premier { color: #ff6b6b; }
.figure-info-table .level-tier-name.tier-gold { color: #e8c14a; }
.figure-info-table .level-tier-name.tier-silver { color: #cdd2d8; }
.figure-info-table .level-tier-name.tier-bronze { color: #d68a44; }
.figure-info-table .level-tier-name.tier-surprise { color: #e08cc4; }
.figure-info-table .level-tier-name.tier-exclusive { color: #5fc9c0; }

/* "In Collection"-Anzeige auf der Detailseite: eigene Chip-Optik statt
   der schlichten Bootstrap-Badges/grauen Haekchen. */
body:not(.admin-area) .ownership-panel .badge-owned,
body:not(.admin-area) .ownership-panel .badge-missing {
    font-family: "Press Start 2P", monospace;
    font-size: 0.7rem;
    padding: 7px 12px;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 var(--retro-navy);
}
body:not(.admin-area) .ownership-panel .ownership-checks-group {
    display: block;
    margin-top: 8px;
}
body:not(.admin-area) .ownership-panel .ownership-check {
    font-family: "Press Start 2P", monospace;
    font-size: 0.55rem;
    background: var(--retro-navy);
    color: #fff;
    border: 2px solid #000;
    border-radius: 0;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
}
/* Echtes kleines Kaestchen statt Unicode-Zeichen (☑☐) -- vermeidet
   Schriftart-Fallbacks mit unvorhersehbaren Massen, per Flexbox immer
   exakt auf Texthoehe zentrierbar. Ueberall gueltig (auch im Admin-
   Bereich), in der Detailseite unten nur groesser skaliert. */
.check-icon {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border: 1px solid currentColor;
    position: relative;
    flex-shrink: 0;
}
.check-icon.checked::after {
    content: "";
    position: absolute;
    left: 20%;
    top: 20%;
    right: 20%;
    bottom: 20%;
    background: currentColor;
}
body:not(.admin-area) .ownership-panel .check-icon {
    width: 1.1em;
    height: 1.1em;
    border-width: 2px;
    margin-right: 4px;
}

/* Startseiten-Bilderstreifen: Fotos sitzen direkt nebeneinander in ihrem
   eigenen Seitenverhaeltnis (kein Zuschneiden, kein Zerren) und laufen
   endlos langsam durch -- dadurch entsteht nie ein toter/schwarzer Rand,
   egal wie die Fotos zugeschnitten sind. Die Liste wird im PHP einmal
   verdoppelt, damit der Loop nahtlos wirkt. */
.photo-ticker {
    height: 380px;
    overflow: hidden;
    background: var(--retro-ice);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.photo-ticker-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation-name: photo-ticker-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.photo-ticker:hover .photo-ticker-track {
    animation-play-state: paused;
}
@keyframes photo-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.photo-ticker-item {
    position: relative;
    height: 100%;
    flex-shrink: 0;
    margin: 0 4px;
    display: block;
}
.photo-ticker-item img {
    height: 100%;
    width: auto;
    display: block;
}
.photo-ticker-label {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(10, 26, 51, 0.85);
    color: #fff;
    font-size: 0.65rem;
    padding: 3px 8px;
    white-space: nowrap;
}

/* Retro-Optik angelehnt an fruehe-90er Eishockey-Videospiele (eigene
   Farbgebung/Schrift, keine Original-Assets uebernommen). Der
   Verwaltungsbereich (body.admin-area) bekommt bewusst nur die Nav/Footer-
   Farben, aber keine Pixel-Schrift auf Ueberschriften -- sonst waeren die
   vielen Datentabellen dort schlecht lesbar. */
:root {
    --bs-primary: #d61f26;
    --bs-primary-rgb: 214, 31, 38;
    --bs-link-color: #0a5fa8;
    --bs-link-color-rgb: 10, 95, 168;
    --bs-link-hover-color: #d61f26;
    --bs-link-hover-color-rgb: 214, 31, 38;
    --bs-dark: #0a1a33;
    --bs-dark-rgb: 10, 26, 51;
    --retro-navy: #0a1a33;
    --retro-panel: #123059;
    --retro-ice: #cdf1ff;
    --retro-red: #d61f26;
    --retro-yellow: #ffcc00;
}

/* Eigenes Pixel-Rink-Motiv (keine Spiel-Assets, nur generische
   Spielfeld-Markierungen: Mittellinie, blaue Linien, Bully-Kreise), mit
   unregelmaessig verstreuten Kratzern/Lichtreflexen im Eis statt einem
   sich wiederholenden Muster, plus ein sanfter Lichtschein oben (wie eine
   Reflexion). Alles fix positioniert, bleibt beim Scrollen sichtbar.
*/
body {
    background-color: var(--retro-ice);
    background-image:
        radial-gradient(ellipse 55% 35% at 50% 15%, rgba(255,255,255,0.55), transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cg stroke='white' stroke-linecap='round'%3E%3Cline x1='60' y1='50' x2='115' y2='68' stroke-opacity='0.3' stroke-width='2'/%3E%3Cline x1='150' y1='325' x2='185' y2='305' stroke-opacity='0.22' stroke-width='2'/%3E%3Cline x1='300' y1='55' x2='335' y2='90' stroke-opacity='0.3' stroke-width='2'/%3E%3Cline x1='505' y1='345' x2='560' y2='330' stroke-opacity='0.25' stroke-width='2'/%3E%3Cline x1='680' y1='75' x2='725' y2='110' stroke-opacity='0.28' stroke-width='2'/%3E%3Cline x1='715' y1='250' x2='760' y2='268' stroke-opacity='0.2' stroke-width='2'/%3E%3Cline x1='35' y1='195' x2='90' y2='208' stroke-opacity='0.22' stroke-width='2'/%3E%3Cline x1='250' y1='150' x2='300' y2='138' stroke-opacity='0.26' stroke-width='2'/%3E%3Cline x1='450' y1='55' x2='472' y2='100' stroke-opacity='0.22' stroke-width='2'/%3E%3Cline x1='600' y1='205' x2='652' y2='188' stroke-opacity='0.24' stroke-width='2'/%3E%3Cline x1='95' y1='355' x2='140' y2='330' stroke-opacity='0.2' stroke-width='2'/%3E%3Cline x1='345' y1='300' x2='400' y2='322' stroke-opacity='0.26' stroke-width='2'/%3E%3Cline x1='545' y1='45' x2='592' y2='68' stroke-opacity='0.2' stroke-width='2'/%3E%3Cline x1='195' y1='250' x2='242' y2='262' stroke-opacity='0.24' stroke-width='2'/%3E%3Cline x1='695' y1='345' x2='742' y2='320' stroke-opacity='0.2' stroke-width='2'/%3E%3Cline x1='25' y1='115' x2='72' y2='98' stroke-opacity='0.26' stroke-width='2'/%3E%3Cline x1='478' y1='198' x2='522' y2='222' stroke-opacity='0.18' stroke-width='2'/%3E%3Cline x1='648' y1='305' x2='692' y2='288' stroke-opacity='0.22' stroke-width='2'/%3E%3Cline x1='110' y1='250' x2='128' y2='258' stroke-opacity='0.2' stroke-width='1'/%3E%3Cline x1='270' y1='320' x2='285' y2='330' stroke-opacity='0.22' stroke-width='1'/%3E%3Cline x1='420' y1='150' x2='435' y2='160' stroke-opacity='0.18' stroke-width='1'/%3E%3Cline x1='560' y1='260' x2='575' y2='250' stroke-opacity='0.2' stroke-width='1'/%3E%3Cline x1='380' y1='60' x2='392' y2='70' stroke-opacity='0.22' stroke-width='1'/%3E%3Cline x1='210' y1='90' x2='222' y2='98' stroke-opacity='0.18' stroke-width='1'/%3E%3Cline x1='40' y1='280' x2='115' y2='300' stroke-opacity='0.16' stroke-width='3'/%3E%3Cline x1='320' y1='190' x2='405' y2='210' stroke-opacity='0.14' stroke-width='3'/%3E%3Cline x1='500' y1='90' x2='580' y2='75' stroke-opacity='0.16' stroke-width='3'/%3E%3Cline x1='660' y1='230' x2='745' y2='245' stroke-opacity='0.14' stroke-width='3'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.5'%3E%3Crect x='118' y='172' width='2' height='16' transform='rotate(45 119 180)'/%3E%3Crect x='111' y='179' width='16' height='2' transform='rotate(45 119 180)'/%3E%3Crect x='598' y='262' width='2' height='16' transform='rotate(45 599 270)'/%3E%3Crect x='591' y='269' width='16' height='2' transform='rotate(45 599 270)'/%3E%3C/g%3E%3Crect x='8' y='8' width='784' height='384' rx='45' ry='45' fill='none' stroke='white' stroke-opacity='0.6' stroke-width='6'/%3E%3Crect x='60' y='16' width='4' height='368' fill='%23d61f26' fill-opacity='0.45'/%3E%3Crect x='736' y='16' width='4' height='368' fill='%23d61f26' fill-opacity='0.45'/%3E%3Cpath d='M 64 174 A 26 26 0 0 1 64 226 Z' fill='%234aa8ff' fill-opacity='0.2'/%3E%3Cpath d='M 64 174 A 26 26 0 0 1 64 226' fill='none' stroke='%23d61f26' stroke-opacity='0.45' stroke-width='3'/%3E%3Cpath d='M 736 174 A 26 26 0 0 0 736 226 Z' fill='%234aa8ff' fill-opacity='0.2'/%3E%3Cpath d='M 736 174 A 26 26 0 0 0 736 226' fill='none' stroke='%23d61f26' stroke-opacity='0.45' stroke-width='3'/%3E%3Crect x='230' y='8' width='8' height='384' fill='%234aa8ff' fill-opacity='0.5'/%3E%3Crect x='562' y='8' width='8' height='384' fill='%234aa8ff' fill-opacity='0.5'/%3E%3Crect x='396' y='8' width='8' height='384' fill='%23d61f26' fill-opacity='0.5'/%3E%3Ccircle cx='400' cy='200' r='60' fill='none' stroke='%234aa8ff' stroke-opacity='0.6' stroke-width='5'/%3E%3Ccircle cx='400' cy='200' r='5' fill='%234aa8ff' fill-opacity='0.6'/%3E%3Cg fill='none' stroke='%23d61f26' stroke-opacity='0.5' stroke-width='4'%3E%3Ccircle cx='170' cy='100' r='42'/%3E%3Ccircle cx='170' cy='300' r='42'/%3E%3Ccircle cx='630' cy='100' r='42'/%3E%3Ccircle cx='630' cy='300' r='42'/%3E%3C/g%3E%3Cg fill='%23d61f26' fill-opacity='0.6'%3E%3Ccircle cx='170' cy='100' r='4'/%3E%3Ccircle cx='170' cy='300' r='4'/%3E%3Ccircle cx='630' cy='100' r='4'/%3E%3Ccircle cx='630' cy='300' r='4'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Sticky Footer: der Inhaltsbereich waechst, damit die Fusszeile auch bei
   kurzen Seiten (z.B. Impressum) unten am Fensterrand bleibt statt direkt
   unter dem Inhalt zu schweben. */
body > .container.pb-5 {
    flex: 1 0 auto;
}
body > .site-footer {
    flex-shrink: 0;
}
body.admin-area {
    background-color: #f4f7fa;
    background-image: none;
}

.pixel-font {
    font-family: "Press Start 2P", monospace;
}
body:not(.admin-area) h1,
body:not(.admin-area) h2 {
    font-family: "Press Start 2P", monospace;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
body:not(.admin-area) h1 { font-size: 1.6rem; }
body:not(.admin-area) h2 { font-size: 1.1rem; }

.navbar.site-navbar {
    background-color: var(--retro-navy) !important;
    border-bottom: 4px solid var(--retro-red);
}
.navbar.site-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
}
.navbar.site-navbar .navbar-brand .brand-main {
    display: inline-flex;
    align-items: center;
    font-family: "Press Start 2P", monospace;
    font-size: 0.95rem;
    line-height: 1.6;
}
.navbar.site-navbar .navbar-brand .brand-accent {
    color: var(--retro-yellow);
}
.navbar.site-navbar .navbar-brand .brand-tagline {
    display: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: none;
    letter-spacing: normal;
}
@media (min-width: 992px) {
    .navbar.site-navbar .navbar-brand .brand-tagline {
        display: inline-flex;
        align-items: center;
    }
}
.navbar.site-navbar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}
.navbar.site-navbar .nav-link:hover {
    color: var(--retro-yellow);
}

.site-footer {
    background-color: var(--retro-navy);
    color: rgba(255, 255, 255, 0.7);
    border-top: 4px solid var(--retro-red);
}
.site-footer a {
    color: rgba(255, 255, 255, 0.75);
}
.site-footer a:hover {
    color: var(--retro-yellow);
}
.site-footer .brand-font {
    font-family: "Press Start 2P", monospace;
    font-size: 0.7rem;
    line-height: 1.8;
}

.btn {
    border-radius: 0 !important;
}
.btn-primary, .btn-success, .btn-outline-primary, .btn-outline-secondary, .btn-outline-danger {
    font-family: "Press Start 2P", monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    border: 2px solid var(--retro-navy);
    box-shadow: 3px 3px 0 var(--retro-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body:not(.admin-area) .btn-primary,
body:not(.admin-area) .btn-success,
body:not(.admin-area) .btn-outline-primary,
body:not(.admin-area) .btn-outline-secondary,
body:not(.admin-area) .btn-outline-danger {
    /* "Press Start 2P" hat leicht asymmetrische Schriftmetrik (Zeichen
       sitzen minimal ueber der eigentlichen Mitte); dieser kleine Versatz
       gleicht das rein optisch aus. */
    padding-top: calc(var(--bs-btn-padding-y, 0.375rem) + 1px);
    padding-bottom: calc(var(--bs-btn-padding-y, 0.375rem) - 1px);
}
.btn-primary:hover, .btn-success:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-danger:hover {
    box-shadow: 1px 1px 0 var(--retro-navy);
    transform: translate(2px, 2px);
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
body.admin-area .btn {
    font-family: inherit;
    text-transform: none;
    box-shadow: none;
    border-radius: 0.375rem !important;
}
body.admin-area .btn:hover {
    transform: none;
}

body:not(.admin-area) .card {
    border: 2px solid var(--retro-navy);
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(10, 26, 51, 0.25);
}
body.admin-area .card {
    border-radius: 0.5rem;
}

/* Sammelkarten-Look fuer die Galerie/Serien-Kacheln: helles Foto-Fenster
   oben, dunkle Namensplakette darunter (wie eine Trading Card), statt
   normaler weisser Bootstrap-Karten. */
body:not(.admin-area) .card.figure-card {
    background: var(--retro-navy);
    border: 3px solid #000;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
    color: #fff;
}
.figure-card .card-body .fw-semibold {
    color: #fff;
}
.figure-card .card-body .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

.scoreboard {
    display: inline-flex;
    gap: 0;
    background: var(--retro-navy);
    border: 3px solid #000;
    font-family: "Press Start 2P", monospace;
    font-size: 0.75rem;
    color: #fff;
}
.scoreboard .scoreboard-cell {
    padding: 0.6rem 1rem;
    text-align: center;
    border-right: 2px solid rgba(255, 255, 255, 0.15);
}
.scoreboard .scoreboard-cell:last-child {
    border-right: none;
}
.scoreboard .scoreboard-value {
    color: var(--retro-yellow);
    font-size: 1rem;
    display: block;
    margin-top: 0.3rem;
}
.scoreboard.scoreboard-block {
    display: flex;
    width: 100%;
    height: 100%;
}
.scoreboard.scoreboard-block .scoreboard-cell {
    flex: 1;
    font-size: 0.65rem;
    line-height: 1.6;
}
.scoreboard.scoreboard-block .scoreboard-value {
    font-size: 0.8rem;
}
a:hover .scoreboard.scoreboard-block {
    border-color: var(--retro-yellow);
}

.figure-card img {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    display: block;
}
.figure-card .placeholder {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #aaa;
    font-size: 2.5rem;
}
/* Deutlich erkennbarer Platzhalter fuer noch fehlende Figuren -- eigene
   MISSING-Banderole statt des neutralen Schlaeger-Icons, damit auf einen
   Blick klar ist: das ist noch kein eigenes Foto, sondern eine Luecke. */
.placeholder.placeholder-missing {
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
        45deg,
        var(--retro-navy),
        var(--retro-navy) 12px,
        #0d2140 12px,
        #0d2140 24px
    );
    color: rgba(255, 255, 255, 0.25);
}
.placeholder.placeholder-missing::after {
    content: "MISSING";
    position: absolute;
    top: 50%;
    left: -25%;
    width: 150%;
    transform: translateY(-50%) rotate(-12deg);
    background: var(--retro-red);
    color: #fff;
    font-family: "Press Start 2P", monospace;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 5px 0;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}
.figure-photo-panel .placeholder.placeholder-missing::after {
    font-size: 0.85rem;
    padding: 8px 0;
}
body:not(.admin-area) .figure-card .card-body {
    font-family: "Press Start 2P", monospace;
}
.figure-card .card-body .fw-semibold {
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 0.4rem;
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: break-word;
}
.figure-card .card-body .text-muted {
    font-size: 0.6rem;
    line-height: 2;
}
.figure-card .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.2rem;
}
.figure-card .stat-row > span:first-child {
    flex-shrink: 0;
    white-space: nowrap;
}
.figure-card .stat-row .stat-value {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--retro-yellow);
    min-width: 0;
    text-align: right;
    overflow-wrap: break-word;
}
.figure-card .edition-badge-slot {
    /* Fest auf 2 Zeilen Hoehe reserviert, damit alle Karten einer Reihe
       gleich hoch bleiben -- egal ob die Seriennummer einzeilig passt
       oder (bei langen Nummern) auf 2 Zeilen umbricht. */
    min-height: 2.9rem;
    margin: 0.3rem 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.figure-card .edition-badge {
    /* Bis an den Kartenrand ausbluten lassen (negatives Margin gleicht das
       innere card-body-Padding aus) -- gibt der Badge etwas mehr Platz. */
    width: calc(100% + 1rem);
    margin: 0 -0.5rem;
    text-align: center;
    background: var(--retro-yellow);
    color: var(--retro-navy);
    font-family: "Press Start 2P", monospace;
    font-size: 0.55rem;
    line-height: 1.3;
    padding: 0.3rem 0.3rem;
    border: 2px solid #000;
}
/* Farben je Collection-Level -- den offiziellen McFarlane-Karten nachempfunden. */
.figure-card .edition-badge.tier-mvp {
    background: #3f7d3f;
    color: #fff;
}
.figure-card .edition-badge.tier-allstar {
    background: #6a3fa0;
    color: #fff;
}
.figure-card .edition-badge.tier-premier {
    background: var(--retro-red);
    color: #fff;
}
.figure-card .edition-badge.tier-gold {
    background: #c9a227;
    color: #3a2c05;
}
.figure-card .edition-badge.tier-silver {
    background: #b9bfc6;
    color: #34383c;
}
.figure-card .edition-badge.tier-bronze {
    background: #8b5a2b;
    color: #fff;
}
.figure-card .edition-badge.tier-surprise {
    background: #c23b8f;
    color: #fff;
}
.figure-card .edition-badge.tier-exclusive {
    background: #1f7a72;
    color: #fff;
}
.badge-owned {
    background-color: #198754;
}
.badge-missing {
    background-color: #dc3545;
}
/* Kleine Huerde gegen einfaches Herunterladen -- kein echter Schutz. */
.protected-img {
    -webkit-user-drag: none;
    user-select: none;
}
.thumb-strip-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.7;
}
.thumb-strip-img.active {
    border-color: #0d6efd;
    opacity: 1;
}
.ownership-check {
    display: inline-block;
    font-size: 0.75rem;
    background: #eef1f4;
    border-radius: 3px;
    padding: 1px 5px;
    margin-top: 2px;
    white-space: nowrap;
}

/* Missing-Liste (wantlist.php): dunkle navy/gelb Tabellenoptik wie der Rest der Seite */
.retro-table-wrap {
    border: 3px solid #000;
    box-shadow: 4px 4px 0 rgba(10, 26, 51, 0.25);
    background: var(--retro-navy);
}
.retro-table {
    margin-bottom: 0;
}
.retro-table > :not(caption) > * > * {
    background: transparent;
}
.retro-table thead th {
    background: var(--retro-navy) !important;
    color: var(--retro-yellow);
    font-family: "Press Start 2P", monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: normal;
    border-bottom: 3px solid var(--retro-red);
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}
.retro-table tbody tr:not(.category-row) td {
    background: var(--retro-navy) !important;
    color: #fff;
    vertical-align: middle;
    border-color: rgba(255, 255, 255, 0.15);
}
.retro-table tbody tr:not(.category-row):nth-of-type(odd) td {
    background: var(--retro-panel) !important;
}
.retro-table tbody tr:not(.category-row) td:first-child {
    color: var(--retro-yellow);
    font-weight: 700;
}
.retro-table tr.category-row td {
    background: #000 !important;
    color: #fff;
    font-family: "Press Start 2P", monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.75rem;
    border-color: rgba(255, 255, 255, 0.15);
}
.retro-table tr.category-row td .text-muted {
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: none;
    letter-spacing: normal;
}
.retro-table tbody td a {
    color: inherit;
    text-decoration: underline;
}
.retro-table tbody td a:hover {
    color: var(--retro-yellow);
}
.retro-progress {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0;
}
.retro-progress .progress-bar {
    background: var(--retro-red);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
}
@media print {
    .retro-table-wrap { border: 1px solid #000; box-shadow: none; background: #fff; }
    .retro-table thead th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; }
    .retro-table tr.category-row td { background: #ddd !important; color: #000 !important; -webkit-print-color-adjust: exact; }
    .retro-table tbody tr:not(.category-row) td { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; }
    .retro-table tbody tr:not(.category-row):nth-of-type(odd) td { background: #f4f4f4 !important; }
}