/* Schriften liegen lokal unter /assets/fonts/ (SIL Open Font License). Fehlen sie, greifen die Ersatzschriften. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }

/* Dunkel (Standard) */
:root {
    --bg: #0f0d0b;
    --surface: #1a1714;
    --surface-2: #24201c;
    --border: rgba(242, 237, 228, .14);
    --text: #f2ede4;
    --muted: #a39b8f;
    --accent: #ff4a3d;
    --accent-ink: #fff;
    --good: #7fc98a;
    --warn: #f2b544;
    --bad: #ff8a7a;
    --veil: rgba(15, 13, 11, .72);
    --veil-strong: rgba(15, 13, 11, .96);
    --tile-opacity: .75;
    --radius: 10px;
    --shadow: 0 18px 40px rgba(0, 0, 0, .35);
    --display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", sans-serif;
    --body: "Instrument Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color-scheme: dark;
}
/* Hell: per Systemeinstellung oder per Umschalter (data-theme) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #f4efe6; --surface: #fffaf2; --surface-2: #ebe4d8; --border: rgba(22, 18, 15, .14);
        --text: #16120f; --muted: #6b6258; --accent: #d62a1e; --good: #2f7d3a; --warn: #a86a00; --bad: #b42318;
        --veil: rgba(244, 239, 230, .82); --veil-strong: rgba(244, 239, 230, .97); --tile-opacity: .7;
        --shadow: 0 18px 40px rgba(40, 28, 16, .16);
        color-scheme: light;
    }
}
:root[data-theme="light"] {
    --bg: #f4efe6; --surface: #fffaf2; --surface-2: #ebe4d8; --border: rgba(22, 18, 15, .14);
    --text: #16120f; --muted: #6b6258; --accent: #d62a1e; --good: #2f7d3a; --warn: #a86a00; --bad: #b42318;
    --veil: rgba(244, 239, 230, .82); --veil-strong: rgba(244, 239, 230, .97); --tile-opacity: .7;
    --shadow: 0 18px 40px rgba(40, 28, 16, .16);
    color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 16.5px/1.55 var(--body);
    overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0 0 .5rem; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.04em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 .75rem; }

.wrap { width: min(1100px, 100% - 32px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header & Footer */
.site-header {
    position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.is-bare .site-header { position: fixed; left: 0; right: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: 64px; min-width: 0; }
/* Schmale Handys: Logo und Knöpfe etwas kleiner, damit alles in eine Zeile passt und die Seite nicht quer verrutscht */
@media (max-width: 430px) {
    .site-header .logo { font-size: 1.2rem; gap: .4rem; flex: none; }
    .site-header .logo-mark { width: 30px; height: 30px; }
    .header-inner .header-tools { gap: .35rem; }
    .header-tools .theme-toggle, .header-tools .menu-toggle { width: 2.1rem; height: 2.1rem; }
    .header-tools .lang-switch { padding: .25rem .4rem; }
}
/* Sehr schmale Handys: Discord nur noch im Fußbereich, sonst passt die Kopfzeile mit der Lupe nicht mehr */
@media (max-width: 380px) { .header-tools .header-discord { display: none; } }
/* Suche in der Kopfzeile: Feld klappt unter der Lupe auf, rechtsbündig */
.header-search { position: relative; display: flex; }
.header-search-form { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 60; width: min(22rem, calc(100vw - 24px)); }
.header-search-form input { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: .7rem .9rem; box-shadow: var(--shadow); }
.header-search-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.header-search .suggestions { top: calc(100% + .4rem); left: 0; right: 0; min-width: 0; font-size: .95rem; }
.header-search .suggestions li { padding: 0; }
.header-search .suggestions a { flex: 1; display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; color: inherit; border-radius: 7px; }
.header-search .suggestions a:hover, .header-search .suggestions a:focus { text-decoration: none; background: var(--accent); color: var(--accent-ink); }
.header-search .suggestions li:hover { background: none; }
.header-search .suggestions .none { padding: .6rem .8rem; }
.header-search .suggestions .suggest-head { padding: .5rem .8rem .25rem; }
/* Suchseite */
.search-page { padding: 2.5rem 0 3rem; }
.search-page-form { display: flex; gap: .6rem; max-width: 36rem; margin: 0 0 1.5rem; }
.search-page-form input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .75rem 1rem; }
.search-empty { display: grid; gap: .8rem; justify-items: start; max-width: 36rem; padding: 1.2rem 1.3rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.search-empty p { margin: 0; color: var(--muted); }
.search-empty strong { display: block; color: var(--text); }
.logo { color: var(--text); font: 800 1.45rem/1 var(--display); letter-spacing: -.035em; display: flex; gap: .55rem; align-items: center; }
.logo:hover { text-decoration: none; }
/* Zeichen als Inline-SVG: Umriss in Textfarbe, gefülltes Cover in Akzentfarbe – passt so zu Hell und Dunkel */
.logo-mark { display: block; width: 36px; height: 36px; flex: none; color: var(--text); transition: transform .25s; }
.logo-mark-fill { fill: var(--accent); }
.logo:hover .logo-mark { transform: rotate(-4deg); }
.logo-word { line-height: 1; }
.logo-accent { color: var(--accent); }
.site-footer { margin-top: 4rem; border-top: 1px solid var(--border); padding: 2rem 0; color: var(--muted); font-size: .875rem; }
/* Umbrechen statt die Seite zu verbreitern (mit Kaffee- und Discord-Link wird die Zeile auf dem Handy zu lang) */
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.fineprint { opacity: .75; }

/* Buttons */
.button {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
    transition: border-color .2s, transform .2s;
}
.button:hover { text-decoration: none; border-color: var(--accent); }
.button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.button.primary:hover { transform: translateY(-1px); }
.button.primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button.shop { font-size: .875rem; padding: .4rem .85rem; }
.theme-toggle { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0; }
.theme-toggle:hover { border-color: var(--accent); }
/* Discord-Knopf in der Kopfzeile: gleiche Form wie der Hell/Dunkel-Knopf, beim Überfahren in Discord-Blau */
.header-discord:hover { color: #5865f2; border-color: #5865f2; text-decoration: none; }
.header-discord .brand-icon { width: 1.1rem; height: 1.1rem; }
.header-tools { display: flex; align-items: center; gap: 1.1rem; }
.menu-toggle { display: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; place-items: center; padding: 0; }
.menu-toggle svg { width: 1.15rem; height: 1.15rem; }
.menu-toggle .cross, .menu-toggle[aria-expanded="true"] .bars { display: none; }
.menu-toggle[aria-expanded="true"] .cross { display: block; }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .theme-toggle .sun { display: block; }
    :root:not([data-theme]) .theme-toggle .moon { display: none; }
}

/* Startseite: Cover-Wand */
.stage { position: relative; min-height: min(100vh, 940px); min-height: min(100svh, 940px); display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.wall { position: absolute; inset: -30% -20%; z-index: -2; display: flex; flex-direction: column; gap: 14px;
    transform: perspective(1400px) rotateX(22deg) rotateZ(-9deg); transform-origin: 50% 40%; }
.wall-row { display: flex; gap: 14px; width: max-content; animation: drift var(--speed, 90s) linear infinite; }
.wall-row:nth-child(even) { animation-direction: reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tile { position: relative; flex: none; width: clamp(96px, 10vw, 150px); aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden;
    background: var(--surface); opacity: 0; transform: translateY(40px) scale(.85);
    animation: tile-in .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s);
    transition: opacity .6s, filter .6s, box-shadow .6s; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes tile-in { to { opacity: var(--tile-opacity); transform: none; } }
/* Ruhige Fläche hinter Satz und Karussell, die Wand bleibt nur am Rand lebendig */
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-strong) 45%, var(--veil) 72%, color-mix(in srgb, var(--bg) 35%, transparent) 100%),
                linear-gradient(to bottom, transparent 70%, var(--bg) 100%); }
.tile img { filter: saturate(.75); }
.wall.focus .tile { opacity: .14; filter: grayscale(1); }
.wall.focus .tile.hit { opacity: 1; filter: none; box-shadow: 0 0 0 3px var(--accent), 0 0 40px 6px color-mix(in srgb, var(--accent) 55%, transparent); z-index: 1; }

/* Startseite: Satz zum Ausfüllen */
/* Gleiche Breite und Kante wie .wrap darunter, damit Hero und Inhalt bündig sind */
.pitch { width: min(1100px, 100% - 32px); margin-inline: auto; padding: 7rem 0 4rem; }
.kicker { font: 600 .8rem/1 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin: 0 0 1.4rem; opacity: 0; animation: rise .8s .5s forwards; }
.sentence { font: 800 clamp(2.6rem, 7.5vw, 6.4rem)/.98 var(--display); letter-spacing: -.045em; margin: 0; }
.sentence.many { font-size: clamp(2.2rem, 5.2vw, 4.6rem); }
.sentence .w { display: inline-block; opacity: 0; transform: translateY(.4em); animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.fav { color: var(--accent); white-space: nowrap; }
/* Titel im Satz führt zu „Spiele wie …“ (markieren, Details); unauffällig, Unterstrich erst beim Überfahren */
.fav-link { color: inherit; text-decoration: none; }
.fav-link:hover, .fav-link:focus-visible { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.fav button { font: 600 .32em/1 var(--body); vertical-align: .9em; margin-left: .15em; width: 1.7em; height: 1.7em; border-radius: 50%; padding: 0;
    border: 1px solid currentColor; background: transparent; color: var(--accent); cursor: pointer; opacity: .55; transition: opacity .2s, background .2s; }
.fav button:hover, .fav button:focus-visible { opacity: 1; background: var(--accent); color: var(--accent-ink); }
.fav.new { animation: pop .45s cubic-bezier(.2, .9, .3, 1.3); display: inline-block; }
/* Gewähltes Spiel ohne KI-Profil: kleiner, ruhiger Zusatz „vorläufig“ im Satz (Erklärung im Tooltip) */
.fav-note { display: inline-block; vertical-align: .9em; margin-left: .25em; padding: .2em .55em; border: 1px solid var(--border); border-radius: 999px;
    font: 600 .28em/1.2 var(--body); letter-spacing: .02em; color: var(--muted); cursor: help; }
.live-head .live-unanalyzed { flex-basis: 100%; margin: 0; }
.rs-unanalyzed { margin-top: .8rem; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
/* z-index: die Vorschlagsliste muss über den später folgenden, animierten Elementen (Text, Schnellwahl) liegen */
.slot { position: relative; z-index: 40; display: inline-block; vertical-align: baseline; }
.slot[hidden] { display: none; }
.slot input { font: inherit; letter-spacing: inherit; color: var(--accent); background: transparent; border: 0; padding: 0 .05em; margin: 0;
    border-bottom: .07em solid var(--accent); border-radius: 0; outline: none; width: 5ch; min-width: 2.5ch; max-width: 78vw; caret-color: var(--accent); }
.slot.more input { font-size: .5em; vertical-align: .35em; border-bottom-width: .1em; }
/* Leeres Feld sieht aus wie ein Eingabefeld (Kasten mit Rahmen), nicht wie ein Wort im Satz: Besucher sollen sofort sehen, wo sie tippen */
.slot input::placeholder { color: color-mix(in srgb, var(--text) 30%, transparent); opacity: 1; }
.slot input:placeholder-shown { box-sizing: content-box; padding: .04em .22em .1em; border: .045em solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: .16em;
    background: var(--surface); box-shadow: 0 .08em .3em rgb(0 0 0 / .12); cursor: text; animation: slot-pulse 2.4s ease-in-out 2s 3; }
.slot input:placeholder-shown:focus { border-color: var(--accent); box-shadow: 0 0 0 .07em color-mix(in srgb, var(--accent) 30%, transparent); animation: none; }
.slot.more input:placeholder-shown { border-width: .07em; }
@keyframes slot-pulse { 50% { box-shadow: 0 0 0 .1em color-mix(in srgb, var(--accent) 35%, transparent); } }
.slot-hint { position: absolute; left: 0; top: calc(100% + .6rem); display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
    font: 600 .95rem/1 var(--body); letter-spacing: 0; color: var(--accent-ink); background: var(--accent);
    border-radius: 999px; padding: .5rem .85rem; cursor: text; box-shadow: 0 6px 16px rgb(0 0 0 / .18); }
.slot-hint::before { content: ""; position: absolute; left: 1.1rem; top: -.35rem; border: .4rem solid transparent; border-top: 0; border-bottom-color: var(--accent); }
.slot-hint svg { width: 1.1rem; height: 1.1rem; }
.slot.more .slot-hint, .slot:has(input:not(:placeholder-shown)) .slot-hint, .is-dragging .slot-hint { display: none; }
@media (max-width: 640px) {
    /* Platz unter dem Feld für den Hinweis, sonst liegt er über „geliebt.“ in der nächsten Zeile */
    .slot:not(.more):has(input:placeholder-shown) { margin-bottom: 2.4rem; }
    .slot-hint { font-size: .8rem; padding: .42rem .7rem; }
}
.slot input:focus { border-bottom-style: dashed; }
.measure { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; left: -9999px; top: 0; }
.suggestions {
    position: absolute; left: 0; top: calc(100% + .5rem); z-index: 30; min-width: min(26rem, 85vw); max-width: calc(100vw - 24px);
    list-style: none; margin: 0; padding: .35rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
    font: 500 1.05rem/1.3 var(--body); letter-spacing: 0;
    /* Bis zu 12 Treffer: lange Listen scrollen statt über den Bildschirm hinauszuragen */
    max-height: min(26rem, 60vh); overflow-y: auto; overscroll-behavior: contain;
}
.suggestions li { padding: .6rem .8rem; border-radius: 7px; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--accent); color: var(--accent-ink); }
.suggestions .year { color: var(--muted); }
.suggestions li[aria-selected="true"] .year, .suggestions li:hover .year { color: inherit; }
.suggestions .none, .suggestions .none:hover { color: var(--muted); background: none; cursor: default; }
/* Live-Nachsuche: Treffer aus IGDB unter einer kleinen Überschrift, mit „+“; während der Übernahme der Status statt des Jahrs */
.suggestions .suggest-head, .suggestions .suggest-head:hover { margin-top: .3rem; padding: .5rem .8rem .25rem; border-top: 1px solid var(--border); border-radius: 0;
    font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: none; cursor: default; }
/* Startseite: li > Titel + Jahr; Kopfzeile: li > a > Titel + Jahr */
.suggestions li.is-igdb > .year::after, .suggestions .is-igdb > a::after { content: "+"; margin-left: .5rem; font-weight: 700; }
.suggestions li.is-igdb[data-label] > .year, .suggestions .is-igdb > a[data-label] .year { display: none; }
.suggestions li.is-igdb[data-label]::after, .suggestions .is-igdb > a[data-label]::after { content: attr(data-label); margin-left: .5rem; font-size: .85rem; opacity: .8; }
.suggestions [aria-busy="true"] { cursor: progress; opacity: .75; }
.search-more { margin-top: 2rem; max-width: 36rem; }
.search-more h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.search-more-list { display: grid; gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; }
.search-more-list form { margin: 0; }
.search-more-pick { display: flex; align-items: baseline; gap: .8rem; width: 100%; padding: .7rem 1rem; text-align: left; font: inherit; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s; }
.search-more-pick:hover, .search-more-pick:focus-visible { border-color: var(--accent); }
.search-more-pick .year { color: var(--muted); }
.search-more-add { margin-left: auto; font-weight: 700; color: var(--accent); }
.count { font: 600 .8rem/1 var(--body); color: var(--muted); margin: 1rem 0 0; min-height: 1rem; }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 36rem; margin: 1.4rem 0 1.4rem; }
.stage .lead { opacity: 0; animation: rise .8s 1.1s forwards; }
.quickpick { display: grid; gap: .9rem; width: 100%; opacity: 0; animation: rise .8s 1.3s forwards; }

/* Die Wand bleibt neben den Texten greifbar (Cover in den Satz ziehen) */
.pitch { pointer-events: none; }
.pitch > * { pointer-events: auto; width: fit-content; max-width: 100%; }
.pitch > .quickpick { width: 100%; }
/* Die Zeilen des Bereichs nehmen nur ihre eigene Breite ein, daneben bleibt die Wand greifbar */
.quickpick { pointer-events: none; }
.quickpick > * { pointer-events: auto; }
.tile[draggable="true"] { cursor: grab; }
.tile[draggable="true"]:hover { opacity: 1; filter: brightness(1.12); }

/* Karussell */
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; font-size: .92rem; }
.shelf-hint { color: var(--muted); }
.shelf-head strong { color: var(--muted); font-weight: 600; }
/* Pfeile seitlich auf der Cover-Reihe: dezent sichtbar, beim Überfahren deutlich */
/* min-width: 0, sonst wird der Rahmen so breit wie alle Cover zusammen und schiebt den ganzen Hero zur Seite */
.carousel-wrap { position: relative; min-width: 0; }
.carousel-arrow { position: absolute; top: 4.9rem; z-index: 3; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer;
    box-shadow: var(--shadow); opacity: .75; transition: opacity .2s, border-color .2s, color .2s; }
.carousel-arrow.is-prev { left: -1.1rem; }
.carousel-arrow.is-next { right: -1.1rem; }
.carousel-wrap:hover .carousel-arrow, .carousel-arrow:focus-visible { opacity: 1; }
.carousel-arrow:hover { border-color: var(--accent); color: var(--accent); }
.carousel-arrow[hidden] { display: none; }
.shelf-nav button { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--border); background: var(--veil); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.shelf-nav button:hover { border-color: var(--accent); color: var(--accent); }
.carousel { display: flex; gap: .85rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem .1rem .7rem; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
.carousel::-webkit-scrollbar { display: none; }
.shelf-item { flex: none; width: 8.75rem; scroll-snap-align: start; display: grid; gap: .35rem; align-content: start; padding: 0; border: 0; background: none;
    color: var(--text); font: inherit; text-align: left; cursor: grab; }
.shelf-item .cover { border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); transition: transform .2s, box-shadow .2s; }
.shelf-item:hover .cover, .shelf-item:focus-visible .cover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 0 0 2px var(--accent), 0 12px 26px rgba(0, 0, 0, .35); }
.shelf-item[aria-disabled="true"] { opacity: .35; cursor: default; }
.shelf-item[aria-disabled="true"] .cover { transform: none; box-shadow: none; }
.shelf-item:focus-visible { outline: none; }
.shelf-item .cover-placeholder span { font-size: .85rem; }
.shelf-title { font-size: .8rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shelf-hours { font-size: .75rem; font-weight: 600; color: var(--muted); }

/* Plattform-Auswahl mit Symbolen */
/* min-width: 0, sonst ist ein fieldset mindestens so breit wie sein Inhalt und die Seite scrollt quer */
.platforms { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.platforms legend { float: left; margin-right: .5rem; color: var(--muted); font-size: .9rem; }
/* Unsichtbares Feld am eigenen Knopf verankern: sonst liegt es außerhalb der wischbaren Reihe und die Seite wird auf dem Handy breiter */
.platform { position: relative; }
.platform input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
/* Nur die äußere Pille (> span), sonst bekommt das Logo darin Rahmen und Hintergrund und verschwindet */
.platform > span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--veil); font-size: .9rem; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.platform span .brand-icon { width: 18px; height: 18px; flex: none; }
.platform span .deck-logo { width: 18px; height: 18px; flex: none; }
.badge-platform { display: inline-flex; align-items: center; gap: .3rem; }
.badge-platform .brand-icon { width: .95em; height: .95em; vertical-align: 0; }
.own-filter a { display: inline-flex; align-items: center; gap: .4rem; }
.platform:hover > span { border-color: var(--accent); }
/* Gewählte Filter neutral (Rot bleibt Auswahl, Treffern und Hauptaktionen vorbehalten) */
.platform input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.platform input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Drag & Drop: Ziel im Satz hervorheben */
.is-dragging .slot input { background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom-style: dashed; }
.is-over .slot input { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.is-dragging .slot::after { content: attr(data-drop-label); position: absolute; left: 0; top: 100%; margin-top: .4rem; white-space: nowrap;
    font: 700 .8rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.steam-picks { padding: 1rem 0 3rem; }
.steam-picks .hint { margin-top: -1rem; margin-bottom: 1.6rem; }
.pill { border: 1px solid var(--border); background: var(--veil); color: var(--text); border-radius: 999px; padding: .45rem .95rem; cursor: pointer; font: 500 .95rem var(--body); transition: border-color .2s, transform .2s; }
.pill:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.pill:disabled { opacity: .35; cursor: default; }
/* Mittig unter der Auswahl: der nächste Schritt für alle Spalten darüber */
.jump { display: block; width: fit-content; margin: 1.8rem auto 0; border: 0; border-radius: 999px; padding: .85rem 1.5rem; background: var(--accent); color: var(--accent-ink);
    font: 700 1.05rem/1 var(--body); cursor: pointer; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent);
    animation: rise .5s forwards, nudge 2.4s 1s ease-in-out infinite; }
.jump[hidden] { display: none; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Startseite: Geschmack in eigenen Worten */
/* Dezenter Umschalter unter dem Satz statt eigenem Kasten */
.describe-toggle { display: inline-flex; align-items: center; gap: .55rem; margin: 2.6rem 0 1.6rem; padding: 0; border: 0; background: none;
    color: var(--muted); font: 600 .95rem var(--body); cursor: pointer; opacity: 0; animation: rise .8s 1.1s forwards; }
.describe-toggle:hover, .describe-toggle[aria-expanded="true"] { color: var(--text); }
.describe-toggle [data-describe-label] { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: .25em; }
.describe-toggle:hover [data-describe-label] { text-decoration-color: var(--accent); }
.describe { width: min(100%, 44rem); margin: 0 0 1.4rem; border: 1px solid var(--border); border-radius: 14px; background: var(--veil); }
.describe[hidden], .quickpick[hidden] { display: none; }
.describe-badge { font: 700 .68rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; padding: .3rem .5rem; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink); }
.describe-body { padding: 1rem; display: grid; gap: .8rem; }
.describe-status { flex-basis: 100%; color: var(--text); font-weight: 600; font-size: .9rem; }

/* Ladezustand: Spinner und Platzhalter-Karten */
.spinner { display: inline-block; width: 1em; height: 1em; margin-right: .5rem; vertical-align: -.15em; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.button .spinner { display: none; }
.button.is-busy .spinner { display: inline-block; }
.pick-ghost { aspect-ratio: 3 / 4; border-radius: 8px; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
    background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.live .loading { display: flex; align-items: center; margin-bottom: 1.4rem; }

/* Filter bei den Treffern */
.live-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding-top: 2rem; scroll-margin-top: 3rem; }
.live-filters[hidden] { display: none; }
.live-filters-hint { margin: 0; }
.live-filters-hint[hidden] { display: none; }
/* Beschriftungen gleich breit, damit die Auswahl-Pillen der Zeilen untereinander fluchten */
.live-filters .platforms legend { width: 6.8rem; }
.describe textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: .7rem .85rem; resize: vertical; min-height: 4.5rem; }
.describe textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.describe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0; }
.describe-actions .hint { flex: 1 1 16rem; font-size: .8rem; }
.describe-teaser p { margin: 0; }
.describe-sample { position: relative; padding: .8rem 1rem; border-radius: 10px; background: var(--surface); border: 1px dashed var(--border); }
.describe-quote { font-style: italic; }
.describe-answer { color: var(--muted); margin-top: .4rem !important; }
.describe-answer::before { content: "→ "; color: var(--accent); }
.describe-summary { flex-basis: 100%; margin: .2rem 0 0; color: var(--muted); font-size: 1.05rem; }

/* Startseite: Sofort-Ergebnisse */
/* Kein Hineinziehen in den Hero: bei vielen Filtern lag die Überschrift sonst über dem Knopf „Deine Treffer ansehen“ */
.live { position: relative; z-index: 5; padding: 1rem 0 3rem; scroll-margin-top: 5rem; }
.live[hidden] { display: none; }
.live-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.6rem; }
.live-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: 0; }
.live-head h2 em { font-style: normal; color: var(--accent); }
.live-head a { margin-left: auto; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; }
.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.pick { position: relative; opacity: 0; transform: translateY(30px); animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d); }
.pick-cover { display: block; position: relative; border-radius: 8px; overflow: hidden; transition: transform .25s ease-out; box-shadow: var(--shadow); }
.pick-cover .cover { border-radius: 0; }
.pick-cover .cover-placeholder span { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.pick .stamp { position: absolute; top: -.9rem; right: -.6rem; z-index: 2; }
.pick h3 { font-size: 1.45rem; margin: 1rem 0 .35rem; }
.pick h3 a { color: var(--text); }
.pick h3 a:hover { color: var(--accent); text-decoration: none; }
.pick blockquote { margin: 0; padding-left: .9rem; border-left: 3px solid var(--accent); color: var(--muted); font-size: .98rem; }
.pick blockquote strong { color: var(--text); font-weight: 600; }
.loading { color: var(--muted); font-weight: 600; font-size: 1.1rem; }

/* Startseite: So funktioniert's */
.how { border-top: 1px solid var(--border); padding: 4.5rem 0 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
.how b { display: block; font: 800 4.5rem/1 var(--display); color: var(--accent); letter-spacing: -.05em; margin-bottom: .6rem; }
.how h3 { font-size: 1.35rem; margin: 0 0 .4rem; }
.how p { color: var(--muted); margin: 0; }

/* Auswahl-Chips (Ergebnisseite) */
.chips { display: contents; list-style: none; margin: 0; padding: 0; }
.chips.static { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem;
    border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .95rem; font-weight: 500;
}
.chip a { color: var(--text); }
.chip-remove { border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 .1rem 0 .25rem; }
.chip-remove:hover { color: var(--accent); }
.select { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); }
.select select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .4rem .8rem; }
.hint { color: var(--muted); font-size: .9rem; }

/* Cover und Ersatz-Cover (Titel als Typo-Karte) */
.cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.cover-placeholder {
    display: flex; align-items: flex-end; padding: .7rem; overflow: hidden;
    background: hsl(var(--hue) 32% 17%); color: #f2ede4;
}
.cover-placeholder span { font: 800 1.15rem/1.02 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cover-placeholder .ph-initials { display: none; }
.release .cover-placeholder { padding: 0; align-items: center; justify-content: center; }
.release .cover-placeholder .ph-title { display: none; }
.release .cover-placeholder .ph-initials { display: block; font-size: .85rem; }

/* Match-Stempel */
.match, .stamp {
    flex: none; display: inline-block; background: var(--accent); color: var(--accent-ink); border-radius: 6px;
    font: 800 1rem/1 var(--display); letter-spacing: -.02em; padding: .4rem .5rem .32rem; transform: rotate(4deg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.stamp { font-size: 1.5rem; padding: .55rem .7rem .45rem; transform: rotate(8deg); }
.stamp small { display: block; font: 600 .6rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; margin-top: .25rem; opacity: .85; }

/* Ergebnisseite: Satz mit Cover-Fächer, Geschmack als Balken, bester Treffer groß, Rest als Cover-Raster */
.rs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 2.5rem 0 1.5rem; }
.rs-sentence { font: 800 clamp(1.8rem, 4.2vw, 3.1rem)/1.06 var(--display); letter-spacing: -.04em; margin: .3rem 0 1.1rem; }
.rs-names a { color: var(--accent); }
.rs-names a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.rs-actions form { margin: 0; }
.rs-intro > .hint { margin: .8rem 0 0; }
.rs-fan { position: relative; width: calc(7rem + (var(--n) - 1) * 3.2rem); height: 11.5rem; }
.rs-fan-item { position: absolute; top: .8rem; left: calc(var(--i) * 3.2rem); width: 7rem; transform-origin: 50% 130%;
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)); }
.rs-fan-item .cover { border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.rs-taste { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.3rem 1.2rem; margin: 0 0 1.6rem; }
.rs-taste h2 { font: 700 .75rem/1 var(--body); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 1rem; }
.rs-taste ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .9rem 2rem; }
.rs-taste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .4rem .5rem; font-size: .95rem; }
.rs-taste-value { color: var(--muted); font-size: .8rem; }
.rs-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rs-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.rs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1rem; }
.rs-count { margin: 0; font-weight: 700; color: var(--muted); }
.rs-toolbar .own-filter { margin: 0; }
.rs-top { margin-top: 0; }
.card-top { grid-template-columns: 190px minmax(0, 1fr); padding: 1.3rem; border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 55%); }
.card-top .card-head h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.card-top .card-head .match { font-size: 1.25rem; padding: .45rem .6rem .35rem; }
.card-top-label { margin: 0 0 .25rem; }
/* .reasons.reason-chips: schlägt die spätere .reasons-Regel mit rotem Strich links */
.reasons.reason-chips { display: flex; flex-wrap: wrap; gap: .4rem; border-left: 0; padding-left: 0; margin: .3rem 0 .8rem; }
.reason-chips li { color: var(--text); font-size: .85rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.reason-chips li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(45%, 11.5rem), 1fr)); gap: 1.6rem 1.1rem; margin: 1.6rem 0 2.5rem; }
.rs-tile { position: relative; display: grid; gap: .35rem; align-content: start; transition: opacity .2s; }
.rs-tile-cover { position: relative; display: block; transition: transform .2s; }
.rs-tile-cover .cover { border-radius: 10px; box-shadow: var(--shadow); }
.rs-tile:hover .rs-tile-cover { transform: translateY(-4px); }
.rs-tile-cover .match { position: absolute; top: -.5rem; right: -.4rem; }
.rs-tile h3 { margin: .35rem 0 0; font-size: 1.05rem; line-height: 1.2; }
.rs-tile h3 a { color: var(--text); }
.rs-tile h3 a:hover { color: var(--accent); text-decoration: none; }
.rs-tile-why { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.35; }
.rs-tile-why strong { color: var(--text); font-weight: 600; }
/* Preis beim Titel (Kacheln, Treffer der Startseite, bester Treffer); Rabatt als grünes Schild */
.price-line, .pick-price { margin: 0; font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--text); }
.price-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; }
.price-sep { color: var(--muted); font-weight: 400; }
.review-score { white-space: nowrap; }
.review-score.is-good { color: var(--good); }
.review-score.is-bad { color: var(--bad); }
.review-score small { font-weight: 500; font-size: .78rem; color: var(--muted); }
/* Rabatt wie auf den Cover-Schildern im Steam-Stil: grünes Feld, alter Preis durchgestrichen */
.price-line b, .pick-price b { display: inline-block; padding: .15rem .38rem; border-radius: 4px; font-size: .8rem; font-weight: 800; color: #beee11; background: #4c6b22; }
.price-line s { color: var(--muted); font-weight: 500; font-size: .85em; }
/* Steam-Deck-Einstufung in der Preiszeile: Logo, Status-Symbol, Text */
.deck-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .82em; font-weight: 600; color: var(--muted); white-space: nowrap; }
.price-now { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; }
/* Restlaufzeit des Angebots, z. B. „noch 3 Tage“ */
.price-ends { font-size: .78em; font-weight: 600; color: #beee11; }
:root[data-theme="light"] .price-ends { color: #4c6b22; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .price-ends { color: #4c6b22; } }
/* Auf dem Cover wie im Steam-Shop: Preis unten links (Rabatt als grünes Feld, alter Preis durchgestrichen),
   Bewertung als „81 % positiv“ mit Daumen bündig links darüber, damit sie nicht mit dem Match verwechselt wird.
   Immer an derselben Stelle, mit und ohne Rabatt: Sonst springt die Bewertung in einer Reihe von rechts nach links */
.cf-price, .cf-rating { position: absolute; bottom: .7rem; z-index: 1; display: inline-flex; align-items: stretch; overflow: hidden;
    border-radius: 6px; font: 800 1.1rem/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
    pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.cf-price { left: .7rem; }
/* Preis als helles Schild (hebt sich von jedem Cover ab), Rabatt davor im Steam-Grün */
.cf-price b { display: flex; align-items: center; padding: .45rem .5rem; color: #beee11; background: #4c6b22; }
.cf-amount { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; color: #111; background: #fff; }
.cf-amount s { color: #6b7076; font-weight: 600; font-size: .8em; }
/* Bewertung als farbiges Schild in Steams Farben: positiv blau, ausgeglichen beige, negativ rot */
.cf-rating { left: .7rem; align-items: center; gap: .35rem; padding: .45rem .6rem; color: #fff; background: #8a7a5a; }
.cf-rating::before { content: ""; width: .85em; height: .85em; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8 21h9.3a2 2 0 0 0 2-1.6l1.6-7A2 2 0 0 0 19 10h-5.2l.8-4.1A2 2 0 0 0 12.7 3.5L8 9z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8 21h9.3a2 2 0 0 0 2-1.6l1.6-7A2 2 0 0 0 19 10h-5.2l.8-4.1A2 2 0 0 0 12.7 3.5L8 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Mit Preis: Bewertung darüber; ohne Preis bleibt sie unten */
.pick-cover:has(.cf-price) .cf-rating { bottom: 3.05rem; }
/* Steam Deck unten rechts: Deck-Logo, dahinter grüner Haken (verifiziert) oder gelbes i (spielbar), auf hellem Schild
   wie der Preis, damit das dunkle Logo auf jedem Cover lesbar ist (steam_deck_icons in helpers.php) */
.cf-deck { position: absolute; right: .7rem; bottom: .7rem; z-index: 1; display: inline-flex; align-items: center; gap: .3rem;
    padding: .32rem .42rem; border-radius: 6px; color: #171a21; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.cf-deck svg { width: 1.15rem; height: 1.15rem; display: block; }
.rs-tile .cf-deck { right: .5rem; bottom: .5rem; padding: .24rem .32rem; gap: .2rem; border-radius: 5px; }
.rs-tile .cf-deck svg { width: .95rem; height: .95rem; }
/* In der Textzeile (game-facts): Logo und Status vor dem Text */
.deck-badge svg { width: 1.05em; height: 1.05em; flex: none; }
.deck-badge .deck-logo { color: var(--text); }
.cf-rating.is-good { background: #1a8fe0; }
.cf-rating.is-bad { background: #b0412a; }
/* Kacheln: kleiner; die Markier-Knöpfe sitzen dort oben links (siehe .rs-tile .marks) */
.rs-tile .cf-price, .rs-tile .cf-rating { bottom: .5rem; font-size: .85rem; border-radius: 5px; }
.rs-tile .cf-price, .rs-tile .cf-rating { left: .5rem; }
/* Wie oben: Bewertung immer bündig links über dem Preis */
.rs-tile-cover:has(.cf-price) .cf-rating { bottom: 2.3rem; }
.rs-tile .cf-price b, .rs-tile .cf-amount, .rs-tile .cf-rating { padding: .32rem .42rem; }
@media (max-width: 640px) {
    /* Schmale Kacheln: Bewertung über dem Preis, beide links; alter Preis entfällt */
    .rs-tile .cf-price, .rs-tile .cf-rating { font-size: .78rem; left: .45rem; bottom: .45rem; }
    .rs-tile .rs-tile-cover .cf-rating { right: auto; }
    .rs-tile .rs-tile-cover:has(.cf-price) .cf-rating { bottom: 2.05rem; }
    /* Schmale Kacheln: Deck als dritte Stufe links über Bewertung und Preis */
    .rs-tile .rs-tile-cover .cf-deck { left: .45rem; right: auto; bottom: 3.65rem; }
    .rs-tile .rs-tile-cover .cf-deck svg { width: .82rem; height: .82rem; }
    .rs-tile .rs-tile-cover:not(:has(.cf-rating)) .cf-deck { bottom: 2.05rem; }
    .rs-tile .cf-amount s { display: none; }
}
/* „Mehr Optionen“: seltener genutzte Filter (Preis, gleiche Reihe, Bibliothek) aufklappbar */
/* min-width: 0 wie bei .platforms: sonst wird das Menü so breit wie die längste wischbare Reihe darin und die Seite scrollt quer */
.more-options { flex-basis: 100%; min-width: 0; }
/* Als Knopf mit Filter-Symbol, damit es neben den Plattform-Pillen nicht untergeht */
.more-options > summary { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; padding: .45rem .95rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; }
.more-options > summary::-webkit-details-marker { display: none; }
.more-options > summary::before { content: ""; width: 1rem; height: 1rem; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat; }
.more-options > summary::after { content: "▾"; font-size: .8em; color: var(--muted); transition: transform .2s; }
.more-options[open] > summary::after { transform: rotate(180deg); }
.more-options > summary:hover { border-color: var(--accent); }
/* Einmaliger Hinweis beim ersten Treffer-Laden: dreimal ein weicher Ring in Akzentfarbe, danach Ruhe */
.more-options > summary.is-nudged { animation: options-nudge 1.4s ease-out .9s 3; }
@keyframes options-nudge {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); border-color: var(--accent); }
    70% { box-shadow: 0 0 0 .7rem transparent; border-color: var(--accent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.more-options-count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px;
    font-size: .75rem; font-weight: 800; color: var(--accent-ink); background: var(--accent); }
.more-options-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: .7rem; min-width: 0; }
.more-options-legend { color: var(--muted); font-size: .9rem; width: 6.8rem; flex: none; }
.option-chip { padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .9rem; }
.option-chip:hover { border-color: var(--accent); text-decoration: none; }
.option-chip.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }
.more-options-note { margin: 0; font-size: .8rem; }
/* Jede Kachel gleich gebaut: Titel immer zwei Zeilen hoch, „Weil du …“ und Tag je eine Zeile, damit die Reihen ruhig fluchten */
.rs-tile h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.rs-tile-why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-tile-tag { justify-self: start; max-width: 100%; margin: .15rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 600; line-height: 1.2;
    padding: .22rem .55rem; border-radius: 999px; color: color-mix(in srgb, var(--text) 85%, transparent); background: var(--surface-2); border: 1px solid var(--border); }
.rs-tile .badge.owned { justify-self: start; font-size: .72rem; }
/* Herz, gespielt, ausblenden liegen unten links auf dem Cover (gleiche Rasterzelle), statt je nach Titellänge mal höher, mal tiefer */
.rs-tile-cover { grid-area: 1 / 1; }
/* Oben links aufs Cover: unten stehen Preis und Bewertung, oben rechts der Match */
.rs-tile .marks { grid-area: 1 / 1; align-self: start; justify-self: start; z-index: 2; margin: .5rem 0 0 .5rem; gap: .25rem; transition: opacity .2s, transform .2s; }
.rs-tile .mark { width: 1.85rem; height: 1.85rem; backdrop-filter: blur(4px); }
.rs-tile .mark:not([aria-pressed="true"]) { color: #fff; background: rgb(0 0 0 / .55); border-color: rgb(255 255 255 / .2); }
.rs-tile .mark:not([aria-pressed="true"]):hover { border-color: #fff; }
.rs-tile:hover .marks { transform: translateY(-4px); }
@media (hover: hover) {
    /* Am PC erst beim Überfahren; gesetzte Markierungen bleiben sichtbar */
    .rs-tile .marks:not(:has([aria-pressed="true"])) { opacity: 0; }
    .rs-tile:hover .marks, .rs-tile .marks:focus-within { opacity: 1; }
    /* Treffer auf der Startseite genauso ruhig: Markier-Knöpfe und Daumen erst beim Überfahren, Gesetztes (Herz,
       abgegebener Daumen) bleibt stehen. Der Platz bleibt, damit beim Überfahren nichts springt.
       Die große Karte (Bester Treffer, Themenseiten) zeigt alles immer: Dort wirkte ein einzelnes Herz verloren */
    .pick .mark:not([aria-pressed="true"]), .pick .pick-dismiss,
    .pick .vote:not(:has([aria-pressed="true"])),
    .rs-tile .vote:not(:has([aria-pressed="true"])) { opacity: 0; transition: opacity .2s; }
    .pick:hover .mark, .pick:focus-within .mark,
    .pick:hover .pick-dismiss, .pick:focus-within .pick-dismiss,
    .pick:hover .vote, .pick:focus-within .vote,
    .rs-tile:hover .vote, .rs-tile:focus-within .vote { opacity: 1; }
}
.rs-tile.is-hidden { opacity: .4; }
.rs-tile.is-played { opacity: .6; }
/* „Spiele wie …“: Kopfbereich mit dem eigenen Cover unscharf im Hintergrund, Treffer wie auf der Ergebnisseite */
.sim-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem;
    align-items: start; margin: 2rem 0 1.6rem; padding: 1.8rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.sim-hero::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--cover, none) center / cover; filter: blur(40px) saturate(1.2); opacity: .4; }
.sim-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 50%, transparent), var(--surface) 70%); }
.sim-cover .cover { border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.sim-body h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.02; letter-spacing: -.04em; margin: .2rem 0 .7rem; }
.sim-body .summary { max-width: 46rem; color: var(--muted); }
/* Titel und Markier-Knöpfe in einer Zeile; die Knöpfe rutschen bei langen Titeln darunter */
.sim-title { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .2rem 0 .7rem; }
.sim-title h1 { margin: 0; }
.sim-label { margin: 1rem 0 .2rem; font-weight: 600; }
.sim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .6rem 0 0; }
.sim-actions .game-actions { margin: 0; padding: 0; border: 0; }
.sim-hero .theme-links { margin: 1rem 0 0; }
.rs-tile-sum { margin: .1rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
    .sim-hero { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; padding: 1.1rem; margin-top: 1.2rem; }
    .sim-body { display: contents; }
    .sim-body > :not(.eyebrow):not(.sim-title):not(.meta) { grid-column: 1 / -1; }
    .sim-cover { grid-row: 1 / span 3; }
    .sim-body h1 { font-size: 1.6rem; margin: 0; }
}
@media (max-width: 760px) {
    .rs-head { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.8rem; }
    .rs-fan { display: none; }
}
@media (max-width: 640px) {
    .card.card-top { grid-template-columns: 104px minmax(0, 1fr); padding: 1rem; }
}

/* Ergebnisse */
.results-head { padding: 2.5rem 0 1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--accent); font-weight: 700; margin-bottom: .6rem; }
.similar-head { display: grid; grid-template-columns: 160px 1fr; gap: 1.75rem; align-items: start; }
.taste { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin: 1rem 0 1.5rem; }
.taste p { color: var(--muted); }
.traits { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 .75rem; }
.traits li { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-radius: 999px; padding: .3rem .85rem; font-size: .9rem; font-weight: 600; }
.results { display: grid; gap: 1.1rem; margin-top: 1rem; }
.empty { color: var(--muted); }

.card {
    display: grid; grid-template-columns: 130px 1fr; gap: 1.4rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem;
    transition: border-color .2s;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.card-cover .cover { box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.card-head h3 { font-size: 1.4rem; }
.card-head h3 a { color: var(--text); }
.card-head h3 a:hover { color: var(--accent); text-decoration: none; }
.meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; color: var(--muted); font-size: .85rem; }
.badge { border: 1px solid var(--border); border-radius: 6px; padding: .05rem .45rem; font-size: .75rem; }
.because { font-size: .92rem; color: var(--muted); margin-bottom: .4rem; }
/* Daumen an Empfehlungen: dezent, gewählter Daumen hervorgehoben (partials/vote-buttons.php, app.js) */
.vote { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; margin: .3rem 0 0; font-size: .78rem; color: var(--muted); }
.vote[hidden] { display: none; }
.vote-btn { display: grid; place-items: center; width: 1.9rem; height: 1.7rem; padding: 0; border: 1px solid var(--border); border-radius: 999px;
    background: transparent; font-size: .85rem; line-height: 1; cursor: pointer; filter: grayscale(1); opacity: .7; transition: opacity .15s, filter .15s, border-color .15s, background .15s; }
.vote-btn:hover { opacity: 1; filter: none; border-color: var(--accent); }
.vote-btn[aria-pressed="true"] { opacity: 1; filter: none; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.pick .vote { margin-top: .2rem; }
.because strong { color: var(--text); }
.reasons { margin: 0 0 .6rem; padding-left: 0; list-style: none; border-left: 3px solid var(--accent); padding-left: .9rem; }
.reasons li { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag { font-size: .75rem; background: var(--surface-2); border-radius: 6px; padding: .15rem .5rem; color: var(--muted); }
.summary { color: var(--muted); font-size: .92rem; }
.shops { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 0; }

/* Navigation, Hinweise */
.nav { display: flex; align-items: center; gap: 1.1rem; font-size: .95rem; font-weight: 500; }
.nav-extras { display: none; } /* nur im Handy-Menü, siehe unten */
.nav a:not(.button) { color: var(--text); }
.nav a:not(.button):hover { color: var(--accent); text-decoration: none; }
.button.small { padding: .4rem .9rem; font-size: .875rem; }
.alert { margin: 1.25rem 0 0; padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.is-bare main > .alert { position: relative; z-index: 25; margin: 5rem auto 0; width: min(1100px, 100% - 32px); }
.alert.success { border-color: color-mix(in srgb, var(--good) 50%, transparent); color: var(--good); }
.alert.error { border-color: color-mix(in srgb, var(--bad) 50%, transparent); color: var(--bad); }
.alert.info { color: var(--muted); }

/* Formulare */
.auth { max-width: 440px; padding: 3rem 0 1rem; }
.form { display: grid; gap: 1rem; margin: 1.25rem 0; }
.form label { display: grid; gap: .35rem; }
.form label > span { font-size: .9rem; color: var(--muted); }
.form input[type="email"], .form input[type="password"], .form input[type="text"] {
    font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .7rem .85rem;
}
.form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Autofill des Browsers (Chrome/Edge färben gespeicherte Daten gelb, auf Dunkel wird das oliv): eigene Farben erzwingen */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    box-shadow: 0 0 0 1000px var(--surface) inset;
    caret-color: var(--text);
    transition: background-color 9999s ease-out 0s;
}
.form .checkbox { display: flex; gap: .6rem; align-items: start; }
.form .checkbox span { color: var(--text); }
/* Registrierung: freiwilliges öffentliches Profil mit kurzem Nutzen */
.reg-profile { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.reg-profile ul { margin: 0; padding: 0 0 0 1.85rem; color: var(--muted); font-size: .9rem; display: grid; gap: .2rem; }
.reg-profile .hint { padding-left: 1.85rem; font-size: .8rem; }
.error { color: var(--bad); }
.divider { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; margin: 1.25rem 0 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
/* Steam-Knopf im eigenen Design (neutral mit Steam-Logo statt Steam-Blau) */
.button.steam { background: var(--text); border-color: var(--text); color: var(--bg); width: 100%; justify-content: center; gap: .55rem; }
.button.steam:hover { border-color: var(--text); opacity: .9; }
.form .button.primary { justify-content: center; }
.account-section .button.steam { width: auto; }
.button.subtle { background: transparent; }
.button.danger { background: #5a1e1e; border-color: #8a2b2b; color: #ffd5d5; }
form.inline { display: inline; margin: 0; }

/* Kontoseite */
.account-head { display: flex; gap: 1.25rem; align-items: center; padding: 2.5rem 0 1rem; }
.avatar { border-radius: 50%; }
.account-section { margin-top: 2.25rem; }
.account-section > .hint { margin-bottom: .75rem; }
.stats { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; margin: .75rem 0 1rem; }
.stats li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem; color: var(--muted); }
.stats strong { color: var(--text); font: 800 1.25rem var(--display); margin-right: .25rem; }
/* Statistik im Admin: Tagesbalken und Tabellen nebeneinander */
.an-chart { display: flex; align-items: stretch; gap: 3px; height: 180px; padding: 1.4rem .5rem .4rem; margin: .5rem 0 1.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
/* Je Tag eine Spalte: Balken unten mit Anzahl darüber, darunter das Datum (nur jeder 5. Tag, sonst wird es eng) */
.an-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; }
.an-bar { position: relative; height: max(2px, var(--h)); max-height: calc(100% - 1.1rem); background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }
.an-col:hover .an-bar { opacity: 1; }
.an-bar b { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font: 700 .68rem/1 var(--body); color: var(--text); white-space: nowrap; }
.an-col small { height: .8rem; font-size: .62rem; line-height: .8rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem 2rem; margin-bottom: 1.5rem; }
.an-grid h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.an-grid td:not(:first-child), .an-grid th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.an-grid td a { color: var(--text); word-break: break-all; }
/* Reiter der Kontoseite */
.tabs { position: relative; display: flex; gap: .3rem; overflow-x: auto; border-bottom: 1px solid var(--border); margin: 1rem 0 1.8rem; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
/* Weitere Reiter außerhalb der Leiste: Rand ausblenden (Klassen setzt app.js) */
.tabs.more-end { mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.tabs.more-start { mask-image: linear-gradient(to right, transparent, #000 3rem); }
.tabs.more-start.more-end { mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.tabs a { flex: none; padding: .7rem 1rem; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel { padding-bottom: 1rem; }
.tab-panel[hidden] { display: none !important; }
.subtabs { margin: -.8rem 0 1.4rem; border-bottom: 0; gap: .4rem; flex-wrap: wrap; }
.subtabs a { padding: .4rem .9rem; border: 1px solid var(--border); border-radius: 999px; margin: 0; font-size: .9rem; }
.subtabs a.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tab-badge { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; margin-left: .3rem; border-radius: 999px;
    background: var(--warn); color: #1a1408; font-size: .72rem; font-weight: 800; vertical-align: .1em; }
.tab-badge.is-fail { background: var(--bad); color: #fff; }
.has-tabs > .tab-panel.settings-section { border: 0; background: none; padding: 0; }
.has-tabs > .tab-panel.settings-section > legend { display: none; }
.admin:not(.has-tabs) > .tab-panel + .tab-panel { margin-top: 3rem; }
.account:not(.has-tabs) .tab-panel + .tab-panel { margin-top: 3rem; }
.tab-panel .sub-head { margin-top: 2.5rem; }
.settings-list { display: grid; grid-template-columns: 10rem 1fr; gap: .8rem 1.5rem; margin: 0 0 1.5rem; align-items: center; }
.settings-list dt { color: var(--muted); }
.settings-list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.coverage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-top: .5rem; max-width: 720px; }
.coverage-figures { margin-bottom: .7rem; }
.coverage-figures strong { font: 800 1.15rem var(--display); }
.meter { position: relative; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: .7rem; }
.meter span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.meter-matched { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.meter-profiled { background: var(--accent); }
.coverage .hint { margin: 0; }
.library { margin: 0 0 .75rem; padding: 0; list-style: none; max-width: 640px; }
.library li { display: grid; grid-template-columns: 2.2rem 1fr 1.5rem 5.5rem; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.library .rank { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: .85rem; }
.library .pick-game { display: flex; align-items: center; gap: .6rem; min-width: 0; cursor: pointer; }
.library .pick-game input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: none; cursor: pointer; }
.library .pick-game input:disabled { cursor: default; }
.library .is-unknown .pick-game { color: var(--muted); padding-left: 1.65rem; cursor: default; }
.library li:has(input:checked:not(:disabled)) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.library .fav-mark { color: var(--accent); }
.library .library-link { color: var(--muted); text-align: center; }
.library .library-link:hover { color: var(--accent); text-decoration: none; }
.library .hours { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.library-more summary { cursor: pointer; color: var(--accent); font-weight: 600; margin: .5rem 0; }

/* Steam-Bibliothek als Cover-Raster */
.library-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin: 1.6rem 0 1.2rem; }
.library-tools .hint { margin: 0; max-width: 34rem; }
.library-search { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .55rem 1rem; width: min(100%, 18rem); }
.library-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.2rem 1rem; }
.lib-card { position: relative; display: grid; gap: .4rem; align-content: start; cursor: pointer; }
.lib-card.is-extra, .lib-card.is-filtered { display: none; }
.lib-grid.show-all .lib-card.is-extra:not(.is-filtered) { display: grid; }
.lib-cover { position: relative; display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    transition: transform .2s, box-shadow .2s; }
.lib-cover .cover { border-radius: 0; }
.lib-cover .cover-placeholder span { font-size: .95rem; }
.lib-card:hover .lib-cover { transform: translateY(-3px); }
.lib-check { position: absolute; top: .45rem; left: .45rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
    background: rgba(15, 13, 11, .55); border: 2px solid rgba(255, 255, 255, .8); color: transparent; font-weight: 800; font-size: .85rem; transition: all .15s; }
.lib-card:hover .lib-check { border-color: #fff; }
.lib-card:has(input:checked:not(:disabled)) .lib-cover { box-shadow: 0 0 0 3px var(--accent), 0 10px 24px rgba(0, 0, 0, .3); transform: translateY(-3px); }
.lib-card:has(input:checked:not(:disabled)) .lib-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.lib-card:has(input:focus-visible) .lib-cover { outline: 2px solid var(--accent); outline-offset: 3px; }
.lib-card.is-fav { cursor: default; }
.lib-card.is-fav .lib-check { display: none; }
.lib-fav { position: absolute; top: .45rem; left: .45rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent); color: #fff; font-size: .85rem; }
.lib-link { position: absolute; top: .45rem; right: .45rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
    background: rgba(15, 13, 11, .6); color: #fff; font-size: .8rem; opacity: 0; transition: opacity .15s; }
.lib-card:hover .lib-link, .lib-link:focus-visible { opacity: 1; text-decoration: none; }
.lib-title { font-size: .85rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Im Raster immer Platz für zwei Zeilen, damit Balken und Stunden in einer Reihe auf gleicher Höhe stehen */
.lib-grid:not(.is-list) .lib-title { min-height: 2.5em; }
.lib-hours { display: grid; gap: .25rem; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lib-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.brand-icon { display: inline-block; width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }
/* Logo-Datei als Maske, gefüllt mit der Textfarbe */
.brand-mask { background: currentColor; -webkit-mask: var(--brand) center / contain no-repeat; mask: var(--brand) center / contain no-repeat; }
.button .brand-icon { margin-right: .1rem; }
.lib-steam { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.lib-steam:hover { color: var(--accent); text-decoration: none; }
.lib-unknown li a { color: var(--text); }
.lib-unknown li a:hover { color: var(--accent); }
.lib-bar { display: block; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lib-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.lib-more { text-align: center; margin: 1.6rem 0 0; }

/* Umschalter Raster/Liste */
.library-controls { display: flex; align-items: center; gap: .6rem; }
.view-toggle { display: inline-flex; padding: .2rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.view-toggle button { width: 2.2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.view-toggle button svg { width: 1.05rem; height: 1.05rem; }
.view-toggle button:hover { color: var(--text); }
.view-toggle button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* Listenansicht der Bibliothek: kleines Cover, Titel, Spielzeit-Balken in einer Zeile */
.lib-grid.is-list { grid-template-columns: 1fr; gap: 0; max-width: 820px; }
.is-list .lib-card { grid-template-columns: 2.6rem 1fr minmax(8rem, 14rem); align-items: center; gap: 1rem; padding: .4rem .6rem;
    border-bottom: 1px solid var(--border); border-radius: 8px; transition: background .15s; }
.is-list .lib-card:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.is-list .lib-card:has(input:checked:not(:disabled)) { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.is-list .lib-cover { border-radius: 4px; box-shadow: none; }
.is-list .lib-card:hover .lib-cover, .is-list .lib-card:has(input:checked:not(:disabled)) .lib-cover { transform: none; box-shadow: none; }
.is-list .lib-cover .cover-placeholder { padding: 0; align-items: center; justify-content: center; }
.is-list .lib-cover .ph-title { display: none; }
.is-list .lib-cover .ph-initials { display: block; font-size: .7rem; }
.is-list .lib-check, .is-list .lib-fav { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.25rem; height: 1.25rem; font-size: .7rem; }
.is-list .lib-link { display: none; }
.is-list .lib-title { font-size: .95rem; -webkit-line-clamp: 1; }
.is-list .lib-hours { grid-template-columns: 1fr 8rem; align-items: center; gap: .7rem; font-size: .85rem; }
.is-list .lib-meta { justify-content: flex-end; gap: .9rem; }
/* Andere Stores: Upload, Bestätigung der erkannten Spiele, Liste je Store */
.store-import { margin: 1.2rem 0 2.8rem; }
.store-card { padding: 1.4rem; border: 1px solid var(--border); border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 60%); }
.store-card h3 { margin: .1rem 0 .4rem; font-size: 1.35rem; letter-spacing: -.02em; }
.store-upload { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); gap: 1.4rem; align-items: center; }
.store-upload-text p { margin: 0; color: var(--muted); }
.store-upload-text .eyebrow { margin-bottom: .2rem; color: var(--accent); }
.store-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem !important; }
.store-chips span { padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--text); background: var(--bg); }
/* Ablagefläche: die ganze Fläche ist der Knopf zum Auswählen */
.store-drop { display: grid; justify-items: center; gap: .3rem; padding: 1.4rem 1rem; text-align: center; cursor: pointer;
    border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 14px; background: var(--bg); transition: border-color .15s, background .15s; }
.store-drop svg { width: 2rem; height: 2rem; color: var(--accent); }
.store-drop strong { font-size: 1.02rem; word-break: break-word; }
.store-drop > span { font-size: .8rem; color: var(--muted); }
.store-drop:hover, .store-drop.is-over, .store-drop:focus-within { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.store-paste { grid-column: 2; display: grid; justify-items: center; gap: .4rem; margin: -.6rem 0 0; text-align: center; }
.store-paste:not(:has(:not([hidden]))) { display: none; }
.store-busy { color: var(--text) !important; font-weight: 600; }
.store-busy[hidden] { display: none; }
.store-upload.is-busy .store-drop { cursor: progress; }
.store-upload.is-busy .store-drop > span:not(.store-busy), .store-upload.is-busy .store-drop svg { display: none; }
.store-privacy { margin: .7rem .2rem 0; font-size: .8rem; }
.store-pending { margin: 1rem .2rem 0; }
.store-confirm-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.store-confirm-head h3 { margin: 0; font-weight: 600; }
.store-confirm select { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-weight: 600; }
.lib-steam-head { display: flex; align-items: center; gap: .5rem; }
.lib-steam-head .brand-icon { width: 20px; height: 20px; }
@media (max-width: 760px) {
    .store-upload { grid-template-columns: minmax(0, 1fr); }
    .store-paste { grid-column: 1; }
    .store-card { padding: 1.1rem; }
}
.store-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .9rem; margin: 1rem 0; }
.store-pick { position: relative; display: grid; gap: .35rem; cursor: pointer; }
.store-pick input { position: absolute; top: .4rem; left: .4rem; z-index: 1; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.store-pick-cover .cover { border-radius: 8px; transition: opacity .15s; }
.store-pick:has(input:not(:checked)) .store-pick-cover .cover { opacity: .35; }
.store-pick-title { font-size: .82rem; line-height: 1.25; }
.store-confirm .lib-unknown { margin-top: 1rem; }
.store-confirm-actions { display: flex; gap: .5rem; margin-top: 1.2rem; }
.store-remove { border: 0; background: none; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0 .3rem; cursor: pointer; }
.store-remove:hover { color: var(--accent); }

/* Filterleiste der Bibliothek: Launcher als Chips, darunter Spielzeit, Status und Sortierung */
.lib-filters { display: grid; gap: .9rem; margin: 0 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.lib-filters[hidden] { display: none; }
.lib-stores { display: flex; flex-wrap: wrap; gap: .4rem; }
.lib-store { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg); color: var(--text); font: 600 .88rem var(--body); cursor: pointer; transition: border-color .15s, background .15s; }
.lib-store span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.lib-store:hover { border-color: var(--accent); }
.lib-store[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.lib-store[aria-pressed="true"] span { color: inherit; opacity: .7; }
.lib-selects { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.lib-select { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); }
.lib-select select { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-weight: 600; }
.lib-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; font-size: .85rem; color: var(--muted); }
.lib-result button[hidden] { display: none; }
.lib-source { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-empty { margin: 1rem 0; }
.lib-empty[hidden] { display: none; }
@media (max-width: 760px) {
    .lib-filters { padding: .8rem; }
    .lib-selects { display: grid; grid-template-columns: minmax(0, 1fr); }
    .lib-select { justify-content: space-between; }
    .lib-select select { min-width: 0; flex: 1; max-width: 60%; }
}
.lib-unknown { margin-top: 2.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.lib-unknown summary { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; }
.lib-unknown summary::-webkit-details-marker { display: none; }
.lib-unknown summary > span:nth-child(2) { display: grid; gap: .15rem; }
.lib-unknown summary .hint { font-size: .85rem; }
.lib-unknown-count { flex: none; min-width: 2.8rem; height: 2.8rem; padding: 0 .5rem; border-radius: 10px; display: grid; place-items: center;
    background: var(--surface-2); font: 800 1.05rem var(--display); color: var(--muted); }
.lib-unknown-chevron { width: 1.2rem; height: 1.2rem; margin-left: auto; color: var(--muted); transition: transform .2s; }
.lib-unknown[open] .lib-unknown-chevron { transform: rotate(180deg); }
.lib-unknown summary:hover .lib-unknown-chevron { color: var(--accent); }
.lib-unknown ul { list-style: none; padding: 0 1.2rem 1rem; margin: 0; columns: 3 14rem; column-gap: 2rem; font-size: .88rem; }
.sync-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .9rem; padding-top: .9rem;
    border-top: 1px solid var(--border); }
.coverage > .sync-row:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sync-state { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .88rem; }
.sync-state svg { width: 1rem; height: 1rem; }
.lib-unknown li { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; break-inside: avoid; border-bottom: 1px solid var(--border); }

/* Filter nach Besitz (Ergebnisseite) und Kennzeichnung eigener Spiele */
.own-filter { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .25rem; margin: .5rem 0 1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.own-filter a { padding: .45rem .95rem; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.own-filter a:hover { color: var(--text); text-decoration: none; }
.own-filter a.is-active { background: var(--text); color: var(--bg); }
/* Schalter „Teile derselben Reihe zeigen“: Checkbox auf der Startseite, Link auf der Ergebnisseite, beide als Kippschalter */
.series-toggle { display: inline-flex; align-items: center; gap: .55rem; justify-self: start; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .9rem; }
.series-toggle:hover { color: var(--text); text-decoration: none; }
.series-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.series-toggle-track { position: relative; flex: none; width: 2.2rem; height: 1.25rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: background .2s; }
.series-toggle-track::after { content: ""; position: absolute; top: 50%; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--muted); transform: translateY(-50%); transition: left .2s, background .2s; }
.series-toggle.is-on .series-toggle-track, .series-toggle:has(input:checked) .series-toggle-track { background: var(--accent); border-color: var(--accent); }
.series-toggle.is-on .series-toggle-track::after, .series-toggle:has(input:checked) .series-toggle-track::after { left: calc(100% - 1.05rem); background: #fff; }
.series-toggle:has(input:focus-visible) .series-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Plattform-Mehrfachauswahl auf Themenseiten: einzelne Chips, aktive mit Häkchen */
.platform-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0 1rem; }
.platform-chips a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 600; font-size: .9rem; }
.platform-chips a:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
.platform-chips a.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }
.platform-chips a[aria-pressed="true"]::after { content: "✓"; font-size: .8em; }
.badge.owned { border-color: color-mix(in srgb, var(--good) 50%, transparent); color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.pick .badge.owned { display: inline-block; margin: 0 0 .5rem; font-size: .75rem; }

/* Herz und Ausblenden */
.marks { display: inline-flex; gap: .3rem; flex: none; }
.mark { width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: color .15s, background .15s, border-color .15s, transform .15s; }
.mark svg { width: 1rem; height: 1rem; }
.mark-heart svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mark:hover { color: var(--text); border-color: var(--text); }
/* Mülleimer an Treffern der Startseite: wie die Markier-Knöpfe, beim Überfahren rot (app.js, dismissButton) */
.pick-dismiss { flex: none; width: 2rem; height: 2rem; margin-top: 1.05rem; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: color .15s, border-color .15s, opacity .2s; }
.pick-dismiss svg { width: 1rem; height: 1rem; }
.pick-dismiss:hover, .pick-dismiss:focus-visible { color: var(--accent); border-color: var(--accent); }
.pick-head .marks + .pick-dismiss { margin-left: -.35rem; }
/* In den Kacheln sitzt der Mülleimer als letzter Knopf in der Markier-Leiste auf dem Cover */
.marks .pick-dismiss { margin: 0; }
.rs-tile.is-leaving { opacity: 0; transform: scale(.94); transition: opacity .25s, transform .25s; pointer-events: none; }
.pick.is-leaving { animation: none; opacity: 0; transform: scale(.94); transition: opacity .25s, transform .25s; pointer-events: none; }
.mark-heart[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.mark-heart[aria-pressed="true"] svg { fill: currentColor; }
.mark-heart[aria-pressed="true"]:active, .mark-heart:active { transform: scale(.88); }
.mark-hide[aria-pressed="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }
.mark-played[aria-pressed="true"] { color: #fff; background: var(--good); border-color: var(--good); }
/* Merken: Lesezeichen, gesetzt gefüllt in Gold */
.mark-wish[aria-pressed="true"] { color: #1a1408; background: #f2b33d; border-color: #f2b33d; }
.mark-wish[aria-pressed="true"] svg { fill: currentColor; }
.card.is-played, .pick.is-played { opacity: .6; }
.card-head .marks { margin-left: auto; }
.card-head .marks + .match { margin-left: .4rem; }
/* Titel und Markier-Knöpfe in einer Zeile: Ein langer Titel bricht selbst um, statt die Knöpfe in eine eigene
   (am PC unsichtbare) Zeile zu schieben, die dann als Lücke vor der Begründung stand */
.pick-head { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: .3rem .6rem; }
.pick-head h3 { flex: 1; min-width: 0; }
.pick-head .marks { flex: none; }
/* Zeilen über alle Treffer gleich hoch (Cover, Titel, Begründung, Daumen), auch wenn ein Titel zweizeilig ist.
   Stempel und „In deiner Bibliothek“ liegen über dem Cover und zählen nicht als Zeile */
@supports (grid-template-rows: subgrid) {
    .pick { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
    .pick blockquote, .pick .vote { align-self: start; }
}
/* Auf dem Cover: deckend, damit es auf jedem Bild lesbar ist */
.pick .badge.owned { position: absolute; top: .6rem; left: .6rem; z-index: 2; margin: 0; padding: .2rem .5rem; font-weight: 700;
    color: #fff; background: var(--good); border-color: var(--good); box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
/* Preis in eigener Zeile direkt unter dem Titel */
.pick-head .marks { margin-top: 1.05rem; }
.pick.is-hidden { opacity: .4; }
.pick.is-hidden blockquote { display: none; }
.card.is-hidden { opacity: .45; }
.card.is-hidden .card-body > :not(.card-head) { display: none; }
/* In Cover-Kacheln unten rechts, erst beim Überfahren (Herz bleibt sichtbar, wenn gesetzt) */
/* Herz unten links, Ausblenden unten rechts (oben sitzen Auswahl-Haken und Link) */
.lib-cover .marks { position: absolute; left: .4rem; right: .4rem; bottom: .4rem; justify-content: space-between; pointer-events: none; }
.lib-cover .marks .mark { pointer-events: auto; }
.lib-cover .mark { width: 1.8rem; height: 1.8rem; background: rgba(15, 13, 11, .65); border-color: transparent; color: #fff; opacity: 0; }
.lib-card:hover .mark, .lib-cover .mark:focus-visible, .lib-cover .mark[aria-pressed="true"] { opacity: 1; }
.lib-cover .mark-heart[aria-pressed="true"] { background: var(--accent); }
.lib-cover .mark-hide[aria-pressed="true"] { background: #fff; color: #111; }
.lib-card.is-hidden .lib-cover > .cover, .lib-card.is-hidden .lib-cover > a > .cover { opacity: .3; filter: grayscale(1); }
.lib-card.is-hidden .lib-title { color: var(--muted); text-decoration: line-through; }
.is-list .lib-cover .marks { display: none; }
@media (hover: none) { .lib-cover .mark { opacity: 1; } }
.fav-grid .lib-card { cursor: default; }
.fav-grid .lib-title { color: var(--text); }
/* Konto, Lieblingsspiele: Kopfbereich mit unscharfem Cover wie auf „Spiele wie …“, größere Cover, Einladungskachel */
.fav-panel { position: relative; isolation: isolate; overflow: hidden; padding: 1.6rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.fav-panel::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--cover, none) center / cover; filter: blur(44px) saturate(1.2); opacity: .35; }
.fav-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 40%, transparent), var(--surface) 75%); }
.fav-panel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.4rem; }
.fav-panel-head h2 { margin: 0 0 .4rem; }
.fav-panel-head .hint { margin: 0; max-width: 34rem; }
.fav-count { display: inline-block; vertical-align: middle; margin-left: .35rem; padding: .15rem .55rem; border-radius: 999px; font: 700 .8rem/1.2 var(--body); color: var(--accent-ink); background: var(--accent); }
.fav-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fav-add { display: grid; place-content: center; justify-items: center; gap: .5rem; aspect-ratio: 3 / 4; padding: 1rem; text-align: center; border-radius: 8px;
    border: 2px dashed color-mix(in srgb, var(--text) 22%, transparent); color: var(--muted); font-weight: 600; font-size: .9rem; transition: border-color .2s, color .2s, transform .2s; }
.fav-add:hover { border-color: var(--accent); color: var(--text); text-decoration: none; transform: translateY(-3px); }
.fav-add-plus { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1.6rem; line-height: 1; }
/* Gespielt und Ausgeblendet: zwei Kästen nebeneinander, darin kleine Cover mit Rückgängig-Link */
.mark-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin-top: 1.2rem; }
.mark-box { padding: 1.2rem 1.3rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.mark-box-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: 1.25rem; }
.mark-box-icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: .95rem; color: var(--bg); background: var(--good); }
.mark-box-hide .mark-box-icon { background: var(--muted); }
.mark-box-hide .fav-count { background: var(--muted); color: var(--bg); }
.mark-box-played .fav-count { background: var(--good); color: var(--bg); }
.mark-box .hint { margin: 0 0 1rem; font-size: .85rem; }
.mark-shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 1rem .8rem; }
.mark-shelf > li > * { min-width: 0; }
.mark-shelf li { display: grid; gap: .3rem; align-content: start; min-width: 0; transition: opacity .2s; }
.mark-shelf .cover { border-radius: 6px; box-shadow: 0 6px 14px rgb(0 0 0 / .25); }
.mark-shelf .cover-placeholder span { font-size: .75rem; }
/* Immer Platz für zwei Zeilen: Sonst stehen „Gefallen?“, Daumen und „Entfernen“ bei einzeiligen Titeln höher als daneben */
.mark-shelf-title { min-height: 2.5em; font-size: .78rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mark-shelf-undo { justify-self: start; text-align: left; padding: 0; border: 0; background: none; color: var(--muted); font: 600 .75rem/1.2 var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
.mark-shelf-undo:hover { color: var(--accent); }
.mark-box-hide .mark-shelf .cover { filter: grayscale(.8); opacity: .75; }
/* Nach dem Rückgängigmachen bleibt die Kachel blass stehen, bis die Seite neu geladen wird */
.mark-shelf li:not(.is-hidden):not(.is-played):not(.is-wished) { opacity: .35; }
.mark-shelf li:not(.is-hidden):not(.is-played):not(.is-wished) button { pointer-events: none; text-decoration: none; }
/* Merkliste als volle Breite über den beiden Kästen; erledigte (gespielte) Einträge werden blass */
.mark-box-wish { margin-top: 1.2rem; }
.mark-box-wish .mark-box-icon { background: #f2b33d; }
.mark-box-wish .fav-count { background: #f2b33d; color: #1a1408; }
.mark-box-wish .mark-shelf { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.mark-box-wish li.is-played { opacity: .35; }
.mark-box-wish .mark-shelf-title { color: var(--text); }
/* Merkliste: Preis klein unter dem Titel, reduzierte mit grünem Rahmen und Hinweis darüber */
.mark-shelf .price-line { font-size: .72rem; gap: .1rem .3rem; }
.mark-shelf .price-line b { padding: .08rem .25rem; font-size: .7rem; }
.mark-shelf .price-line s { display: none; }
.mark-shelf li.is-on-sale .cover { outline: 2px solid #4c6b22; outline-offset: 2px; }
.wish-sale { margin: .2rem 0 .9rem; padding: .55rem .8rem; border-radius: 8px; font-size: .88rem;
    background: color-mix(in srgb, #4c6b22 22%, transparent); border: 1px solid color-mix(in srgb, #4c6b22 60%, transparent); }
/* „Hat's gepasst?“ unter gespielten Spielen */
/* „Gepasst?“ über den beiden Daumen: nebeneinander wäre es breiter als eine Regal-Spalte und schob die Cover übereinander */
.rate { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-width: 0; }
.rate-label { flex-basis: 100%; font-size: .72rem; color: var(--muted); }
.rate-btn { width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer;
    font-size: .8rem; line-height: 1; filter: grayscale(1); opacity: .7; transition: filter .15s, opacity .15s, border-color .15s; }
.rate-btn:hover { opacity: 1; }
.rate-btn[aria-pressed="true"] { filter: none; opacity: 1; border-color: var(--accent); }

/* Startseite: Themen als Einstieg */
.home-themes { border-top: 1px solid var(--border); padding: 3.5rem 0 0; margin-top: 3rem; }
.home-themes .chip { color: var(--text); font-size: .95rem; padding: .5rem 1rem; }
.home-themes .chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Startseite: Release-Radar ganz unten */
.home-radar { border-top: 1px solid var(--border); padding: 3.5rem 0 1rem; margin-top: 3rem; }
.home-radar .hint { margin-top: -1rem; margin-bottom: 1.6rem; }
.radar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.radar-item { display: grid; gap: .35rem; color: var(--text); }
.radar-item:hover { text-decoration: none; }
.radar-cover { position: relative; display: block; border-radius: 8px; box-shadow: var(--shadow); transition: transform .2s; }
.radar-cover .cover { border-radius: 8px; }
.radar-item:hover .radar-cover { transform: translateY(-4px); }
.radar-cover .stamp { position: absolute; top: -.7rem; right: -.5rem; font-size: 1.2rem; }
.radar-date { margin-top: .5rem; font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.radar-title { font: 800 1.2rem/1.15 var(--display); letter-spacing: -.02em; }
.radar-item:hover .radar-title { color: var(--accent); }
.radar-cta { margin-top: 1.4rem !important; }
@media (max-width: 760px) {
    .radar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
    .radar-title { font-size: .95rem; }
    .radar-cover .stamp { font-size: .9rem; }
}

/* Fußzeile der Spielkarten: Navigation links, Kaufen rechts */
.game-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; margin-top: .9rem;
    padding-top: .8rem; border-top: 1px solid var(--border); }
.similar-link { font-weight: 600; color: var(--text); }
.similar-link:hover { color: var(--accent); text-decoration: none; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-left: auto; }
.buy-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: .2rem; }
.buy-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border);
    color: var(--text); font-size: .82rem; font-weight: 600; transition: border-color .15s, color .15s; }
.buy-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.buy-chip .brand-icon { width: 15px; height: 15px; }
/* Zur Startseite mit diesem Spiel im Satz: dezenter Textlink statt großer Knopf */
.combine-link { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text); }
.combine-link span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1.1rem; line-height: 1; }
.combine-link:hover { color: var(--accent); text-decoration: none; }
.similar-head .game-actions { border-top: 0; padding-top: 0; justify-content: flex-start; }
.similar-head .buy { margin-left: 0; }

/* Hinweis zu Cookies (kein Zustimmungs-Banner) */
.cookie-note { position: fixed; z-index: 40; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(640px, calc(100% - 2rem));
    display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: 14px; background: var(--surface);
    border: 1px solid var(--border); box-shadow: var(--shadow); font-size: .88rem; }
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; color: var(--muted); }
.cookie-note strong { color: var(--text); }
.cookie-note .button { flex: none; }
/* Mitlaufende Leisten und der Feedback-Knopf rücken über den Hinweis */
.has-cookie-note .library-bar { bottom: 6rem; }
@media (max-width: 760px) {
    .cookie-note { flex-direction: column; align-items: stretch; bottom: .6rem; }
    .has-cookie-note .feedback-fab { display: none; }
}
.legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 1rem 0; }
.legal-table th, .legal-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-table th { color: var(--muted); font-weight: 600; }
/* Admin: einzelnes Spiel hinzufügen */
/* Admin › Konten: Suchfeld mit Zähler, sortierbare Spaltenköpfe (Pfeil zeigt die Richtung) */
.accounts-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0 .8rem; }
.sort-head { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; }
.sort-head:hover { color: var(--accent); }
th[aria-sort="descending"] .sort-head::after { content: " ↓"; }
th[aria-sort="ascending"] .sort-head::after { content: " ↑"; }
.accounts-table tr[hidden] { display: none; }
/* Kompakt, damit alle Spalten ohne seitliches Scrollen passen */
.accounts-table th, .accounts-table td { padding: .5rem .45rem; font-size: .85rem; }
.accounts-table td { white-space: nowrap; }
.accounts-table td:first-child { white-space: normal; min-width: 7rem; }
.accounts-actions { text-align: right; }
.accounts-actions form + form { margin-left: .3rem; }
/* Admin-Überblick: jede Kachel springt in ihren Bereich; was Aufmerksamkeit braucht, ist rot umrandet */
.admin-overview li { padding: 0; }
.admin-overview a { display: block; padding: .6rem .9rem; color: var(--muted); text-decoration: none; }
.admin-overview a:hover { color: var(--text); }
.admin-overview li:hover { border-color: var(--text); }
.admin-overview li.is-attention { border-color: var(--accent); }
/* Breite Tabellen (Kontenliste im Admin) scrollen auf dem Handy in sich statt die Seite zu verbreitern */
.table-scroll { overflow-x: auto; }
.accounts-table td { white-space: nowrap; }
.accounts-table .badge { margin-left: .35rem; font-size: .7rem; }
.table-wrap { overflow-x: auto; }

/* Feedback */
.feedback-fab { position: fixed; left: 1rem; bottom: 1rem; z-index: 30; display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem .95rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
    font-weight: 600; font-size: .88rem; box-shadow: var(--shadow); }
.feedback-fab:hover { border-color: var(--accent); text-decoration: none; }
.feedback { max-width: 620px; }
.feedback textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .7rem .85rem; resize: vertical; }
.feedback textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.feedback-kinds { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; padding: 0; margin: 0; }
.feedback-kinds legend { font-size: .9rem; color: var(--muted); margin-bottom: .5rem; }
.feedback-kinds .error { flex-basis: 100%; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.text-list { display: grid; gap: .5rem; max-width: 860px; }
.text-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem 1rem; }
.text-item summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; cursor: pointer; }
.text-item .form { margin: .8rem 0 0; }
.support-box { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 2.5rem; padding: 1.1rem 1.2rem;
    border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.support-box > span { font-size: 1.6rem; }
.support-box > .support-icon { display: grid; place-items: center; color: #5865f2; }
.support-icon .brand-icon { width: 1.8rem; height: 1.8rem; }
.discord-link { display: inline-flex; align-items: center; gap: .35rem; }
.discord-link .brand-icon { width: 16px; height: 16px; }
.support-box p { flex: 1 1 18rem; margin: 0; color: var(--muted); font-size: .92rem; }
.support-box strong { display: block; color: var(--text); }
.support-link { color: var(--text) !important; font-weight: 600; }
/* Öffentliche Zahlen zum Katalog (Startseite, Kaffee-Seite) */
/* Eine kurze Zeile unter „So funktioniert's“; die Zahlen in Akzentfarbe */
.catalog-line { font: 800 clamp(1.2rem, 2.2vw, 1.6rem)/1.25 var(--display); letter-spacing: -.02em; margin: 2.5rem 0 0; }
.catalog-line strong { color: var(--accent); font-weight: inherit; font-variant-numeric: tabular-nums; }
.story .catalog-line { margin-top: 2.2rem; }
/* Kaffee-Seite: Geschichte hinter Playalike als ruhige Lesespalte */
.story { max-width: 680px; padding: 2.5rem 0 3rem; }
.story h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; margin: 0 0 2rem; }
.story h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; }
.story > p { color: var(--muted); font-size: 1.08rem; line-height: 1.7; margin: 0; }
.story-cta { margin-top: 2.8rem; padding: 1.4rem 1.5rem; border-radius: 14px; display: grid; gap: .8rem; justify-items: start;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.story-cta p { margin: 0; }
.feedback-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; max-width: 820px; }
.feedback-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; }
.feedback-item header { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-size: .85rem; }
.feedback-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; margin: .6rem 0 0; font-size: .88rem; color: var(--muted); }
.feedback-from strong { color: var(--text); }
.feedback-item time { color: var(--muted); }
.feedback-message { margin: .7rem 0; white-space: normal; }
.feedback-item.is-done { opacity: .55; }
@media (max-width: 760px) { .feedback-fab { left: .6rem; bottom: .6rem; padding: .45rem .8rem; } }

/* Themenseiten */
.breadcrumbs { margin: 1.5rem 0 0; font-size: .85rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
/* Themen-Übersicht: Kopfbereich mit langsam ziehender Cover-Wand rechts, Text links auf ruhiger Fläche */
.themes-hero { position: relative; overflow: hidden; isolation: isolate; padding: 5.5rem 0 3.5rem; }
.themes-wall { position: absolute; inset: -45% -10% -25% 32%; z-index: -2; display: flex; flex-direction: column; gap: 12px; transform: rotate(-8deg); }
.themes-wall-row { display: flex; gap: 12px; width: max-content; animation: drift var(--speed, 120s) linear infinite; }
.themes-wall-row:nth-child(even) { animation-direction: reverse; }
.themes-wall img { flex: none; width: clamp(84px, 9vw, 130px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; opacity: var(--tile-opacity); filter: saturate(.75); }
.themes-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-strong) 38%, var(--veil) 68%, color-mix(in srgb, var(--bg) 30%, transparent) 100%),
                linear-gradient(to bottom, transparent 65%, var(--bg) 100%); }
.themes-hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .98; letter-spacing: -.045em; margin: 0; max-width: 12ch; }
.themes-hero .lead { max-width: 34rem; margin-bottom: 0; }

/* Themen-Kacheln: eigener Farbton (--hue), gefächerte Cover der passendsten Spiele, ganze Kachel klickbar */
.theme-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.1rem; margin: 0 0 1rem; }
.theme-card { --ink: #f4efe6; position: relative; display: flex; flex-direction: column; min-height: 23rem; overflow: hidden; isolation: isolate;
    border-radius: 16px; color: var(--ink); border: 1px solid hsl(var(--hue) 50% 35% / .5);
    background: radial-gradient(120% 80% at 100% 0%, hsl(var(--hue) 75% 45% / .55), transparent 60%),
                linear-gradient(165deg, hsl(var(--hue) 45% 20%), hsl(var(--hue) 40% 8%));
    transition: transform .25s, box-shadow .25s; }
.theme-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px hsl(var(--hue) 70% 30% / .8); }
.theme-card-covers { display: flex; gap: 8px; height: 11rem; padding: 1.1rem 0 0 1.1rem; transform: rotate(-6deg) translateY(-.6rem) scale(1.12); transform-origin: left top;
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
.theme-card-covers img { flex: none; width: 5.6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 18px rgb(0 0 0 / .4); transition: transform .35s; }
.theme-card-covers img:nth-child(even) { transform: translateY(1.2rem); }
.theme-card:hover .theme-card-covers img { transform: translateY(-.3rem); }
.theme-card:hover .theme-card-covers img:nth-child(even) { transform: translateY(.9rem); }
.theme-card-body { margin-top: auto; padding: 0 1.3rem 1.2rem; display: grid; gap: .55rem; }
.theme-card-count { margin: 0; font: 700 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--hue) 85% 72%); }
.theme-card h2 { margin: 0; font-size: 1.55rem; line-height: 1.05; }
.theme-card h2 a { color: var(--ink); }
.theme-card h2 a:hover { text-decoration: none; }
.theme-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.theme-card-intro { margin: 0; color: color-mix(in srgb, var(--ink) 72%, transparent); font-size: .92rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.theme-card-platforms { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 0; }
.theme-card-platforms a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
    color: var(--ink); background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .14); }
.theme-card-platforms a:hover { background: hsl(var(--hue) 70% 45% / .45); text-decoration: none; }
.theme-card-platforms .brand-icon { width: 14px; height: 14px; }
/* Themenseite: alles im Farbton des Themas. --theme ist zur Schriftfarbe hin gemischt, damit es hell und dunkel lesbar bleibt */
.theme-page { --theme: color-mix(in srgb, hsl(var(--hue) 75% 55%) 72%, var(--text)); }
.theme-hero { --ink: #f4efe6; position: relative; overflow: hidden; isolation: isolate; color: var(--ink); padding: 4.2rem 0 2.6rem; /* oben Platz für die feste Kopfzeile */
    background: radial-gradient(90% 120% at 100% 0%, hsl(var(--hue) 75% 45% / .55), transparent 60%),
                linear-gradient(165deg, hsl(var(--hue) 45% 20%), hsl(var(--hue) 40% 8%)); }
.theme-hero-text { position: relative; }
.theme-hero .breadcrumbs, .theme-hero .breadcrumbs a { color: color-mix(in srgb, var(--ink) 65%, transparent); }
.theme-hero .breadcrumbs a:hover { color: var(--ink); }
.theme-hero-count { margin: 2.4rem 0 .7rem; font: 700 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--hue) 85% 72%); }
.theme-hero h1 { color: var(--ink); font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1; letter-spacing: -.04em; margin: 0; max-width: 14ch; }
.theme-hero-intro { color: color-mix(in srgb, var(--ink) 75%, transparent); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; max-width: 34rem; margin: 1rem 0 1.5rem; }
.theme-hero .platform-chips { margin: 0; }
.theme-hero .platform-chips a { color: var(--ink); background: rgb(0 0 0 / .28); border-color: rgb(255 255 255 / .16); }
.theme-hero .platform-chips a:hover { border-color: hsl(var(--hue) 80% 65%); }
.theme-hero .platform-chips a.is-active { background: var(--ink); border-color: var(--ink); color: #15110d; }
/* Cover-Fächer rechts: die ersten fünf Spiele der Liste */
.theme-hero-fan { position: absolute; right: max(2rem, calc(50% - 560px)); top: 50%; width: 26rem; height: 20rem; transform: translateY(-46%); pointer-events: none; }
.theme-hero-fan img { position: absolute; left: calc(var(--i) * 4.6rem); top: calc(var(--i) * .5rem); width: 9.5rem; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 8px; box-shadow: 0 18px 40px rgb(0 0 0 / .5); z-index: calc(10 - var(--i));
    transform: rotate(calc(-10deg + var(--i) * 5deg)); transform-origin: bottom center;
    opacity: 0; animation: fan-in .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.1s + var(--i) * .08s); }
@keyframes fan-in { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } }
.theme-page .theme-howto { margin-top: 1.8rem; background: color-mix(in srgb, hsl(var(--hue) 70% 50%) 10%, var(--surface));
    border-color: color-mix(in srgb, hsl(var(--hue) 70% 50%) 35%, var(--border)); }
.theme-page .theme-howto-icon { background: hsl(var(--hue) 65% 45%); }
/* Liste: große Platzzahl in Themenfarbe, die ersten drei hervorgehoben */
.theme-page .theme-rank { color: var(--theme); font-variant-numeric: tabular-nums; margin-right: .1rem; }
.theme-page .card:hover { border-color: color-mix(in srgb, hsl(var(--hue) 70% 50%) 55%, var(--border)); }
.theme-page .card.is-top { border-color: color-mix(in srgb, hsl(var(--hue) 70% 50%) 40%, var(--border));
    background: linear-gradient(100deg, color-mix(in srgb, hsl(var(--hue) 70% 50%) 12%, var(--surface)), var(--surface) 60%); }
.theme-page .reasons { border-left-color: hsl(var(--hue) 70% 52%); }
.theme-page .theme-cta { color: #f4efe6; border: 0;
    background: radial-gradient(80% 140% at 100% 0%, hsl(var(--hue) 75% 45% / .5), transparent 60%), linear-gradient(165deg, hsl(var(--hue) 45% 20%), hsl(var(--hue) 40% 9%)); }
.theme-page .theme-cta h2 { color: #f4efe6; }
.theme-page .theme-cta p { color: rgb(244 239 230 / .75); }
/* Weitere Themen als kleine Kacheln in ihrer eigenen Farbe */
.theme-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .8rem; margin-top: 1rem; }
.theme-mini { position: relative; display: flex; align-items: flex-end; min-height: 8.5rem; padding: .9rem 1rem; border-radius: 14px; overflow: hidden; isolation: isolate;
    color: #f4efe6; font: 800 1.1rem/1.1 var(--display); letter-spacing: -.02em;
    background: linear-gradient(165deg, hsl(var(--hue) 45% 22%), hsl(var(--hue) 40% 9%)); transition: transform .2s; }
.theme-mini:hover { transform: translateY(-3px); text-decoration: none; color: #fff; }
.theme-mini-covers { position: absolute; z-index: -1; top: -.4rem; right: -.6rem; display: flex; gap: 5px; transform: rotate(-8deg);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); opacity: .85; }
.theme-mini-covers img { width: 3.4rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
@media (max-width: 960px) {
    .theme-hero-fan { right: -5rem; opacity: .35; }
}
@media (max-width: 760px) {
    .theme-hero-fan { width: 18rem; right: -6rem; top: 4rem; transform: none; opacity: .3; }
    .theme-hero-fan img { width: 6.5rem; left: calc(var(--i) * 3rem); }
    .theme-hero-count { margin-top: 1.8rem; }
}
@media (max-width: 760px) {
    .themes-hero { padding: 3.5rem 0 2.5rem; }
    .themes-wall { inset: -30% -40% -10% 15%; }
    .theme-card { min-height: 20rem; }
}
.theme-platforms { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.theme-platforms .chip, .theme-links .chip, .theme-related .chip { font-size: .85rem; color: var(--text); }
.theme-platforms .chip:hover, .theme-links .chip:hover, .theme-related .chip:hover { border-color: var(--accent); text-decoration: none; }
.theme-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.1rem; }
.theme-game { font-size: 1.4rem; margin: 0; }
.theme-game a { color: var(--text); }
.theme-game a:hover { color: var(--accent); text-decoration: none; }
.theme-rank { color: var(--accent); }
.theme-howto { display: flex; gap: .9rem; align-items: flex-start; margin: 1.4rem 0 1.6rem; padding: 1rem 1.2rem; max-width: 760px;
    border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.theme-howto p { margin: 0; color: var(--muted); }
.theme-howto strong { display: block; color: var(--text); margin-bottom: .2rem; }
.theme-howto-icon { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
/* „Mag ich“ auf Themenseiten */
.pick-toggle { flex: none; margin-left: auto; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--accent); background: transparent;
    color: var(--accent); font: 700 .88rem var(--body); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.pick-toggle:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pick-toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.pick-toggle:disabled { opacity: .35; cursor: default; }
.pick-toggle .pick-toggle-on, .pick-toggle[aria-pressed="true"] .pick-toggle-off { display: none; }
.pick-toggle[aria-pressed="true"] .pick-toggle-on { display: inline; }
.card-head .marks + .pick-toggle { margin-left: .4rem; }
.theme-list .card:has(.pick-toggle[aria-pressed="true"]) { border-color: var(--accent); }
.pick-bar { margin-left: auto; margin-right: auto; }
.theme-list .card-head { flex-wrap: wrap; align-items: center; }
.theme-guide { margin-top: 3rem; max-width: 760px; }
.theme-guide h2 { font-size: 1.5rem; margin: 2rem 0 .8rem; }
.theme-guide > p { color: var(--muted); line-height: 1.7; }
.faq { display: grid; gap: .5rem; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: .6rem 0 0; color: var(--muted); }
.theme-cta { margin-top: 3rem; padding: 2rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.theme-cta p { color: var(--muted); }
.theme-related { margin-top: 2.5rem; }
.theme-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0; }
.footer-themes { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: 1.4rem; }
.footer-themes strong { flex-basis: 100%; color: var(--text); font-family: var(--display); }
.footer-themes a { color: var(--muted); }
.footer-themes a:hover { color: var(--accent); }

/* Einstellungen der Kontoseite als Karten */
.s-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
/* Einstellungen: zwei Spalten nach Thema, Kästen darin gestapelt */
.s-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.4rem; align-items: start; margin-top: .5rem; }
.s-group { display: grid; gap: 1rem; }
.s-group-head { margin: 0; font: 700 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#einstellungen > .s-group-head { margin: 2.2rem 0 1rem; }
.s-cards-quiet { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.s-cards-quiet .s-card { padding: 1rem 1.2rem; }
/* Haken als Kippschalter */
.form label.check-inline { gap: .7rem; cursor: pointer; line-height: 1.35; }
.form label.check-inline input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 2.4rem; height: 1.35rem; margin: 0;
    border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: background .2s, border-color .2s; }
.form label.check-inline input[type="checkbox"]::before { content: ""; position: absolute; top: 50%; left: .15rem; width: .95rem; height: .95rem; border-radius: 50%;
    background: var(--muted); transform: translateY(-50%); transition: left .2s, background .2s; }
.form label.check-inline input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.form label.check-inline input[type="checkbox"]:checked::before { left: calc(100% - 1.1rem); background: #fff; }
.form label.check-inline input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.s-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.3rem; display: grid; gap: .8rem; align-content: start; }
.s-card header { display: flex; align-items: center; gap: .7rem; }
.s-card h3 { margin: 0; font-size: 1.15rem; }
.s-icon { width: 2.3rem; height: 2.3rem; border-radius: 10px; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.s-icon svg { width: 1.2rem; height: 1.2rem; }
.s-status { margin-left: auto; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .25rem .6rem; border-radius: 999px;
    background: var(--surface-2); color: var(--muted); }
.s-status.is-on { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.s-card .hint { margin: 0; }
.s-facts { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; font-size: .95rem; }
.s-facts dt { color: var(--muted); }
.s-facts dd { margin: 0; overflow-wrap: anywhere; }
.s-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.s-danger { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.s-danger .s-icon { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
/* Aufklappbares Formular in einer Einstellungskarte (z. B. Anzeigenamen ändern): Knopf verschwindet beim Öffnen */
.s-edit summary { list-style: none; width: fit-content; }
.s-edit summary::-webkit-details-marker { display: none; }
.s-edit[open] summary { display: none; }
.s-edit .form { margin: 0; }
.s-danger summary { list-style: none; width: fit-content; }
.s-danger summary::-webkit-details-marker { display: none; }
.s-danger details[open] summary { display: none; }
.s-danger .form { margin: 0; }
.library-bar { position: sticky; bottom: 1rem; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; max-width: 640px;
    margin-top: 1rem; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); }
.library-bar[hidden] { display: none; }
.library-bar span { font-weight: 600; margin-right: auto; padding-left: .4rem; }
.library-bar button:disabled { opacity: .45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
.danger details { margin-top: 1rem; }
.danger summary { cursor: pointer; color: var(--muted); }

/* Neuerscheinungen und Release-Radar */
.release-month { margin-top: 2rem; }
.release-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.release {
    display: grid; grid-template-columns: 5.5rem 48px 1fr; gap: .9rem; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem;
}
.account-section .release { grid-template-columns: 6.5rem 1fr; }
.release time { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.release .cover { border-radius: 5px; }
.release-title { color: var(--text); font-weight: 600; }
.release .meta, .release .because { margin: .2rem 0 0; }
.release.is-match { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.release.is-out { opacity: .75; }
.release .match { margin-right: .4rem; font-size: .85rem; transform: none; box-shadow: none; }
/* Neuerscheinungen: Cover-Wand oben, drei Spiele im Rampenlicht, danach Cover-Raster je Monat */
.rl-hero { padding-bottom: 2.5rem; }
.rl-hero .platform-chips { margin: 1.4rem 0 0; }
.rl-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.03em; margin: 0 0 .2rem; }
.rl-heading span { font: 600 .8rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rl-spotlight { margin: 1rem 0 2.5rem; }
.rl-spot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.rl-spot { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: center;
    padding: 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: transform .25s; }
.rl-spot:hover { transform: translateY(-3px); }
.rl-spot::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--cover, none) center / cover; filter: blur(36px) saturate(1.3); opacity: .45; }
.rl-spot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 80%, transparent) 55%); }
.rl-spot-cover .cover { border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.rl-countdown { margin: 0; font: 800 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.rl-spot h3 { margin: .45rem 0 .35rem; font-size: 1.3rem; line-height: 1.1; }
.rl-spot h3 a { color: var(--text); }
.rl-spot h3 a::after { content: ""; position: absolute; inset: 0; }
.rl-spot-date { margin: 0; color: var(--muted); font-size: .85rem; }
.rl-spot-match { margin: .6rem 0 0; }
.rl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; margin: 0 0 2.5rem; padding: 1rem 1.2rem; border-radius: 14px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.rl-cta p { flex: 1 1 22rem; margin: 0; color: var(--muted); }
.rl-cta strong { color: var(--text); }
.rl-cta-icon { font-size: 1.5rem; }
.rl-month { margin: 0 0 1rem; }
.rl-grid { grid-template-columns: repeat(auto-fill, minmax(min(30%, 9.5rem), 1fr)); gap: 1.4rem 1rem; margin-top: 1rem; }
.rl-tile h3 { font-size: .95rem; }
.rl-date { position: absolute; left: .45rem; bottom: .45rem; padding: .25rem .5rem; border-radius: 6px; font: 700 .78rem/1 var(--body); font-variant-numeric: tabular-nums;
    color: #fff; background: rgb(0 0 0 / .72); backdrop-filter: blur(4px); }
.rl-tile.is-match .rs-tile-cover .cover { outline: 2px solid var(--accent); outline-offset: 2px; }
.rl-platforms { display: flex; gap: .4rem; margin: 0; color: var(--muted); }
/* Neuerscheinungen und Release-Radar: Merken und Ausblenden nicht auf dem Cover (dort sah man sie beim Überfahren
   nicht), sondern rechts in der Zeile mit den Plattform-Symbolen, ohne eigene Zeile. Erscheinen beim Überfahren.
   Reihenfolge per order, weil die Knöpfe im HTML direkt nach dem Cover stehen */
.rs-tile.rl-tile { grid-template-columns: minmax(0, 1fr) auto; column-gap: .4rem; }
.rs-tile.rl-tile > * { grid-column: 1 / -1; }
/* Titel hier einzeilig (voller Titel im Tooltip des Links): Die zwei reservierten Zeilen der übrigen Kacheln
   ließen bei den meist kurzen Titeln eine Lücke über den Plattformen */
.rs-tile.rl-tile h3 { order: 1; min-height: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-tile.rl-tile .rl-platforms { order: 2; grid-column: 1; align-self: center; }
.rs-tile.rl-tile .marks { order: 3; grid-column: 2; grid-area: auto / 2; align-self: center; margin: 0; gap: .2rem; transform: none; }
.rs-tile.rl-tile .rs-tile-tag, .rs-tile.rl-tile .rs-tile-why { order: 4; }
.rs-tile.rl-tile .mark { width: 1.6rem; height: 1.6rem; }
.rs-tile.rl-tile .mark svg { width: .85rem; height: .85rem; }
.rs-tile.rl-tile .mark:not([aria-pressed="true"]) { color: var(--muted); background: var(--surface); border-color: var(--border); backdrop-filter: none; }
.rs-tile.rl-tile .mark:not([aria-pressed="true"]):hover { color: var(--text); border-color: var(--text); }
/* Große Karten oben: Merken unter dem Datum; über dem Link, der die ganze Karte anklickbar macht (h3 a::after) */
.rl-spot .marks { position: relative; z-index: 1; margin-top: .6rem; transition: opacity .2s; }
@media (hover: hover) {
    .rl-spot .marks:not(:has([aria-pressed="true"])) { opacity: 0; }
    .rl-spot:hover .marks, .rl-spot .marks:focus-within { opacity: 1; }
}
.rl-platforms .brand-icon { width: 14px; height: 14px; opacity: .8; }
@media (max-width: 640px) {
    .rl-spot { grid-template-columns: 5.5rem minmax(0, 1fr); padding: .9rem; }
    .rl-spot h3 { font-size: 1.1rem; }
}
/* Community und Geschmacksprofile */
.pf-avatar { flex: none; display: grid; place-items: center; border-radius: 50%; object-fit: cover; }
.pf-avatar.is-small { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
.pf-avatar.is-large { width: 6.5rem; height: 6.5rem; font-size: 2.8rem; box-shadow: 0 14px 32px rgb(0 0 0 / .35); }
.pf-avatar.is-initial { font: 800 1em/1 var(--display); color: #fff; background: linear-gradient(140deg, hsl(var(--hue) 65% 52%), hsl(calc(var(--hue) + 40) 60% 32%)); }
.cm-hero { padding: 5.5rem 0 2rem; background: radial-gradient(70% 90% at 90% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.cm-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.045em; margin: 0; }
.cm-hero .lead { max-width: 38rem; }
.cm-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .5rem; }
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.cm-card { position: relative; display: grid; gap: .8rem; padding: 1.1rem; border-radius: 16px; overflow: hidden; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); transition: transform .2s, border-color .2s; }
.cm-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); text-decoration: none; }
.cm-covers { position: relative; height: 8.5rem; }
.cm-covers img { position: absolute; top: 0; left: calc(var(--i) * 4.2rem); width: 5.6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 7px;
    box-shadow: 0 10px 22px rgb(0 0 0 / .35); transform: rotate(calc((var(--i) - 1) * 5deg)) translateY(calc(var(--i) * .3rem)); }
.cm-person { display: flex; align-items: center; gap: .7rem; }
.cm-person > span:not(.match) { display: grid; gap: .2rem; min-width: 0; }
.cm-person .match { margin-left: auto; }
.cm-demo { justify-self: start; font-size: .68rem; }
.cm-blurb { color: var(--muted); font-size: .9rem; }
.cm-card { background: radial-gradient(90% 70% at 100% 0%, hsl(var(--pf-hue, 8) 70% 50% / .14), transparent 70%), var(--surface); }
.cm-type { justify-self: start; font-weight: 700; font-size: .9rem; color: color-mix(in srgb, hsl(var(--pf-hue, 8) 75% 55%) 78%, var(--text)); }
.cm-note { margin-bottom: 2.5rem; }
/* Spiel der Woche: Cover links, Text rechts, ohne Effekte */
.gotw { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.8rem; align-items: center; margin: 3rem 0 0; padding: 1.4rem;
    border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.gotw-cover .cover { border-radius: 10px; box-shadow: var(--shadow); }
.gotw h2 { margin: .1rem 0 .6rem; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.05; letter-spacing: -.035em; }
.gotw h2 a { color: var(--text); }
.gotw h2 a:hover { color: var(--accent); text-decoration: none; }
.gotw-text { margin: 0 0 .5rem; max-width: 42rem; color: var(--muted); line-height: 1.55; }
.gotw-traits { margin: 0 0 1rem; font-weight: 600; }
.gotw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.gotw-actions .button { display: inline-flex; align-items: center; gap: .45rem; }
.gotw-actions .brand-icon { width: 16px; height: 16px; }
.gotw .price-line { margin: 0 0 .7rem; font-size: .95rem; }
@media (max-width: 640px) {
    .gotw { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem; align-items: start; }
    .gotw-body { display: contents; }
    .gotw-body > :not(.eyebrow):not(h2) { grid-column: 1 / -1; }
    .gotw-cover { grid-row: 1 / span 2; }
}
/* Startseite: Profile als wischbare Reihe, die Karten rasten ein; rechts läuft die Reihe sichtbar weiter */
.home-community { margin-top: 3rem; }
.cm-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 17rem); gap: 1rem; margin-top: 1rem; padding: .3rem .2rem 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain;
    mask-image: linear-gradient(90deg, #000 85%, transparent); }
.cm-strip .cm-card { scroll-snap-align: start; }
.cm-strip-wrap .carousel-arrow { top: 40%; }
.cm-strip-wrap .carousel-arrow.is-next { right: -.6rem; }
/* Profilseite: Farbton --pf-hue kommt vom Spielertyp (Community::type), --pf ist daraus die lesbare Akzentfarbe */
.pf { --pf: color-mix(in srgb, hsl(var(--pf-hue) 75% 55%) 78%, var(--text)); --pf-soft: hsl(var(--pf-hue) 70% 50% / .16); }
/* Ruhig wie eine Magazinseite: keine Kacheln, Glows oder Balken; die Typfarbe nur in der Unterzeile und der Vergleichszahl */
.pf-hero { padding: 5.2rem 0 2.2rem; border-bottom: 1px solid var(--border); }
.pf-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; }
.pf-who .breadcrumbs { margin: 0 0 1.4rem; }
.pf-id { display: flex; align-items: center; gap: 1.2rem; }
.pf-id h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: .95; letter-spacing: -.045em; margin: 0 0 .5rem; }
.pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: 0; color: var(--muted); font-size: .92rem; }
.pf-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-weight: 600; }
.pf-link:hover { color: var(--text); }
.pf-link svg, .pf-link .brand-icon { width: 16px; height: 16px; }
.s-icon-discord svg { width: 20px; height: 20px; }
.pf-type { margin: 1.8rem 0 .5rem; font: 800 clamp(1.4rem, 3vw, 2rem)/1.15 var(--display); letter-spacing: -.03em; color: var(--pf); }
.pf-lede { margin: 0; max-width: 40rem; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
.pf-match { margin: 1.2rem 0 0; color: var(--muted); }
.pf-match a { font-weight: 600; }
.pf-match-number { font: 800 1.6rem/1 var(--display); letter-spacing: -.03em; color: var(--pf); margin-right: .2rem; }
.pf-signature { display: grid; gap: .6rem; width: clamp(9rem, 16vw, 12rem); color: var(--text); }
.pf-signature:hover { text-decoration: none; }
.pf-signature-cover .cover { border-radius: 8px; box-shadow: var(--shadow); }
.pf-signature-caption { display: grid; gap: .2rem; font-size: .88rem; font-weight: 600; line-height: 1.25; }
.pf-signature-caption span { font-weight: 500; font-size: .78rem; color: var(--muted); }
.pf-body { display: grid; gap: 2.8rem; padding: 2.4rem 0 3.5rem; }
.pf-body .rs-grid { margin: 1rem 0 0; }
.pf-section .hint { margin: .3rem 0 0; }
.pf-h { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.03em; }
/* Meistgespielt: dieselben Kacheln wie die Steam-Bibliothek im Konto, nur ohne Auswahl */
.pf-lib { margin-top: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(30%, 8.5rem), 1fr)); }
.pf-lib .lib-card { cursor: default; }
.pf-lib .lib-title { color: var(--text); }
.pf-lib .lib-title:hover { color: var(--accent); text-decoration: none; }
.pf-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30%, 8.5rem), 1fr)); gap: 1.2rem 1rem; margin-top: 1rem; }
.pf-shelf-item { display: grid; gap: .45rem; align-content: start; color: var(--text); }
.pf-shelf-item:hover { text-decoration: none; color: var(--accent); }
.pf-shelf-cover { position: relative; display: block; transition: transform .2s; }
.pf-shelf-cover .cover { border-radius: 9px; box-shadow: var(--shadow); }
.pf-shelf-item:hover .pf-shelf-cover { transform: translateY(-3px); }
.pf-shelf-title { font-size: .88rem; font-weight: 600; line-height: 1.25; }
.pf-back { margin: 0; }
.form label.check-inline { display: flex; align-items: center; gap: .5rem; }
.form .s-edit summary { cursor: pointer; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.form .s-edit summary strong { color: var(--text); font-weight: 600; }
.form .s-edit summary:hover { color: var(--accent); }
@media (max-width: 760px) {
    .pf-hero-inner { grid-template-columns: 1fr; }
    /* Lieblingsspiel Nr. 1 auf dem Handy klein mit Titel daneben (es fehlt sonst, denn die Reihe darunter lässt es aus) */
    .pf-signature { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; width: auto; }
    .pf-avatar.is-large { width: 4.5rem; height: 4.5rem; font-size: 2rem; }
}
/* Radar-Benachrichtigung als Band mit Glocke, wie der Hinweis auf der Neuerscheinungen-Seite */
.radar-toggle { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.5rem; padding: 1rem 1.2rem 1rem 3.6rem; border-radius: 14px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.radar-toggle::before { content: "🔔"; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; }
.radar-toggle p { flex: 1 1 22rem; margin: 0; color: var(--muted); }
.form.radar-toggle { display: grid; max-width: 640px; }
.form.radar-toggle::before { top: 1.6rem; }
#radar .rl-grid { margin-top: 1rem; }
/* Kontokopf: Avatar mit Ring, leichter Akzent-Schimmer im Hintergrund */
.account-head { position: relative; isolation: isolate; }
.account-head::before { content: ""; position: absolute; inset: -6rem 0 0 -4rem; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 80% at 20% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.account-head .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 14px 30px rgb(0 0 0 / .35); }

/* Sprachumschalter */
.lang-switch { font-weight: 700; font-size: .8rem; letter-spacing: .05em; border: 1px solid var(--border); border-radius: 6px; padding: .15rem .45rem; }
a.lang-switch { color: var(--muted); }
a.lang-switch:hover { color: var(--text); text-decoration: none; border-color: var(--accent); }
/* Desktop: Symbole in der Kopfzeile schlicht ohne Kreise, durch eine feine Linie von der Navigation getrennt */
@media (min-width: 761px) {
    .header-tools { gap: .9rem; }
    .header-tools > .header-search, .header-tools > .lang-switch, .header-tools > .header-discord, .header-tools > [data-theme-toggle] { margin-left: -.35rem; }
    .header-tools > .header-search { margin-left: .2rem; padding-left: .9rem; border-left: 1px solid var(--border); }
    .header-tools .theme-toggle { width: 2rem; height: 2rem; border: 0; background: none; color: var(--muted); }
    .header-tools .theme-toggle:hover, .header-tools .theme-toggle[aria-expanded="true"] { color: var(--text); background: var(--surface); }
    .header-tools .header-discord:hover { color: #5865f2; background: var(--surface); }
    .header-tools .lang-switch { border: 0; padding: .3rem .35rem; }
}

/* Setup-Assistent und Admin-Bereich */
.install { max-width: 760px; padding: 2.5rem 0 1rem; }
.settings-form { gap: 1.5rem; }
.settings-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.25rem 1.25rem; margin: 0; display: grid; gap: 1rem; }
.settings-section legend { font: 800 1.05rem var(--display); padding: 0 .4rem; }
.field { display: grid; gap: .35rem; }
.field > label { font-size: .9rem; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="password"], .field input[type="number"], .field select, .field textarea {
    font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem; width: 100%;
}
.field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; resize: vertical; }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .55; }
.field .checkbox { display: flex; gap: .6rem; align-items: center; color: var(--text); }
.field .hint { color: var(--muted); font-size: .8rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); }
.field-row { display: grid; grid-template-columns: 1fr 8rem; gap: 1rem; }
.install-submit { position: sticky; bottom: 0; padding: .75rem 0; background: linear-gradient(transparent, var(--bg) 35%); margin: 0; }
.hint-box { font-size: .85rem; color: var(--muted); }
.hint-box summary { cursor: pointer; }
.code-block { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; overflow-x: auto; font-size: .82rem; white-space: pre; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9rem; }
.checks { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; }
.check { display: grid; grid-template-columns: 5.5rem minmax(10rem, 16rem) 1fr; gap: .75rem; padding: .45rem .7rem; border-radius: 8px; background: var(--surface); font-size: .9rem; }
.check-status { font-weight: 700; font-size: .8rem; }
.check-ok .check-status { color: var(--good); }
.check-warn .check-status { color: var(--warn); }
.check-fail .check-status { color: var(--bad); }
.check-detail { color: var(--muted); }
.check.job { grid-template-columns: minmax(10rem, 16rem) 1fr; }
.check.job.check-warn .check-detail { color: var(--warn); }
.legal-text { line-height: 1.65; }
.legal h2 { font-size: 1.15rem; margin-top: 1.5rem; }

.message { padding: 4rem 0; max-width: 640px; }
.todo { border-left: 3px solid var(--warn); padding-left: .9rem; color: var(--warn); }

@media (max-width: 760px) {
    /* Kopfzeile: Logo, Hell/Dunkel und Menü-Knopf; die Navigation klappt darunter auf */
    .header-tools { gap: .5rem; }
    .menu-toggle { display: grid; }
    .nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0; padding: .25rem 16px 1rem;
        background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 18px 30px -18px rgb(0 0 0 / .5);
        font-size: 1.05rem;
    }
    .nav.is-open { display: flex; }
    .nav a:not(.button) { padding: .8rem 0; border-bottom: 1px solid var(--border); }
    .nav .button { margin-top: .9rem; justify-content: center; }
    .lang-switch { padding: .3rem .5rem; }
    .nav .hide-mobile { display: none; }
    /* Kopfzeile auf dem Handy: Logo, Lupe, Sprache, Menü. Discord und Hell/Dunkel stehen im Menü unten */
    .header-tools > .header-discord, .header-tools > [data-theme-toggle] { display: none; }
    .nav-extras { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .9rem; }
    .nav-extras a, .nav-extras button { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem !important; border: 1px solid var(--border) !important;
        border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; }
    .nav-extras svg { width: 1rem; height: 1rem; }
    .pitch { padding-top: 6rem; }
    .picks, .how { grid-template-columns: 1fr; }
    /* Treffer als kompakte Karte: Cover links, Titel, Knöpfe, Bibliothek und Begründung rechts daneben */
    .picks { gap: .8rem; }
    .pick { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: none; grid-row: auto; column-gap: .9rem; row-gap: .5rem; align-content: start;
        padding: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
    .pick > :not(.pick-cover):not(.stamp) { grid-column: 2; }
    .pick-cover { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
    .pick-cover .cover-placeholder span { font-size: 1.05rem; }
    .pick-head { flex-direction: column; gap: .5rem; }
    .pick h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
    .pick-head .marks { margin-top: 0; }
    /* Handy: Mülleimer oben rechts in die Karte statt als eigene Zeile unter dem Titel */
    .pick-dismiss { position: absolute; top: .55rem; right: .55rem; margin: 0; width: 1.8rem; height: 1.8rem; }
    .pick h3 { padding-right: 2.2rem; }
    .pick .badge.owned { position: static; justify-self: start; margin: 0; padding: .05rem .45rem; font-weight: inherit; box-shadow: none;
        color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); border-color: color-mix(in srgb, var(--good) 50%, transparent); }
    .pick-head { flex-wrap: wrap; }
    .pick blockquote { font-size: .9rem; padding-left: .7rem; }
    /* Stempel an der linken oberen Cover-Ecke, damit er nicht in den Titel daneben ragt */
    .pick .stamp { left: .35rem; right: auto; top: .3rem; font-size: .95rem; padding: .35rem .45rem .3rem; transform: rotate(-6deg); }
    .pick .stamp small { font-size: .5rem; }
    /* Schmales Cover neben dem Text: Bewertung über dem Preis, beide links; alter Preis entfällt */
    .pick .cf-price, .pick .cf-rating { left: .3rem; right: auto; bottom: .3rem; font-size: .72rem; border-radius: 4px; }
    .pick .pick-cover .cf-rating { bottom: 1.65rem; }
    /* Schmales Cover: Deck nicht neben den Preis, sondern als dritte Stufe über die Bewertung */
    .pick .cf-deck { left: .3rem; right: auto; bottom: 3rem; padding: .18rem .26rem; gap: .15rem; border-radius: 4px; }
    .pick .cf-deck svg { width: .8rem; height: .8rem; }
    .pick .pick-cover:not(:has(.cf-rating)) .cf-deck { bottom: 1.65rem; }
    .pick .cf-price b, .pick .cf-amount, .pick .cf-rating { padding: .25rem .32rem; }
    .pick .cf-amount s { display: none; }
    .carousel-arrow { display: none; } /* auf dem Handy wird gewischt */
    /* Gewählte Spiele im Satz dürfen umbrechen, sonst ragen lange Titel („Assassin's Creed Brotherhood“) aus dem Bild */
    .fav { white-space: normal; overflow-wrap: anywhere; }
    /* Filter bei den Treffern: Überschrift darüber, Optionen umbrechend (als wischbare Reihe sah man nicht, dass rechts
       noch „bis 30 €“ oder „ab 90 %“ kommen); Plattformen nur als Logo */
    .live-filters { gap: .9rem; }
    .live-filters .platforms { flex-wrap: wrap; gap: .35rem; }
    .live-filters .platforms legend { float: none; margin: 0 0 .4rem; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .live-filters .platform { flex: none; }
    .live-filters .platform > span { padding: .45rem .85rem; white-space: nowrap; }
    .live-filters .platform span .brand-icon { width: 20px; height: 20px; }
    .live-filters .platform-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .shelf-item { width: 7rem; }
}
@media (max-width: 640px) {
    .check { grid-template-columns: 1fr; gap: .15rem; }
    .field-row { grid-template-columns: 1fr; }
    /* Spielkarten: Cover neben Titel, Knöpfen und Eckdaten; Begründung, Text und Kauf-Links über die volle Breite */
    .card { grid-template-columns: 72px minmax(0, 1fr); column-gap: .85rem; row-gap: .55rem; padding: .85rem; }
    .card-body { display: contents; }
    .card-cover { grid-row: 1 / span 2; align-self: start; }
    .card-head { grid-column: 2; flex-wrap: wrap; align-items: center; gap: .45rem .35rem; }
    .card-head > h2, .card-head > h3 { flex: 1 0 100%; margin: 0; font-size: 1.12rem; line-height: 1.2; }
    .card-head .marks { margin-left: 0; }
    .card-head .mark { width: 1.85rem; height: 1.85rem; }
    .card-head .pick-toggle, .card-head .match { margin-left: auto; }
    .card-head .pick-toggle { padding: .35rem .75rem; font-size: .82rem; }
    .card-body > .meta { grid-column: 2; margin: 0; }
    .card-body > :not(.card-head):not(.meta) { grid-column: 1 / -1; min-width: 0; }
    .card .summary { font-size: .92rem; }
    /* Bester Treffer: „Bester Treffer“ neben das Cover statt in eine eigene Zeile darunter (sonst stand das Cover allein oben) */
    .card-top .card-body > .card-top-label { grid-column: 2; margin: 0; }
    .card-top .card-cover { grid-row: 1 / span 3; }
    /* Kauf-Links in einer wischbaren Zeile statt mehrerer umbrochener Reihen */
    /* nowrap: bei Umbruch wäre jede Spalte so breit wie die längste Kauf-Zeile und die Seite scrollte quer */
    .game-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .6rem; margin-top: .3rem; }
    .buy { margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .buy::-webkit-scrollbar { display: none; }
    .buy-chip { flex: none; }
    /* Cover klein oben links, der Text läuft daneben und darunter über die volle Breite */
    .similar-head { display: block; }
    .similar-cover { float: left; width: 88px; margin: 0 1rem .6rem 0; }
    .similar-head > div:last-child::after { content: ""; display: block; clear: both; }
}
@media (prefers-reduced-motion: reduce) {
    .wall-row, .themes-wall-row { animation: none; }
    .theme-hero-fan img { animation: none; opacity: 1; }
    .tile, .kicker, .sentence .w, .stage .lead, .quickpick, .describe-toggle, .pick, .fav.new, .jump {
        animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    }
    .pick-cover { transition: none; }
}