/* ===== Ciemny motyw strony — „ciemny fiolet” (2026-11-04) ===== Włącza go assets/theme.js atrybutem html[data-theme="dark"]. To WŁASNA ciemna szata strony (śliwkowo-fioletowe tło, akcenty fiolet + róż jak w jasnym motywie), celowo nie granat ze złotem z ciemnego motywu aplikacji. Ładowany jako ostatni arkusz: najpierw podmienia tokeny każdej rodziny arkuszy (--club-*, --ov-*, .ng.kg, :root stron informacyjnych), niżej poprawki reguł z kolorami wpisanymi na sztywno. Paleta (kontrast tekstu na tle #140F1E): ink #EEE9FB 16:1, muted #B7AECF 8.9:1, faint #978DB2 6:1, fiolet #A78BFA 6.9:1, róż #F472B6 7.1:1. Fioletowe wypełnienia mają ciemny napis (--on-accent). */ html[data-theme="dark"]{ --dk-bg:#140F1E;--dk-raised:#1A1426;--dk-panel:#1D1630;--dk-strong:#261D3D;--dk-active:#33275A; --dk-line:#2B2240;--dk-border:#3E3260; --dk-ink:#EEE9FB;--dk-muted:#B7AECF;--dk-faint:#978DB2; --dk-violet:#A78BFA;--dk-violet-hi:#C4B5FD;--dk-on-accent:#1A1030; --dk-pink:#F472B6;--dk-pink-light:#F9A8D4;--dk-pink-deep:#EC4899; --dk-cyan:#22C7DD;--dk-success:#34D399;--dk-danger:#FF7A93;--dk-warning:#FBBF24; --dk-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.35); color-scheme:dark;background:var(--dk-bg); } html[data-theme="dark"] body{background:var(--dk-bg);color:var(--dk-ink)} /* Płynne przejście tylko w chwili kliknięcia przełącznika (klasa na 320 ms), nie przy ładowaniu. */ html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:background-color .25s ease,border-color .25s ease,color .25s ease!important} /* ---------- tokeny: strona główna, podstrona gry, panel boczny ---------- */ html[data-theme="dark"] #menu.club-home, html[data-theme="dark"] #gameHub.duel-hub{ --club-bg:var(--dk-bg);--club-raised:var(--dk-raised);--club-panel:var(--dk-panel);--club-strong:var(--dk-strong);--club-active:var(--dk-active); --club-line:var(--dk-line);--club-border:var(--dk-line);--club-border-strong:var(--dk-border); --club-ink:var(--dk-ink);--club-muted:var(--dk-muted);--club-faint:var(--dk-faint); --club-accent:var(--dk-violet);--club-accent-soft:var(--dk-violet-hi);--club-accent-border:#A78BFA66;--club-on-accent:var(--dk-on-accent); --club-violet:var(--dk-violet);--club-cyan:var(--dk-cyan); --app-pink:var(--dk-pink);--app-pink-light:var(--dk-pink-light);--app-pink-deep:var(--dk-pink-deep); --app-shadow:var(--dk-shadow);--app-shadow-violet:0 8px 22px rgba(0,0,0,.45); } /* ---------- tokeny: okna gry ---------- */ html[data-theme="dark"] :is(#queueOv,#lobbyOv,#soloPicker,#hubJoinOv,#rulesOv,#endOv,#partyOv,#toasts,#tableDock,#throwOv,.throw-cap,.chat-pop,.emote-pop){ --ov-bg:var(--dk-bg);--ov-panel:var(--dk-panel);--ov-strong:var(--dk-strong);--ov-active:var(--dk-active);--ov-line:var(--dk-line);--ov-border:var(--dk-border); --ov-ink:var(--dk-ink);--ov-muted:var(--dk-muted);--ov-faint:var(--dk-faint);--ov-violet:var(--dk-violet);--ov-violet-deep:var(--dk-violet-hi); --ov-pink:var(--dk-pink);--ov-pink-light:var(--dk-pink-light);--ov-pink-deep:var(--dk-pink-deep);--ov-success:var(--dk-success);--ov-danger:var(--dk-danger); --ov-shadow:0 18px 48px rgba(0,0,0,.55); } /* ---------- tokeny: ekrany gier (game-kit) ---------- */ html[data-theme="dark"] .ng.kg{ --bg:var(--dk-bg);--panel:var(--dk-panel);--panel-strong:var(--dk-strong);--panel-active:var(--dk-active);--border:var(--dk-border);--border-faint:var(--dk-line); --text:var(--dk-ink);--text-dim:var(--dk-muted);--text-faint:var(--dk-faint);--violet:var(--dk-violet);--violet-soft:#7C5CC4;--pink:var(--dk-pink);--pink-deep:var(--dk-pink-deep); --danger:var(--dk-danger);--success:var(--dk-success);--warning:var(--dk-warning);--cyan:var(--dk-cyan); /* Karty zostają jasne (jak prawdziwa talia), tylko przygaszone, żeby nie raziły na ciemnym stole. */ --card-face:#E9E4D6;--card-edge:#9C9584; --table-a:#1D1630;--table-b:#261D3D;--table-ink:var(--dk-violet);--table-gold:#F2B45A; } /* ---------- tokeny: strony informacyjne ---------- */ html[data-theme="dark"]:root{ --bg:var(--dk-bg);--panel:var(--dk-panel);--strong:var(--dk-strong);--active:var(--dk-active);--line:var(--dk-line);--line-strong:var(--dk-border); --ink:var(--dk-ink);--muted:var(--dk-muted);--faint:var(--dk-faint);--accent:var(--dk-violet);--accent-deep:var(--dk-violet-hi); --pink:var(--dk-pink);--pink-light:var(--dk-pink-light);--cyan:var(--dk-cyan);--shadow:var(--dk-shadow); } /* ---------- widok przed JS (web-reading.css) ---------- */ html[data-theme="dark"]:not(.app-ready) body{background:var(--dk-bg);color:var(--dk-ink);color-scheme:dark} /* ---------- przełącznik ---------- */ .theme-toggle{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%; background:#EEE9FB;color:#6D28D9;cursor:pointer;font:inherit;line-height:0;-webkit-tap-highlight-color:transparent} .theme-toggle:hover{background:#E4D9FC} .theme-toggle:focus-visible{outline:3px solid rgba(109,40,217,.45);outline-offset:2px} .theme-toggle svg{display:block} html[data-theme="dark"] .theme-toggle{background:var(--dk-strong);color:#FBD38D} html[data-theme="dark"] .theme-toggle:hover{background:var(--dk-active)} html[data-theme="dark"] .theme-toggle:focus-visible{outline-color:rgba(167,139,250,.6)} #menu .theme-toggle--home{width:44px;height:44px} .gh-topbar .theme-toggle--hub{margin-left:12px} .gh-topbar:has(.theme-toggle--hub)>a{margin-left:auto} .site-top-row:has(.theme-toggle--mobile) .site-play{margin-left:auto} .site-top-row .theme-toggle--mobile{margin-left:8px;width:36px;height:36px} .site-top-row:has(.theme-toggle--mobile){justify-content:flex-start} .crumbs .theme-toggle--crumbs{margin:-8px 0 -8px auto} .crumbs:has(.theme-toggle--crumbs){align-items:center} @media(max-width:900px){.crumbs .theme-toggle--crumbs{display:none}} @media(max-width:760px){#menu .k-topbar:has(.theme-toggle--home){background:transparent}} .theme-toggle--float{position:fixed;top:12px;right:12px;z-index:9000;box-shadow:0 4px 14px rgba(0,0,0,.2)} /* ---------- kolory wpisane wcześniej na sztywno ---------- W arkuszach jasnego motywu wartości typu #fff / #EEE9FB są opakowane w var(--th-*, ). Bez ciemnego motywu zmienne nie istnieją i działa jasny kolor; tu podajemy ich ciemne odpowiedniki. */ html[data-theme="dark"]{ --th-surface:var(--dk-panel);--th-glass:rgba(29,22,48,.94);--th-bg:var(--dk-bg);--th-strong:var(--dk-strong);--th-active:var(--dk-active); --th-line:var(--dk-line);--th-border:var(--dk-border);--th-ink:var(--dk-ink);--th-muted:var(--dk-muted);--th-faint:var(--dk-faint); --th-accent:var(--dk-violet);--th-accent-deep:var(--dk-violet-hi); /* Fioletowe wypełnienia (przyciski, aktywne chipy) zostają nasycone, żeby biały napis miał kontrast 5.7:1. */ --th-accent-fill:#7C3AED;--th-accent-fill-deep:#6D28D9; --th-pink:var(--dk-pink);--th-pink-ink:var(--dk-pink);--th-pink-soft:#3A1A35; --th-gold-soft:#3A2D12;--th-gold-ink:#FBD38D;--th-green-soft:#11302A;--th-success:var(--dk-success); } /* ---------- strona główna ---------- */ /* Okładki gier są narysowane na lawendzie — przygaszamy je, żeby kafle nie świeciły na ciemnym tle. */ html[data-theme="dark"] #menu .k-game-cover{filter:brightness(.8) saturate(1.05)} html[data-theme="dark"] #menu .k-game-cover::after{background:linear-gradient(180deg,transparent 38%,rgba(20,12,40,.88))} /* ---------- okna i nakładki gry (tła rgba jasnej lawendy) ---------- */ html[data-theme="dark"] :is(#queueOv,#lobbyOv,#soloPicker,#hubJoinOv,#rulesOv,#endOv,#partyOv){background:rgba(10,6,18,.72)} html[data-theme="dark"] #throwOv{background:rgba(10,6,18,.6)} html[data-theme="dark"] .ng.kg .ng-top{background:linear-gradient(180deg,rgba(20,15,30,.96),rgba(20,15,30,.8) 70%,transparent)} html[data-theme="dark"] :is(.kg-hand,.kg-grid) .pc.off::after{background:rgba(20,15,30,.5)} html[data-theme="dark"] .kg-overlay{background:rgba(10,6,18,.6)} html[data-theme="dark"] .kg-revolver{background:rgba(20,15,30,.92)} html[data-theme="dark"] :is(.kg-hand,.kg-grid) .pc.off::after{background:rgba(20,15,30,.38)} /* ---------- sukno stołów: gry z jasnym własnym suknem dostają ciemne odpowiedniki ---------- */ html[data-theme="dark"] #makaoGame{--table-a:#2A1424;--table-b:#3A1A2E;--table-ink:#FF7A93;--table-gold:#F2B45A; --table-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='51'%3E%3Cg fill='%23FF7A93' fill-opacity='.08'%3E%3Cpath d='M17 7.3l5.4 5.4-5.4 5.4-5.4-5.4z'/%3E%3Cpath d='M0 32.8l5.4 5.4L0 43.7l-5.4-5.4zM34 32.8l5.4 5.4-5.4 5.5-5.4-5.5z'/%3E%3C/g%3E%3C/svg%3E")} html[data-theme="dark"] #blackjackGame{--table-a:#10261C;--table-b:#163526;--table-ink:#5FD39A;--bj-edge:#2C5A43;--bj-ink:#8FE3B8} html[data-theme="dark"] #pasjansGame{--table-a:#10261C;--table-b:#163526;--table-ink:#5FD39A;--ps-edge:#2C5A43;--ps-ink:#8FE3B8;--ps-gold:#F2B45A} html[data-theme="dark"] #remikGame{--table-a:#10261C;--table-b:#163526;--rm-ink:#8FE3B8;--rm-edge:#2C5A43;--rm-gold:#F2B45A} html[data-theme="dark"] #tjGame{--table-ink:#E6BE6A} html[data-theme="dark"] #cheatGame{--table-ink:#F472B6;--bl-gold:#F472B6} html[data-theme="dark"] #fortunaGame{--table-ink:#FF7A93} html[data-theme="dark"] :is(#karciakGame,#kierkiGame){--table-ink:#F472B6} html[data-theme="dark"] :is(#piotrusGame,#snapGame){--table-ink:#22C7DD} html[data-theme="dark"] #snapGame.open{--table-ink:#FBBF24} html[data-theme="dark"] #pokerGame{--table-ink:#FBBF24;--pk-gold:#FBBF24;--pk-line:#8A6A2E} html[data-theme="dark"] #sergeantGame{--table-ink:#A78BFA;--sg-gold:#FBBF24} html[data-theme="dark"] #tysiacGame{--table-ink:#F2B45A;--ty-gold:#FBBF24} /* ---------- stoły i plansze ---------- */ html[data-theme="dark"] .kg-table.surface{background:radial-gradient(70% 60% at 50% 50%,color-mix(in srgb,var(--table-ink) 13%,transparent),transparent 70%),linear-gradient(180deg,#1D1630F7,#261D3DFA)} /* ---------- poprawki pojedynczych gier ---------- */ html[data-theme="dark"] .rv-box{background:rgba(29,22,48,.68)} html[data-theme="dark"] #bsGame{--bs-panel:#132A2C;--bs-edge:#24494C;--bs-dim:#9CC7CC} html[data-theme="dark"] #kosciGame{--ko-dim:#A99BD8} html[data-theme="dark"] #c4Game{--c4-bar:var(--dk-panel);--c4-bar-on:var(--dk-active);--c4-border:var(--dk-border);--c4-accent:#F472B6} html[data-theme="dark"]{--th-xb-EED9AE:#54431F} /* ---------- podstrony: ranking, profil ---------- */ html[data-theme="dark"] .pod.p1{background:linear-gradient(180deg,#3A1A35,#261D3D);border-color:#6B2F57} html[data-theme="dark"] .hero{background:linear-gradient(135deg,var(--dk-panel),var(--dk-strong))} html[data-theme="dark"] .danger-card{background:#2E1420;border-color:#6B2433} /* ---------- Sudoku: własna ciemna szata (pergamin w ciemnym motywie wychodził błotnisty) ---------- Gładka ciemnofioletowa plansza, wyraźna siatka: cienkie linie w jasnym fiolecie, grube kwadraty 3×3 w akcencie, cyfry z zadania jasne, wpisane przez gracza — fioletowe. */ html[data-theme="dark"] #sudokuGame{--sd-ink:#EEE9FB;--sd-mine:#C4B5FD;--sd-note:#A99BD0;--sd-line:rgba(196,181,253,.16);--sd-thick:#8B6FE0;--sd-gold:#8B6FE0} html[data-theme="dark"] #sudokuGame .sd-frame{background:var(--dk-strong);border-color:var(--dk-border);box-shadow:0 12px 28px rgba(0,0,0,.4)} html[data-theme="dark"] #sudokuGame .sd-board{background:linear-gradient(160deg,#211A36,#1A1429)} html[data-theme="dark"] #sudokuGame .sd-c.peer{background:rgba(167,139,250,.09)} html[data-theme="dark"] #sudokuGame .sd-c.same{background:rgba(244,114,182,.22)} html[data-theme="dark"] #sudokuGame .sd-c.sel{background:rgba(167,139,250,.42)} html[data-theme="dark"] #sudokuGame .sd-c:focus-visible{outline-color:var(--dk-violet)} html[data-theme="dark"] #sudokuGame .sd-hud{background:var(--dk-panel);border-color:var(--dk-border)} html[data-theme="dark"] #sudokuGame .sd-hud .kg-label{color:var(--dk-violet)} html[data-theme="dark"] #sudokuGame .sd-clock{background:var(--dk-strong);border-color:var(--dk-border);color:var(--dk-ink)} html[data-theme="dark"] #sudokuGame .sd-levels button{background:var(--dk-panel);border-color:var(--dk-border);color:var(--dk-muted)} html[data-theme="dark"] #sudokuGame .sd-levels button.on{background:var(--dk-active);border-color:var(--dk-violet);color:var(--dk-ink)} html[data-theme="dark"] #sudokuGame .sd-banner.ok{background:var(--dk-active);border-color:var(--dk-violet);color:var(--dk-ink)} html[data-theme="dark"] #sudokuGame .sd-pad button{background:var(--dk-panel);border-color:var(--dk-border);box-shadow:0 2px 0 var(--dk-line)} html[data-theme="dark"] #sudokuGame .sd-pad button:hover:not(:disabled){border-color:var(--dk-violet)} html[data-theme="dark"] #sudokuGame .sd-pad.notes button{background:var(--dk-strong);border-color:var(--dk-border)} html[data-theme="dark"] #sudokuGame .sd-tool i{background:var(--dk-panel);border-color:var(--dk-border)} html[data-theme="dark"] #sudokuGame .sd-tool.on i{background:var(--dk-active);border-color:var(--dk-violet);color:var(--dk-ink)} html[data-theme="dark"] #sudokuGame .sd-tool.on span{color:var(--dk-violet)} html[data-theme="dark"] #sudokuGame :is(.sd-done div,.sd-wait){background:var(--dk-panel);border-color:var(--dk-violet)} html[data-theme="dark"] #sudokuGame .sd-done{background:rgba(20,15,30,.72)} html[data-theme="dark"] #sudokuGame :is(.sd-done b,.sd-wait .code){color:var(--dk-ink)} /* ---------- Kulki: fioletowa plansza z ciemnymi wgłębieniami ---------- */ html[data-theme="dark"] #kulkiGame .kl-board{background:linear-gradient(135deg,#2A2045,#221A38 55%,#1C152E);box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 0 0 1.5px var(--dk-border)} html[data-theme="dark"] #kulkiGame :is(.kl-cell,.kl-slot){background:linear-gradient(180deg,#140F22,#1B1530);box-shadow:inset 0 2px 4px rgba(0,0,0,.55),inset 0 -1px 0 rgba(196,181,253,.10)} html[data-theme="dark"] #kulkiGame .kl-bar{background:var(--dk-strong)} /* ---------- Sevenventure: „nocna świątynia” — ciemny piaskowiec, porcelanowe kule zostają jasne ---------- */ html[data-theme="dark"] #svGame{--sv-wall:#3B3124;--sv-wall-d:#30271C;--sv-joint:#54452F;--sv-niche:#1E1812;--sv-niche-t:#2B231A;--sv-frieze:#4A3D2B;--sv-carve:#A88A5A; --sv-plaque:var(--dk-panel);--sv-jade:#34D399;--sv-rival:#A78BFA;--sv-coral:#FF8A6E} html[data-theme="dark"] #svGame :is(.sv-race,.sv-prompt){border-color:var(--dk-border)} html[data-theme="dark"] #svGame .sv-tab i{background:var(--dk-strong)} html[data-theme="dark"] #svTemple{background:repeating-linear-gradient(0deg,transparent 0 25px,rgba(168,138,90,.16) 25px 26px), repeating-linear-gradient(90deg,transparent 0 51px,rgba(168,138,90,.12) 51px 52px),linear-gradient(180deg,#43382A,var(--sv-wall) 40%,var(--sv-wall-d)); border-color:#5A4A33;box-shadow:0 12px 26px rgba(0,0,0,.45)} html[data-theme="dark"] #svGame .sv-frieze{box-shadow:inset 0 -5px 0 rgba(255,255,255,.06)} html[data-theme="dark"] #svGame .sv-pillar{background:linear-gradient(90deg,#3A3023,var(--sv-wall-d) 40%,#54452F 55%,#3A3023);border-color:rgba(0,0,0,.35)} html[data-theme="dark"] #svGame .sv-niche{box-shadow:inset 0 6px 12px rgba(0,0,0,.55),inset 0 -2px 0 rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.05)} html[data-theme="dark"] #svGame .sv-slab{background:linear-gradient(180deg,#4A3D2B,#3A3023);color:rgba(200,170,120,.6)} html[data-theme="dark"] #svGame .sv-sun{background:radial-gradient(circle,var(--sv-plaque) 0 62%,transparent 63%),repeating-conic-gradient(from -90deg,transparent 0 49.4deg,rgba(20,15,30,.8) 49.4deg 52deg),conic-gradient(from -90deg,#F3C04E var(--p,0%),#4A3D2B 0);box-shadow:0 0 0 3px #5A4A33,0 6px 14px rgba(0,0,0,.4)} html[data-theme="dark"] #svGame .sv-sun.seven b{color:#FBD38D} html[data-theme="dark"] #svGame .sv-jewel.used{background:#4A4238} html[data-theme="dark"] #svGame .sv-jewel.used::after{background:#5E5446} html[data-theme="dark"] #svGame .sv-done{background:rgba(29,22,48,.97);border-color:var(--dk-border)} html[data-theme="dark"] #svGame .sv-points{color:#FBD38D;text-shadow:0 2px 0 #000,0 0 12px rgba(243,192,78,.7)} /* ---------- Poker, Tysiąc, Literaki: panele w fiolecie zamiast błotnistego brązu/mięty ---------- */ html[data-theme="dark"] #pokerRow .kg-pcard.active{background:var(--dk-active)} html[data-theme="dark"] #pokerGame :is(.pk-pot,.pk-presets button,.pk-show-row.win){background:var(--dk-strong)} html[data-theme="dark"] #pokerGame .pk-presets button.on{background:var(--pk-line);color:#1A1030} html[data-theme="dark"] #pokerGame .pk-slot{background:rgba(38,29,61,.6);border-color:rgba(251,191,36,.3)} html[data-theme="dark"] #tysiacGame .ty-dial::before{background:radial-gradient(circle at 50% 38%,#2E2448,#1D1630)} html[data-theme="dark"] #ltGame .lt-seat,html[data-theme="dark"] .lt-seat{background:var(--dk-panel);border-color:var(--dk-border)} html[data-theme="dark"] .lt-seat.turn{background:#173A33;border-color:#2FB39A;box-shadow:0 0 0 3px rgba(47,179,154,.18)} /* ---------- automatycznie przyciemnione kolory z