/* GamesBoard Play - wspólna skóra gier online (warcaby, kalambury). Źródło prawdy: wp-content/themes/gamesboard/assets/css/redesign.css. Tu leżą wyłącznie rzeczy wspólne: krój, paleta, pasek, okruszki, przyciski, karty, pola, lista stołów, czat i stopka. Elementy konkretnej gry siedzą w warcaby.css i style.css. */ /* -------------------------------------------------------------------- kroj Krój bierze motyw. Widok gry renderuje się pod /graj/{gra}/, czyli wewnątrz strony WordPressa, która ładuje Titillium Web z assets/css/fonts.css i jeszcze preloaduje cztery pliki w nagłówku. Powtórzone tu @font-face wskazywały te same pliki pod innym adresem (/play/theme/fonts/), więc przeglądarka uznawała je za inne zasoby: preload motywu szedł w kosz, a fonty pobierały się drugi raz. Nazwy zmiennych zostają, bo używają ich arkusze poszczególnych gier. */ /* ------------------------------------------------------------------ paleta Cztery powierzchnie na jednym odcieniu, cztery poziomy tekstu. --gp-dim jest WYŁĄCZNIE dekoracyjny (separatory, ramki), nigdy pod treść. */ :root { --gp-bg: #0e1015; --gp-panel: #14161c; --gp-card: #1d2029; --gp-card2: #191c23; --gp-line: rgba(255, 255, 255, .07); --gp-line2: rgba(255, 255, 255, .14); --gp-accent: #ffc233; --gp-accent-hi: #ffd76a; --gp-green: #3ddc84; --gp-red: #ff4d5a; --gp-blue: #4da3ff; --gp-violet: #a78bfa; --gp-text: #ffffff; --gp-text2: #c6cbd6; --gp-muted: #97a0b2; --gp-dim: #6b7386; /* Separator okruszków jest jedynym miejscem, gdzie "przygaszenie" ląduje w treści strony. --gp-dim schodzi tam do 3,8:1, więc ma własny odcień trzymający próg AA (5,1:1 na pasku). */ --gp-sep: #6b7386; --gp-max: 1420px; /* Te same nazwy co w motywie (assets/css/fonts.css), zeby skora gier i portal nie rozjechaly sie typograficznie. */ --gb-font: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', sans-serif; --gb-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Alias dla arkuszy gier, ktore juz go uzywaja. */ --gp-mono: var(--gb-mono); } /* Musi być silniejsze niż display:grid/flex na sekcjach ekranów, inaczej atrybut hidden nic nie robi. */ [hidden] { display: none !important; } /* NIC POZA POWYŻSZYM NIE MOŻE BYĆ REGUŁĄ NA GOŁY TAG. Ten arkusz ładuje się PO wszystkich arkuszach motywu (kolejność enqueue w includes/play-games.php), więc każda reguła na html, body, h1 czy main trafiała w całą stronę i wygrywała z komponentami motywu przy właściwościach, których te nie ustawiają. Tło, krój, kolor tekstu, reset box-sizing i sticky footer dostarcza motyw (assets/css/redesign.css i redesign-extra.css) - dublowanie ich tutaj znaczyło, że poprawka w jednym miejscu nie działa na stronach gier. Wszystko, co dotyczy WYŁĄCZNIE gry, celuje w .gb-play-view albo w klasę .gp-*. */ /* Krój kontrolek formularza i czcionkę monospace ustawia motyw (body.gb-redesign button/input/select/textarea w redesign.css), więc te reguły zniknęły stąd zamiast zostać zawężone. Ważne przy oknach dialogowych: dialog.js i gracz-modal.js montują je w , czyli POZA .gb-play-view - reguła zawężona do widoku gry by ich nie objęła. */ /* Domyslne / to "bolder", czyli o krok wyzej od rodzica. Wewnatrz elementu w wadze 700 dawalo to 900 - wage, ktorej tu nie chcemy. */ .gb-play-view b, .gb-play-view strong, .gp-dialog b, .gp-dialog strong { font-weight: 700; } /* Prog 12 px z kanonu motywu: w drobnych etykietach nawet zostaje na 600. */ .wb-taken b, .sb-taken b, .gp-flabel b, .wb-clock-note b, .sb-clock-note b { font-weight: 600; } .gb-play-view h1, .gb-play-view h2, .gb-play-view h3 { margin: 0 0 10px; color: var(--gp-text); font-weight: 700; letter-spacing: .2px; } .gb-play-view h1 { font-size: 30px; } .gb-play-view h2 { font-size: 17px; } .gb-play-view h3 { font-size: 15px; } .gp-mono { font-family: var(--gb-mono); } /* ============================================================== okruszki Okruszki rysuje motyw (templates/play-game.php). Zostaje tu tylko to, czego motyw nie zna: żywy ostatni człon dopisywany przez skrypt gry. */ /* okruszki: ostatni człon jest bieżącym miejscem, poprzednie są klikalne. Wartości przepisane 1:1 z .gb-crumbs w motywie (redesign-article.css), żeby pasek nad grą wyglądał tak samo jak nad recenzją: 13 px / 600, odstęp 6 px, człony przygaszone, bieżące miejsce jaśniejsze. */ /* Bieżącym miejscem bywa link do gry (przed siadnięciem do stołu). */ /* Krótka etykieta wchodzi dopiero w wąskim pasku, żeby powrót do portalu nie dołamywał trzeciego rzędu przycisków. */ .gp-bar-note { font-size: 12.5px; font-weight: 600; color: var(--gp-muted); white-space: nowrap; } /* ============================================================== przyciski */ .gp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-align: center; text-decoration: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .4px; padding: 9px 18px; border-radius: 18px; border: 1px solid transparent; background: none; color: var(--gp-text2); transition: background .15s, color .15s, border-color .15s; } .gp-btn:disabled { opacity: .45; cursor: not-allowed; } .gp-btn-primary { background: var(--gp-accent); color: #14161c; } .gp-btn-primary:hover:not(:disabled) { background: var(--gp-accent-hi); color: #14161c; } .gp-btn-ghost { border-color: var(--gp-line2); color: var(--gp-text2); } .gp-btn-ghost:hover:not(:disabled) { border-color: var(--gp-accent); color: var(--gp-accent); } .gp-btn-danger { border-color: var(--gp-red); color: var(--gp-red); } .gp-btn-danger:hover:not(:disabled) { background: rgba(255, 77, 90, .12); } .gp-btn-block { display: flex; width: 100%; } .gp-btn-sm { padding: 6px 13px; font-size: 12.5px; } /* Strzałka wyjeżdża dopiero przy najechaniu, w spoczynku ma zerową szerokość. */ .gp-btn-arrow::after { content: '→'; display: inline-block; overflow: hidden; max-width: 0; opacity: 0; transform: translateX(-6px); transition: max-width .22s ease, opacity .18s ease, transform .22s ease, margin-left .22s ease; } .gp-btn-arrow:hover::after, .gp-btn-arrow:focus-visible::after { max-width: 1.4em; opacity: 1; transform: translateX(0); margin-left: 2px; } /* Drobny przycisk tekstowy (kopiuj link, usuń boty, dołącz z listy). */ .gp-mini, .wb-mini, .gbp-mini { background: transparent; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--gp-muted); border: 1px solid var(--gp-line2); border-radius: 12px; padding: 4px 11px; transition: color .15s, border-color .15s; } .gp-mini:hover, .wb-mini:hover, .gbp-mini:hover { color: var(--gp-accent); border-color: var(--gp-accent); } .gp-mini.is-on, .gbp-mini.is-on { color: var(--gp-accent); border-color: var(--gp-accent); } /* ================================================================== karty */ .gp-card { background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: 10px; padding: 16px; } .gp-card-title { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; color: var(--gp-muted); margin-bottom: 10px; text-transform: uppercase; } .gp-panel { background: var(--gp-panel); border: 1px solid var(--gp-line); border-radius: 10px; } /* ============================================== pola i etykiety (wspólne) */ /* Nadtytuł nad nagłówkiem, dziś tylko w podsumowaniu wyścigu. */ .gp-enter-kicker { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; color: var(--gp-muted); text-transform: uppercase; } .gp-label-inline { font-size: 12px; font-weight: 600; color: var(--gp-muted); letter-spacing: .6px; } .gp-input { width: 100%; padding: 10px 13px; border-radius: 8px; background: var(--gp-panel); border: 1px solid var(--gp-line2); color: var(--gp-text); font-family: inherit; font-size: 15px; } .gp-input::placeholder { color: var(--gp-muted); opacity: 1; } .gp-input:focus { outline: none; border-color: var(--gp-accent); } .gp-input-code { text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-family: var(--gb-mono); } .gp-row { display: flex; gap: 10px; align-items: flex-end; } .gp-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--gp-accent); } /* Pigułkowy wybór wariantu, poziomu bota, długości rundy. */ .gp-choice { display: flex; gap: 6px; flex-wrap: wrap; } .gp-choice button { font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 15px; border-radius: 15px; cursor: pointer; background: var(--gp-panel); border: 1px solid var(--gp-line2); color: var(--gp-text2); transition: background .15s, color .15s, border-color .15s; } .gp-choice button:hover { border-color: var(--gp-accent); color: var(--gp-accent); } .gp-choice button.is-active { background: var(--gp-accent); border-color: var(--gp-accent); color: #14161c; } .gp-choice-sm button { padding: 5px 12px; font-size: 12.5px; } /* Kategorie haseł: checkbox zostaje (czyta go JS), wygląd pigułki. */ .gp-checks { display: flex; flex-wrap: wrap; gap: 7px; } .gp-checks label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 7px 13px; border-radius: 15px; background: var(--gp-panel); border: 1px solid var(--gp-line2); font-size: 13px; font-weight: 600; color: var(--gp-text2); transition: border-color .15s, color .15s; } .gp-checks label:hover { border-color: var(--gp-accent); } .gp-checks input { accent-color: var(--gp-accent); margin: 0; } .gp-checks input:checked ~ span { color: var(--gp-accent); } .gp-hint, .wb-hint, .gbp-hint { font-size: 12.5px; color: var(--gp-muted); margin: 10px 0 0; line-height: 1.5; } .gp-error, .wb-error, .gbp-error { color: var(--gp-red); font-size: 13px; min-height: 19px; margin: 10px 0 0; } /* PUSTY STAN ZAWSZE KROJEM PORTALU, nawet wewnątrz list pisanych maszynowo. Historia ruchów i lista strzałów mają `font-family: var(--gb-mono)`, bo notacja musi stać w równych kolumnach. Komunikat o pustej liście to jednak całe zdanie po polsku ("partia jeszcze się nie zaczęła"), a zdanie złożone krojem maszynowym czyta się jak wydruk z terminala, a nie jak tekst serwisu. Reguła stoi tu, a nie w arkuszu jednej gry, bo ta sama klasa obsługuje puste stany we wszystkich czterech grach. */ .gp-empty, .wb-empty, .gbp-empty { color: var(--gp-muted); font-size: 13px; font-family: var(--gb-font); } /* ================================================================== czat */ .gp-chat { display: flex; flex-direction: column; padding: 0; } .gp-chat-head { display: flex; align-items: center; gap: 4px; padding: 12px 14px 0; } .gp-chat-head h2 { margin: 0 0 10px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gp-muted); } .gp-tabs { display: flex; gap: 2px; padding: 11px 14px 0; } .gp-tabs button { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .8px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--gp-muted); padding: 0 9px 9px; cursor: pointer; text-transform: uppercase; } .gp-tabs button:hover { color: var(--gp-text2); } .gp-tabs button.is-active { color: var(--gp-accent); border-bottom-color: var(--gp-accent); } .gp-log { list-style: none; margin: 0; padding: 12px 14px; flex: 1; overflow-y: auto; border-top: 1px solid var(--gp-line); display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--gp-text2); } .gp-log li { word-break: break-word; line-height: 1.45; } .gp-log li b { color: var(--gp-blue); font-weight: 700; } .gp-log li.system { color: var(--gp-muted); font-size: 12.5px; text-align: center; } .gp-log li.error { color: var(--gp-red); font-size: 12.5px; text-align: center; } .gp-log li.hit { color: var(--gp-green); font-weight: 700; } .gp-log::-webkit-scrollbar { width: 7px; } .gp-log::-webkit-scrollbar-thumb { background: var(--gp-line2); border-radius: 4px; } .gp-chat-form { display: flex; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--gp-line); } .gp-chat-form .gp-input { border-radius: 15px; padding: 8px 13px; font-size: 13.5px; } .gp-send { width: 32px; height: 32px; flex: none; border: none; border-radius: 50%; background: var(--gp-accent); color: #14161c; font-size: 13px; font-weight: 700; cursor: pointer; align-self: center; } .gp-send:hover { background: var(--gp-accent-hi); } /* ============================================================ responsywność */ @media (max-width: 700px) { body { font-size: 14.5px; } .gp-subbar-right .gp-btn { padding: 7px 13px; font-size: 12.5px; } /* Licznik obserwujących jest też w zakładce czatu, w wąskim pasku tylko rozbija akcje na dodatkowy rząd. */ .gp-bar-note { display: none; } .gp-card { padding: 14px; } .gp-row { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .gp-btn, .gp-btn-arrow::after, .gp-choice button, .gp-card { transition: none; } } /* Nawigacja, okruszki i stopka NIE nalezaly nigdy do gry - byly kopia komponentow motywu z czasow, gdy gra byla osobna strona. Renderuje je teraz motyw (templates/play-game.php), wiec kopie zostaly usuniete 2026-08-08 razem z samymi stronami statycznymi. Menu serwisu i hamburger dojechaly tu jeszcze jako martwe reguly - poszly 2026-08-08 razem z .gp-btn-back i przyciskiem powrotu do portalu. */ /* --------------------------------------------------- pasek kontekstu gry Drugi, węższy pasek pod menu serwisu: okruszki i akcje przy stole. */ .gp-subbar { background: var(--gp-bg); border-bottom: 1px solid var(--gp-line); } .gp-subbar-inner { max-width: var(--gp-max); margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 24px; min-height: 44px; } .gp-subbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Powrót do turnieju. Element wstawia turniej-bar.js tylko wtedy, gdy gracz przyszedł z drabinki (?turniej=&mecz=), więc w zwykłej partii pasek wygląda dokładnie jak dotąd. */ .gp-turniej { display: flex; align-items: center; gap: 10px; min-width: 0; } .gp-turniej-link { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255, 194, 51, .35); text-decoration: none; transition: background .18s, border-color .18s; } .gp-turniej-link:hover { background: rgba(255, 194, 51, .1); border-color: var(--gp-accent); } .gp-turniej-link:focus-visible { outline: 2px solid var(--gp-accent); outline-offset: 2px; } .gp-turniej-lead { font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; color: var(--gp-accent); white-space: nowrap; } .gp-turniej-txt { font-size: 12.5px; font-weight: 600; color: var(--gp-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gp-turniej-link:hover .gp-turniej-txt { color: var(--gp-accent); } .gp-turniej-rola { font-size: 12px; font-weight: 600; color: var(--gp-muted); white-space: nowrap; } @media (max-width: 760px) { .gp-turniej-lead { display: none; } .gp-turniej-rola { display: none; } } @media (prefers-reduced-motion: reduce) { .gp-turniej-link { transition: none; } } /* ================================================================== lobby Układ i wiersz stołu jak na /graj/ w serwisie: lista po lewej, panel akcji po prawej. Kolor gry niesie zmienna --srv na wierszu. */ .gp-lobby { max-width: var(--gp-max); margin: 0 auto; padding: 4px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 24px; align-items: start; } .gp-lobby-main { min-width: 0; } .gp-lobby-side { display: flex; flex-direction: column; gap: 16px; } .gp-page-head { padding: 24px 0 0; } .gp-page-title { font-size: 33.5px; letter-spacing: 1px; color: var(--gp-text); margin: 0; text-transform: uppercase; } .gp-page-lead { font-size: 15px; color: var(--gp-muted); font-weight: 600; margin: 6px 0 18px; } /* Odstępy z tej samej skali co .gb-sec-head w motywie (28/16). Były o dwa piksele mniejsze, przez co sekcje w grze siedziały ciaśniej niż identyczne sekcje na stronie głównej - widać to od razu przy przechodzeniu między nimi. */ /* Napisy równane po LINII PISMA, nie po środku pudełka - ta sama zasada co w nagłówkach sekcji motywu (.gb-sec-head w redesign.css) i z tego samego powodu: tytuł ma 19,5 px, podpis obok 13,5 px, a wyśrodkowanie pudełek stawia mniejszy napis o około 2 px wyżej niż tytuł. Kropka i kreska nie mają liter, więc równają się środkiem. */ .gp-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 16px; } .gp-sec-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; align-self: center; } /* margin: 0 jest tu konieczny: tytuł sekcji to
, a globalna reguła nagłówków daje 10 px marginesu na dole. Przy align-items:center wypychało to napis o 5 px w górę wobec kropki i podpisu obok. */ .gp-sec-title { margin: 0; font-size: 19.5px; font-weight: 700; letter-spacing: 1.5px; color: var(--gp-text); text-transform: uppercase; line-height: 1; } .gp-sec-note { font-size: 13.5px; font-weight: 700; line-height: 1; } .gp-sec-line { flex: 1; height: 1px; background: var(--gp-line); align-self: center; } .gp-tables { display: flex; flex-direction: column; gap: 8px; } .gp-tables-info { padding: 22px 18px; text-align: center; background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: 10px; color: var(--gp-muted); font-size: 13.5px; } .gp-table { display: grid; grid-template-columns: minmax(150px, 1fr) 92px minmax(0, 1.9fr) auto; align-items: center; gap: 14px; padding: 13px 16px; background: var(--gp-card); border: 1px solid var(--gp-line); border-left: 3px solid var(--srv, var(--gp-accent)); border-radius: 10px; transition: border-color .15s, background .15s; } .gp-table:hover { background: #22252f; border-color: var(--gp-line2); } .gp-table-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; font-weight: 700; color: #fff; min-width: 0; } .gp-table-code { font-family: var(--gb-mono); font-size: 13px; font-weight: 700; color: var(--srv, var(--gp-accent)); letter-spacing: 1px; } .gp-table-meta { font-size: 12.5px; color: var(--gp-muted); } .gp-table-cta { font-family: inherit; cursor: pointer; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 7px 15px; border-radius: 16px; border: 1px solid var(--gp-line2); background: none; color: var(--gp-text2); transition: background .15s, color .15s, border-color .15s; } .gp-table-cta:hover { border-color: var(--gp-accent); color: var(--gp-accent); } .gp-table-cta.is-free { background: var(--gp-accent); border-color: var(--gp-accent); color: var(--gp-panel); } .gp-table-cta.is-free:hover { background: var(--gp-accent-hi); color: var(--gp-panel); } /* Stół pokazowy: dane symulowane, żeby pusta lista nie wyglądała na awarię. Musi się różnić od realnego wiersza na pierwszy rzut oka. */ /* Bez kreskowanego obramowania: wiersz pokazowy odróżnia go przygaszone tło, szara krecha po lewej i plakietka "stół pokazowy" przy nazwie. */ .gp-table.is-demo { background: var(--gp-card2); border-left-color: var(--gp-dim); } .gp-table.is-demo:hover { background: #1f222b; } .gp-table.is-demo .gp-table-code { color: var(--gp-muted); } .gp-demo-note { margin: 10px 0 0; font-size: 12.5px; color: var(--gp-muted); border-left: 2px solid var(--gp-line2); padding-left: 10px; } /* panel boczny lobby */ /* Tytuł karty bocznej. Wartości przepisane z .gb-rank-title w motywie (redesign.css), bo to ten sam element w hierarchii: nazwa panelu po prawej. Wcześniej stał na 12 px, wadze 600 i kolorze przygaszonym, czyli DOKŁADNIE tak jak etykieta pola pod nim - "ZAGRAJ TERAZ" i "GRASZ JAKO" czytało się jak dwa równorzędne nagłówki, a to tytuł i podpis wewnątrz niego. */ .gp-side-title { font-size: 14px; font-weight: 700; letter-spacing: 1.2px; color: var(--gp-text); text-transform: uppercase; margin-bottom: 12px; } .gp-side-actions { display: flex; flex-direction: column; gap: 8px; } .gp-fgroup { margin-top: 14px; } .gp-fgroup:first-of-type { margin-top: 0; } .gp-flabel { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--gp-muted); text-transform: uppercase; margin-bottom: 7px; } /* Tożsamość zalogowanego: nick z konta, nie pole do wpisania. Wygląda jak wartość, a nie jak kontrolka, bo zalogowany nie ma tu czego zmieniać - nick i tak idzie do gry z podpisanego biletu. */ .gp-identity { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--gp-card2); border: 1px solid var(--gp-line); border-radius: 8px; } .gp-identity-nick { font-size: 15px; font-weight: 700; color: var(--gp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gp-identity-edit { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: var(--gp-muted); text-decoration: none; border-bottom: 1px solid transparent; } .gp-identity-edit:hover { color: var(--gp-accent); border-bottom-color: var(--gp-accent); } /* Wyjaśnienie prefiksu ~ pod polem gościa. */ .gp-identity-hint { margin-top: 8px; } .gp-identity-hint b { color: var(--gp-accent); font-weight: 700; } .gp-identity-hint a { color: var(--gp-text2); } .gp-identity-hint a:hover { color: var(--gp-accent); } .gp-code-form { display: flex; gap: 8px; } .gp-code-form .gp-input { flex: 1; min-width: 0; } .gp-fold { margin-top: 14px; border-top: 1px solid var(--gp-line); padding-top: 12px; } /* ============================================================ okno zakładania Ustawienia stołu otwierają się w oknie na środku ekranu, a nie rozpychają panelu bocznego. Wejście na stronę pokazuje listę stołów - okno pojawia się dopiero po naciśnięciu "Załóż stół". */ .gp-dialog { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(8, 9, 12, .72); } .gp-dialog-card { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--gp-card); border: 1px solid var(--gp-line2); border-radius: 14px; padding: 20px 22px 22px; } .gp-dialog-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .gp-dialog-title { flex: 1; margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .3px; color: var(--gp-text); } .gp-dialog-close { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--gp-line2); border-radius: 8px; background: none; color: var(--gp-text2); font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; transition: background .18s, border-color .18s, color .18s; } .gp-dialog-close:hover { background: rgba(255, 255, 255, .04); border-color: var(--gp-accent); color: var(--gp-accent); } .gp-dialog-lead { margin: 0 0 14px; font-size: 13px; color: var(--gp-muted); } /* W oknie ustawienia nie potrzebują już własnej kreski oddzielającej. */ .gp-dialog-card .gp-fold { margin-top: 0; border-top: 0; padding-top: 0; } /* Odnośnik rozwijający ustawienia. Ma wyglądać na tekst, nie na trzeci przycisk obok "Załóż pokój" - wejście do gry to jedno kliknięcie, reszta jest opcjonalna. */ .gp-fold-link { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 12px; padding: 8px 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: var(--gp-muted); transition: color .18s; } .gp-fold-link:hover { color: var(--gp-accent); } .gp-fold-link::before { content: '▾'; font-size: 10px; line-height: 1; transition: transform .18s; } .gp-fold-link.is-open::before { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .gp-fold-link, .gp-fold-link::before { transition: none; } } .gp-quick p { margin: 0; font-size: 13px; color: var(--gp-muted); line-height: 1.55; } @media (max-width: 1080px) { .gp-lobby { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .gp-subbar-inner { padding: 8px 14px; } .gp-lobby { padding: 4px 14px 28px; gap: 16px; } .gp-page-title { font-size: 26px; } .gp-table { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } .gp-table-code { grid-row: 1; text-align: right; } .gp-table-meta { grid-column: 1 / -1; } .gp-table-cta { grid-column: 1 / -1; justify-self: start; } } /* Plakietka gracza z kontem. Bez niej gość mógł wpisać cudzy nick i nic przy stole tego nie odróżniało. Kolor akcentu, nie zieleń stanu - to informacja o tożsamości, a nie o tym, że coś działa. */ .gp-tag-konto { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255, 204, 50, .45); background: rgba(255, 204, 50, .12); color: #ffcc32; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; vertical-align: middle; } /* ============================================================ podgląd gracza Nick przy stole jest klikalny i otwiera okno z publicznymi danymi gracza. Podkreślenie kropkowane, nie pełne: to nie jest odnośnik do innej strony, tylko podgląd, który otwiera się na miejscu. */ .gp-nick { cursor: pointer; border-bottom: 1px dotted rgba(255, 255, 255, .35); } .gp-nick:hover { color: #ffcc32; border-bottom-color: #ffcc32; } .gp-nick:focus-visible { outline: 2px solid #ffcc32; outline-offset: 2px; } .gp-player-card { max-width: 420px; } .gp-player-games { list-style: none; margin: 14px 0 0; padding: 0; } .gp-player-games li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); } .gp-player-games li:last-child { border-bottom: none; } .gp-player-meta { font-size: 13px; color: #97a0b2; } /* Forma z ostatnich partii: litera na kolorowym tle, bo pięć wyników czyta się szybciej jako ciąg znaczników niż jako zdanie. */ .gp-player-form { display: flex; align-items: center; gap: 5px; margin-top: 14px; flex-wrap: wrap; } .gp-player-form span:not(.gp-player-meta) { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; font-size: 11px; font-weight: 700; } .gp-form-win { background: rgba(61, 220, 132, .18); color: #3ddc84; } .gp-form-loss { background: rgba(255, 77, 90, .18); color: #ff4d5a; } .gp-form-draw { background: rgba(255, 255, 255, .12); color: #c6cbd6; } .gp-form-score { background: rgba(77, 163, 255, .18); color: #4da3ff; } .gp-player-card .gp-btn { margin-top: 16px; }