:root {
--bg: #14170f; --surface: #1e2318; --border: #38402c;
--text: #e8ecdd; --text2: #9aa688; --accent: #e0a83c; --danger: #d04b3b; --good: #6fbf4a;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { user-select: none; -webkit-user-select: none; }
body {
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
background: var(--bg); color: var(--text);
display: flex; flex-direction: column; align-items: center;
overflow: hidden; touch-action: manipulation;
}
svg.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; }
#hud {
width: 100%; max-width: 980px; display: flex; align-items: center; gap: 1rem;
padding: .5rem .8rem; font-size: .95rem; font-weight: 600;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 6px, transparent 6px 12px),
linear-gradient(#2a3120, #1b2014);
border-bottom: 2px solid #0d0f09;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px rgba(0,0,0,.5);
}
#hud .stat { display: flex; align-items: center; gap: .3rem; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#hud .spacer { flex: 1; }
#hud button {
background: linear-gradient(#39422b, #242b19); border: 1px solid #0f120a; color: var(--text);
border-radius: 8px; padding: .25rem .6rem; font-size: .9rem; cursor: pointer; font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.5);
}
#hud button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.55); }
#stage { position: relative; width: 100%; max-width: 980px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
#game {
width: 100%; display: block; background: #14170f;
touch-action: none; user-select: none; -webkit-user-select: none;
flex: 1; min-height: 0; object-fit: contain;
}
#wavebar {
display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem;
background:
repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 6px, transparent 6px 12px),
linear-gradient(#1b2014, #2a3120);
border-top: 2px solid #0d0f09; min-height: 3.2rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
font-size: .85rem; flex-wrap: wrap;
}
#wave-info { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.badge {
display: inline-flex; align-items: center; gap: .3rem;
background: linear-gradient(#2e3522, #202616); border: 1px solid #0f120a; border-radius: 999px;
padding: .12rem .55rem; font-size: .78rem; font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.badge .dot { width: 10px; height: 10px; border-radius: 50%; }
.badge.warn { border-color: var(--danger); color: #f0a094; }
#btn-strike {
background: linear-gradient(#39422b, #242b19); border: 1px solid #0f120a; color: var(--text);
border-radius: 10px; padding: .5rem .8rem; font-weight: 700; font-size: .85rem; cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.5);
}
#btn-strike:active:not(:disabled) { transform: translateY(1px); }
#btn-strike:disabled { color: var(--text2); cursor: default; }
.diff-row { display: flex; gap: .4rem; justify-content: center; margin-bottom: 1.2rem; }
.seg {
background: #2a3120; border: 1px solid var(--border); color: var(--text2);
border-radius: 8px; padding: .35rem .9rem; cursor: pointer; font-weight: 700; font-size: .85rem;
}
.seg.active { background: var(--accent); color: #1a1505; border-color: var(--accent); }
.resume-btn {
margin-top: .45rem; width: 100%; background: #2a3120; border: 1px solid var(--accent);
color: var(--accent); border-radius: 8px; padding: .3rem .4rem; font-size: .72rem; font-weight: 700; cursor: pointer;
}
.lv-record { font-size: .68rem; color: var(--text2); margin-top: .25rem; min-height: .9rem; }
/* Staffel 24: Wimpel-Herausforderung auf der Level-Karte */
.lv-wimpel { font-size: .66rem; color: var(--text2); margin-top: .2rem; }
.lv-wimpel.got { color: var(--accent); font-weight: 700; }
.lv-wimpel svg.ic { margin-right: .15rem; }
/* Briefing-Overlay: Wimpel-Herausforderungszeile */
.briefing-challenge { max-width: 46ch; margin: .5rem auto 0; color: var(--accent); font-size: .8rem; }
/* Festungs-Album */
.al-h { font-weight: 800; margin: 1.2rem 0 .5rem; text-align: left; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: .55rem; }
.al-item {
position: relative;
background: linear-gradient(#262c1c, #181c11); border: 1px solid #0f120a; border-radius: 10px;
padding: .6rem .4rem; cursor: pointer; text-align: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.al-item.locked { opacity: .5; cursor: default; }
.al-item.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 2px var(--accent); }
.al-item canvas { width: 56px; height: 56px; }
.al-badge { height: 56px; display: flex; align-items: center; justify-content: center; }
.al-badge svg { width: 40px; height: 40px; color: var(--accent); }
.al-item.locked .al-badge svg { color: #4a5040; }
.al-name { font-size: .72rem; font-weight: 700; margin-top: .25rem; }
.al-cond { font-size: .62rem; color: var(--text2); margin-top: .15rem; line-height: 1.35; }
.fx-row { display: block; font-size: .78rem; color: var(--text2); margin: -0.6rem 0 1rem; cursor: pointer; }
.fx-row input { accent-color: var(--accent); margin-right: .3rem; }
.prog { height: 10px; background: #2a3120; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; max-width: 300px; margin: .6rem auto 1rem; }
.prog > div { height: 100%; background: var(--accent); }
.confetti { pointer-events: none; position: absolute; inset: 0; overflow: hidden; }
.confetti span {
position: absolute; top: -8%; width: 9px; height: 14px; border-radius: 2px;
animation: conf-fall 2.8s linear infinite;
}
@keyframes conf-fall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(110vh) rotate(540deg); opacity: .6; }
}
/* Staffel 107: dauerhaft laufende Animationen (Fortsetzung Staffel 55 «Für alle zugänglich») */
@media (prefers-reduced-motion: reduce) { .confetti span { animation: none; opacity: .85; } }
/* 3-Sterne-Konfetti: eigener, dichterer Regen — läuft einmal durch statt endlos */
.confetti-gold { z-index: 60; }
.confetti-gold span {
width: 8px; height: 13px; border-radius: 2px;
animation-name: conf-gold-fall; animation-timing-function: linear;
animation-iteration-count: 1; animation-fill-mode: forwards;
}
@keyframes conf-gold-fall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(115vh) rotate(700deg); opacity: .85; }
}
/* Staffel 156: "Weniger Effekte" (SAVE.lowFx) — gedämpft statt weg, gleiche Deklaration wie die
bestehende prefers-reduced-motion-Regel oben für .confetti span. */
.confetti-gold.fx-calm span { animation: none; opacity: .85; }
/* Staffel 34: Dorffest-Feuerwerk — eigenes Canvas über dem Ergebnis-Overlay */
.firework-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 65; }
#rotate-hint .phone {
width: 34px; height: 58px; border: 3px solid var(--text); border-radius: 7px;
margin: 0 auto 1rem; animation: phone-turn 1.8s ease-in-out infinite;
}
@keyframes phone-turn { 0%, 30% { transform: rotate(0); } 70%, 100% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { #rotate-hint .phone { animation: none; } }
#btn-call {
margin-left: auto; background: linear-gradient(#f0be58, #c88f28); color: #1a1505;
border: 1px solid #8a6a1c; text-shadow: 0 1px 0 rgba(255,255,255,.3);
border-radius: 10px; padding: .5rem .9rem; font-weight: 800; font-size: .88rem; cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.5);
}
#btn-call:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
#btn-call:disabled {
background: linear-gradient(#3a3f30, #2c3125); color: var(--text2); cursor: default;
border-color: #0f120a; text-shadow: none; box-shadow: none;
}
#overlay {
position: absolute; inset: 0; z-index: 50;
background: radial-gradient(ellipse at 50% 32%, rgba(52,62,34,.94), rgba(8,10,5,.97) 75%);
display: flex; align-items: center; justify-content: center; padding: 1rem;
overflow-y: auto;
}
#overlay.hidden { display: none; }
/* Staffel 25 Nachtinspektion: auto-margin statt reinem Vertrauen auf #overlays align-items:center —
bei ueberlangen Overlays (z.B. Festungs-Album mit Werkstatt-Handbuch/Wimpel/Skins) war der obere
Teil (Titel, Turm-Skins) nie erreichbar: Chrome laesst bei align-items:center + overflow keinen
Scroll ueber den Zentrierpunkt hinaus zu. Auto-Margins zentrieren weiterhin, wenn Platz da ist,
kollabieren aber bei Overflow auf 0 -> Inhalt bleibt von oben an vollstaendig scrollbar. */
.panel { text-align: center; max-width: 640px; width: 100%; margin: auto 0; }
.panel h1 {
font-size: 2.1rem; margin-bottom: .3rem; letter-spacing: .05em; text-transform: uppercase;
text-shadow: 0 2px 0 #0d0f09, 0 0 24px rgba(224,168,60,.25);
}
.panel .sub { color: var(--text2); margin-bottom: 1.4rem; line-height: 1.5; }
/* Menü-Abschnittstitel (Staffel 20: Feldzug / Weitere Spielarten / Sammlung & Chronik) */
.menu-h {
display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
text-align: left; margin: 1.4rem 0 .6rem; padding-bottom: .35rem;
border-bottom: 1px solid rgba(224,168,60,.25);
color: var(--accent); font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; font-size: .8rem;
}
.menu-h:first-of-type { margin-top: .2rem; }
.menu-h-stars { color: var(--text2); text-transform: none; letter-spacing: normal; font-size: .72rem; font-weight: 700; }
/* Staffel 175: Regionen-Reiter über dem Feldzug — bewusst KEIN Umbruch (kein flex-wrap):
eine waagrechte Scroll-Leiste bleibt IMMER eine Zeile hoch, egal wie viele Regionen LEVELS
künftig bekommt (12 Regionen sind so genauso hoch wie 3) — das ist der Unterschied zur
verworfenen ersten Fassung, die bei 12 Regionen auf mehrere umbrechende Zeilen wuchs und
die 620px-Latte damit riss (siehe Gegenprobe in tests/tower-defense.spec.js). */
.region-row {
display: flex; gap: .4rem; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
padding-bottom: .3rem; margin-bottom: .3rem; -webkit-overflow-scrolling: touch;
}
.region-row .seg { flex: 0 0 auto; white-space: nowrap; }
/* Eigene Regel statt .sub-Wiederverwendung: ".panel .sub" (zwei Klassen) wäre spezifischer als
".region-desc" allein und hätte dessen margin/font-size stillschweigend überstimmt. */
.region-desc { color: var(--text2); line-height: 1.4; margin: 0 0 .7rem; font-size: .82rem; }
.levels { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; align-items: flex-start; }
.level-card {
background: linear-gradient(#262c1c, #181c11); border: 1px solid #0f120a; border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.45);
padding: 1rem 1.2rem; width: 168px; cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.level-card:hover {
transform: translateY(-3px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.45), 0 0 0 2px var(--accent);
}
.level-card.locked { opacity: .45; cursor: default; }
.level-card.locked:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.45); }
/* Staffel 20: gesperrte Feldzug-Karten kompakter darstellen */
.level-card.lv-locked { padding: .55rem .7rem; }
.level-card.lv-locked .lv-icon { height: 26px; margin-bottom: .15rem; }
.level-card.lv-locked .lv-icon svg { width: 24px; height: 24px; }
.level-card.lv-locked .lv-meta {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.level-card.lv-locked .lv-stars, .level-card.lv-locked .lv-record { display: none; }
/* Staffel 38: Mini-Kartenvorschau über dem Level-Icon (Endlos-/Zen-Kartenwahl) */
.level-card .lv-map { width: 120px; height: 68px; display: block; border-radius: 6px; margin-bottom: .5rem; }
.level-card .lv-icon { height: 46px; margin-bottom: .3rem; display: flex; align-items: center; justify-content: center; }
.level-card .lv-icon svg { width: 44px; height: 44px; }
.level-card .lv-icon .inf { font-size: 2.2rem; font-weight: 900; line-height: 1; color: var(--text); }
.level-card .lv-name { font-weight: 800; margin-bottom: .2rem; }
.level-card .lv-meta { font-size: .75rem; color: var(--text2); }
.level-card .lv-stars { margin-top: .35rem; font-size: .9rem; letter-spacing: .1em; color: var(--accent); }
.result-stars { font-size: 2.6rem; letter-spacing: .2em; color: var(--accent); margin: .6rem 0; text-shadow: 0 0 18px rgba(224,168,60,.5); }
.result-score { font-size: 1.05rem; margin-bottom: 1.4rem; color: var(--text2); }
.btn-row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.btn-big {
background: linear-gradient(#f0be58, #c88f28); color: #1a1505;
border: 1px solid #8a6a1c; border-radius: 12px; text-shadow: 0 1px 0 rgba(255,255,255,.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.5);
padding: .8rem 1.6rem; font-size: 1rem; font-weight: 800; cursor: pointer;
}
.btn-big:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.btn-big.secondary {
background: linear-gradient(#39422b, #242b19); color: var(--text); border: 1px solid #0f120a;
text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 4px rgba(0,0,0,.5);
}
.howto {
text-align: left;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 6px, transparent 6px 12px),
linear-gradient(#20261a, #171c12);
border: 1px solid #0f120a; border-radius: 12px; padding: .9rem 1.1rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
font-size: .82rem; color: var(--text2); line-height: 1.7; margin-top: 1.4rem;
}
/* Puls, wenn Welle bereit und Feld leer */
@keyframes call-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,168,60,.6); } 55% { box-shadow: 0 0 0 9px rgba(224,168,60,0); } }
#btn-call.pulse:not(:disabled) { animation: call-pulse 1.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { #btn-call.pulse:not(:disabled) { animation: none; } }
/* Hochformat-Hinweis */
#rotate-hint {
display: none; position: fixed; inset: 0; z-index: 200;
background: var(--bg); color: var(--text);
align-items: center; justify-content: center; text-align: center;
font-size: 1.15rem; line-height: 1.8; padding: 2rem;
}
@media (orientation: portrait) and (max-width: 620px) { #rotate-hint { display: flex; } }
/* Kompaktes HUD auf schmalen Screens */
@media (max-width: 640px) {
#hud { gap: .45rem; padding: .35rem .5rem; font-size: .8rem; }
#hud button { padding: .2rem .45rem; font-size: .78rem; }
#wavebar { font-size: .75rem; padding: .4rem .5rem; gap: .4rem; min-height: 2.6rem; }
.badge { font-size: .68rem; padding: .1rem .45rem; }
#btn-call, #btn-strike { padding: .4rem .65rem; font-size: .78rem; }
}
@media (max-width: 480px) { #hud .stat.score, #hud .stat.combo { display: none; } }
/* Staffel 22: Handy-Querformat (niedrige Höhe) — HUD/Wellenleiste verdichten, Spielfeld gewinnt Höhe */
@media (max-height: 420px) {
#hud { gap: .35rem; padding: .18rem .5rem; font-size: .74rem; }
#hud button { padding: .12rem .4rem; font-size: .7rem; }
#wavebar { font-size: .68rem; padding: .2rem .5rem; gap: .3rem; min-height: 1.9rem; }
.badge { font-size: .6rem; padding: .05rem .4rem; }
.badge .dot { width: 8px; height: 8px; }
#btn-call, #btn-strike, #btn-auto { padding: .22rem .5rem; font-size: .68rem; }
}
/* Bestenliste */
.board-table { width: 100%; max-width: 420px; margin: .3rem auto 1rem; border-collapse: collapse; font-size: .85rem; }
.board-table td { padding: .3rem .5rem; border-bottom: 1px solid #0f120a; text-align: left; }
.board-table td:nth-child(3), .board-table td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.board-table tr:first-child td { color: var(--accent); font-weight: 700; }
.board-table tr.hist-win td { color: var(--good); }
.board-table tr.hist-lose td { color: var(--danger); }
/* Staffel 74: Turm-Übersichtstabelle im Werkstatt-Handbuch — sortierbare Spaltenköpfe */
.handbuch-table { max-width: 480px; font-size: .78rem; }
.handbuch-table th {
padding: .3rem .4rem; border-bottom: 2px solid var(--accent); text-align: left;
color: var(--accent); font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap;
}
.handbuch-table th:hover { color: var(--text); }
.handbuch-table td:nth-child(2), .handbuch-table td:nth-child(3),
.handbuch-table td:nth-child(4), .handbuch-table td:nth-child(5),
.handbuch-table th:nth-child(2), .handbuch-table th:nth-child(3),
.handbuch-table th:nth-child(4), .handbuch-table th:nth-child(5) {
text-align: right; font-variant-numeric: tabular-nums;
}
/* echtes / statt der sonst üblichen "erste = Kopfzeile"-Konvention —
die generische .board-table tr:first-child-Regel (Akzentfarbe/fett) sonst würde die
erste Datenzeile treffen, nicht unsere | . */
.handbuch-table tbody tr:first-child td { color: var(--text); font-weight: 400; }
/* Feldpost-Chronik: Sparkline + Modus-Filter (Staffel 27) */
.chr-spark { display: block; width: 100%; height: 64px; margin: .2rem 0 .8rem; }
.chr-filter-row { margin-bottom: 1rem; flex-wrap: wrap; }
/* Level-Statistik im Ergebnis */
.stat-details { margin: .8rem auto 1rem; max-width: 420px; text-align: left; }
.stat-details summary {
cursor: pointer; color: var(--text2); font-size: .82rem; text-align: center;
padding: .3rem; list-style-position: inside;
}
.stat-details[open] summary { color: var(--accent); }
/* Staffel 39: Feldpost — Dankesbrief im Sieg-Ergebnis */
.feldpost-details { margin-top: -.2rem; }
.feldpost-text { font-size: .78rem; color: var(--text); line-height: 1.55; padding: .2rem .4rem 0; }
.feldpost-von { font-size: .74rem; color: var(--text2); font-style: italic; margin-top: .35rem; padding: 0 .4rem; }
/* Staffel 39: Poster speichern — Erfolgs-Hinweis im Album */
.poster-toast {
position: fixed; left: 50%; bottom: 6%; transform: translate(-50%, 12px);
background: var(--surface); border: 1px solid var(--accent); color: var(--accent);
font-weight: 700; font-size: .85rem; padding: .55rem 1.1rem; border-radius: .6rem;
opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 20;
}
.poster-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Story */
.briefing-text { max-width: 46ch; margin-left: auto; margin-right: auto; line-height: 1.7; }
.level-card { position: relative; }
.brief-btn {
position: absolute; top: .4rem; right: .4rem; width: 20px; height: 20px;
border-radius: 50%; border: 1px solid var(--border); background: #2a3120;
color: var(--text2); font-size: .7rem; font-weight: 700; cursor: pointer;
font-style: italic; font-family: Georgia, serif; line-height: 1;
}
.brief-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Attract-Mode: Menü-Overlay lässt die Demo durchscheinen */
#overlay.demo {
background: radial-gradient(ellipse at 50% 32%, rgba(52,62,34,.62), rgba(8,10,5,.78) 75%);
}
/* Profile */
.prof-row { margin-bottom: .4rem; }
.prof-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
/* Staffel 83: Profil-Chip zweizeilig (Name + Sterne-Vorschau darunter) — nur in .prof-row, damit
.seg anderswo (Schwierigkeitsgrad, Karte-Knopf, ...) unverändert einzeilig bleibt. */
.prof-row .seg { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; }
.prof-chip-top { display: inline-flex; align-items: center; }
.prof-stars { font-size: .62rem; font-weight: 400; opacity: .75; }
/* Staffel 76: Stift-Icon neben dem aktiven Profil-Chip — dezent, kein eigener Text */
.prof-edit-btn { padding: .35rem .55rem; color: var(--text2); }
.prof-edit-btn:hover { color: var(--accent); }
.prof-input {
background: var(--surface); color: var(--text); border: 1px solid var(--border);
border-radius: 10px; padding: .6rem .9rem; font-size: 1rem; font-family: inherit;
text-align: center; width: 220px;
}
/* Staffel 31: Familien-Duell */
.duell-check-list {
display: flex; flex-direction: column; gap: .5rem; max-width: 300px; margin: 0 auto;
}
.duell-check-row {
display: flex; align-items: center; gap: .3rem; text-align: left; cursor: pointer;
background: #2a3120; border: 1px solid var(--border); border-radius: 10px;
padding: .55rem .8rem; font-weight: 700;
}
.duell-check-row input { accent-color: var(--accent); margin-right: .3rem; }
.duell-handoff-name {
font-size: 2.4rem; font-weight: 900; letter-spacing: .02em; margin: 1.2rem 0 .2rem;
text-shadow: 0 2px 0 #0d0f09;
}
.duell-podium-trophy { display: flex; justify-content: center; margin: .4rem 0 .2rem; }
.duell-winner-banner { font-size: 1.3rem; font-weight: 900; margin-bottom: 1.1rem; }
.duell-rank-list { display: flex; flex-direction: column; gap: .4rem; max-width: 360px; margin: 0 auto; }
.duell-rank-row {
display: flex; align-items: center; gap: .4rem; text-align: left;
background: #2a3120; border: 1px solid var(--border); border-radius: 10px; padding: .5rem .8rem;
}
.duell-rank-row.duell-rank-1 { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.duell-rank-place { font-weight: 900; color: var(--text2); width: 1.4rem; }
.duell-rank-name { font-weight: 800; flex: 1; }
.duell-rank-score { font-size: .8rem; color: var(--text2); white-space: nowrap; }
/* Staffel 64: Duell-Serie — Serien-Sieg-Zähler übers Familien-Duell (nur "Nochmal!"-Runden) */
.duell-rank-series {
font-size: .72rem; font-weight: 800; color: var(--accent); white-space: nowrap;
margin-left: .3rem;
}
.duell-handoff-series { font-size: .85rem; color: var(--text2); font-weight: 700; margin-bottom: .2rem; }
/* Staffel 65: Serien-Krieger — Trophäen-Badge ab 5 Serien-Siegen im Duell-Podium */
.duell-rank-row.duell-rank-warrior {
flex-wrap: wrap; border-color: #f0be58; box-shadow: 0 0 0 1px #f0be58 inset;
}
.duell-warrior-badge {
display: flex; align-items: center; gap: .35rem; flex-basis: 100%;
margin-top: .3rem; font-size: .9rem; font-weight: 900; color: #ffd54f;
}
/* Staffel 32: Kino-Vorspann — HUD & Wellenleiste ausgeblendet, volle Bühne fürs Canvas */
body.intro-mode #hud, body.intro-mode #wavebar { display: none; }
/* Zen-Modus: reduziertes HUD */
body.zen .stat.score, body.zen #hud .stat:nth-child(3),
body.zen #btn-speed, body.zen #btn-ranges { display: none; }
/* Komfort: Auto-Button, Empfohlen-Band, Karten-Einblendung */
#btn-auto {
background: linear-gradient(#39422b, #242b19); border: 1px solid #0f120a; color: var(--text2);
border-radius: 10px; padding: .5rem .8rem; font-weight: 700; font-size: .85rem; cursor: pointer;
}
#btn-auto.auto-an { color: #1a1505; background: linear-gradient(#f0be58, #c88f28); border-color: #8a6a1c; }
.level-card.empfohlen { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.45), 0 0 0 2px var(--accent); }
.band {
position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: #1a1505; font-size: .6rem; font-weight: 800;
padding: .1rem .5rem; border-radius: 999px; letter-spacing: .05em; text-transform: uppercase;
white-space: nowrap;
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.levels .level-card { animation: card-in .25s ease both; }
.levels .level-card:nth-child(2) { animation-delay: .03s; }
.levels .level-card:nth-child(3) { animation-delay: .06s; }
.levels .level-card:nth-child(4) { animation-delay: .09s; }
.levels .level-card:nth-child(5) { animation-delay: .12s; }
.levels .level-card:nth-child(6) { animation-delay: .15s; }
.levels .level-card:nth-child(n+7) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .levels .level-card { animation: none; } }
/* Blech-Fibel */
.fibel-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.fibel-item { cursor: default; overflow: hidden; }
/* Staffel 49: Boss-Vorwarnung — schräges Gold-Band oben rechts auf der Schlüsselmeister-Karte */
.fibel-boss-band {
position: absolute; top: 10px; right: -26px; width: 100px;
transform: rotate(45deg); transform-origin: center;
background: var(--accent); color: #181c11; font-size: .62rem; font-weight: 900;
letter-spacing: .06em; padding: .12rem 0; text-align: center;
box-shadow: 0 1px 3px rgba(0,0,0,.4); pointer-events: none;
}
.fibel-text { font-size: .68rem; color: var(--text2); margin-top: .3rem; line-height: 1.45; }
.fibel-taktik { font-size: .66rem; color: var(--accent); margin-top: .3rem; line-height: 1.4; }
/* Werkstatt-Handbuch */
.handbuch-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.handbuch-item { cursor: default; }
.handbuch-zweig { color: var(--text); }
.handbuch-stat { font-size: .66rem; color: var(--text2); margin-top: .35rem; font-weight: 700; }
/* Staffel 68: Kritisch verstehen — dezente Erklärzeile über allen Turmkarten, statt pro Karte
wiederholt (die Krit-Chance aus Staffel 66 betrifft alle Türme gleichermassen). */
.handbuch-crit-note { font-size: .72rem; color: var(--text2); margin: -.2rem 0 .8rem; line-height: 1.45; }
/* Staffel 34: «Turm der Partie» im Ergebnis-Screen */
.mvp-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: -.4rem 0 1rem; font-size: .95rem; color: var(--text2); }
.mvp-row canvas { width: 40px; height: 40px; flex: none; }
/* Staffel 40: Niederlagen-Analyse (Nachbarschaftshilfe) — Fibel-Taktik-Tipp dezent darunter */
.leak-row { text-align: left; }
.leak-taktik { display: inline-block; margin-top: .15rem; font-size: .78rem; color: var(--accent); }
/* Staffel 40: Briefing-Tipp aus dem Dorf — gleicher Stil wie die Wimpel-Herausforderung */
.briefing-tip { max-width: 46ch; margin: .5rem auto 0; color: var(--accent); font-size: .8rem; }
/* Perk-Karten */
.perk-card { width: 178px; }
.perk-risiko { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.45), 0 0 0 2px var(--danger); }
/* Sterne-Einflug im Siegscreen */
.result-stars .st { display: inline-block; opacity: 0; transform: scale(2.4); animation: star-in .35s cubic-bezier(.2,1.6,.4,1) both; }
.result-stars .st.voll { text-shadow: 0 0 18px rgba(224,168,60,.7); }
@keyframes star-in { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .result-stars .st { animation: none; opacity: 1; transform: none; } }
/* Einstellungen-Aufklapper im Menü */
details.settings { margin: -.4rem 0 1rem; }
details.settings summary {
cursor: pointer; color: var(--text2); font-size: .78rem;
list-style-position: inside; padding: .2rem;
}
details.settings[open] summary { color: var(--accent); }
.version { font-size: .66rem; color: var(--text2); opacity: .7; margin: .8rem 0 -.6rem; }
/* Staffel 28: Tagesaufgaben-Zeile im Hauptmenü */
.quest-list { display: flex; flex-direction: column; gap: .35rem; text-align: left; margin-bottom: .4rem; }
.quest-item {
display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--text2);
background: linear-gradient(#20261a, #171c12); border: 1px solid #0f120a; border-radius: 8px;
padding: .4rem .7rem;
}
.quest-item.done { color: var(--good); }
.quest-check { width: 16px; flex: none; display: flex; align-items: center; justify-content: center; }
.quest-check svg { width: 14px; height: 14px; }
.quest-text { flex: 1; }
.quest-prog { font-variant-numeric: tabular-nums; font-size: .74rem; }
/* Staffel 32: Kino-Vorspann — transparente Klick-Ebene über dem Canvas,
NICHT #overlay (dessen dunkler Radial-Gradient würde die Szenenbilder verdecken). */
#intro-layer {
position: absolute; inset: 0; z-index: 45;
display: flex; align-items: flex-end; justify-content: center;
cursor: pointer; padding-bottom: 6%;
}
#intro-layer.hidden { display: none; }
#intro-caption {
max-width: 42ch; text-align: center; padding: .6rem 1.1rem;
font-size: 1.15rem; font-weight: 700; line-height: 1.5;
color: var(--text); text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.6);
opacity: 0; transition: opacity .5s ease;
}
#intro-caption.on { opacity: 1; }
#intro-skip {
position: absolute; right: .7rem; bottom: .5rem;
font-size: .68rem; color: var(--text2); opacity: .65;
}
@media (max-width: 600px) { #intro-caption { font-size: .92rem; } }
/* Staffel 44: Emmental-Feldzugskarte — Knopf im Feldzug-Kopf + die grosse Übersichtskarte */
.map-btn { margin-left: .5rem; padding: .12rem .5rem; font-size: .66rem; vertical-align: middle; position: relative; }
/* Staffel 47: Hinweis-Punkt, solange die Feldzugskarte noch nie geöffnet wurde (SAVE.karteSeen) */
.map-btn.unseen::after {
content: ''; display: inline-block; width: 6px; height: 6px; margin-left: .35rem;
border-radius: 50%; background: #e0a83c; vertical-align: middle;
animation: call-pulse 1.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .map-btn.unseen::after { animation: none; } }
.feldzug-map {
display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto;
border-radius: 14px; border: 1px solid #0f120a; background: #14170f; cursor: pointer;
touch-action: manipulation;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.5);
}
/* Staffel 55 «Für alle zugänglich»: sichtbarer Fokusring bei Tastatur-Navigation.
:focus-visible feuert nicht bei Maus-Klick, nur bei Tab/Pfeiltasten — kein zusätzliches JS nötig. */
button:focus-visible, .level-card:focus-visible, .seg:focus-visible, a:focus-visible {
outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
/* Hoher Kontrast (91.2): nur HUD/Menü-DOM-Text & Badges — das Gameplay-Canvas bleibt unberührt.
--text2 heller zu setzen wirkt automatisch überall dort, wo bereits mit der Variable gearbeitet
wird (.sub, .lv-meta, .lv-record, .al-cond, .fx-row, .seg, ...). */
body.high-contrast { --text2: #d7e0c9; }
body.high-contrast #hud, body.high-contrast #wavebar { color: #fdfdf6; }
body.high-contrast #hud .stat, body.high-contrast #wavebar .badge { font-weight: 800; }
body.high-contrast .badge {
background: #0c0e08; border-color: #7c8a68; color: #fdfdf6;
}
body.high-contrast .seg { border-color: #7c8a68; }
body.high-contrast .level-card, body.high-contrast .al-item, body.high-contrast .quest-item {
border-color: #4a5540;
}
/* Tastatur-Hilfe-Overlay (91.1) */
.key-help { text-align: left; max-width: 420px; margin: 0 auto; }
.kh-row {
display: flex; align-items: center; gap: .7rem; padding: .35rem 0;
border-bottom: 1px solid #0f120a; font-size: .85rem;
}
.kh-row:last-child { border-bottom: none; }
.kh-row span { color: var(--text2); flex: 1; text-align: right; }
.kh-row kbd {
background: linear-gradient(#39422b, #242b19); border: 1px solid #0f120a; color: var(--text);
border-radius: 6px; padding: .15rem .5rem; font-size: .78rem; font-weight: 700;
font-family: inherit; min-width: 1.6em; text-align: center; display: inline-block;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.5);
}
.key-help-hint { font-size: .72rem; color: var(--text2); opacity: .8; margin: -.4rem 0 1rem; }
|