/* Tryby urządzeń i tokeny układu (0019). Jedno przełącznikowe miejsce dla całego interfejsu: atrybut `data-urzadzenie` na , ustawiany przez `js/device.js` jeszcze przed pierwszym malowaniem strony (tak samo jak motyw). Wartości: telefon | telefon-poziom | tablet | desktop. Dlaczego atrybut, a nie same media queries: część układu — kompaktowe miejsca N/W/E i lista odkrytych rąk — powstaje w `table.js`, więc JavaScript i tak musi znać tryb. Przy dwóch źródłach prawdy (media query dla CSS, matchMedia dla JS) prędzej czy później rozjechałyby się progi. Atrybut daje jedno źródło i przy okazji pozwala wymusić układ ręcznie z profilu. Blok `@media` na końcu pliku jest wyłącznie zapasem na wypadek, gdyby skrypt nie wystartował: ustawia same tokeny odstępów, żeby strona nie była nieużywalna. Pełny układ wymaga skryptu — stół i tak nie działa bez JavaScriptu (SignalR). Reguły komponentów zostają w `site.css`. Tutaj są tylko tokeny i to, co jest specyficzne dla trybu. */ /* --- Tokeny bazowe (desktop) --- */ :root { /* Baza typografii. 17 px ustalone w 0009 pod czytelność; reszta interfejsu jest w rem. */ --baza: 17px; /* Rozmiar notacji kart trzymany osobno od bazy. Na telefonie baza schodzi do 16 px, ale ręce i symbole kolorów mają zostać tej samej wielkości co na monitorze — stąd token, a nie rem liczony od bazy (0019, pytanie 5). */ --tekst-karty: 1.05rem; /* 17,85 px */ --odstep: 1.5rem; /* padding karty i marginesy boczne strony */ --odstep-pion: 2rem; /* padding pionowy kontenera strony */ --odstep-maly: 0.75rem; --odstep-mikro: 0.35rem; --odstep-sekcji: 1.5rem; /* odstęp między kartami sekcji */ --promien: 0.6rem; --promien-maly: 0.4rem; /* Minimalna wysokość celu dotykowego. 2,6 rem × 17 px = 44 px, czyli próg zalecany dla palca. */ --pole-dotyku: 2.6rem; --szerokosc-strony: 1040px; --szerokosc-stolu: 1280px; /* strona stołu jest szersza — mieści dwie kolumny */ --miejsce-wysokosc: 6rem; /* Tablica odzywek: pięć mian w rzędzie, przyciski nie rozlewają się na całą szerokość karty. */ --tablica-kolumny: repeat(5, minmax(3.4rem, 5rem)); } /* --- Telefon w pionie --- */ [data-urzadzenie="telefon"] { --baza: 16px; --tekst-karty: 1.12rem; /* 17,92 px — ten sam rozmiar co na monitorze mimo mniejszej bazy */ --odstep: 0.75rem; --odstep-pion: 1rem; --odstep-maly: 0.5rem; --odstep-mikro: 0.3rem; --odstep-sekcji: 0.75rem; --promien: 0.5rem; --pole-dotyku: 2.75rem; /* 44 px przy bazie 16 px */ --miejsce-wysokosc: auto; --tablica-kolumny: repeat(5, minmax(0, 1fr)); } /* --- Telefon w poziomie: brakuje wysokości, nie szerokości --- */ [data-urzadzenie="telefon-poziom"] { --baza: 16px; --tekst-karty: 1.12rem; --odstep: 0.75rem; --odstep-pion: 0.5rem; --odstep-maly: 0.4rem; --odstep-mikro: 0.25rem; --odstep-sekcji: 0.5rem; --promien: 0.5rem; --pole-dotyku: 2.5rem; /* 40 px — kompromis wymuszony wysokością okna ~360 px */ --miejsce-wysokosc: auto; --tablica-kolumny: repeat(5, minmax(0, 1fr)); } /* --- Tablet --- */ [data-urzadzenie="tablet"] { --odstep: 1.1rem; --odstep-pion: 1.25rem; --odstep-sekcji: 1rem; --pole-dotyku: 2.75rem; --miejsce-wysokosc: 5rem; --tablica-kolumny: repeat(5, minmax(0, 1fr)); } /* ================================================================ Układ zależny od trybu ================================================================ */ /* --- Desktop: stół i licytacja obok siebie --- */ [data-urzadzenie="desktop"] .page-container.kontener-stolu { max-width: var(--szerokosc-stolu); } [data-urzadzenie="desktop"] #obszar-stolu { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "stol licytacja" "tablica licytacja" "ocena ocena" "dyskusja dyskusja"; gap: 0 var(--odstep-sekcji); align-items: start; } [data-urzadzenie="desktop"] #obszar-stolu > .stol { grid-area: stol; } [data-urzadzenie="desktop"] #sekcja-licytacji { grid-area: licytacja; } [data-urzadzenie="desktop"] #sekcja-tablicy { grid-area: tablica; } [data-urzadzenie="desktop"] #sekcja-oceny { grid-area: ocena; } [data-urzadzenie="desktop"] #sekcja-dyskusji { grid-area: dyskusja; } /* Na monitorze jest miejsce, żeby ręce były naprawdę czytelne. */ [data-urzadzenie="desktop"] .miejsce { min-height: 8rem; } /* --- Tablet: jedna kolumna, ale pełny krzyż --- */ [data-urzadzenie="tablet"] .stol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } /* --- Telefon w pionie --- */ /* Krzyż zostaje krzyżem, ale N i S dostają pełną szerokość rzędu: kompaktowy opis miejsca („N · 12 PH · 4-3-3-3") nie mieści się w kolumnie jednej trzeciej ekranu 360 px. W i E zostają wąskie — one niosą tylko to, po której stronie siedzą. */ [data-urzadzenie="telefon"] .stol { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "n n n" "w c e" "s s s"; gap: var(--odstep-mikro); margin-bottom: var(--odstep-sekcji); } [data-urzadzenie="telefon"] .stol-srodek { min-height: 4rem; } /* --- Telefon w poziomie: stół po lewej, tablica po prawej --- */ [data-urzadzenie="telefon-poziom"] #obszar-stolu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stol tablica" "rece tablica" "licytacja licytacja" "ocena ocena" "dyskusja dyskusja"; gap: var(--odstep-maly); align-items: start; } [data-urzadzenie="telefon-poziom"] #obszar-stolu > .stol { grid-area: stol; } [data-urzadzenie="telefon-poziom"] #rece-lista { grid-area: rece; } [data-urzadzenie="telefon-poziom"] #sekcja-licytacji { grid-area: licytacja; } [data-urzadzenie="telefon-poziom"] #sekcja-tablicy { grid-area: tablica; } [data-urzadzenie="telefon-poziom"] #sekcja-oceny { grid-area: ocena; } [data-urzadzenie="telefon-poziom"] #sekcja-dyskusji { grid-area: dyskusja; } [data-urzadzenie="telefon-poziom"] .stol { grid-template-areas: "n n n" "w c e" "s s s"; gap: var(--odstep-mikro); margin-bottom: 0; } [data-urzadzenie="telefon-poziom"] .stol-srodek { min-height: 3rem; } /* Stopka i podtytuły to w poziomie czysty koszt — okno ma około 360 px wysokości. */ [data-urzadzenie="telefon-poziom"] .site-footer, [data-urzadzenie="telefon-poziom"] .stol-naglowek h1 { display: none; } [data-urzadzenie="telefon-poziom"] .site-nav { padding: var(--odstep-mikro) var(--odstep); } /* ================================================================ Miejsca przy stole ================================================================ */ /* Wariant kompaktowy: sama etykieta, punkty honorowe i rozkład. Karty odkrytych rąk idą na listę pod krzyżem (`#rece-lista`) — w kolumnie ~110 px trzynaście kart się nie mieści. */ .miejsce-kompaktowe { min-height: 0; padding: var(--odstep-maly); text-align: center; } .miejsce-kompaktowe .miejsce-etykieta { margin-bottom: 0.1rem; } .miejsce-dane { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.35; } .miejsce-dane span { display: block; } /* Lista rąk pod krzyżem — Twoja zawsze pierwsza, żeby stała tuż nad tablicą odzywek. */ #rece-lista[hidden] { display: none; } .reka-wpis { border: 1px solid var(--color-border); border-radius: var(--promien); background: var(--color-surface); padding: var(--odstep-maly); margin-bottom: var(--odstep-mikro); } .reka-wpis:last-child { margin-bottom: 0; } .reka-wpis-moja { border-color: var(--color-accent); } .reka-naglowek { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.2rem; } /* ================================================================ Tablica odzywek ================================================================ */ /* Siatka o stałej liczbie kolumn zamiast zawijanego flexa — rząd pięciu mian nigdy się nie łamie. */ .tablica-rzad { display: grid; grid-template-columns: var(--tablica-kolumny); gap: var(--odstep-mikro); } .tablica-specjalne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--odstep-mikro); max-width: 22rem; } .odzywka { min-height: var(--pole-dotyku); } /* Wariant dwustopniowy na telefon: najpierw wysokość, potem miano. Pełna tablica to osiem rzędów — przy 44 px na przycisk zajmuje całą wysokość ekranu telefonu, więc przyklejona do dołu zasłoniłaby dokładnie to, co miała odsłonić: rękę gracza. */ .tablica-kroki { display: none; flex-direction: column; gap: var(--odstep-mikro); } .tablica-kroki-rzad { display: grid; gap: var(--odstep-mikro); } .tablica-kroki-specjalne { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tablica-wysokosci { grid-template-columns: repeat(7, minmax(0, 1fr)); } .tablica-miana { grid-template-columns: repeat(5, minmax(0, 1fr)); } .odzywka-wybrana { background: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent); font-weight: 700; } [data-urzadzenie="telefon"] .tablica-odzywek, [data-urzadzenie="telefon-poziom"] .tablica-odzywek { display: none; } [data-urzadzenie="telefon"] .tablica-kroki, [data-urzadzenie="telefon-poziom"] .tablica-kroki { display: flex; } /* Przyklejony pasek na telefonie w pionie — pokazuje się tylko wtedy, gdy Twoja kolej. */ [data-urzadzenie="telefon"] #sekcja-tablicy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; border-radius: var(--promien) var(--promien) 0 0; border-width: 1px 0 0; padding: var(--odstep-maly) var(--odstep); padding-bottom: calc(var(--odstep-maly) + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -0.3rem 1rem rgb(0 0 0 / 30%); } [data-urzadzenie="telefon"] #sekcja-tablicy:not(.tablica-aktywna) { display: none; } [data-urzadzenie="telefon"] #sekcja-tablicy h2 { display: none; } [data-urzadzenie="telefon"] #tablica-info { margin: 0 0 var(--odstep-mikro); font-size: 0.85rem; } /* Miejsce pod przyklejony pasek, żeby nie zasłaniał końca strony. */ [data-urzadzenie="telefon"][data-tablica="aktywna"] .page-container { padding-bottom: 13rem; } [data-urzadzenie="telefon-poziom"] #sekcja-tablicy h2 { display: none; } /* ================================================================ Tabele jako karty na telefonie ================================================================ */ /* Historia rozdań ma dziewięć kolumn, tabela oceny sześć. Zamiast poziomego paska przewijania każdy wiersz staje się kartą, a nagłówek kolumny wraca jako etykieta przed wartością. Wymaga `data-etykieta` na każdej komórce — bez tego zostałyby same wartości bez kontekstu. */ [data-urzadzenie="telefon"] .tabela-karty, [data-urzadzenie="telefon"] .tabela-karty tbody, [data-urzadzenie="telefon"] .tabela-karty tr, [data-urzadzenie="telefon"] .tabela-karty td { display: block; width: auto; } [data-urzadzenie="telefon"] .tabela-karty thead { display: none; } [data-urzadzenie="telefon"] .tabela-karty tr { border: 1px solid var(--color-border); border-radius: var(--promien); padding: var(--odstep-maly); margin-bottom: var(--odstep-maly); background: var(--color-surface); } [data-urzadzenie="telefon"] .tabela-karty td { border: none; padding: 0.15rem 0; } [data-urzadzenie="telefon"] .tabela-karty td:empty { display: none; } [data-urzadzenie="telefon"] .tabela-karty td[data-etykieta]::before { content: attr(data-etykieta) ": "; font-weight: 600; color: var(--color-text-muted); } /* Wiersz-karta nie potrzebuje już poziomego przewijania. */ [data-urzadzenie="telefon"] .przewijana:has(.tabela-karty) { overflow-x: visible; } /* ================================================================ Nagłówek strony na telefonie ================================================================ */ .nav-menu { display: none; } [data-urzadzenie="telefon"] .nav-menu, [data-urzadzenie="telefon-poziom"] .nav-menu { display: inline-block; order: 2; } [data-urzadzenie="telefon"] .brand, [data-urzadzenie="telefon-poziom"] .brand { order: 1; } [data-urzadzenie="telefon"] #theme-toggle, [data-urzadzenie="telefon-poziom"] #theme-toggle { order: 3; } [data-urzadzenie="telefon"] .site-nav, [data-urzadzenie="telefon-poziom"] .site-nav { flex-wrap: nowrap; gap: var(--odstep-maly); } [data-urzadzenie="telefon"] .brand, [data-urzadzenie="telefon-poziom"] .brand { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Linki i konto chowają się do rozwijanego panelu pod paskiem. */ [data-urzadzenie="telefon"] .nav-linki, [data-urzadzenie="telefon"] .nav-konto, [data-urzadzenie="telefon-poziom"] .nav-linki, [data-urzadzenie="telefon-poziom"] .nav-konto { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--odstep-mikro); } [data-urzadzenie="telefon"] .site-nav:not(.nav-otwarte) .nav-linki, [data-urzadzenie="telefon"] .site-nav:not(.nav-otwarte) .nav-konto, [data-urzadzenie="telefon-poziom"] .site-nav:not(.nav-otwarte) .nav-linki, [data-urzadzenie="telefon-poziom"] .site-nav:not(.nav-otwarte) .nav-konto { display: none; } [data-urzadzenie="telefon"] .nav-linki a, [data-urzadzenie="telefon-poziom"] .nav-linki a { padding: var(--odstep-mikro) 0; min-height: var(--pole-dotyku); display: flex; align-items: center; } /* ================================================================ Zapas na wypadek nieuruchomionego skryptu ================================================================ */ @media (max-width: 599px) { :root:not([data-urzadzenie]) { --baza: 16px; --tekst-karty: 1.12rem; --odstep: 0.75rem; --odstep-pion: 1rem; --odstep-maly: 0.5rem; --odstep-sekcji: 0.75rem; --pole-dotyku: 2.75rem; --miejsce-wysokosc: auto; --tablica-kolumny: repeat(5, minmax(0, 1fr)); } } @media (min-width: 600px) and (max-width: 1023px) { :root:not([data-urzadzenie]) { --odstep: 1.1rem; --odstep-pion: 1.25rem; --odstep-sekcji: 1rem; --pole-dotyku: 2.75rem; --tablica-kolumny: repeat(5, minmax(0, 1fr)); } }