/** * Baza dla "immersyjnych" skórek HUD-a gracza (data/skinRegistry.js). * * REFAKTORYZACJA (2026-08-18): wydzielone z theme-zgierz-tkaczy.css i theme-lodz-dziedzictwo.css, * które w 20 z ~26 selektorów CSS były identyczne - różniła je wyłącznie paleta kolorów. Zamiast * kopiować ~190 linii CSS przy każdej nowej skórce, ten plik zawiera WSZYSTKIE reguły strukturalne * (które elementy UI się zmieniają), a każda konkretna skórka definiuje tylko wartości zmiennych * (paletę) pod własną klasą body.theme-XXX. Ten plik reaguje na klasę `body.skin-active`, dodawaną * przez js/app.js RÓWNOLEGLE z konkretną klasą skórki (applyGameThemeClass()). * * Żeby dodać nową skórkę: (1) napisz plik css/theme-TWOJA-NAZWA.css definiujący wszystkie zmienne * --skin-* i --bg/--text/--muted/--event-primary/--team-color/--shadow pod `body.theme-TWOJA-NAZWA` * (skopiuj strukturę z theme-zgierz-tkaczy.css jako wzór); (2) dołącz plik w player.html PO tym * pliku bazowym; (3) dopisz wpis w data/skinRegistry.js. Zero zmian w tym pliku ani w JS. * * Zmienne globalne (--bg, --text, --muted, --border, --glass, --event-primary, --team-color, * --shadow) są redefiniowane przez każdą skórkę i automatycznie podłapywane przez CAŁY istniejący * styles.css wszędzie tam, gdzie już używa var(...) - reguły poniżej patchują WYŁĄCZNIE te miejsca, * gdzie styles.css ma wartości zaszyte na sztywno albo gdzie body.light-mode X (!important) mimo * wszystko nadpisuje redefiniowane zmienne. */ body.skin-active { font-family: var(--skin-font); } /* Przełącznik jasny/ciemny ukryty dla wszystkich skórek immersyjnych - jeden spójny nastrój, niezależny od preferencji gracza. js/app.js aktywnie usuwa klasę light-mode z przy wejściu w grę ze skórką, więc i tak nie wróci bez przeładowania strony. */ body.skin-active .toggle-switch-wrapper[onclick*="toggleTheme"] { display: none !important; } /* Winieta (ziarno + przyciemnienie brzegów) nad mapą - wyłącznie CSS, zero zasobów sieciowych (offline-first). z-index:2, NIE 0: #map (styles.css) ma z-index:1 - poniżej mapy winieta byłaby niewidoczna. Musi być NAD mapą, ale wciąż daleko poniżej HUD-u (.bottom-nav z-index:850+). */ body.skin-active::before { content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(115deg, var(--skin-noise) 0px, var(--skin-noise) 1px, transparent 1px, transparent 3px), radial-gradient(ellipse at center, transparent 55%, var(--skin-vignette) 100%); } /* Górny pasek HUD (.hud / .hud-pill / .icon-btn - NIE .event-card/.hud-stats, klasy z poprzedniej wersji HUD-a gracza, dawno usunięte z DOM-u, patrz styles.css "hide old HUD chrome that no longer exists in DOM"; skórka je targetowała od refaktoryzacji 2026-08-18, więc nagłówek gracza NIGDY nie dostawał palety skórki - zawsze zostawał w domyślnym, "korporacyjnym granatowym" wyglądzie niezależnie od wybranej skórki, zgłoszenie 2026-08-18). `color` jawnie wszędzie - inaczej body.light-mode X (styles.css, część !important) dogrywa własny kolor tekstu na ciemnym tle. */ body.skin-active .hud, body.skin-active .icon-btn { background: var(--skin-card-bg) !important; border: 1px solid var(--skin-card-border) !important; border-bottom: 1px solid var(--skin-card-border-soft) !important; color: var(--text) !important; } body.skin-active .hud-logo { background: linear-gradient(135deg, var(--event-primary), var(--skin-accent-dark)) !important; font-family: var(--skin-font); } body.skin-active .hud-pill { background: var(--skin-accent-soft) !important; } body.skin-active .hud-pill > span:first-child { color: var(--text) !important; } body.skin-active .hud-pill > span:last-child { color: var(--skin-tab-inactive) !important; } /* .hud-sos-btn celowo NIE jest tu dotykany - czerwone tło to sygnał alarmowy (SOS), musi zostać rozpoznawalne niezależnie od skórki. */ body.skin-active .hud-menu-btn { background: var(--skin-accent-soft) !important; border-color: var(--skin-card-border) !important; color: var(--text) !important; } /* Powiadomienie czatu (wiadomość GM/bota) - bez tej reguły zostawało na sztywno białe tło niezależnie od skórki (zgłoszenie 2026-08-18: "biała bańka" na ciemnym tle Miasta Tkaczy). */ body.skin-active .chat-notification { background: var(--skin-modal-bg) !important; border-color: var(--skin-modal-border) !important; box-shadow: var(--shadow) !important; } body.skin-active .chat-notification-icon { background: var(--event-primary) !important; } /* Boczny/dolny panel (lista zadań, czat, ranking...) - główna powierzchnia UI poza mapą. */ body.skin-active .panel { background: var(--skin-panel-bg) !important; color: var(--text) !important; } body.skin-active .panel-head, body.skin-active .panel-footer { border-color: var(--skin-panel-border) !important; } body.skin-active .panel-head h2, body.skin-active #panel-title { color: var(--text) !important; font-family: var(--skin-font); text-transform: var(--skin-heading-transform); letter-spacing: 0.01em; } /* Karty zadań. */ body.skin-active .task-card { background: var(--skin-task-bg) !important; border-color: var(--skin-task-border) !important; border-left: 3px solid var(--event-primary) !important; } body.skin-active .task-card strong { font-family: var(--skin-font); color: var(--text) !important; } body.skin-active .task-card small { color: var(--muted) !important; } body.skin-active .task-card p, body.skin-active .task-modal-card p { font-family: var(--skin-font-mono); letter-spacing: 0.01em; color: var(--skin-note-text) !important; } body.skin-active .task-modal-card, body.skin-active .modal-card { background: var(--skin-modal-bg) !important; border: 1px solid var(--skin-modal-border) !important; color: var(--text) !important; } body.skin-active .task-modal-card h2, body.skin-active .modal-card h2 { font-family: var(--skin-font); text-transform: var(--skin-heading-transform); letter-spacing: 0.01em; color: var(--text) !important; } /* Przyciski akcji. */ body.skin-active .primary-action { background: linear-gradient(135deg, var(--event-primary), var(--skin-accent-dark)) !important; color: #fff !important; box-shadow: 0 16px 40px var(--skin-accent-shadow), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important; } /* Kontrolki zoom mapy (Leaflet, dodane w PlayerMapModule.js jako L.control.zoom position: bottomleft - tuż nad dolnym paskiem nawigacji). Bez tej reguły zostawały na sztywno białym kwadratem (css/styles.css .leaflet-control-zoom), wizualnie "odklejonym" od reszty ciemnego, motywowanego HUD-u - zgłoszenie 2026-08-18 ("odklejona część HUD" w okolicy dolnej nawigacji). */ body.skin-active .leaflet-control-zoom a { background: var(--skin-card-bg) !important; border-color: var(--skin-card-border) !important; color: var(--text) !important; } body.skin-active .leaflet-control-attribution { background: var(--skin-card-bg) !important; color: var(--muted) !important; } /* Dolny pasek nawigacji. */ body.skin-active .bottom-nav { background: var(--skin-nav-bg) !important; border-top: 1px solid var(--skin-nav-border) !important; } body.skin-active .bottom-nav .tab { color: var(--skin-tab-inactive) !important; } body.skin-active .bottom-nav .tab.active { color: var(--skin-highlight) !important; background: var(--skin-accent-soft) !important; } /* Pasek postępu / progress. */ body.skin-active .hud-progress-bar-fill, body.skin-active .ranking-progress-bar, body.skin-active progress { background: var(--event-primary) !important; accent-color: var(--event-primary); } /* Nakładka "Gotowy do gry?" (start-card). */ body.skin-active .game-start-overlay { background: var(--skin-overlay-bg) !important; } body.skin-active .start-card { background: var(--skin-modal-bg) !important; border: 1px solid var(--skin-modal-border) !important; box-shadow: var(--shadow) !important; } body.skin-active .start-card h2 { font-family: var(--skin-font); text-transform: var(--skin-heading-transform); letter-spacing: 0.01em; color: var(--text) !important; } body.skin-active .start-card p { color: var(--muted) !important; }