/* skorki.css — wyglądy gry do wyboru (28.09.2026), wszystkie darmowe. Atrybut data-skin na : mostek | retro | gielda. Skórka nakłada się na motyw: mostek i gielda na ciemny (data-theme="dark"), retro na jasny (data-theme="light"), więc wszystkie ekrany dziedziczą poprawne kontrasty, a tu zmieniamy charakter: kolory, kroje, kształty kart i przycisków oraz tło mapy. Rozgrywka bez zmian. */ /* =========================== A — MOSTEK KAPITAŃSKI =========================== */ :root[data-skin="mostek"] { --bg: #0d0b07; --bg2: #14110b; --panel: #1c1a15; --panel2: #26231c; --glass: rgba(24, 21, 15, .9); --line: rgba(255, 190, 110, .14); --line2: rgba(255, 178, 62, .32); --txt: #f3e3c3; --dim: #b8a585; --dim2: #8f7f62; --acc: #ffb23e; --acc2: #ff8a1f; --gold: #ffd27a; --good: #7dff9a; --bad: #ff5a4a; --violet: #d9a8ff; --input: #14110b; --hover: rgba(255, 178, 62, .06); --hover2: rgba(255, 178, 62, .12); --surf: rgba(255, 178, 62, .045); --track: rgba(255, 178, 62, .12); --cardbg: linear-gradient(180deg, #26231c, #1a1812); --hudbg: linear-gradient(180deg, #1c1a15, #131009); --sidebg: linear-gradient(180deg, #17140e, #0f0d09); --barbg: #16130d; --modalbg: linear-gradient(180deg, #221f18, #16130d); --toastbg: #221f18; --packbg: linear-gradient(180deg, rgba(255, 178, 62, .1), rgba(255, 178, 62, .03)); --r: 4px; --r2: 6px; } :root[data-skin="mostek"] body { font-family: 'Chakra Petch', 'Segoe UI', sans-serif; } :root[data-skin="mostek"] body::before { opacity: .35; filter: sepia(1) saturate(2) hue-rotate(-15deg); } :root[data-skin="mostek"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); } :root[data-skin="mostek"] .sky { filter: sepia(1) saturate(1.6) hue-rotate(-12deg); } :root[data-skin="mostek"] .stat b, :root[data-skin="mostek"] .goalTxt, :root[data-skin="mostek"] .hudTurn, :root[data-skin="mostek"] .next span { font-family: 'Share Tech Mono', ui-monospace, monospace; } :root[data-skin="mostek"] #hud { border-bottom: 2px solid var(--acc2); } :root[data-skin="mostek"] .stat { border-left: 3px solid var(--acc); border-radius: 3px; } :root[data-skin="mostek"] .stat b { color: var(--acc); text-shadow: 0 0 9px rgba(255, 178, 62, .5); font-size: 14.5px; } :root[data-skin="mostek"] .stat label, :root[data-skin="mostek"] .card h3, :root[data-skin="mostek"] .tab span { letter-spacing: .12em; text-transform: uppercase; } :root[data-skin="mostek"] .houseMark { background: linear-gradient(135deg, var(--acc), var(--acc2)); box-shadow: 0 0 12px rgba(255, 138, 31, .5); } :root[data-skin="mostek"] .hudHouse b, :root[data-skin="mostek"] .panelHead h2 { text-transform: uppercase; letter-spacing: .06em; color: var(--acc); } :root[data-skin="mostek"] .goalBar i { background: repeating-linear-gradient(90deg, var(--acc) 0 6px, transparent 6px 8px); } :root[data-skin="mostek"] .card { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); border-color: rgba(255, 178, 62, .22); background: var(--cardbg); } :root[data-skin="mostek"] .card h3 { color: var(--acc); } :root[data-skin="mostek"] .primary { background: linear-gradient(180deg, var(--acc), var(--acc2)); color: #1a1000; border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 0 18px rgba(255, 138, 31, .4); } :root[data-skin="mostek"] .tab.on { color: var(--acc); background: rgba(255, 178, 62, .12); } :root[data-skin="mostek"] #bar { border-top: 2px solid var(--acc2); } :root[data-skin="mostek"] #mapWrap { background: radial-gradient(circle at 50% 50%, #1d160b 0%, #0a0805 70%); } :root[data-skin="mostek"] #mapWrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(90deg, rgba(255, 178, 62, .05) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(0deg, rgba(255, 178, 62, .05) 1px, transparent 1px) 0 0 / 48px 48px, repeating-radial-gradient(circle at 50% 50%, transparent 0 118px, rgba(255, 178, 62, .09) 118px 119px); } :root[data-skin="mostek"] #mapWrap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; pointer-events: none; z-index: -1; background: conic-gradient(from 0deg, rgba(255, 178, 62, .16), rgba(255, 178, 62, 0) 14%, transparent 100%); border-radius: 50%; animation: skorkaRadar 7s linear infinite; } @keyframes skorkaRadar { to { transform: rotate(360deg); } } :root[data-skin="mostek"] #map .planet { filter: sepia(.55) saturate(1.35) hue-rotate(-10deg); } :root[data-skin="mostek"] #map text { font-family: 'Share Tech Mono', ui-monospace, monospace; fill: var(--acc); letter-spacing: .06em; } :root[data-skin="mostek"] .logo h1 span { color: var(--acc); text-shadow: 0 0 22px rgba(255, 138, 31, .5); } :root[data-skin="mostek"] .startCard { border-color: rgba(255, 178, 62, .3); border-radius: 6px; } /* =========================== B — RETRO-PLAKAT KOSMICZNY =========================== */ :root[data-skin="retro"] { --bg: #f3e6cc; --bg2: #ecdcbc; --panel: #fff8ea; --panel2: #f6ead2; --glass: rgba(255, 248, 234, .94); --line: rgba(34, 34, 59, .18); --line2: rgba(34, 34, 59, .45); --txt: #22223b; --dim: #5a5243; --dim2: #857a66; --acc: #1f6f78; --acc2: #e8643a; --gold: #b7791f; --good: #1f7a4c; --bad: #c2412d; --violet: #7a4fd6; --input: #fffdf6; --hover: rgba(34, 34, 59, .05); --hover2: rgba(34, 34, 59, .1); --surf: rgba(255, 255, 255, .55); --track: rgba(34, 34, 59, .12); --cardbg: #fff8ea; --hudbg: #22223b; --sidebg: #f3e6cc; --barbg: #22223b; --modalbg: #fff8ea; --toastbg: #22223b; --packbg: #fff8ea; --r: 16px; --r2: 20px; --sh: 6px 6px 0 rgba(34, 34, 59, .9); } :root[data-skin="retro"] body { font-family: 'DM Sans', 'Segoe UI', sans-serif; } :root[data-skin="retro"] body::before, :root[data-skin="retro"] .sky { opacity: 0; } :root[data-skin="retro"] .panelHead h2, :root[data-skin="retro"] .logo h1, :root[data-skin="retro"] .stat b, :root[data-skin="retro"] .card h3, :root[data-skin="retro"] .next span, :root[data-skin="retro"] .hudHouse b { font-family: 'Bebas Neue', 'DM Sans', sans-serif; font-weight: 400; letter-spacing: .04em; } :root[data-skin="retro"] #hud { color: #f3e6cc; border-bottom: 5px solid #e8643a; } :root[data-skin="retro"] #hud .hudTurn, :root[data-skin="retro"] #hud .goalTxt { color: #d9ccb0; } :root[data-skin="retro"] .hudHouse b { font-size: 21px; color: #f2b134; } :root[data-skin="retro"] #hud .iconBtn { border: 2px solid #f3e6cc; color: #f3e6cc; background: transparent; } :root[data-skin="retro"] .stat { background: #f3e6cc; color: #22223b; border: 2.5px solid #22223b; border-radius: 12px; box-shadow: 3px 3px 0 #f2b134; } :root[data-skin="retro"] .stat label, :root[data-skin="retro"] .stat .ic { color: #6b6152; } :root[data-skin="retro"] .stat b { font-size: 21px; line-height: 1; } :root[data-skin="retro"] .goalBar { border: 2px solid #f3e6cc; height: 9px; } :root[data-skin="retro"] .goalBar i { background: repeating-linear-gradient(-45deg, #e8643a 0 6px, #f2b134 6px 12px); } :root[data-skin="retro"] .card { background: #fff8ea; border: 2.5px solid #22223b; border-radius: 16px; box-shadow: 5px 5px 0 #22223b; } :root[data-skin="retro"] .card h3 { color: #1f6f78; font-size: 18px; } :root[data-skin="retro"] .panelHead h2 { font-size: 30px; color: #e8643a; } :root[data-skin="retro"] .primary { background: #e8643a; color: #fff; border: 2.5px solid #22223b; border-radius: 12px; box-shadow: 3px 3px 0 #22223b; } :root[data-skin="retro"] .ghost, :root[data-skin="retro"] .seg button { border: 2px solid #22223b; border-radius: 12px; } :root[data-skin="retro"] #bar { border-top: 5px solid #e8643a; } :root[data-skin="retro"] .tab { color: #cfc6b3; } :root[data-skin="retro"] .tab.on { color: #f2b134; background: rgba(242, 177, 52, .14); } :root[data-skin="retro"] .next { border: 2.5px solid #f3e6cc; font-size: 20px; box-shadow: 3px 3px 0 #f2b134; } :root[data-skin="retro"] #mapWrap { background: radial-gradient(circle at 82% 16%, #f2b134 0 64px, transparent 65px), linear-gradient(180deg, #8fc9c2 0%, #cfe0cf 45%, #f3d7a8 100%); } :root[data-skin="retro"] #mapWrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle, rgba(34, 34, 59, .45) 1.1px, transparent 1.3px) 0 0 / 32px 32px; opacity: .3; } :root[data-skin="retro"] #mapWrap::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: -2px; height: 70px; pointer-events: none; z-index: -1; background: #22223b; clip-path: polygon(0 60%, 8% 30%, 16% 55%, 26% 20%, 36% 58%, 47% 35%, 58% 62%, 68% 25%, 79% 55%, 90% 30%, 100% 50%, 100% 100%, 0 100%); opacity: .85; } :root[data-skin="retro"] #map .tw, :root[data-skin="retro"] #map .star { opacity: 0 !important; } :root[data-skin="retro"] #map .planet { filter: drop-shadow(2px 2px 0 rgba(34, 34, 59, .75)) saturate(1.2); } :root[data-skin="retro"] #map text { fill: #22223b; font-weight: 700; paint-order: stroke; stroke: #fff8ea; stroke-width: 3.5px; stroke-linejoin: round; } :root[data-skin="retro"] .startCard { background: #fff8ea; border: 2.5px solid #22223b; box-shadow: 6px 6px 0 #22223b; } :root[data-skin="retro"] .logo h1 span { color: #e8643a; text-shadow: none; } :root[data-skin="retro"] .modal { border: 2.5px solid #22223b; box-shadow: 8px 8px 0 #22223b; } /* =========================== C — GALAKTYCZNA GIEŁDA =========================== */ :root[data-skin="gielda"] { --bg: #07090d; --bg2: #0a0f16; --panel: #0d1117; --panel2: #111823; --glass: rgba(13, 17, 23, .94); --line: rgba(120, 150, 190, .14); --line2: rgba(120, 150, 190, .28); --txt: #dfe7f2; --dim: #8a99b0; --dim2: #62708a; --acc: #19e28a; --acc2: #4da3ff; --gold: #ffc940; --good: #19e28a; --bad: #ff4d5e; --violet: #b18cff; --input: #0a0f16; --hover: rgba(255, 255, 255, .035); --hover2: rgba(255, 255, 255, .07); --surf: #0f141c; --track: #1e2a3a; --cardbg: #0f141c; --hudbg: #0d1117; --sidebg: #0d1117; --barbg: #0d1117; --modalbg: #0f141c; --toastbg: #111823; --packbg: #0f141c; --r: 7px; --r2: 10px; } :root[data-skin="gielda"] body { font-family: 'Inter', 'Segoe UI', sans-serif; } :root[data-skin="gielda"] body::before, :root[data-skin="gielda"] .sky { opacity: .12; } :root[data-skin="gielda"] .stat b, :root[data-skin="gielda"] .goalTxt, :root[data-skin="gielda"] .hudTurn, :root[data-skin="gielda"] .num, :root[data-skin="gielda"] td { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } :root[data-skin="gielda"] #hud { border-bottom: 1px solid #1e2a3a; } :root[data-skin="gielda"] .stat { border-radius: 6px; background: #111823; } :root[data-skin="gielda"] .stat b { font-size: 14.5px; } :root[data-skin="gielda"] .houseMark { background: linear-gradient(135deg, #4da3ff, #7a5cff); box-shadow: none; } :root[data-skin="gielda"] .goalBar i { background: linear-gradient(90deg, #4da3ff, #19e28a); } :root[data-skin="gielda"] .card { border-radius: 6px; background: #0f141c; } :root[data-skin="gielda"] .card h3 { color: var(--dim); letter-spacing: .12em; } :root[data-skin="gielda"] .primary { background: #19e28a; color: #032014; border-radius: 7px; box-shadow: 0 0 20px rgba(25, 226, 138, .28); } :root[data-skin="gielda"] .tab.on { color: #19e28a; background: rgba(25, 226, 138, .1); } :root[data-skin="gielda"] #mapWrap { background: #07090d; } :root[data-skin="gielda"] #mapWrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(#1e2a3a 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, #1e2a3a 1px, transparent 1px) 0 0 / 64px 100%; opacity: .6; } :root[data-skin="gielda"] #map .tw { opacity: .25 !important; } :root[data-skin="gielda"] #map text { font-family: 'IBM Plex Mono', ui-monospace, monospace; } :root[data-skin="gielda"] .logo h1 span { color: #19e28a; text-shadow: 0 0 22px rgba(25, 226, 138, .35); } :root[data-skin="gielda"] .startCard { border-radius: 10px; background: #0d1117; } /* =========================== wybór wyglądu (okno) =========================== */ .wyglady { display: grid; gap: 8px; } .wyglad { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--line2); background: var(--surf); color: var(--txt); cursor: pointer; } .wyglad.on { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 35%, transparent); } .wyglad .probka { flex: 0 0 auto; width: 58px; height: 42px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .25); } .wyglad b { display: block; } .wyglad small { color: var(--dim); } .wyglad .znak { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--acc); } /* ---- poprawki po przeglądzie zrzutów (28.09.2026) ---- */ :root[data-skin="mostek"] #map { filter: sepia(.55) saturate(1.3) hue-rotate(-12deg); } :root[data-skin="mostek"] #map .planet { filter: none; } :root[data-skin="gielda"] #map { filter: saturate(.55) brightness(.95); } :root[data-skin="retro"] .hudLogin { color: #f2b134; border-color: #f2b134; background: rgba(242, 177, 52, .12); } :root[data-skin="retro"] #hud .shield { color: #9fe0b5; border-color: rgba(159, 224, 181, .5); } :root[data-skin="retro"] #map text { stroke-width: 2.4px; } @media (max-width: 699px) { :root[data-skin="retro"] #mapWrap::after { height: 34px; opacity: .55; } :root[data-skin="retro"] #mapWrap { background: radial-gradient(circle at 86% 12%, #f2b134 0 40px, transparent 41px), linear-gradient(180deg, #8fc9c2 0%, #cfe0cf 45%, #f3d7a8 100%); } :root[data-skin="mostek"] #mapWrap::after { opacity: .7; } } /* ozdoby tła mapy pod mapą i pod nakładkami (chip floty, przyciski) — nie podnosimy samej mapy */ :root[data-skin] #mapWrap { isolation: isolate; } @media (max-width: 699px) { :root[data-skin="mostek"] .tab span { letter-spacing: 0; font-size: 9.5px; } } /* pasek próbek wyglądu na ekranie startowym */ .wyborWygladu { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 8px 0 0; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); } .wyborWygladu .wzor { width: 34px; height: 24px; border-radius: 7px; border: 2px solid var(--line2); cursor: pointer; padding: 0; transition: transform .15s; } .wyborWygladu .wzor:hover { transform: translateY(-2px); } .wyborWygladu .wzor.on { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 40%, transparent); } @media (max-width: 699px) { :root[data-skin] .tab span { font-size: 8.5px; letter-spacing: 0; text-transform: none; } :root[data-skin] #bar { gap: 2px; } } /* 28.09.2026: podpisy planet w Retro nieczytelne - gra wpisuje w kazdy inline 'stroke:#040911', ktory wygrywal z obrysem skorki */ :root[data-skin="retro"] #map text { fill: #1a1a2e !important; stroke: #fff8ea !important; stroke-width: 4.5px !important; font-weight: 800 !important; paint-order: stroke !important; } :root[data-skin="retro"] #map text[font-size] { letter-spacing: .02em; }