/* ========================================================================== Responsivita a tiskové/pohybové výjimky Načítá se úplně poslední, aby přebilo jak komponenty, tak motivy. Soubor má dvě poloviny. Nejdřív zvětšování pro velké displeje (min-width), pak zmenšování pro malé (max-width). Obojí je potřeba: hra se hraje jak na telefonu, tak na projektoru, kde na rozhraní kouká celá třída zezadu. ========================================================================== */ /* zbytek balíčku se na širším displeji rozloží do jedné řady */ @media (min-width: 560px) { .deck-rest { grid-template-columns: repeat(14, 1fr); } } /* ========================================================================== Zvětšování pro velké displeje Rozhraní je stavěné na --ui z tokens.css: velikosti písma jsou v rem (a kořenová velikost se --ui násobí), rozměry a výplně v komponentách jsou psané jako calc(Npx * var(--ui)). Zvednutím jediné proměnné tedy naroste celá stránka najednou, ne jen hrací pole. Ke každé šířce patří i podmínka na výšku. Bez ní by se rozhraní nafouklo i na ultraširokém, ale nízkém okně, kde je místa naopak málo. --cell-max je strop velikosti buňky. Zvedá se rychleji než --ui schválně: o velikosti pole má na velkém displeji rozhodovat výška okna, ne strop. --draw-max je strop vytaženého čísla na stránce Výběr čísel, to je při losování jediný údaj, který se čte přes celou místnost. Pozor na cíl přepisu: --cell-max si base.css nastavuje přímo na body, takže vlastní deklarace na body přebije cokoli zděděného z :root, musí se přepisovat taky na body. --ui a --draw-max nikde jinde deklarované nejsou, ty stačí zdědit. ========================================================================== */ /* velký monitor */ @media (min-width: 1500px) and (min-height: 800px) { :root { --ui: 1.1; --draw-max: 7.5rem; } body { --cell-max: 190px; } } /* full HD projektor a běžná 27" obrazovka */ @media (min-width: 1800px) and (min-height: 950px) { :root { --ui: 1.22; --draw-max: 9rem; } body { --cell-max: 240px; } } /* 1440p */ @media (min-width: 2200px) and (min-height: 1150px) { :root { --ui: 1.4; --draw-max: 11rem; } body { --cell-max: 300px; } } /* velké panely a projekce nad 1440p */ @media (min-width: 2800px) and (min-height: 1400px) { :root { --ui: 1.65; --draw-max: 13rem; } body { --cell-max: 380px; } } /* 4K a výš */ @media (min-width: 3500px) and (min-height: 1800px) { :root { --ui: 2; --draw-max: 16rem; } body { --cell-max: 480px; } } /* Na velkém displeji je vytažené číslo hlavní věc na stránce, ne popisek vedle něj, dostane celou pravou půlku plochy. */ @media (min-width: 1500px) and (min-height: 800px) { .draw-stage { gap: var(--sp-6); } } /* ========================================================================== Výběr čísel přes celou plochu numbers.html je jediná stránka, která se promítá celé třídě: učitel na ní losuje a děti čísla opisují ze zadní lavice. Sloupec široký jako text (--stack-w) tu proto překáží. Ve Full HD z něj zbývalo přes tisíc pixelů nevyužité šířky a čtyři sta pixelů prázdna pod balíčkem, zatímco historie tahů i zbytek balíčku byly sotva čitelné. Od 1200 px se tedy rozhraní roztáhne přes celou plochu a všechno, co se čte z dálky (tažené číslo, žetony historie, karty balíčku), roste rychleji než --ui. Zbytek webu se nemění, pravidla visí na třídě `page-picker`, kterou nese jenom téhle stránky. ========================================================================== */ @media (min-width: 1200px) and (min-height: 700px) { /* Rám stránky přestává být sloupcem na čtení. Strop drží ultraširoké monitory u rozumné šířky; na projekci 16:9 se neuplatní, tam vyjde širší než okno a rozhoduje --gutter. */ .page-picker .app { max-width: calc(1800px * var(--ui)); } .page-picker .picker, .page-picker .page-links { max-width: none; } /* Odsazení shora se počítá z výšky okna a to je tu vzácnější než šířka: na projektoru s 720 řádky ukrajovalo výchozích 4vh z místa, které pak chybělo poslední řadě balíčku. */ .page-picker .app-main--top { padding-top: clamp(8px, 2.4vh, calc(32px * var(--ui))); gap: clamp(10px, 2vh, calc(24px * var(--ui))); } /* Volná výška se rozdělí mezi čtyři bloky místo aby se nastřádala pod posledním. Bloky si tak drží odstup i na vysokém okně a spodní řada balíčku nekončí v půlce plátna. */ .page-picker .picker { flex: 1; justify-content: space-between; /* Výška žetonu historie se odvíjí od výšky okna, ne jenom od --ui: na projektoru s 768 řádky by dvě řady žetonů v plné velikosti protlačily balíček pod spodní hranu. Míra stojí v proměnné, protože ji potřebuje i spodní mez výšky celého bloku (dvě řady i s mezerou). */ --chip-h: clamp(calc(44px * var(--ui)), 6.4vh, calc(68px * var(--ui))); --chip-gap: calc(8px * var(--ui)); } /* --------------------------------------------------------- tažené číslo */ /* Strop --draw-max je počítaný na sloupec 760 px. Přes celou šířku unese číslo o polovinu víc, a protože se násobí tentýž strop, drží si stránka stejné stupně růstu jako zbytek webu. Prostřední hodnota clampu je v procentech šířky okna, aby se číslo do stránky vešlo i mezi zlomy. */ .page-picker .draw-stage { padding: clamp(16px, 3vh, calc(46px * var(--ui))) clamp(24px, 3vw, calc(52px * var(--ui))); } .page-picker .draw-number { font-size: clamp(3.5rem, min(13vw, 30vh), calc(var(--draw-max, 6rem) * 1.7)); } .page-picker .draw-order { font-size: 0.875rem; } .page-picker .draw-hint { font-size: clamp(1rem, 2.2vh, 1.25rem); max-width: calc(720px * var(--ui)); } /* ---------------------------------------------------------- konzole */ .page-picker .console { padding: calc(10px * var(--ui)) calc(12px * var(--ui)); } .page-picker .console .btn-roll { min-width: calc(220px * var(--ui)); min-height: 3rem; font-size: 1.125rem; } .page-picker .joker-chip { font-size: 1.0625rem; padding: calc(11px * var(--ui)) calc(14px * var(--ui)); } /* ------------------------------------------------- nadpisy obou sekcí */ .page-picker .section-head { margin-bottom: calc(12px * var(--ui)); padding-bottom: calc(10px * var(--ui)); } .page-picker .section-title { font-size: 0.8125rem; } .page-picker .section-meta { font-size: 1rem; } /* ------------------------------------------------------------ historie */ /* Mřížka místo řádku: žetony se roztáhnou přes celou šířku, místo aby se kupily vlevo. Sloupců je čtrnáct jako karet v balíčku pod tím, takže obě řady stojí ve stejném rastru a všech 25 tahů vyjde na dvě řady. Spodní mez výšky drží obě řady od začátku hry. Bez ní by patnáctý žeton zalomil řádek a posunul celý balíček pod sebou o řadu níž, což je přesně ten druh poskočení, kterému se konzole vyhýbá i nad hracím polem. */ .page-picker .chips { display: grid; grid-template-columns: repeat(14, 1fr); gap: var(--chip-gap); min-height: calc(2 * var(--chip-h) + var(--chip-gap)); align-content: start; } .page-picker .chips-empty { grid-column: 1 / -1; font-size: 1rem; } /* Žeton se v mřížce roztahuje na celý sloupec, vlastní spodní mez šířky už jenom překáží. */ .page-picker .chip { min-width: 0; height: var(--chip-h); gap: calc(6px * var(--ui)); border-radius: var(--r-md); font-size: clamp(1.2rem, 2.6vh, 1.75rem); } .page-picker .chip-order { font-size: 0.75rem; } .page-picker .chip .icon { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); } /* ------------------------------------------------------ zbytek balíčku */ /* Čtrnáct karet přes celou šířku: hodnota se čte z dálky, tečky ukazují, kolik kusů ještě v balíčku zbývá, takže musí být vidět taky. */ .page-picker .deck-rest { gap: calc(8px * var(--ui)); } .page-picker .deck-slot { gap: clamp(3px, 0.7vh, calc(7px * var(--ui))); padding: clamp(6px, 1.3vh, calc(13px * var(--ui))) calc(6px * var(--ui)); border-radius: var(--r-md); } .page-picker .deck-slot-val { font-size: clamp(1.05rem, 2.2vh, 1.5rem); } .page-picker .deck-slot .icon { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); } .page-picker .deck-slot-pips { gap: calc(4px * var(--ui)); } .page-picker .deck-pip { width: calc(7px * var(--ui)); height: calc(7px * var(--ui)); } } /* Konzole nad polem: rezerva ve výšce pro pole a rezerva v šířce pro hlavní tlačítko. Obojí drží konzoli pořád stejně vysokou, aby pod ní nesjíždělo hrací pole. */ @media (min-width: 701px) { /* Na nízkém okně vyjde hrací pole malé, konzole se řídí jeho šířkou a ovládání se do prvního řádku nevejde. Odhad --chrome z base.css počítá s jedním řádkem a spodní řada políček pak končila pár pixelů pod oknem. Rezerva to srovnává. Je malá schválně: druhý řádek konzole měří asi padesát pixelů, ale odhad má vlastní zásobu a chybělo z něj právě tolik, kolik se tu přidává. Na telefonu má vlastní míru (viz zlom 700 px), skupina a duel taky (druhý řádek mají napevno, viz lobby.css). */ body[data-mode]:not([data-mode="skupina"]):not([data-mode="duel"]) { --chrome: calc(170px * var(--ui) + 2 * var(--rail-pad-y) + var(--consent-space, 0px) + var(--lang-hint-space, 0px)); } /* Hlavní tlačítko si drží šířku na svůj nejdelší text. Za partii jich vystřídá několik („Start“, „Táhnout“, „Vlož do pole“, „Použij žolíka“) a každý je jinak široký. Samo o sobě by to vadit nemuselo, tlačítko roste doleva do prázdna, jenže o zalomení konzole rozhoduje součet šířek: u užší konzole (nízké okno s malým polem, nebo tři počítadla v těžké hře) se delší text do řádku přestal vejít, ovládání spadlo o řádek níž a hrací pole s ním sjelo o padesát pixelů dolů. A pak zase nahoru, jak se text vrátil. S rezervou na nejdelší text je zalomení pořád stejné, ať se v tlačítku píše cokoli: buď se vejde vždycky, nebo nikdy. Míra vychází z nejširšího z těch textů ve všech třech jazycích (anglické „Back tomorrow“ na denní výzvě). Na telefonu se rezerva neuplatní, tam tlačítko dostává celý zbytek řádku (viz zlom na 700 px). */ .console .btn-roll { min-width: calc(150px * var(--ui)); } /* Ve skupině a v duelu jsou texty delší („Vytáhnout číslo“, „Nečekat, další číslo“, anglické „Don’t wait, next number“), rezerva je tedy větší. */ .lobby-game .console-actions > .btn-roll { min-width: calc(200px * var(--ui)); } } /* Instalační tlačítko v liště (js/install.js): plný .btn je hlavní tlačítko stránky a mezi drobnými pilulkami lišty (btn--ghost, přepínač režimu) stál o dvě čísla větší. Tady se sráží na jejich rozměry; barvy CTA zůstávají. Pod zlomem se neuplatní: tam tlačítko srovnávají řádky nabídky níž. */ @media (min-width: 861px) { .rail-group--install .btn { min-height: 0; padding: calc(6px * var(--ui)) calc(13px * var(--ui)); border-radius: var(--r-pill); font-size: 0.78125rem; line-height: 1.2; } } /* Sbalená lišta: odkaz a přepínač motivů se stěhují do hamburgeru. Zlom je na 860 px, tam se přepínač se třemi názvy motivů přestává vejít vedle drobečků. Markup skládá js/nav.js, tady se jen překlápí z řady v liště na rozbalovací panel. Dřív se na téhle šířce jen schovávalo lomítko a zmenšovalo odsazení tlačítek. To už není potřeba: v panelu pod sebou má přepínač místa dost. */ @media (max-width: 860px) { /* Burger je vyšší než spouštěč motivů, rezerva výšky z components.css musí růst s ním, jinak lišta po startu JS povyskočí (CLS). */ .rail-actions { min-height: calc(38px * var(--ui)); } .rail-burger { display: inline-flex; align-items: center; justify-content: center; width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); border: var(--hairline) solid var(--border-heavy); border-radius: var(--r-btn); background-color: transparent; color: var(--text-muted); font-size: 1.125rem; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); } .rail-burger .icon { width: 1.15em; height: 1.15em; } .rail-burger:hover { background-color: var(--surface-2); color: var(--text); } .rail-burger[aria-expanded="true"] { background-color: var(--surface-2); border-color: var(--accent); color: var(--text); } .rail-burger:active { transform: scale(0.94); } /* Tři čáry se při otevření složí do křížku: krajní sjedou doprostřed a otočí se, prostřední se vytratí. Kreslí je js/nav.js jako samostatné cesty (ne ikona ze spritu), právě aby šly hýbat každá zvlášť. Posun je v jednotkách viewBoxu (0 0 24 24), ne v pixelech obrazovky: transform-box: view-box počítá i transform-origin ze středu kresby, takže se ikona chová stejně při každé velikosti písma. Na pořadí funkcí záleží. Sepsané zprava doleva: nejdřív translateY doveze čáru na střed, teprve pak ji rotate otočí kolem něj. Obráceně (translateY rotate) se čára otáčí ještě nahoře, opíše kus oblouku a křížek dosedne vedle středu tlačítka. */ .rail-burger-line { transform-box: view-box; transform-origin: center; /* Křivka schválně mírnější než u panelu: strmý dojezd (0.16, 1, 0.3, 1) má čáry po 40 ms hotové z pěti šestin a překlopení pak vypadá, jako by ikona jen skočila. Tady se otáčení rozloží po celou dobu. */ transition: transform 260ms cubic-bezier(0.33, 0.8, 0.35, 1), opacity 150ms ease; } .rail-burger[aria-expanded="true"] .rail-burger-line--top { transform: rotate(45deg) translateY(5.2px); } .rail-burger[aria-expanded="true"] .rail-burger-line--mid { opacity: 0; transform: scaleX(0.3); } .rail-burger[aria-expanded="true"] .rail-burger-line--bot { transform: rotate(-45deg) translateY(-5.2px); } /* Panel je plátno přes celou šířku okna, ne bublina u pravé hrany, položek bude přibývat a v úzké bublině by se lámaly názvy. Do stran přetéká o --gutter, stejně jako podklad lišty, takže lícuje s oknem. Kotví se v .rail (position: sticky), ne v .rail-actions. z-index nad lištou (20), ať panel nepřekryje nic, co se pod lištu přilepí. */ .rail-panel { /* Tempo otevírání a zavírání, ať jde přidat další prvek do stejného rytmu. Zavírá se rychleji než otevírá: rozbalení má být vidět, zavření nemá držet ruku na tlačítku. */ --rail-in: 260ms; --rail-out: 170ms; /* Otevírá se s dojezdem (rychle vyjede, doměkka dosedne), zavírá naopak s rozjezdem, ať nabídka na konci zmizí a nedodrncává. */ --rail-ease: cubic-bezier(0.22, 0.72, 0.3, 1); --rail-ease-close: cubic-bezier(0.4, 0, 1, 1); position: absolute; top: 100%; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); z-index: 30; flex-direction: column; align-items: stretch; gap: 0; /* Až sekcí přibude, nesmí poslední skončit pod dolní hranou okna, zbytek nabídky se roluje uvnitř panelu, stránka pod ním stojí. Strop je v dvh, ne v procentech: procenta by se počítala z výšky lišty, která je auto, takže by z max-height nezbylo nic. Přesnou míru (okno minus lišta) dopočítá js/nav.js, tohle je záloha, než se otevře. */ max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3) var(--gutter) var(--sp-4); background-color: var(--surface); border-bottom: var(--hairline) solid var(--border); box-shadow: var(--shadow-lg); } /* Otevírání a zavírání. Panel sjede zpod lišty a prolne se, zavírá stejnou cestou zpátky, jen svižněji. Hýbe se jen průhledností a posunem, nic jiného. Obojí umí prohlížeč složit na grafické kartě, takže panel přes celou obrazovku běží plynule i na telefonu; výřez (clip-path) nebo výška by se překreslovaly každý snímek a nabídka by trhala. Ze stejného důvodu se sekce uvnitř nerozjíždí po sobě: jedna vrstva místo pěti. Zavřený panel drží visibility, ne display: z display: none se nedá přejít, a se samotnou průhledností by v panelu tabulátor dál chytal odkazy. Visibility se proto přepne skokem až po doběhnutí zavírání. */ .rail-panel[data-open="false"] { visibility: hidden; opacity: 0; transform: translateY(calc(-10px * var(--ui))); transition: transform var(--rail-out) var(--rail-ease-close), opacity calc(var(--rail-out) - 40ms) ease, visibility 0s linear var(--rail-out); } .rail-panel[data-open="true"] { visibility: visible; opacity: 1; transform: none; transition: transform var(--rail-in) var(--rail-ease), opacity 150ms ease, visibility 0s; } /* Sekce nabídky: nadpis + položky pod sebou, mezi sekcemi vlásečnice. */ .rail-group { flex-direction: column; align-items: stretch; gap: var(--sp-1); } /* Tady se příznaky šířky obrací: seznam stránek se rozkryje, rychlý odkaz z lišty mizí, protože stejnou stránku nabízí i seznam. */ .rail-panel [data-rail-narrow] { display: flex; } .rail-panel [data-rail-wide] { display: none; } .rail-group + .rail-group { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--hairline) solid var(--border); } /* Instalace aplikace: v řadě lišty stojí vpravo (order v components.css), v nabídce se vrací na začátek, je to jediná akce, kterou návštěvník nezná, a pod seznamem stránek by ji nikdo nenašel. */ .rail-group--install { order: 0; } .rail-group-label { display: block; padding-inline: calc(10px * var(--ui)); font-family: var(--label-font); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .rail-group-items { flex-direction: column; align-items: stretch; gap: 2px; } /* Položka nabídky je řádek, ne tlačítko: bez rámečku a bez oblouku kolem dokola, aktivní stav si kreslí motiv sám. Rámečky by v seznamu dělaly mřížku v mřížce a s každou další položkou by to houstlo. Tenhle soubor se načítá poslední, takže přebije tvary tlačítek z components.css. */ .rail-panel .btn, .rail-panel .theme-trigger, .rail-panel .theme-option { width: 100%; min-height: 0; justify-content: flex-start; padding: calc(11px * var(--ui)) calc(10px * var(--ui)); border-color: transparent; border-radius: var(--r-sm); background-color: transparent; color: var(--text); font-size: 0.9375rem; /* řádek nabídky nemá vyvýšení, v seznamu by ze stínů byla schodiště */ box-shadow: none; } .rail-panel .btn:hover:not(:disabled), .rail-panel .theme-trigger:hover, .rail-panel .theme-option:hover { background-color: var(--surface-2); border-color: transparent; color: var(--text); } /* Zvolená položka si drží zvýraznění i v panelu, reset výš ho bere všem. */ .rail-panel .theme-option[aria-selected="true"] { background-color: var(--surface-2); } /* Stránka, na které stojíš, je v seznamu vidět, jinak by nabídka po otevření vypadala všude stejně a člověk by v ní ztratil orientaci. */ .rail-panel [aria-current="page"] { background-color: var(--surface-2); } .rail-panel [aria-current="page"] .icon { color: var(--accent); } /* Vypínač tmavého režimu je v nabídce řádek jako ostatní položky: ikona režimu, popisek „Motiv“ s podtitulkem platného režimu a dráha s jezdcem zarovnaná k pravé hraně. Ikonu s textem kreslí jen tenhle zlom, v liště jsou schované (components.css). */ :root .rail-panel .theme-toggle { width: 100%; justify-content: flex-start; /* stejná mezera ikona–text jako u položek .btn v nabídce */ gap: calc(7px * var(--ui)); padding: calc(8px * var(--ui)) calc(10px * var(--ui)); border-radius: var(--r-sm); font-family: var(--font-ui); text-align: left; transition: background-color var(--t-fast); } :root .rail-panel .theme-toggle:hover { background-color: var(--surface-2); } /* Řádek svítí celý, dráha ani jezdec uvnitř už okraj nepřebarvují. */ :root .rail-panel .theme-toggle:hover .theme-track, :root .rail-panel .theme-toggle:hover .theme-thumb { border-color: var(--border-strong); } :root .rail-panel .theme-item-icon { display: grid; place-items: center; } /* Obě ikony režimu leží přes sebe, vidět je ta platná (jako na dráze). */ :root .rail-panel .theme-item-icon .icon { grid-area: 1 / 1; width: 1.15em; height: 1.15em; color: var(--text-muted); font-size: 0.9375rem; transition: opacity var(--t-fast); } :root .rail-panel .theme-toggle[aria-checked="true"] .theme-mode-sun, :root .rail-panel .theme-toggle[aria-checked="false"] .theme-mode-moon { opacity: 0; } :root .rail-panel .theme-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } :root .rail-panel .theme-label { color: var(--text); font-size: 0.9375rem; line-height: 1.2; } :root .rail-panel .theme-state { color: var(--text-muted); font-size: 0.75rem; line-height: 1.2; } :root .rail-panel .theme-track { margin-left: auto; } :root .rail-panel .theme-menu { position: static; } :root .rail-panel .theme-trigger { display: flex; } :root .rail-panel .theme-caret { margin-left: auto; } :root .rail-panel .theme-list { position: static; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; margin-top: 2px; padding: 0; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; } :root .rail-panel .theme-list[data-open="false"] { display: none; } /* Odsazení drží seznam pod spouštěčem jako jeho podřízenou úroveň. */ :root .rail-panel .theme-option { padding-left: calc(26px * var(--ui)); } /* Odznak účtu je v panelu taky jen řádek. Přezdívka se smí rozvinout, tady na ni je celá šířka okna, na rozdíl od lišty. */ .rail-panel .account-slot { display: block; } :root .rail-panel .account-chip { width: 100%; justify-content: flex-start; padding: calc(8px * var(--ui)) calc(10px * var(--ui)); border-color: transparent; border-radius: var(--r-sm); background-color: transparent; color: var(--text); font-size: 0.9375rem; box-shadow: none; opacity: 1; } :root .rail-panel .account-chip:hover { background-color: var(--surface-2); border-color: transparent; opacity: 1; } .rail-panel .account-name { max-width: none; } /* Šipka odznaku míří v nabídce doprava, rozbalovat už není co. */ .rail-panel .account-chip > .icon { margin-left: auto; } } /* konzole se na úzkém displeji zalomí do dvou řádků, pole zůstává nedotčené */ @media (max-width: 700px) { /* O dva řádky konzole roste --chrome jen tam, kde se konzole opravdu láme, tabulka zůstává na jednom řádku a nechává poli víc místa. */ body[data-mode] { --chrome: calc(198px + 2 * var(--rail-pad-y)); } /* Skupina a duel mají v konzoli o řádek víc: hláška o průběhu tu stojí samostatně (viz .lobby-turn níž), aby při každé změně textu neměnila výšku konzole. O ten řádek je pro pole míň místa. */ body[data-mode="skupina"], body[data-mode="duel"] { --chrome: calc(222px + 2 * var(--rail-pad-y)); } /* Zalomení konzole řeší board.css na každé šířce; tady se jen dorovnají proporce prvků, které se do jednoho řádku na telefonu nevejdou. Dlaždice s číslem se roztáhne do místa, které po počítadlech zbylo: ta mají pevnou šířku, takže dlaždice vyjde po celou partii stejně široká a číslo v ní stojí pořád na stejném místě. */ .console-draw { flex: 1 1 0; width: auto; min-width: 0; } .console-stats, [data-mode] .console-stats { flex: 0 0 auto; } /* Vlastní řádek pro hlášku o průběhu. V řádku s počítadly by jí na telefonu zbylo pár desítek pixelů a z každé věty by byly tři usekané řádky, které navíc při každém tahu měnily výšku konzole i polohu hracího pole. Takhle má celou šířku, vejde se na jeden řádek a konzole má pořád stejnou výšku. */ .lobby-turn { flex: 1 1 100%; } /* Na úzkém displeji se tlačítko na tažení vedle odznaků nevejde, jakmile mu text povyroste („Nečekat, další číslo“). Zalomilo by se samo, jenže jen někdy, a konzole by tím při každé změně textu povyskočila o řádek i s hracím polem pod sebou. Vlastní řádek dostane rovnou: konzole má pak stejnou výšku pořád a tlačítko se navíc líp trefuje palcem. */ .lobby-game .console-actions > .btn-roll { flex: 1 1 100%; margin-left: 0; } /* Do druhého řádku se ovládání láme jen na stránkách hry proti balíčku (body[data-mode]), tam konzole nese ještě vytažené číslo a tři věci se vedle sebe nevejdou. Tabulka má v konzoli jen dva údaje, takže Vymazat zůstává v řádku napravo od nich. */ [data-mode] .console-actions { flex: 1 1 100%; } .btn-roll { flex: 1; } .field { flex: 1; padding-left: 0; } .field input, .field .select-menu { flex: 1; width: auto; } } /* Sestava skupiny se vedle pole vejde jenom na širokém displeji. Zlom je schválně vysoko: níž by kvůli ní muselo couvnout hrací pole, a to má přednost před přehledem, jak si vedou ostatní. */ @media (max-width: 1080px) { .lobby-play { grid-template-columns: minmax(0, 1fr); justify-items: center; } .lobby-side { width: 100%; max-width: max(var(--board-w), calc(320px * var(--ui))); } } @media (max-width: 460px) { body[data-mode] { --chrome: calc(206px + 2 * var(--rail-pad-y)); } /* Řádek s hláškou o průběhu navíc, stejně jako na zlomu 700 px. */ body[data-mode="skupina"], body[data-mode="duel"] { --chrome: calc(230px + 2 * var(--rail-pad-y)); } .rail { gap: var(--sp-2); } .crumbs { font-size: 0.75rem; } .crumbs a, .crumbs .crumb-current { padding: 4px 6px; } .stat { padding: 2px 10px; } .draw-stage { flex-direction: column-reverse; align-items: flex-start; } .dialog-actions .btn { flex-basis: 100%; } } /* Pod tuhle šířku už karta statistiky ve dvou šestinách sloupce neuživí ani nadpis, mřížka se překlápí na dva stejné sloupce. Hlavní karta s nejvyšším skóre drží celou řadu i tady. Selektory musí být specifičtější než .stat-card:nth-child v account.css. */ @media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid .stat-card, .stats-grid--six .stat-card:nth-child(n+2), .stats-grid--seven .stat-card:nth-child(n+2) { grid-column: auto; } .stats-grid .stat-card:first-child { grid-column: span 2; } /* Šest karet: po hlavní kartě zbývá lichý počet, poslední se roztáhne přes obě poloviny, ať po ní nezůstane prázdné pole. */ .stats-grid--six .stat-card:last-child { grid-column: span 2; } } /* Účet a souhlas na úzkém displeji. Ikona vedle textu ubírá řádku šířku, kterou souvislý text potřebuje víc, proto se lišta souhlasu srovná do jednoho sloupce a řádek profilu do dvou řádků. */ @media (max-width: 560px) { /* Karta se láme do jednoho sloupce, tlačítka pod sebe, takže je vyšší a rezerva místa pod obsahem s ní (viz :root[data-consent="ask"] v account.css). */ :root[data-consent="ask"] { --consent-space: 370px; } /* Nabídka překladu se láme na dva řádky (viz :root[data-lang-hint] v components.css). */ :root[data-lang-hint] { --lang-hint-space: 70px; } .consent { padding: calc(10px * var(--ui)); } .consent-card { grid-template-columns: 1fr; gap: var(--sp-3); } .consent-actions .btn { flex-basis: 100%; } .profile-row { grid-template-columns: auto 1fr; } .profile-actions { grid-column: 1 / -1; justify-content: flex-start; } .data-row .btn { flex: 1 1 100%; } } /* Žebříček na úzkém displeji zůstává v jednom řádku: pořadí vlevo, body vpravo. Dřív se body odsouvaly pod jméno, protože se prý vedle sebe nevejdou, nevešly se ale jen kvůli dlouhé přezdívce, a ta se dá useknout (`.board-nick`). Tabulka pořadí bez pravého sloupce se čte mnohem hůř: skóre je to jediné, co v ní hráč porovnává, a rozházené po levé hraně se porovnávat nedá. Místo přeskládání se tedy jen ubere na velikostech. */ @media (max-width: 480px) { .tab { font-size: 0.75rem; padding: calc(7px * var(--ui)) calc(6px * var(--ui)); } .board-row { gap: var(--sp-2); padding: calc(10px * var(--ui)) calc(10px * var(--ui)); } .board-rank { min-width: calc(20px * var(--ui)); font-size: 0.875rem; } .board-name { font-size: 0.875rem; } .board-meta { font-size: 0.6875rem; } .board-score { font-size: 1.1875rem; } .net-bar .btn { flex: 1 1 100%; } } /* Na telefonu se do nabídky překladu vejde na řádek jen kousek věty, text i tlačítko jdou pod sebe (viz :root[data-lang-hint] v components.css). Zlom je vlastní: mez leží mezi šířkami telefonů, ne u ostatních zlomů. */ @media (max-width: 430px) { :root[data-lang-hint] { --lang-hint-space: 89px; } } @media (max-width: 380px) { /* Na nejužších displejích se text v kartě souhlasu láme o řádek víc. */ :root[data-consent="ask"] { --consent-space: 395px; } .value-grid { grid-template-columns: repeat(5, 1fr); } } /* naležato na nízkém displeji jde ovládání vedle pole */ @media (orientation: landscape) and (max-height: 620px) { body, body.page-hard { --cell: min(9.5vw, calc((100vh - 64px - 2 * var(--rail-pad-y)) / 5.55)); --cell: min(9.5vw, calc((100svh - 64px - 2 * var(--rail-pad-y)) / 5.55)); } .app-main.page-board { flex-direction: row; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 22px); } .page-board .console { flex-direction: column; align-items: stretch; width: min(260px, 32vw); max-width: none; flex: none; row-gap: 7px; } .page-board .console-stats { flex: none; } /* Konzole je tu sloupec, ne řádek. Pravidla z board.css, která v řádku drží tlačítko u pravé hrany a nechávají ovládání růst do prázdna, by tady roztáhla blok na výšku a hlavnímu tlačítku vzala šířku. */ .page-board .console-actions, .page-board .console-actions:has(> .btn-roll) { flex: none; flex-direction: column; align-items: stretch; min-width: 0; margin-left: 0; } .page-board .console-actions > .btn-roll { margin-left: 0; } /* Ve sloupci si dlaždice bere šířku konzole, pevná šířka z board.css tu nemá co držet. Číslo zůstává u pravé hrany, aby neuskakovalo podle délky popisku vlevo. */ .page-board .console-draw { width: auto; min-width: 0; } /* Hláška o průběhu je ve sloupci samostatný řádek, ne pružný pruh vedle počítadel: se základem 0 by jí ve svislém směru nezbyla žádná výška a nebyla by vidět. `min-width: 0` k tomu patří, jinak by nezalomitelný text roztáhl celý sloupec konzole přes půl obrazovky. */ .page-board .lobby-turn { flex: none; min-width: 0; max-width: 100%; } .page-board .board-wrap { flex: none; } /* Konzole a pole tu stojí vedle sebe v řádku, na třetí sloupec ani na druhý řádek už místo není: výška buňky se počítá z celé výšky okna. Řádek odkazů se proto naležato na nízkém displeji nekreslí, z Tabulky zůstává cesta dál drobečkem a nabídkou. */ .page-board .page-links { display: none; } /* Skupina a duel mají pole i sestavu ve vlastním oddílu pod konzolí, takže se ovládání vedle pole stejně nedostane a úzký sloupec by tu jen bral šířku. Konzole tu proto zůstává řádkem přes celou šířku jako na výšku: dlaždice s číslem se roztáhne do zbylého místa po počítadlech, ovládání má svůj řádek a hláška o průběhu taky. */ .lobby-game .console { flex-direction: row; align-items: center; width: 100%; max-width: max(var(--board-w), calc(320px * var(--ui))); } .lobby-game .console-draw { flex: 1 1 0; width: auto; min-width: 0; } .lobby-game .console-actions, .lobby-game .console-actions:has(> .btn-roll) { flex: 1 1 100%; flex-direction: row; align-items: center; } .lobby-game .console-actions > .btn-roll { margin-left: auto; } .lobby-game .lobby-turn { flex: 1 1 100%; } } @media print { .rail, .console, .toasts, .consent { display: none; } } @media (prefers-reduced-motion: reduce) { /* ::placeholder a ::marker jsou tu ze stejného důvodu jako v pravidle pro přepnutí motivu v base.css: do `*` nespadají a přechod dostávají zvlášť, takže by je zdejší ztišení jinak minulo. */ *, *::before, *::after, *::placeholder, *::marker { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Zkrácená doba sama nestačí: hamburgerová nabídka čeká s přepnutím visibility na prodlevu, ta by tu zůstala celá. */ .rail-panel { transition-delay: 0s !important; } /* Prolnutí stránek při prokliku (base.css) jede na pseudoprvcích ::view-transition-*, které do `*` výš nespadají. Odhlásí se proto celé a prohlížeč naviguje střihem; druhé pravidlo je pojistka pro prohlížeč, který @view-transition uvnitř @media ještě nebere. */ @view-transition { navigation: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }