/* ========================================================= LOUKA RUN – styly UI ========================================================= */ /* Baloo 2 hostované z vlastního webu (proměnná tloušťka 400–800) */ @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("assets/fonts/baloo2-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("assets/fonts/baloo2-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Caveat (proměnná 400–700) – rukopis ošetřovatelů v deníčku. Stahuje se až ve chvíli, kdy se deníček poprvé otevře: nikde jinde ve hře se nepoužívá a unicode-range s font-display: swap to zařídí samy. */ @font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/caveat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/caveat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Bezpečné okraje displeje (výřez, zaoblené rohy) a „herní“ vw/vh. Při vynucené šířce (viz níže) je celá hra otočená o 90°, takže se výřezy i osy viewportu musí otočit s ní – proto proměnné. */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --gvw: 1vw; /* 1 % šířky hry */ --gvh: 1vh; /* 1 % výšky hry */ /* značka – stejná jména jako promo/znacka/tokeny.css */ --lr-sky: #8ed4f7; --lr-gold-1: #ffe08a; --lr-gold-2: #ffc94a; --lr-gold-dark: #d89b26; --lr-green-1: #b0e89a; --lr-green-2: #7ac95e; --lr-green-dark: #55a13c; --lr-ink: #4a3220; --lr-ink-soft: #5a4a38; --lr-cream-1: #fffdf5; --lr-cream-2: #f5ecd8; /* pohyb – jeden slovník, ať se menu chová jednotně */ --dur-fast: .12s; --dur-base: .28s; --dur-slow: .55s; --ease-out: cubic-bezier(.2, .9, .3, 1); --ease-back: cubic-bezier(.2, .9, .3, 1.2); /* parallax – přepisuje js/game.js podle myši (jen desktop) */ --px: 0; --py: 0; } /* ========================================================= Vynucená šířka – mobil, kterému nejde otočit displej (zámek otočení na iPhonu, in-app prohlížeče…): hru otočíme o 90° sami. Třídu .force-landscape nasazuje js/game.js, dokud je zařízení na výšku. ========================================================= */ html.force-landscape { --safe-top: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-left, 0px); --safe-left: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-bottom, 0px); --gvw: 1vh; --gvh: 1vw; } /* dvh/dvw počítá s dynamickými lištami Safari; u custom properties nejde fallback udělat dvojí deklarací, proto @supports */ @supports (width: 1dvh) { html.force-landscape { --gvw: 1dvh; --gvh: 1dvw; } } html.force-landscape body { position: fixed; top: 0; left: 0; width: 100vh; width: 100dvh; /* dvh: ať se hra nechová divně pod lištami Safari */ height: 100vw; height: 100dvw; transform: rotate(90deg) translateY(-100%); transform-origin: top left; } /* hra už je naležato – výzva „otoč telefon“ není potřeba */ html.force-landscape #rotate-overlay { display: none; } /* ========================================================= PEVNÁ VELIKOST PÍSMA – nejdůležitější řádek v tomhle souboru Bez explicitní velikosti na je 1rem = „výchozí velikost písma prohlížeče“, a tu Android zvětšuje podle systémového nastavení (Nastavení → Displej → Velikost písma). WebView to dělá tak, že přenásobí default_font_size – tedy všechno v rem a em, ale NE délky v px. Rozvržení hry se tím rozjede: písmo naroste o 15–30 %, obálky v px zůstanou, obsah se nevejde a spodní tlačítka („Zvířátka & obchod“, koupit zvířátko) zmizí pod okrajem. Přesně to je na snímcích od hráčů. Hra je na šířku, naskládaná na pixel a s vlastním škálováním podle velikosti displeje (--gvw/--gvh) – systémové zvětšení písma tu nemá co zlepšit, jen co rozbít. Proto je 1rem přišpendlené na 16 px a text-size-adjust vypíná dorovnávání písma v Chrome. Nativní pojistka je setTextZoom(100) v MainActivity.java. ========================================================= */ html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { height: 100%; overflow: hidden; font-family: "Baloo 2", system-ui, sans-serif; background: #8ed4f7; touch-action: none; user-select: none; -webkit-user-select: none; } #game { position: fixed; inset: 0; display: block; } /* ---------- obecné prvky ---------- */ .btn { font-family: inherit; font-weight: 800; font-size: 1.05rem; color: #4a3220; background: linear-gradient(180deg, #ffe08a, #ffc94a); border: none; border-radius: 999px; padding: 12px 28px; cursor: pointer; box-shadow: 0 4px 0 #d89b26, 0 8px 18px rgba(0,0,0,0.18); transition: transform .08s, box-shadow .08s; } .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d89b26, 0 4px 10px rgba(0,0,0,0.15); } .btn.big { font-size: 1.5rem; padding: 16px 44px; } .btn.small { font-size: 0.95rem; padding: 9px 20px; } .btn.tiny { font-size: 0.85rem; padding: 7px 16px; box-shadow: 0 3px 0 #d89b26, 0 5px 12px rgba(0,0,0,0.15); } .btn.round { width: 46px; height: 46px; padding: 0; /* kolečko je v px, ale písmo v rem – při systémovém zvětšení písma na Androidu glyf přerostl tlačítko, proto strop v px */ font-size: min(1.3rem, 21px); line-height: 1; text-align: center; display: inline-grid; place-items: center; } .btn.buy { background: linear-gradient(180deg, #b0e89a, #7ac95e); box-shadow: 0 4px 0 #55a13c, 0 8px 18px rgba(0,0,0,0.18); color: #234a12; } .btn.cant { filter: grayscale(.55) brightness(.92); } .btn:disabled { cursor: default; } a.btn { text-decoration: none; display: inline-block; } .privacy-link { color: rgba(255,255,255,0.9); } .hud-chip { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.85); border-radius: 999px; padding: 6px 16px; font-weight: 800; color: #4a3220; box-shadow: 0 3px 10px rgba(0,0,0,0.12); } .hud-chip.lucky { background: rgba(214, 245, 190, 0.92); color: #2c5e1e; animation: pulse .6s infinite alternate; } /* ---------- HUD ---------- */ #hud { position: fixed; top: var(--safe-top); left: 0; right: 0; display: none; justify-content: space-between; align-items: flex-start; padding: 14px max(16px, var(--safe-right)) 14px max(16px, var(--safe-left)); pointer-events: none; } #hud.visible { display: flex; } #hud .hud-left, #hud .hud-right { display: flex; gap: 10px; align-items: center; } #hud button { pointer-events: auto; } /* DIVADELNÍ REŽIM – při Zvířecím koncertu jdou světla v sále dolů. Ztlumí se jen ukazatele (energie, metry, mince, pauza); tlačítko „Pokračovat" je uvnitř #hud taky, a to musí zůstat plné, protože je to jediná cesta dál. Mění se výhradně opacity, takže se kvůli tomu nepřepočítává rozvržení. */ #hud .hud-left, #hud .hud-center, #hud .hud-right { transition: opacity .45s ease; } #hud.stage .hud-left, #hud.stage .hud-center, #hud.stage .hud-right { opacity: .3; } html.low-fx #hud .hud-left, html.low-fx #hud .hud-center, html.low-fx #hud .hud-right { transition: none; } #hud-energy { display: flex; align-items: center; gap: 8px; } .energy-icon { font-size: 1.4rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); } .energy-bar { width: min(calc(34 * var(--gvw)), 220px); height: 20px; background: rgba(255,255,255,0.5); border: 2px solid rgba(255,255,255,0.9); border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,0.15); } /* Úbytek se kreslí posunem, ne šířkou: změna width přepočítávala rozvržení při každém půlprocentu, transform jede jen na kompozitoru. Pruh odjíždí doleva pod ořez .energy-bar, takže konec zůstává kulatý (scaleX by ho zmáčkl do tenké elipsy). */ #hud-energy-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ffb24a, #f28c28); border-radius: 999px; transform: translateX(calc(var(--energy, 100) * 1% - 100%)); transition: transform .25s; will-change: transform; } #hud-energy-fill.low { background: linear-gradient(90deg, #ff7a5a, #e5533a); animation: pulse .6s infinite alternate; } @keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.35); } } #hud-dist { font-size: 1.6rem; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.2); } /* tlačítko Pokračovat – jediná cesta, jak rozjet zastavenou lekci (školu běhu i představení novinky na trase) */ #btn-tut-continue { position: fixed; left: 50%; bottom: max(28px, var(--safe-bottom)); transform: translateX(-50%); animation: contPulse 1.6s ease-in-out infinite; } @keyframes contPulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.07); } } /* ---------- obrazovky ---------- Obrazovky se nepřepínají display:none/flex (to nejde animovat), ale viditelností + průhledností. Skrytá obrazovka je pořád v rozvržení, ale `visibility: hidden` ji vyřadí z čteček i z trefování prstem a `pointer-events: none` pojistí, že přes ni jde ťuknout na hru. */ .screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: max(20px, var(--safe-top)) 20px max(20px, var(--safe-bottom)); overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.985); transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } /* Kořenová příčina většiny „nevidím na to" chyb: panel je položka svislého flexboxu, takže má výchozí `flex-shrink: 1`. Na nízkém displeji se stlačil pod svůj obsah, ten z něj vytekl ven – a protože přetečení bylo mimo panel, obrazovka o něm nevěděla a nešlo k němu ani odrolovat. Panel se prostě nesmí zmenšit; když se nevejde, ať radši obrazovka roluje. */ .screen > * { flex-shrink: 0; } .screen.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-back), visibility 0s; } /* nádech směru – odkud která obrazovka přilétá */ #screen-shop, #screen-ach { transform: translateX(4%) scale(0.99); } #screen-settings { transform: translateY(5%) scale(0.99); } #screen-over { transform: scale(0.94); } #screen-shop.visible, #screen-ach.visible, #screen-settings.visible, #screen-over.visible { transform: none; } /* ========================================================= HLAVNÍ MENU Základ = vysoký displej (desktop, tablet): vystředěný sloupec značka → deck → mise. Nízký displej (telefon na šířku) přebírá níže grid, kde levá polovina zůstane volná pro běžící zvířátko. ========================================================= */ #screen-menu { justify-content: safe center; gap: clamp(14px, calc(3 * var(--gvh)), 32px); /* Vodorovně se ořezává schválně: rozpínavý kroužek kolem „Běžet“ přesahuje mimo tlačítko a jinak by přidal posuvník přes celou obrazovku. Svisle se ale ořezávat nesmí – na hodně nízkém displeji by se jinak nedalo dostat k tlačítku „Běžet“. */ overflow-x: clip; overflow-y: auto; background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,0.16), transparent 62%), linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0) 32%), linear-gradient(0deg, rgba(0,0,0,0.20), rgba(0,0,0,0) 26%); } /* plynulé objevení menu po intru */ #screen-menu.fade-in { animation: menuFadeIn .7s ease both; } @keyframes menuFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ---------- ambientní pyl ---------- Osm bodů, jeden keyframe, nula JS – stejný recept jako světlušky u výzvy „otoč telefon“. Zhasíná v .low-fx i v šetrném režimu. */ .menu-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .menu-fx i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,240,190,0) 70%); opacity: 0; animation: pollenFloat 9s ease-in-out infinite; } .menu-fx i:nth-child(1) { left: 10%; top: 62%; animation-delay: 0s; animation-duration: 8.4s; } .menu-fx i:nth-child(2) { left: 26%; top: 78%; animation-delay: 1.7s; animation-duration: 10.2s; } .menu-fx i:nth-child(3) { left: 41%; top: 55%; animation-delay: 3.1s; animation-duration: 9.1s; } .menu-fx i:nth-child(4) { left: 58%; top: 82%; animation-delay: 0.9s; animation-duration: 11s; } .menu-fx i:nth-child(5) { left: 72%; top: 48%; animation-delay: 4.6s; animation-duration: 8.8s; } .menu-fx i:nth-child(6) { left: 86%; top: 70%; animation-delay: 2.4s; animation-duration: 10.6s; } .menu-fx i:nth-child(7) { left: 18%; top: 40%; animation-delay: 5.8s; animation-duration: 9.6s; } .menu-fx i:nth-child(8) { left: 64%; top: 34%; animation-delay: 7.1s; animation-duration: 12s; } @keyframes pollenFloat { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); } 12% { opacity: 0.85; } 70% { opacity: 0.5; } 100% { opacity: 0; transform: translate3d(26px, -120px, 0) scale(1.15); } } /* ---------- systémová lišta (nastavení + jazyk) ---------- Vždy absolutně v rohu, ať ji nemusí řešit ani sloupec, ani grid. */ .menu-rail { position: absolute; top: max(12px, var(--safe-top)); right: max(12px, var(--safe-right)); display: flex; align-items: center; gap: 8px; z-index: 5; } #btn-settings { background: rgba(255,255,255,0.28); border: 1px solid rgba(255,255,255,0.45); color: #fff; font-size: 1.25rem; text-shadow: 0 1px 4px rgba(0,0,0,0.35); box-shadow: 0 4px 14px rgba(0,0,0,0.18); backdrop-filter: blur(6px); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); } #btn-settings:hover { background: rgba(255,255,255,0.42); } #btn-settings:active { transform: rotate(50deg) scale(0.94); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } /* přepínač jazyka */ .lang-switch { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,0.28); border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .lang-btn { font-family: inherit; font-weight: 800; font-size: 0.82rem; color: #fff; background: transparent; border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: background .15s, color .15s, transform .1s; } .lang-btn:active { transform: scale(0.95); } .lang-btn.active { background: linear-gradient(180deg, #ffe08a, #ffc94a); color: #4a3220; text-shadow: none; box-shadow: 0 2px 0 #d89b26, 0 3px 8px rgba(0,0,0,0.2); } /* ---------- značka ---------- */ .menu-brand { text-align: center; /* parallax jede přes samostatnou vlastnost `translate`, aby se nepral s `transform`, kterým se prvky menu animují při nástupu */ translate: calc(var(--px) * 10px) calc(var(--py) * 7px); } .game-title { position: relative; font-size: clamp(3rem, calc(11 * var(--gvw)), 5.5rem); font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 4px 0 var(--lr-green-dark), 0 8px 0 rgba(0,0,0,0.15), 0 14px 30px rgba(0,0,0,0.3); line-height: 0.95; } .game-title span { display: inline-block; color: var(--lr-gold-1); text-shadow: 0 4px 0 var(--lr-gold-dark), 0 8px 0 rgba(0,0,0,0.15), 0 14px 30px rgba(0,0,0,0.3); animation: runFloat 3.6s ease-in-out infinite; } @keyframes runFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* světelný přejezd přes titul – jednou za sedm vteřin, jinak se neděje nic */ .game-title::after { content: ''; position: absolute; inset: -8% -6%; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.65) 50%, transparent 58%); background-size: 300% 100%; background-repeat: no-repeat; mix-blend-mode: overlay; animation: titleShine 7s ease-in-out 1.6s infinite; } @keyframes titleShine { 0% { background-position: 240% 0; } 16% { background-position: -90% 0; } 100% { background-position: -90% 0; } } .subtitle { margin-top: 10px; font-weight: 700; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.35); font-size: 1.05rem; } .subtitle a { color: var(--lr-gold-1); } .game-version { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 1px; color: rgba(255,255,255,0.55); } /* ---------- deck: karta postavy + hlavní akce ---------- Jediné místo, kam má v menu padnout oko. Tmavé sklo, aby bílý text držel kontrast nad jakoukoli oblohou (ta se během dne mění). */ .menu-deck { display: flex; flex-direction: column; gap: 12px; width: min(360px, calc(92 * var(--gvw))); padding: 14px 18px 16px; border-radius: 26px; color: #fff; background: linear-gradient(165deg, rgba(20,46,35,0.52), rgba(20,46,35,0.34)); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(10px) saturate(1.15); box-shadow: 0 18px 44px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28); translate: calc(var(--px) * -8px) calc(var(--py) * -5px); } .deck-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.16); } .deck-char { text-align: center; } .deck-char .charname { font-size: 1.3rem; font-weight: 800; letter-spacing: 0.01em; text-shadow: 0 2px 6px rgba(0,0,0,0.35); } .deck-char .perk { font-size: 0.88rem; opacity: 0.92; line-height: 1.3; } /* stat bary se sem půjčují z obchodu – jen se obarví na tmavé sklo */ .deck-stats { margin-top: 10px; } .deck-stats .stat-row span { color: rgba(255,255,255,0.8); } .deck-stats .stat-track { background: rgba(0,0,0,0.3); } .deck-actions { display: flex; flex-direction: column; gap: 10px; } .deck-actions .btn { width: 100%; } /* ---------- hlavní tlačítko ---------- Dýchání i rozpínavý kroužek jedou přes `scale`, ne `transform` – `.btn:active { transform: translateY(3px) }` tak zůstane funkční. */ .btn.play { position: relative; animation: playBreathe 2.6s ease-in-out infinite; } @keyframes playBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } } .btn.play::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid rgba(255,224,138,0.9); pointer-events: none; animation: playRing 2.6s ease-out infinite; } @keyframes playRing { 0% { scale: 1; opacity: 0.7; } 65%, 100% { scale: 1.32; opacity: 0; } } /* stisk „Běžet“ – tlačítko se přikrčí, kroužek praskne, obrazovka blikne */ #screen-menu.launching .btn.play { animation: none; scale: 0.94; transition: scale .18s var(--ease-out); } #screen-menu.launching .btn.play::after { animation: playBurst .34s ease-out both; } @keyframes playBurst { from { scale: 1; opacity: 0.9; } to { scale: 2.1; opacity: 0; } } #screen-menu::after { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(70% 60% at 50% 55%, rgba(255,255,255,0.92), rgba(255,240,190,0) 70%); } #screen-menu.launching::after { animation: menuFlash .34s ease-out both; } @keyframes menuFlash { 0% { opacity: 0; } 35% { opacity: 0.8; } 100% { opacity: 0; } } /* ---------- nástup prvků menu ---------- Jeden keyframe, pořadí řídí --d nastavené v index.html. */ #screen-menu.visible > .menu-brand, #screen-menu.visible > .menu-rail, #screen-menu.visible > .menu-deck, #screen-menu.visible > .menu-missions { animation: menuIn var(--dur-slow) var(--ease-back) both; animation-delay: var(--d, 0s); } @keyframes menuIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } } /* ---------- denní mise: odznak + vysouvací panel ---------- */ .menu-missions { position: relative; } .daily-chip { border: none; cursor: pointer; font-family: inherit; font-size: inherit; transition: transform var(--dur-fast) var(--ease-out); } .daily-chip:hover { transform: translateY(-2px); } .daily-chip[aria-expanded="true"] { background: var(--lr-gold-1); } .daily-pop { position: absolute; bottom: calc(100% + 10px); left: 50%; width: min(360px, calc(78 * var(--gvw))); translate: -50% 0; background: rgba(255,255,255,0.94); border-radius: 16px; padding: 8px 12px 9px; box-shadow: 0 12px 32px rgba(0,0,0,0.24); text-align: left; transform-origin: bottom center; transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-back), visibility 0s; } /* `hidden` zůstává zdrojem pravdy pro čtečky, ale display:none by nešel animovat – proto se přebíjí viditelností */ .daily-pop[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(0.96); transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .daily-title { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; color: #7a6242; text-align: center; margin-bottom: 5px; } .daily-row { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: 0.82rem; font-weight: 700; color: #5a4a38; text-align: left; } .daily-row + .daily-row { border-top: 1px solid rgba(0,0,0,0.07); } .daily-row.done .daily-text { color: #3f7a2c; } .daily-text { flex: 1; } .daily-text::before { content: '○ '; opacity: 0.5; } .daily-row.done .daily-text::before { content: '✓ '; opacity: 1; } .daily-claim { flex-shrink: 0; } .daily-alldone { font-size: 0.82rem; font-weight: 700; color: #3f7a2c; text-align: center; margin: 2px 0; } /* deníček z azylu na kartě zvířátka v obchodě */ .diary { margin-top: 8px; padding: 8px 10px; background: rgba(0,0,0,0.045); border-radius: 12px; text-align: left; } .diary-title { font-size: 0.74rem; font-weight: 800; color: #7a6242; margin-bottom: 4px; } .diary-entry { font-size: 0.74rem; line-height: 1.3; color: #5a4a38; margin: 0; /* karta má pevnou výšku – delší zápisek se ořízne po čtyřech řádcích */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .diary-entry.locked { opacity: 0.5; font-style: italic; } /* celý blok je tlačítko – otevírá knížku na celou obrazovku */ button.diary { display: block; width: 100%; border: 0; font: inherit; cursor: pointer; } button.diary:hover { background: rgba(0,0,0,0.075); } .diary-more { display: block; margin-top: 5px; font-size: 0.7rem; font-weight: 800; color: #a8762a; } /* ========================================================= DENÍČEK Z AZYLU – knížka na celou obrazovku Starý sešit v kožené vazbě: krémový papír s linkami, zlacený hřbet, stužka místo záložky. Dojem ručně psaného textu dělá serifové písmo ze systému – hra si veze jediný vlastní font (Baloo 2) a další soubor kvůli deníčku by se nevyplatil. Listuje se po dvoustranách. Otočení stránky je jeden list (.book-leaf), který se překlopí kolem hřbetu; pod ním je už nový obsah, takže se nic nemusí kreslit dvakrát. ========================================================= */ #screen-diary { justify-content: safe center; background: radial-gradient(120% 100% at 50% 0%, rgba(58,44,26,0.72), rgba(18,24,20,0.9)); backdrop-filter: blur(4px); padding-left: 12px; padding-right: 12px; } /* `margin: auto 0` centrovalo knížku stejně zrádně jako `justify-content: center`: jakmile se nevešla, horní okraj se odsunul mimo dosah. Centrování obstará `justify-content: safe center` na #screen-diary. */ .book-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } /* obsah stránky se nesmí smrsknout – jinak vyteče z odstavce ven a stránka o přetečení neví, takže se nedá dorolovat (viz .screen > *) */ .book-page > * { flex-shrink: 0; } .book-head { display: flex; align-items: center; gap: 10px; width: min(940px, calc(94 * var(--gvw))); } .book-head h2 { flex: 1; text-align: center; font-size: clamp(1rem, 2.6vmin, 1.4rem); color: #f7ecd4; } .book-pos { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; color: rgba(247,236,212,0.7); min-width: 62px; text-align: right; } .book { --rule: 30px; /* rozteč linek na papíře – text jede ve stejném rytmu */ --gutter: 10px; /* kožený okraj kolem papíru; sdílí ho list i hrany */ position: relative; display: flex; width: min(940px, calc(94 * var(--gvw))); height: min(540px, calc(72 * var(--gvh))); padding: var(--gutter); border-radius: 12px 18px 18px 12px; /* useň: podklad + jemná zrnitost ze dvou překřížených proužků. Žádný obrázek – hra si veze jen fonty a všechno ostatní kreslí. */ background: repeating-linear-gradient(58deg, rgba(255,255,255,0.028) 0 2px, rgba(0,0,0,0.03) 2px 4px), repeating-linear-gradient(-34deg, rgba(255,255,255,0.022) 0 3px, rgba(0,0,0,0.022) 3px 6px), linear-gradient(150deg, #86603a, #513922 58%, #3a2816); /* Perspektiva schválně mírná: při krátké ohnisku (1700 px) volný okraj zvedaného listu doslova vyskočil z desek – vypadalo to, že se knížce odlepuje stránka. 2600 px dá hloubku a list zůstane v deskách. */ perspective: 3400px; perspective-origin: 50% 50%; box-shadow: 0 0 0 1px rgba(24,15,6,0.85), 0 0 0 3px rgba(212,164,90,0.42), 0 2px 0 rgba(255,225,180,0.14) inset, 0 34px 70px -18px rgba(0,0,0,0.62), 0 10px 24px rgba(0,0,0,0.32); /* Listuje se tažením do stran, rolovat se smí jen po stránce nahoru dolů. POZOR: `touch-action` se počítá v OSÁCH VIEWPORTU, ne v osách otočeného obsahu. Na telefonu na výšku je celé `` otočené o 90°, takže tah „do strany" je pro prohlížeč tah SVISLE — a s `pan-y` si ho vzal jako rolování, poslal `pointercancel` a listování umřelo hned po tom, co se list nadzvedl (přesně to hráč viděl jako „chvilkové seknutí"). V otočeném režimu proto gesto nedostane prohlížeč vůbec: obě osy si obslouží `onBookMove()` sám, včetně rolování stránky. */ touch-action: pan-y; /* prst listuje tažením do stran – výběr textu by tažení jen překážel */ -webkit-user-select: none; user-select: none; } html.force-landscape .book { touch-action: none; } /* prošití po obvodu desek – dva pixely, a hned to je vázaná kniha */ .book::before { content: ''; position: absolute; inset: 4px; border-radius: 9px 14px 14px 9px; border: 1px dashed rgba(240,206,146,0.3); pointer-events: none; z-index: 6; } /* mosazné rohy desek */ .book-corners { position: absolute; inset: 0; pointer-events: none; z-index: 6; } .book-corners::before, .book-corners::after { content: ''; position: absolute; width: 26px; height: 26px; background: linear-gradient(135deg, rgba(255,225,164,0.5), rgba(190,140,60,0.12) 62%, transparent 63%); border-radius: 12px 0 0 0; } .book-corners::before { left: 3px; top: 3px; } .book-corners::after { right: 3px; bottom: 3px; transform: rotate(180deg); } /* stoh stran po stranách vazby – vlevo přečtené, vpravo zbývající. Šířku nastavuje drawSpread(), takže knížka viditelně ubývá a přibývá. */ .book-edge { position: absolute; top: 16px; bottom: 16px; width: 3px; z-index: 0; pointer-events: none; border-radius: 2px; background: repeating-linear-gradient(90deg, #f3e6c9 0 1px, #cdb894 1px 2px); box-shadow: 0 2px 6px rgba(0,0,0,0.35); transition: width .28s var(--ease-out); } .book-edge.l { left: 3px; } .book-edge.r { right: 3px; } /* papír: vodorovné linky přes teplý krém, u hřbetu přisvětlený stín */ .book-page { position: relative; flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; padding: clamp(12px, 2.6vmin, 26px) clamp(14px, 3vmin, 30px); /* Stránka má pevnou výšku podle knížky. Při systémově zvětšeném písmu se text nevešel a `overflow: hidden` ho beze stopy usekl – teď se dá dočíst odrolováním. Vodorovně se ořezává dál (vlepené výstřižky). */ overflow: hidden auto; overscroll-behavior: contain; /* Stránka je vlastní rolovací schránka, takže o gestu rozhoduje ona, ne desky nad ní – hodnotu si proto musí nést sama (viz .book). */ touch-action: pan-y; color: #4a3a26; font-family: Georgia, "Times New Roman", Times, serif; background: var(--paper); background-origin: content-box, content-box, padding-box, padding-box; } /* Jeden recept na papír pro stránku i pro otáčený list – kdyby se rozešly, bylo by v půlce otočky vidět, že list není ze stejného papíru. Vrstvy odspodu: teplý podklad → skvrny stáří → chlupy vlákna → linky. */ .book, .book-leaf { --paper: repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 1px), rgba(96,72,42,0.11) calc(var(--rule) - 1px) var(--rule)), repeating-linear-gradient(96deg, rgba(120,92,54,0.035) 0 1px, transparent 1px 3px), radial-gradient(58% 40% at 82% 88%, rgba(176,140,84,0.13), transparent 70%), radial-gradient(130% 90% at 22% 0%, #fffdf5, #f5e9cf 66%, #e7d5b0); } html.force-landscape .book-page { touch-action: none; } .book-page.left { border-radius: 7px 2px 2px 7px; box-shadow: inset -30px 0 34px -24px rgba(70,46,18,0.8), inset 0 0 0 1px rgba(120,92,54,0.09); } .book-page.right { border-radius: 2px 7px 7px 2px; box-shadow: inset 30px 0 34px -24px rgba(70,46,18,0.8), inset 0 0 0 1px rgba(120,92,54,0.09); } .book-spine { position: absolute; left: 50%; top: var(--gutter); bottom: var(--gutter); width: 30px; transform: translateX(-50%); pointer-events: none; z-index: 3; background: linear-gradient(90deg, rgba(70,46,18,0) 0%, rgba(70,46,18,0.3) 38%, rgba(52,33,12,0.42) 50%, rgba(70,46,18,0.3) 62%, rgba(70,46,18,0) 100%), linear-gradient(90deg, transparent 47%, rgba(255,245,222,0.16) 50%, transparent 53%); } /* ---------- „tady to pokračuje" ---------- Stránka má pevnou výšku a při systémově zvětšeném písmu (nebo se zapnutým „větším textem") se text nevejde. Dorolovat se dá odjakživa, jenže na papíru to není vidět a hráč o zbytek zajímavosti prostě přišel. Nad spodním okrajem se proto papír zesvětlí do ztracena a bliká v něm šipka dolů — obojí zhasne, jakmile je stránka dorolovaná až dolů. Geometrie je opsaná z `.book-cast`, aby ukazatel seděl přesně na papíru a ne na kožených deskách. `z-index: 4` je pod otáčeným listem (5), takže při listování nemůže ležet přes něj. Rozsvěcí ho syncPageMore(). */ .page-more { position: absolute; bottom: var(--gutter); height: 58px; width: calc(50% - var(--gutter)); z-index: 4; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; opacity: 0; transition: opacity .22s var(--ease-out); background: linear-gradient(180deg, rgba(246,235,210,0) 0%, rgba(246,235,210,0.72) 46%, rgba(240,226,194,0.95) 100%); } .page-more.l { left: var(--gutter); border-radius: 0 0 2px 7px; } .page-more.r { right: var(--gutter); border-radius: 0 0 7px 2px; } .page-more.on { opacity: 1; } /* Při listování je ukazatel vždycky pryč: stránka pod listem se zrovna mění a její rolování stejně nikdo neřeší. */ .book.turning .page-more { opacity: 0; } /* Šipka je dvě hrany otočené o 45° — žádný znak, takže nezávisí na písmu ani na tom, čím ho systém nahradí. Inkoustová modrá, ať patří k deníčku. */ .page-more i { display: block; width: 14px; height: 14px; border-right: 3px solid rgba(46,62,102,0.62); border-bottom: 3px solid rgba(46,62,102,0.62); border-radius: 0 0 3px 0; /* Otočení patří do ZÁKLADNÍHO stylu a poskakuje se samostatnou vlastností `translate`. S útlumem efektů se animace zkrátí na nulu a prvek spadne zpátky na základní styl — kdyby v něm rotace nebyla, zůstal by z šipky neotočený roh. */ transform: rotate(45deg); animation: pageMoreNudge 1.8s var(--ease-out) infinite; } @keyframes pageMoreNudge { 0%, 58%, 100% { translate: 0 0; opacity: .5; } 22% { translate: 3px 3px; opacity: 1; } 40% { translate: 0 0; opacity: .8; } } /* ---------- typografie stránky ---------- Deník má dva hlasy a je to poznat na první pohled: RUKOU (Caveat, inkoustová modrá) píšou ošetřovatelé — zápisky i příběhy z běhu. Caveat má nízkou střední výšku, takže musí být znatelně větší než běžný text, jinak vypadá titěrně. TIŠTĚNÉ (Georgia na světlejší kartičce) jsou zajímavosti o druhu — je to výstřižek z encyklopedie vlepený do deníku, ne poznámka. Popisky, čísla stran a seznam úkolů drží písmo hry (Baloo 2), takže „papírové“ prvky nesoupeří s obsahem. */ .book-page, .book-leaf { font-family: "Caveat", "Segoe Script", cursive; color: #33406e; /* inkoust, ne hnědá tiskárna */ } .page-kicker { display: inline-block; align-self: flex-start; padding: 3px 9px 2px; border-radius: 999px; font: 800 0.6rem/1.25 "Baloo 2", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #7a6136; background: rgba(163,128,63,0.16); } .page-head { font-size: clamp(1.25rem, 3.1vmin, 1.8rem); font-weight: 700; color: #2c3a66; margin: 6px 0 8px; line-height: 1.1; } .page-head::after { content: ''; display: block; width: 46px; height: 2px; margin-top: 6px; background: linear-gradient(90deg, rgba(51,64,110,0.5), rgba(51,64,110,0)); } .page-body { font-size: clamp(1.02rem, 2.5vmin, 1.32rem); line-height: var(--rule); margin: 0; } .page-body + .page-body { margin-top: 8px; } .page-sign { margin-top: 10px; font-size: clamp(0.86rem, 2vmin, 1.05rem); color: #7a86ab; } .page-num { margin-top: auto; padding-top: 8px; text-align: center; font: 700 0.68rem "Baloo 2", system-ui, sans-serif; letter-spacing: 0.12em; color: #a9926a; } .page-mid { margin: auto 0; text-align: center; } .page-mid .page-sign { text-align: center; } /* barva popisku podle sekce – aby bylo vidět, v které části knížky jsi */ [data-sec="stories"] .page-kicker { color: #6f4a86; background: rgba(111,74,134,0.16); } [data-sec="tasks"] .page-kicker { color: #8a6320; background: rgba(168,118,42,0.18); } [data-sec="facts"] .page-kicker { color: #2f6a4a; background: rgba(47,106,74,0.16); } /* ---------- zajímavost = výstřižek vlepený do deníku ---------- */ .fact-card { position: relative; margin: 12px 2px 0; padding: clamp(11px, 1.9vmin, 17px) clamp(12px, 2.1vmin, 18px); border-radius: 3px; transform: rotate(-0.7deg); background: linear-gradient(160deg, #fffdf6, #f7f1e2); box-shadow: 0 6px 14px rgba(70,46,18,0.18), 0 0 0 1px rgba(120,96,58,0.16); font-family: Georgia, "Times New Roman", Times, serif; color: #3f3527; } /* lepicí páska přes horní roh */ .fact-card::before { content: ''; position: absolute; top: -9px; left: 50%; width: 62px; height: 18px; transform: translateX(-50%) rotate(-2.5deg); background: linear-gradient(180deg, rgba(232,222,190,0.85), rgba(214,200,160,0.75)); box-shadow: 0 1px 3px rgba(70,46,18,0.22); } .fact-badge { display: block; margin-bottom: 7px; font: 800 0.66rem/1 "Baloo 2", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #2f6a4a; } .fact-body { font-size: clamp(0.8rem, 1.85vmin, 1rem); line-height: 1.55; } .fact-src { display: block; margin-top: 9px; padding-top: 7px; border-top: 1px dotted rgba(120,96,58,0.4); font: 700 0.62rem/1 "Baloo 2", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #8b7f66; } /* titulní strana */ .page-portrait { display: block; margin: 0 auto; width: min(58%, 200px); height: auto; } .page-title { text-align: center; margin-top: 2px; font-size: clamp(1.5rem, 3.9vmin, 2.15rem); font-weight: 700; color: #2c3a66; } .page-species { display: block; text-align: center; margin-top: 5px; font: 800 0.64rem/1 "Baloo 2", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #a3803f; } .page-quote { margin-top: 12px; text-align: center; font-size: clamp(1rem, 2.4vmin, 1.25rem); color: #4a5686; } /* zamčený zápisek – pečeť místo textu */ .page-wax { width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: radial-gradient(circle at 34% 28%, #d2594a, #8d2b23 70%); box-shadow: 0 5px 12px rgba(0,0,0,0.32), inset 0 -5px 10px rgba(0,0,0,0.28); } .page-locked-text { color: #6b76a0; font-size: clamp(0.95rem, 2.3vmin, 1.2rem); line-height: var(--rule); } .page-wax-soft { background: radial-gradient(circle at 34% 28%, #cbb489, #8d7248 70%); color: #f6ecd6; font-family: Georgia, serif; font-weight: 700; } /* stránka s osobními úkoly */ .task-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .task-row { display: flex; gap: 9px; align-items: flex-start; font-size: clamp(0.95rem, 2.3vmin, 1.2rem); line-height: var(--rule); } .task-mark { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; /* kolečko je v px, písmo v rem – bez stropu z něj při systémovém zvětšení písma na Androidu emoji vyleze ven */ font: 700 min(0.78rem, 13px)/1 "Baloo 2", system-ui, sans-serif; background: rgba(122,98,60,0.14); color: #6b5433; } .task-row.done { color: #8791b3; } .task-row.done span:last-child { text-decoration: line-through; text-decoration-color: rgba(135,145,179,0.6); } .task-row.done .task-mark { background: #6fae54; color: #fff; } .task-prize { margin-top: auto; padding-top: 10px; font: 800 0.76rem "Baloo 2", system-ui, sans-serif; color: #8a7147; } .task-prize.won { color: #a8762a; } /* ---------- šatník: dvoustrana, do které se dá ťukat ---------- Vlevo zrcadlo, vpravo mřížka. Mřížka se ZALAMUJE a nikdy neroluje do stran: .book-page má `overflow: hidden auto`, takže co by přeteklo do šířky, se usekne bez možnosti se k tomu dostat (a hlásí to i detektor rozvržení). Svisle rolovat smí – deníček na to má právo. */ /* Zrcadlo se musí vejít na stránku i na telefonu naležato, kde je celá hra vysoká 390 px. Šířka se proto neurčuje procentem stránky, ale výškou hry (--gvh, viz :root) – stejně jako portréty na kartách obchodu. Poměr plátna je 190:150, takže výška vyjde asi 0,79 × šířka. */ .wardrobe-head { font-size: clamp(1.02rem, 2.4vmin, 1.32rem); margin: 4px 0 2px; } .wardrobe-head::after { display: none; } .wardrobe-portrait { margin: 2px auto 0; width: min(56%, 190px, calc(27 * var(--gvh))); } .wardrobe-lead { margin: 5px 0 0; text-align: center; /* zmenšuje se s výškou hry, ale 11 px je podlaha – pod ní už je to nečitelné a věta o tom, že jsou ozdoby společné, se má dát přečíst */ font: 600 min(0.82rem, max(11px, calc(2.4 * var(--gvh))))/1.3 "Baloo 2", system-ui, sans-serif; color: #8a7147; } .wardrobe-grid { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 4px; margin: 2px 0 0; } /* Čip se zmenšuje s výškou hry (--gvh). Na telefonu naležato je stránka knížky vysoká jen kolem 180 px, takže na pevné velikosti by se poslední řádek ozdob schoval pod okraj – a hráč by o něm nevěděl. */ .wear-chip { flex: 0 0 auto; width: clamp(42px, calc(13 * var(--gvh)), 56px); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 5px; border: 2px solid rgba(122,98,60,0.22); border-radius: 11px; background: rgba(255,255,255,0.6); color: #6b5433; font-family: "Baloo 2", system-ui, sans-serif; cursor: pointer; transition: transform .12s, border-color .12s, background .12s; } .wear-chip:hover:not(:disabled) { transform: translateY(-2px); background: #fff; } .wear-chip.on { border-color: #a8762a; background: rgba(240,195,60,0.24); box-shadow: 0 3px 10px rgba(168,118,42,0.28); } .wear-chip.locked { opacity: 0.6; } .wear-chip:disabled { cursor: default; opacity: 0.45; } /* emoji ani popisek nesmí růst se systémovým písmem, jinak čip praskne */ .wear-icon { font-size: min(1.3rem, 21px, calc(5.4 * var(--gvh))); line-height: 1.1; } /* Popisek je jednoslovný (item.short), takže se vejde na JEDEN řádek – víc řádků by zvedlo výšku čipu a mřížka by na krátké stránce přetekla. Strop je tu proto pojistka, ne návrh. */ .wear-name { font: 700 min(0.6rem, 10px, calc(2.5 * var(--gvh)))/1.15 "Baloo 2", system-ui, sans-serif; text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .page-link { display: inline-block; margin-top: 12px; font: 800 0.84rem "Baloo 2", system-ui, sans-serif; color: #a8762a; text-decoration: none; border-bottom: 2px solid rgba(168,118,42,0.4); } /* ---------- vlepené drobnosti ---------- Spodní půlka stránky byla prázdná jako nedopsaný sešit. Teď se do ní lepí fotky, čmáranice, poznámky na okraj a stopa zvířátka. Vrstva je absolutní a nereaguje na dotyk, takže se obsahu nikdy neplete do cesty; co se nevejde, ořízne overflow stránky. */ .page-extras { /* spodní hranice nechává místo číslu stránky – poznámka na okraj se mu jinak posadí přesně do řádku */ position: absolute; left: 0; right: 0; top: 42%; bottom: 50px; pointer-events: none; z-index: 1; } /* fotka jako z polaroidu – přelepená páskou přes roh */ .scrap-photo { position: absolute; bottom: 2px; width: min(46%, 170px); padding: 7px 7px 4px; background: #fffdf7; box-shadow: 0 5px 13px rgba(70,46,18,0.25), 0 0 0 1px rgba(120,96,58,0.14); } .scrap-photo.l { left: 5%; transform: rotate(-3.4deg); } .scrap-photo.r { right: 5%; transform: rotate(2.8deg); } .scrap-photo canvas { display: block; width: 100%; height: auto; background: linear-gradient(180deg, #cfe9f6 55%, #b9dfa6); } .scrap-caption { display: block; margin-top: 3px; text-align: center; font-size: clamp(0.72rem, 1.7vmin, 0.92rem); line-height: 1.2; color: #5b6a9c; } .scrap-tape { position: absolute; top: -8px; left: 50%; width: 54px; height: 17px; transform: translateX(-50%) rotate(-3deg); background: linear-gradient(180deg, rgba(233,224,193,0.9), rgba(210,197,159,0.8)); box-shadow: 0 1px 3px rgba(70,46,18,0.22); } /* poznámka na okraj – tužkou, nakřivo, s podtržením */ .scrap-note { position: absolute; left: 7%; right: 7%; bottom: 4px; transform: rotate(-1.1deg); font-size: clamp(0.9rem, 2.1vmin, 1.1rem); line-height: 1.3; color: #6b76a0; border-bottom: 2px dotted rgba(107,118,160,0.35); padding-bottom: 4px; } /* čmáranice perem na okraji stránky */ .scrap-doodle { position: absolute; top: 2%; width: clamp(46px, 12vmin, 84px); color: #5b6a9c; opacity: 0.55; } .scrap-doodle.l { left: 7%; transform: rotate(-9deg); } .scrap-doodle.r { right: 7%; transform: rotate(8deg); } .scrap-doodle svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ---------- stopa, kterou po sobě zvířátko nechalo ---------- Každé jinou: Karel do stránky kousl, Avala ji olízla, Flíček po ní přejel blátivým rypáčkem, Yakul ji rýpl rohem, Pogo tam nechal chomáč vlny a Květě uschla mezi listy kopretina. */ .scrap-stain { position: absolute; pointer-events: none; } /* kousanec – z okraje stránky chybí kus, prosvítá vazba */ .stain-bite { top: 18%; width: 76px; height: 92px; background: radial-gradient(circle at 88% 16%, #46301c 15px, rgba(70,46,18,0) 16px), radial-gradient(circle at 100% 46%, #46301c 21px, rgba(70,46,18,0) 22px), radial-gradient(circle at 86% 78%, #46301c 14px, rgba(70,46,18,0) 15px), radial-gradient(circle at 92% 30%, rgba(120,96,58,0.35) 20px, rgba(120,96,58,0) 21px); } .book-page.left .stain-bite, .leaf-face .stain-bite { left: -16px; transform: scaleX(-1); } .book-page.right .stain-bite { right: -16px; } /* slintanec – lesklá kaluž s odleskem a kapkou */ .stain-drool { right: 12%; top: 8%; width: 74px; height: 46px; border-radius: 58% 42% 46% 54% / 62% 56% 44% 38%; background: radial-gradient(60% 60% at 34% 30%, rgba(255,255,255,0.85), rgba(206,228,236,0.5) 60%, rgba(176,206,218,0.35)); box-shadow: inset 0 -3px 6px rgba(120,150,165,0.35), 0 1px 2px rgba(90,120,135,0.3); } .stain-drool::after { content: ''; position: absolute; left: 22%; top: 92%; width: 12px; height: 20px; border-radius: 50% 50% 60% 60%; background: radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,0.8), rgba(186,214,226,0.45)); } /* bláto – šmouha od rypáčku a otisk paznehtu */ .stain-mud { left: 10%; top: 12%; width: 82px; height: 40px; border-radius: 52% 48% 60% 40% / 58% 42% 58% 42%; background: radial-gradient(70% 70% at 40% 35%, rgba(112,80,48,0.55), rgba(92,64,38,0.35) 70%, rgba(92,64,38,0.08)); transform: rotate(-7deg); } .stain-mud::after { content: ''; position: absolute; left: 74%; top: 44%; width: 22px; height: 24px; background: radial-gradient(50% 70% at 30% 50%, rgba(92,64,38,0.5), rgba(92,64,38,0) 71%), radial-gradient(50% 70% at 76% 50%, rgba(92,64,38,0.5), rgba(92,64,38,0) 71%); } /* chomáč vlny přilepený na stránce */ .stain-wool { right: 14%; top: 4%; width: 58px; height: 42px; background: radial-gradient(circle at 30% 60%, #fffdf8 13px, rgba(255,255,255,0) 14px), radial-gradient(circle at 58% 38%, #fbf7ec 15px, rgba(255,255,255,0) 16px), radial-gradient(circle at 78% 66%, #fffdf8 11px, rgba(255,255,255,0) 12px); filter: drop-shadow(0 2px 3px rgba(70,46,18,0.25)); } /* rýha od rohu – tři škrábance přes papír */ .stain-scratch { left: 16%; top: 10%; width: 108px; height: 32px; transform: rotate(-13deg); background-image: linear-gradient(90deg, rgba(150,120,80,0), rgba(150,120,80,0.62) 18%, rgba(150,120,80,0.62) 82%, rgba(150,120,80,0)), linear-gradient(90deg, rgba(150,120,80,0), rgba(150,120,80,0.5) 24%, rgba(150,120,80,0.5) 76%, rgba(150,120,80,0)), linear-gradient(90deg, rgba(150,120,80,0), rgba(150,120,80,0.42) 30%, rgba(150,120,80,0.42) 70%, rgba(150,120,80,0)); background-size: 100% 2px, 88% 2px, 74% 2px; background-position: 0 5px, 7% 15px, 14% 25px; background-repeat: no-repeat; } /* usušená kopretina mezi listy */ .stain-grass { left: 12%; top: 6%; width: 86px; height: 56px; background: radial-gradient(58% 66% at 42% 58%, rgba(116,158,80,0.55), rgba(116,158,80,0) 74%); transform: rotate(-6deg); } .stain-grass::after { /* usušená kopretina – kreslená jako SVG, aby okvětní lístky nesplynuly do čtverce, jak se to dělo u skládaných radiálních přechodů */ content: ''; position: absolute; left: 30%; top: 4%; width: 46px; height: 46px; transform: rotate(12deg); background: url('data:image/svg+xml;utf8,') center/contain no-repeat; filter: drop-shadow(0 1px 1px rgba(70,46,18,0.22)); } /* ---------- překlápějící se list ---------- List je opravdový list papíru: LÍC nese otisk odcházející stránky, RUB obsah stránky, na kterou list dosedne. Obě strany mají backface-visibility: hidden, takže se nikdy nepřekrývají. Otočku NEŘÍDÍ @keyframes, ale js (turnBook v js/game.js): úhel, nadzvednutí a všechna čtyři stínítka se počítají z jediného postupu 0→1. Jen tak se dá list táhnout prstem a puštění plynule navázat – a hlavně vypadá tažení úplně stejně jako ťuknutí na šipku, protože je to jeden a týž kód. Zapisují se výhradně `transform` a `opacity`, takže celou otočku odbaví kompozitor a nic se nepřepočítává v rozvržení. */ .book-leaf { position: absolute; top: calc(var(--gutter) + 2px); bottom: calc(var(--gutter) + 2px); width: calc(50% - var(--gutter)); z-index: 5; pointer-events: none; transform-style: preserve-3d; visibility: hidden; will-change: transform; } .book.turning .book-leaf { visibility: visible; } .book-leaf.turn-next { left: 50%; transform-origin: left center; border-radius: 2px 7px 7px 2px; } .book-leaf.turn-prev { left: var(--gutter); transform-origin: right center; border-radius: 7px 2px 2px 7px; } .leaf-face { position: absolute; inset: 0; padding: clamp(12px, 2.6vmin, 26px) clamp(14px, 3vmin, 30px); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: inherit; background: var(--paper); background-origin: content-box, content-box, padding-box, padding-box; box-shadow: inset 0 0 0 1px rgba(120,92,54,0.09); } .leaf-face.back { transform: rotateY(180deg); } .leaf-ink { display: flex; flex-direction: column; height: 100%; } .leaf-ink > * { flex-shrink: 0; } /* Stínítko listu: opacitu nastavuje js podle úhlu. Papír, který se staví na hranu, ztmavne u hřbetu – to je celý ten trik, kvůli kterému otočka nevypadá jako otáčení kartonu. */ .leaf-shade { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 2; } .book-leaf.turn-next .leaf-face.front .leaf-shade { background: linear-gradient(90deg, rgba(58,38,14,0.62), rgba(58,38,14,0.06) 62%, rgba(255,250,235,0.14)); } .book-leaf.turn-next .leaf-face.back .leaf-shade { background: linear-gradient(90deg, rgba(58,38,14,0.6), rgba(58,38,14,0.05) 58%, rgba(255,250,235,0.12)); } .book-leaf.turn-prev .leaf-face.front .leaf-shade { background: linear-gradient(270deg, rgba(58,38,14,0.62), rgba(58,38,14,0.06) 62%, rgba(255,250,235,0.14)); } .book-leaf.turn-prev .leaf-face.back .leaf-shade { background: linear-gradient(270deg, rgba(58,38,14,0.6), rgba(58,38,14,0.05) 58%, rgba(255,250,235,0.12)); } /* okraj u hřbetu: list má stejné přisvětlení jako stránka, na kterou dosedá */ .book-leaf.turn-next .leaf-face.front { box-shadow: inset 30px 0 34px -24px rgba(70,46,18,0.8); } .book-leaf.turn-next .leaf-face.back { box-shadow: inset -30px 0 34px -24px rgba(70,46,18,0.8); } .book-leaf.turn-prev .leaf-face.front { box-shadow: inset -30px 0 34px -24px rgba(70,46,18,0.8); } .book-leaf.turn-prev .leaf-face.back { box-shadow: inset 30px 0 34px -24px rgba(70,46,18,0.8); } /* Obsah listu je otisk, ne nová stránka – nesmí se rozanimovat. Dřív to dělal průchod přes querySelectorAll v js; jedno pravidlo je levnější a hlavně platí i na prvky, které vzniknou až v ghost renderu. */ .book-leaf *, .book-leaf *::before, .book-leaf *::after { animation: none !important; } /* stín, který list vrhá na stránku pod sebou – opacitu řídí js. Vlastní prvek: zápis do .style.opacity nezneplatní styl obsahu stránky. */ .book-cast { position: absolute; top: var(--gutter); bottom: var(--gutter); width: calc(50% - var(--gutter)); pointer-events: none; opacity: 0; z-index: 2; will-change: opacity; } .book-cast.r { right: var(--gutter); border-radius: 2px 7px 7px 2px; background: linear-gradient(90deg, rgba(48,31,11,0.72), rgba(48,31,11,0.14) 44%, rgba(48,31,11,0) 76%); } .book-cast.l { left: var(--gutter); border-radius: 7px 2px 2px 7px; background: linear-gradient(270deg, rgba(48,31,11,0.72), rgba(48,31,11,0.14) 44%, rgba(48,31,11,0) 76%); } /* Během otáčení se do stránek nedá ťukat: obsah pod listem se právě mění a odcházející šatník už nemá platné odkazy na zrcadlo a mřížku. */ .book.turning .book-page { pointer-events: none; } /* Stránka, na kterou list teprve dosedne, se vykreslí BEZ nástupové animace – musí být přesným dvojčetem rubu listu, jinak by v okamžiku dosednutí text poskočil. */ .book-page.no-ink > *, .book-page.no-ink .page-extras > *, .book-page.no-ink .scrap-doodle svg > * { animation: none !important; opacity: 1; stroke-dashoffset: 0; } /* ---------- nástup obsahu stránky ---------- Obsah nepřiletí naráz: popisek, nadpis, text a podpis se objeví po sobě, jako by je někdo dopisoval. Rozestup je krátký (60 ms), takže se to nikdy nepřetáhne přes otočení listu. */ .book-page > * { animation: pageInk .38s var(--ease-out) both; } .book-page > *:nth-child(1) { animation-delay: .16s; } .book-page > *:nth-child(2) { animation-delay: .22s; } .book-page > *:nth-child(3) { animation-delay: .28s; } .book-page > *:nth-child(4) { animation-delay: .34s; } .book-page > *:nth-child(5) { animation-delay: .40s; } .book-page > .page-num { animation-delay: .46s; } @keyframes pageInk { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } } /* výstřižek se „nalepí“ – dosedne s natočením a lehkým doskokem */ .book-page > .fact-card { animation: cardPaste .46s var(--ease-back) .2s both; } @keyframes cardPaste { from { opacity: 0; transform: rotate(-7deg) scale(0.9) translateY(10px); } to { opacity: 1; transform: rotate(-0.7deg) scale(1) translateY(0); } } /* vlepené drobnosti přijdou až po textu – nejdřív se dopíše, pak nalepí. Každá strana má vlastní keyframes, protože transform nese i natočení. */ .book-page > .page-extras { animation: none; opacity: 1; } .page-extras .scrap-photo.l { animation: scrapDropL .5s var(--ease-back) .34s both; } .page-extras .scrap-photo.r { animation: scrapDropR .5s var(--ease-back) .34s both; } .page-extras .scrap-note { animation: pageInk .4s var(--ease-out) .42s both; } .page-extras .scrap-stain { animation: stainSoak .5s ease-out .5s both; } @keyframes scrapDropL { from { opacity: 0; transform: rotate(-13deg) scale(0.86) translateY(12px); } to { opacity: 1; transform: rotate(-3.4deg) scale(1) translateY(0); } } @keyframes scrapDropR { from { opacity: 0; transform: rotate(12deg) scale(0.86) translateY(12px); } to { opacity: 1; transform: rotate(2.8deg) scale(1) translateY(0); } } @keyframes stainSoak { from { opacity: 0; } to { opacity: 1; } } /* čmáranice se doslova nakreslí – tah po tahu */ .scrap-doodle svg > * { stroke-dasharray: 140; stroke-dashoffset: 140; animation: doodleDraw .9s ease-out .46s forwards; } @keyframes doodleDraw { to { stroke-dashoffset: 0; } } /* list otevřené knížky – otevře se, ne jen naskočí */ #screen-diary.visible .book { animation: bookOpen .55s var(--ease-back) both; } @keyframes bookOpen { from { opacity: 0; transform: scale(0.9) translateY(16px); } to { opacity: 1; transform: none; } } /* pečeť dýchá, ať je vidět, že tam něco čeká */ .page-wax { animation: waxBreath 3.4s ease-in-out infinite; } @keyframes waxBreath { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.06) rotate(2deg); } } .book-nav { display: flex; align-items: center; gap: 14px; } .book-hint { font-size: 0.72rem; font-weight: 700; color: rgba(247,236,212,0.6); text-align: center; min-width: 130px; } .book-nav .btn.round:disabled { opacity: 0.35; } /* ---------- nízké displeje: knížka se scvrkne, ne ořízne ---------- POZOR na podmínku. Původně tu stálo jen `(max-height: 560px) and (orientation: landscape)` – a to na telefonu NIKDY neplatilo: hra si rotaci dělá sama CSS transformem, takže `orientation` je pořád portrait a `max-height` měří fyzickou výšku telefonu (844 px), ne herní. Pravidlo se tedy uplatnilo jen na notebooku s nízkým oknem, což je zrovna případ, kde nebylo potřeba. Druhá větev podmínky (stejná jako v obchodě) míří na vynucenou rotaci: tam herní výšce odpovídá ŠÍŘKA fyzického viewportu. */ @media (max-height: 560px), (orientation: portrait) and (pointer: coarse) and (max-width: 560px) { .book { height: calc(76 * var(--gvh)); --rule: 24px; } .book-head h2 { font-size: 0.95rem; } .book-page { padding: 10px 14px; } .page-portrait { width: min(46%, 132px); } .page-title { font-size: clamp(1.15rem, 3.4vmin, 1.5rem); } .page-quote { margin-top: 7px; } .page-extras { top: 46%; bottom: 34px; } .scrap-photo { width: min(42%, 118px); padding: 5px 5px 3px; } .scrap-note { font-size: 0.86rem; } .book-leaf, .leaf-face { --rule: 24px; } } /* Telefon naležato. Titulní strana je nejvyšší (portrét + jméno + druh + citát + podpis), takže se krotí hlavně ta; linkování drží text v rytmu linek, proto se s `--rule` musí hýbat, ne s line-height jednotlivě. */ @media (max-height: 440px), (orientation: portrait) and (pointer: coarse) and (max-width: 440px) { .book { height: calc(80 * var(--gvh)); --rule: 20px; } .book-page { padding: 8px 12px; } .page-portrait { width: min(38%, 104px); } .page-title { font-size: clamp(1.05rem, 3vmin, 1.3rem); } .page-species { font-size: 0.62rem; } .page-quote { font-size: clamp(0.9rem, 2.1vmin, 1.05rem); margin-top: 5px; } .page-sign { margin-top: 5px; font-size: 0.82rem; } .page-head { font-size: clamp(1rem, 2.6vmin, 1.2rem); } .task-row { gap: 7px; } .book-leaf, .leaf-face { --rule: 20px; } } @media (max-height: 360px), (orientation: portrait) and (pointer: coarse) and (max-width: 360px) { .book { height: calc(84 * var(--gvh)); --rule: 17px; } .book-page { padding: 7px 10px; } .page-portrait { width: min(32%, 84px); } .page-quote { font-size: 0.88rem; } .book-head h2 { font-size: 0.86rem; } .book-hint { font-size: 0.66rem; min-width: 96px; } .book-leaf, .leaf-face { --rule: 17px; } } .controls-hint { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.9); text-shadow: 0 1px 4px rgba(0,0,0,0.4); text-align: center; } /* ---------- nastavení ---------- Vysunuté z hlavní obrazovky, ať menu dýchá. Stejná karta jako pauza. */ #screen-settings { justify-content: safe center; background: rgba(20, 30, 25, 0.45); backdrop-filter: blur(3px); } .settings-card { max-width: 400px; gap: 12px; } .settings-rows { display: flex; flex-direction: column; gap: 8px; width: 100%; } .settings-rows .btn { width: 100%; } .settings-ver { font-size: 0.72rem; font-weight: 600; letter-spacing: 1px; color: #8a7a66; } /* uvnitř krémové karty musí být nápověda tmavá, ne bílá */ .settings-card .controls-hint { color: #6a5a48; text-shadow: none; font-size: 0.74rem; line-height: 1.4; } .settings-links { font-size: 0.78rem; font-weight: 700; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; } .settings-card .privacy-link { color: #7a6242; } /* ---------- podpora (js/support.js) ---------- Stejná karta jako nastavení. Naležato jsou QR a text vedle sebe, na nízkém displeji se QR zmenší, ale nezmizí – je to důvod té obrazovky. */ #screen-support { justify-content: safe center; background: rgba(20, 30, 25, 0.45); backdrop-filter: blur(3px); touch-action: pan-y; } #screen-support .support-card { width: min(720px, 100%); max-width: 720px; gap: 12px; margin: auto 0; } .support-head-pad { width: 44px; } .support-body { display: flex; gap: 18px; align-items: center; width: 100%; text-align: left; } .support-qr-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; } .support-qr { width: clamp(150px, 30vmin, 230px); aspect-ratio: 1; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px rgba(45,90,61,.18), 0 6px 16px rgba(0,0,0,.12); } .support-qr svg { display: block; width: 100%; height: 100%; } .support-amounts { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; } .support-amounts .btn.small { padding: 6px 10px; font-size: 0.86rem; min-width: 0; } .support-amounts .btn.active { background: linear-gradient(180deg, #b0e89a, #7ac95e); box-shadow: 0 3px 0 #55a13c; color: #234a12; } .support-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 auto; color: #4a3220; text-shadow: none; } .support-karel { font-size: 1rem; line-height: 1.45; font-weight: 600; } .support-karel p + p { margin-top: 2px; } .support-sign { font-weight: 800; color: #7a6242; text-align: right; } .support-hint { font-size: 0.8rem; line-height: 1.4; color: #6a5a48; } .support-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .support-acc-num { font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; } .support-acc .btn.small { padding: 5px 12px; font-size: 0.8rem; } .support-text .btn.buy { align-self: flex-start; } .support-transparent { font-size: 0.78rem; font-weight: 700; color: #7a6242; } /* Kód rozkvete od středu, odznak dosedne po něm a znak v něm vyroste z křížení listů (sluníčko a kroužek naskočí zvlášť). Stejné časování jako na webu (globals.css + loukarun.css). Animuje se jen transform. */ @keyframes supBloom { from { transform: scale(0); } to { transform: scale(1); } } @keyframes supPop { 0% { transform: scale(0); } 62% { transform: scale(1.14); } 100% { transform: scale(1); } } .sup-qr-bloom { animation: supBloom .8s cubic-bezier(.45,0,.25,1) both; } .sup-qr-badge { animation: supPop .5s cubic-bezier(.34,1.56,.64,1) .55s both; } .sup-logo-bloom { animation: supBloom .65s cubic-bezier(.33,0,.2,1) .6s both; } .sup-logo-sun { animation: supPop .45s cubic-bezier(.34,1.56,.64,1) 1.15s both; } .sup-logo-ring { animation: supPop .45s cubic-bezier(.34,1.56,.64,1) 1.35s both; } html.low-fx .sup-qr-bloom, html.low-fx .sup-qr-badge, html.low-fx .sup-logo-bloom, html.low-fx .sup-logo-pop { animation: none; } @media (prefers-reduced-motion: reduce) { .sup-qr-bloom, .sup-qr-badge, .sup-logo-bloom, .sup-logo-pop { animation: none; } } /* nízký displej naležato (i otočená hra na telefonu na výšku). Hranice je 460 px, ne 420 jako jinde: iPhone 14 Pro Max na výšku dá hře 430 px výšky a plné rozvržení Podpory se do nich nevešlo o 190 px (audit-rozvrzeni.js). */ @media (max-height: 460px), (orientation: portrait) and (pointer: coarse) and (max-width: 460px) { #screen-support { padding: 8px 12px; } /* .over-card je tady mřížka pro kartu po doběhnutí – Podpora ne */ #screen-support .support-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; max-width: min(720px, calc(96 * var(--gvw))); } #screen-support .ach-head h2 { font-size: 1.15rem; } .support-body { gap: 14px; } .support-qr { width: min(150px, calc(44 * var(--gvh))); } .support-amounts { gap: 4px; } .support-amounts .btn.small { padding: 4px 8px; font-size: 0.78rem; } .support-text { gap: 5px; } .support-karel { font-size: 0.86rem; line-height: 1.38; } .support-hint { font-size: 0.72rem; line-height: 1.3; } .support-acc-num { font-size: 0.92rem; } .support-text .btn.buy { padding: 6px 14px; font-size: 0.86rem; } } /* nejnižší herní plocha (iPhone SE: 320 px) – audit hlásil +15 px */ @media (max-height: 340px), (orientation: portrait) and (pointer: coarse) and (max-width: 340px) { #screen-support { padding: 4px 10px; } #screen-support .support-card { gap: 4px; padding: 8px 14px; } .support-qr { width: min(128px, calc(40 * var(--gvh))); } .support-text { gap: 3px; } .support-karel { font-size: 0.8rem; line-height: 1.32; } .support-hint { font-size: 0.68rem; } } /* úzký displej bez otočení (počítač v úzkém okně): pod sebe */ @media (max-width: 560px) and (min-height: 461px) and (pointer: fine) { .support-body { flex-direction: column; text-align: center; } .support-text .btn.buy { align-self: center; } .support-acc { justify-content: center; } } /* ztlumený přepínač je vidět na první pohled – vyšisovaný a bez zlata */ .btn.muted { filter: saturate(0.35) brightness(0.94); opacity: 0.8; } /* pauza: zvuk a hudba vedle sebe, ať karta nenaroste do sloupce tlačítek */ .pause-audio { display: flex; gap: 8px; width: 100%; } .pause-audio .btn { flex: 1; min-width: 0; font-size: 0.9rem; padding-left: 10px; padding-right: 10px; } @media (max-height: 560px) and (orientation: landscape) { .pause-audio .btn { font-size: 0.82rem; padding: 8px 8px; } } /* ---------- viditelný fokus ---------- Doteď menu neukazovalo vůbec nic – klávesnicí se v něm nedalo orientovat. */ .btn:focus-visible, .hud-chip:focus-visible, .lang-btn:focus-visible, .char-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* obchod – karusel karet od nejlevnější (vlevo) po nejdražší (vpravo) */ #screen-shop { background: linear-gradient(180deg, #7cc4b8, #dff3e8); justify-content: safe center; /* viz #screen-over – při přetečení nesmí uříznout začátek */ padding: max(12px, var(--safe-top)) 0 max(10px, var(--safe-bottom)); overflow-y: auto; } .shop-head { width: 100%; max-width: 1040px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; flex: 0 0 auto; /* při systémově zvětšeném písmu se nadpis a počítadlo mincí nevešly vedle sebe a vylezly mimo obrazovku – nadpis se smrskne první */ min-width: 0; } .shop-head .hud-chip { flex: 0 0 auto; } /* Záložky Zvířátka / Ozdoby. Sedí v hlavičce místo nadpisu, takže obchodu nepřidávají ani pixel výšky – to je tu podmínka, ne pohodlí: karusel nesmí spadnout pod okraj (viz komentář u #screen-shop výš). Vodorovně naopak místo ubírají, proto se smrskávají první (min-width: 0, flex-shrink) a NIKDY se nezalamují – zalomení by z vodorovné tlačenice udělalo svislou, tedy přesně tu poruchu, kterou si dovolit nemůžeme. */ .shop-tabs { display: flex; gap: 3px; min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; /* přepínač jako jeden kus, ne dvě samostatná tlačítka: společné lůžko s vnitřním stínem, aktivní záložka v něm sedí jako vysunutý jezdec */ padding: 3px; border-radius: 999px; background: rgba(29,52,40,0.14); box-shadow: inset 0 1px 3px rgba(20,40,28,0.22), 0 1px 0 rgba(255,255,255,0.5); } .shop-tabs .btn.tab { min-width: 0; padding: 6px 12px; font-size: min(0.82rem, 13px); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: transparent; color: #2d4a3a; border: none; box-shadow: none; transition: background .2s ease, color .2s ease, box-shadow .2s ease; } .shop-tabs .btn.tab:active { transform: none; } .shop-tabs .btn.tab.on { background: linear-gradient(180deg, #3d6350, #2a4636); color: #f4fbf6; box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 3px 8px rgba(20,40,28,0.3); } .shop-note { margin: 4px 0 0; padding: 0 20px; color: #2d4a3a; font-weight: 600; opacity: 0.75; font-size: 0.85rem; text-align: center; flex: 0 0 auto; } #shop-grid, #items-grid { display: flex; align-items: stretch; gap: 16px; width: 100%; max-width: 1040px; padding: 14px 28px 16px; overflow-x: auto; /* Karta se na hodně nízkém displeji nemusí vejít ani po všech úsporách níž v @media. Dřív se prostě usekla (`overflow-y: hidden`) a tlačítko „Vybrat / koupit“ zůstalo mimo dosah; teď se dá dorolovat. */ overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: x proximity; touch-action: pan-x pan-y; /* karty se roztahují na výšku karuselu (align-items: stretch), takže když se karusel smrskne, obsah karet vyteče a nikdo o tom neví – karusel si proto drží výšku podle obsahu a roluje až celá obrazovka */ flex-shrink: 0; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent); scrollbar-width: thin; scrollbar-color: rgba(45,74,58,0.35) transparent; } /* Bez tohohle by se obě mřížky kreslily naráz: `el.hidden = true` spoléhá na [hidden] { display: none } z prohlížeče, a to prohraje s autorským display: flex výš. Stejná past jako u .daily-pop[hidden]. */ #shop-grid[hidden], #items-grid[hidden] { display: none; } #shop-grid::-webkit-scrollbar, #items-grid::-webkit-scrollbar { height: 8px; } #shop-grid::-webkit-scrollbar-track, #items-grid::-webkit-scrollbar-track { background: transparent; } #shop-grid::-webkit-scrollbar-thumb, #items-grid::-webkit-scrollbar-thumb { background: rgba(45,74,58,0.3); border-radius: 999px; } #shop-grid.dragging, #items-grid.dragging { scroll-snap-type: none; cursor: grabbing; } #shop-grid.dragging .char-card, #items-grid.dragging .char-card { pointer-events: none; } /* ---------- karta zvířátka / ozdoby ---------- Karta má vypadat jako sběratelská kartička, ne jako bílý obdélník: teplý papírový podklad, vrstvený stín (těsný obrys + měkký odstup), světlo shora a zlatý proužek u horní hrany. Všechno gradienty a stíny, žádné obrázky – hra si veze jenom fonty. */ .char-card { flex: 0 0 auto; width: min(calc(70 * var(--gvw)), 236px); scroll-snap-align: center; position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,252,243,0.96) 46%, rgba(248,240,225,0.96)); border-radius: 22px; padding: 10px 12px 12px; text-align: center; box-shadow: 0 0 0 1px rgba(74,50,32,0.09), 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 20px -8px rgba(52,36,18,0.28), 0 22px 44px -22px rgba(52,36,18,0.45); display: flex; flex-direction: column; align-items: center; gap: 6px; border: 3px solid transparent; transition: transform .18s var(--ease-out), box-shadow .18s ease, border-color .18s ease; } /* zlatý proužek u horní hrany – drobnost, ale karta hned přestane být plochá */ .char-card::before { content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 3px; border-radius: 0 0 3px 3px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(216,155,38,0.55), transparent); } .card-body { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; flex: 1 1 auto; /* Bez tohohle se text karty naležato vůbec nezalomí: položka flexboxu má ve výchozím stavu `min-width: auto`, takže se sloupec roztáhne na nejdelší řádek a popisek i schopnost vytečou přes okraj karty. */ min-width: 0; min-height: 0; } .card-body > * { flex-shrink: 0; } .char-card:hover { transform: translateY(-4px); } /* Karta uprostřed karuselu je ta, o které se rozhoduje – vystoupí dopředu, sousedky ustoupí do pozadí. Třídu nasazuje IntersectionObserver v js/game.js, ne posluchač rolování: za běhu se tak nic nepočítá a plynulost rolování to nestojí ani snímek. Zvýrazňuje se STÍNEM A SYTOSTÍ, ne zvětšením. Zvětšená karta totiž přeteče karusel (`#shop-grid` roluje, takže transform se do přetečení počítá) a audit rozvržení ji na nízkém displeji hlásí jako useknutou o dva pixely. Stín tenhle problém nemá a čte se stejně dobře. */ #shop-grid .char-card, #items-grid .char-card { opacity: 0.88; transition: transform .18s var(--ease-out), box-shadow .22s ease, border-color .18s ease, opacity .22s ease; } #shop-grid .char-card.focus, #items-grid .char-card.focus { opacity: 1; box-shadow: 0 0 0 1px rgba(74,50,32,0.14), 0 1px 0 rgba(255,255,255,0.95) inset, 0 14px 26px -8px rgba(52,36,18,0.34), 0 30px 54px -24px rgba(52,36,18,0.5); } .char-card.selected { border-color: #7ac95e; box-shadow: 0 0 0 1px rgba(85,161,60,0.4), 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 22px -8px rgba(85,161,60,0.45), 0 26px 48px -24px rgba(40,90,26,0.5); } .char-card.locked canvas { filter: grayscale(0.72) opacity(0.72); } /* koupeno: karta v rohu potvrdí, že je zvířátko doma */ .char-card.owned:not(.selected)::after { content: '✓'; position: absolute; top: -1px; left: -1px; z-index: 3; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; color: #2b5c17; background: linear-gradient(160deg, #cdf0b8, #8fd472); border-radius: 20px 0 20px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.16); } /* proběhnutí světla po tlačítku, na které si hráč našetřil */ .char-card .btn.buy { position: relative; overflow: hidden; } .char-card .btn.buy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.6) 50%, transparent 62%); transform: translateX(-120%); animation: buyShine 3.4s ease-in-out 1.2s infinite; } @keyframes buyShine { 0%, 72% { transform: translateX(-120%); } 86%, 100% { transform: translateX(120%); } } /* nákup: karta krátce nadskočí a rozzáří se */ .char-card.bought { animation: cardBought .62s var(--ease-back) both; } @keyframes cardBought { 0% { transform: scale(1); } 32% { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(122,201,94,0.35), 0 24px 46px -18px rgba(40,90,26,0.6); } 100% { transform: scale(1); } } .char-card h3 { color: #4a3220; font-size: 1.1rem; line-height: 1.15; margin: 2px 0 0; min-height: 1.4rem; display: flex; align-items: center; justify-content: center; letter-spacing: -0.01em; } .char-card .tagline { font-size: 0.78rem; color: #6a5a48; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* vždy rezervuj dva řádky, ať perk i statistiky lícují napříč všemi kartami */ min-height: 2.04rem; } .char-card .perk { position: relative; width: 100%; /* perk vyplní zbytek karty → statistiky i tlačítko sedí ve stejné výšce na všech kartách */ flex: 1 1 auto; min-height: 3.6rem; display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px; font-size: 0.78rem; color: #23511a; font-weight: 700; line-height: 1.4; background: linear-gradient(180deg, rgba(176,232,154,0.34), rgba(122,201,94,0.16)); border: 1px solid rgba(122,201,94,0.5); border-radius: 13px; padding: 8px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); } .char-card .perk-icon { flex: 0 0 auto; font-size: 0.8em; opacity: 0.85; } /* celý popisek perku je vidět – žádné ořezávání */ .char-card .perk-text { display: block; } /* Žádná položka karty se nesmí smrsknout pod svůj obsah. `h3` i `.perk` mají vlastní `min-height`, což u položky flexboxu ruší ochranu `min-height: auto` – na nízkém displeji se pak schránka stlačila pod text a ten vytekl ven přes sousedy (jméno zvířátka přes popis schopnosti, „energie.“ pod zeleným rámečkem). Roste jedině perk, ať karty lícují. */ .char-card > * { flex-shrink: 0; } .char-card .perk { flex: 1 0 auto; } .char-card .btn { margin-top: auto; } /* Karta ozdoby je karta zvířátka bez tabulky vlastností: ozdoby nic nemění na hraní, takže není co ukazovat. Roli „roste jedině tahle položka, ať karty lícují“ přebírá poznámka. */ .item-card { width: min(calc(56 * var(--gvw)), 200px); } .item-card .item-note { flex: 1 0 auto; min-height: 3.2rem; } .item-card h3 { min-height: 0; } /* portrét na trávě, cenovka v rohu */ .portrait-wrap { position: relative; width: 100%; border-radius: 15px; /* kousek louky pod sluncem: obloha, sluneční kotouč, tráva a měkký okraj */ background: radial-gradient(120% 92% at 50% 110%, #9ec969 0 38%, rgba(158,201,105,0) 39%), radial-gradient(26% 22% at 78% 16%, rgba(255,244,196,0.9), rgba(255,244,196,0) 70%), linear-gradient(180deg, #b6e2f8, #d8f0ce); display: flex; justify-content: center; align-items: flex-end; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(74,50,32,0.08), inset 0 -12px 18px -14px rgba(40,70,20,0.45), inset 0 10px 16px -12px rgba(255,255,255,0.9); /* portrét se nikdy nesmí smrsknout kvůli textu pod ním – karta má pevnou výšku (grid je stretch), takže bez tohohle by deníček zvířátko na malém displeji zmáčkl na pár pixelů */ flex-shrink: 0; } .portrait-wrap canvas { height: 118px; width: auto; display: block; } .card-badge { position: absolute; top: 7px; right: 7px; z-index: 2; font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #fff0bd, #ffc94a 58%, #e8a92c); color: #4a3220; box-shadow: 0 0 0 1px rgba(160,110,20,0.35), inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.2); } .card-badge.sel { background: linear-gradient(180deg, #d6f5c4, #7ac95e 58%, #4f9636); color: #1d420f; box-shadow: 0 0 0 1px rgba(50,110,30,0.35), inset 0 1px 0 rgba(255,255,255,0.75), 0 2px 6px rgba(0,0,0,0.2); } /* statistiky – rychlost / skok / výdrž */ .stat-rows { width: 100%; display: grid; gap: 4px; padding: 0 2px; } .stat-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; } .stat-row span { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #8a7a66; text-align: left; white-space: nowrap; } .stat-track { height: 8px; border-radius: 999px; overflow: hidden; background: linear-gradient(180deg, #e2d8c4, #efe7d7); box-shadow: inset 0 1px 2px rgba(74,50,32,0.22), 0 1px 0 rgba(255,255,255,0.7); } .stat-fill { height: 100%; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); } .stat-fill.speed { background: linear-gradient(90deg, #ffb24a, #f28c28); } .stat-fill.jump { background: linear-gradient(90deg, #8fc7e8, #4a9fd8); } .stat-fill.stamina { background: linear-gradient(90deg, #b0e89a, #7ac95e); } /* ---------- NÍZKÉ DISPLEJE: karta se překlopí NALEŽATO ---------- Telefon naležato má výšky málo a šířky dost. Dokud byla karta vždycky svislá (portrét nahoře, text pod ním), dala se do té výšky vejít jedině ubíráním obsahu – na 700 px odešel popisek, na 470 statistiky, na 360 deníček. Obchod tak byl na telefonu chudší než na tabletu, a to je přesně naopak, než má být: na telefonu ho vidí většina hráčů. Teď se karta na nízkém displeji překlopí na dvousloupcovou: portrét vlevo ve sloupci pevné šířky, text vpravo. Výška karty tím spadne zhruba na polovinu a VEJDE SE VŠECHNO – popisek, schopnost, statistiky, deníček i tlačítko koupit. Karta je za to širší, takže jsou vidět dvě místo tří; to je dobrý obchod, protože rozhoduje se stejně vždycky o jedné. Rozpočet výšky karty = herní výška − hlavička obchodu (~40) − odsazení obrazovky (~16) − odsazení karuselu (~22). Na nejhorším reálném poměru (932×430) zbývá ~350 px a karta naležato má ~250 px; na 360 px herní výšky zbývá ~282 px a karta se stáhne na ~230 px (menší portrét, sevřenější mezery). Nic se neskrývá až do úplně nejnižšího stupně. */ @media (max-height: 700px), (orientation: portrait) and (pointer: coarse) and (max-width: 700px) { .shop-note { display: none; } .char-card { flex-direction: row; align-items: stretch; text-align: left; gap: 11px; width: min(calc(92 * var(--gvw)), 384px); padding: 10px 12px 10px 10px; } .char-card::before { display: none; } .portrait-wrap { width: clamp(88px, calc(30 * var(--gvh)), 140px); align-self: stretch; /* zvířátko stojí na trávě, ne ve vzduchu: plátno se drží spodní hrany, kde končí zelený kopeček. Vystředěné vypadalo, jako by levitovalo. */ align-items: flex-end; /* Naležato je rámeček portrétu vysoký přes celou kartu, takže kopeček z výchozího receptu (vrchol v 75 % výšky) nechal nad zvířátkem půl karty prázdné oblohy. Tady se zvedne a přibude za ním druhý, světlejší – z ploché plochy je krajina s hloubkou. */ background: radial-gradient(135% 90% at 50% 98%, #9ec969 0 45%, rgba(158,201,105,0) 46%), radial-gradient(120% 74% at 22% 104%, #b6d98c 0 46%, rgba(182,217,140,0) 47%), radial-gradient(24% 14% at 74% 15%, rgba(255,246,205,0.95), rgba(255,246,205,0) 72%), linear-gradient(180deg, #b6e2f8, #dcf1d6); } .portrait-wrap canvas { width: 100%; height: auto; max-height: 100%; } /* Schopnost naležato neroste. Ve svislé kartě zelený rámeček schválně vyplní zbytek výšky, aby statistiky a tlačítko lícovaly napříč kartami – naležato ale výšku srovnává `align-items: stretch` karuselu, takže by rostoucí rámeček jen dělal velkou prázdnou plochu kolem jedné věty. Přebytek si vezme mezera nad tlačítkem (`.char-card .btn { margin-top: auto }`). */ .char-card .perk { flex: 0 0 auto; } /* `width: 100%` platí jen pro svislou kartu. Naležato by z něj sloupec textu byl široký jako celá karta – tedy i pod portrétem – a text by vytekl přes pravý okraj na sousední kartu. Šířku tady určuje flexbox. */ .card-body { width: auto; align-items: stretch; text-align: left; gap: 5px; } /* `.char-card > * { flex-shrink: 0 }` chrání svislou kartu před stlačením obsahu. Naležato je ale hlavní osa vodorovná, takže by totéž pravidlo zakázalo sloupci textu zúžit se na zbytek karty – a text by vytekl na sousední kartu. Svislou ochranu tady přebírá `.card-body > *`. */ .char-card > .card-body { flex: 1 1 auto; min-width: 0; } .char-card h3 { justify-content: flex-start; min-height: 0; font-size: 1.05rem; } .char-card .tagline { min-height: 0; -webkit-line-clamp: 2; } .char-card .perk { min-height: 0; justify-content: flex-start; text-align: left; padding: 6px 10px; } .char-card .btn { align-self: flex-start; } .card-badge { top: 5px; right: 5px; } .char-card.owned:not(.selected)::after { border-radius: 18px 0 18px 0; } #shop-grid, #items-grid { padding: 10px 28px 12px; } .diary { margin-top: 3px; padding: 5px 8px; } .diary-title { font-size: 0.68rem; margin-bottom: 2px; } .diary-entry { font-size: 0.68rem; -webkit-line-clamp: 2; } /* ozdoba nemá statistiky ani deníček, takže jí stačí užší karta */ .item-card { width: min(calc(74 * var(--gvw)), 306px); } .item-card .item-note { min-height: 0; } /* pozvánková karta zůstane svislá – nemá portrét, jen emoji */ .cta-card { flex-direction: column; align-items: center; text-align: center; width: min(calc(62 * var(--gvw)), 236px); } .cta-card .card-body { align-items: center; text-align: center; } .cta-card .btn { align-self: center; } } /* Ještě níž: portrét i mezery se stáhnou, ale obsah zůstává. Statistiky dostanou užší popisky, deníček jen jeden řádek. */ @media (max-height: 470px), (orientation: portrait) and (pointer: coarse) and (max-width: 470px) { .char-card { gap: 9px; padding: 8px 10px 8px 8px; } .card-body { gap: 4px; } .char-card h3 { font-size: 0.98rem; } .char-card .tagline { font-size: 0.72rem; -webkit-line-clamp: 2; } .char-card .perk { font-size: 0.72rem; padding: 5px 9px; line-height: 1.32; } .char-card .btn.small { padding: 5px 14px; font-size: 0.82rem; } .stat-row { grid-template-columns: 50px 1fr; gap: 6px; } .stat-row span { font-size: 0.55rem; } .stat-track { height: 6px; } .diary-entry { -webkit-line-clamp: 1; } .portrait-wrap { width: clamp(78px, calc(30 * var(--gvh)), 124px); } } /* Nejnižší herní plocha (malý telefon naležato). Karta se ROZŠÍŘÍ – širší sloupec textu = méně řádků = nižší karta – a jako poslední odejde ukázka zápisku. Nadpis deníčku s počtem zůstává, takže se informace neztratí a celý deníček je pořád na jedno ťuknutí. */ @media (max-height: 380px), (orientation: portrait) and (pointer: coarse) and (max-width: 380px) { .char-card { width: min(calc(96 * var(--gvw)), 410px); } .char-card .diary-entry { display: none; } .diary { margin-top: 2px; padding: 4px 8px; } .diary-title { margin-bottom: 0; } #shop-grid, #items-grid { padding: 5px 24px 6px; } .char-card { padding: 7px 10px 7px 7px; } .card-body { gap: 3px; } .char-card .perk { padding: 4px 9px; } .diary { margin-top: 2px; padding: 3px 8px; } .cta-card .cta-art { font-size: 2rem; } .cta-card .cta-text { font-size: 0.74rem; line-height: 1.35; } } /* Úplně nejnižší pruh (herní výška pod ~340 px – např. 720×320 nebo skládačka se zavřeným displejem). Tady už se všechno nevejde ani po utažení mezer, takže jako jediná věc odejde popisek. Je to schválně on a ne statistiky: povahu zvířátka nese i zelený rámeček se schopností, kdežto rychlost/skok/ výdrž se jinde na kartě nedozvíš. */ @media (max-height: 340px), (orientation: portrait) and (pointer: coarse) and (max-width: 340px) { .char-card .tagline { display: none; } .char-card h3 { font-size: 0.94rem; } .portrait-wrap { width: clamp(72px, calc(30 * var(--gvh)), 112px); } } /* pozvánková karta na konci karuselu – ať zve poznat zvířata naživo */ .cta-card { justify-content: center; gap: 10px; background: linear-gradient(180deg, #ffffff, #eafbe0); border: 3px dashed #7ac95e; } .cta-card .cta-art { font-size: 2.9rem; line-height: 1; margin-top: 6px; filter: drop-shadow(0 4px 8px rgba(85,161,60,0.28)); } .cta-card h3 { color: #2c5e1e; } .cta-card .cta-text { font-size: 0.82rem; color: #3a5a2a; font-weight: 600; line-height: 1.45; padding: 0 4px; } .cta-card .btn { margin-top: 6px; } /* ========================================================= KONEC BĚHU – „cílová obrazovka" Jediné místo hry, kde hráč sedí a čte, takže tady se vyplatí utratit trochu efektů. Choreografie (řídí ji `revealOver` v js/game.js, které nasadí .anim / .record na kartu): 0 ms karta přiletí a přejede po ní světlo, pozadí ztmavne a roztočí se za ním vějíř paprsků ~150 portrét vyskočí do zlatého reflektoru a začne se pohupovat ~320 vtip se vypisuje písmenko po písmenku (JS), pak celý panel „doskočí" – pointa má vlastní dobu ~450 statistiky nabíhají po řádcích a čísla se dopočítávají rekord → titulek se rozzáří zlatem a z karty vylétnou konfety Všechno drží CSS; JS jen přepíná třídy a hýbe čísly. Šetrný režim a .low-fx animace vypínají (viz POJISTKY POHYBU na konci souboru) – obrazovka pak naskočí rovnou hotová. ========================================================= */ /* Vystředění, které při přetečení neusekne horní okraj. `justify-content: center` v odrolovatelném sloupci odsune obsah nad začátek toku a tam se k němu nedá dorolovat – na telefonu na šířku tak zmizel nadpis karty i spodní řada tlačítek. `safe center` středí jen dokud se obsah vejde, pak se chová jako flex-start. Prohlížeč, který `safe` neumí, zahodí celou deklaraci a zůstane mu flex-start – taky správně, jen bez vystředění. Ze stejného důvodu je `safe center` i u nastavení, deníčku a menu. */ #screen-over, #screen-pause { justify-content: safe center; } #screen-pause { background: rgba(20, 30, 25, 0.45); backdrop-filter: blur(3px); } #screen-over { /* Vodorovně ořez (paprsky), svisle rolování – na nízkém displeji nebo při systémově zvětšeném písmu se karta nevejde a musí se k ní dát dojet. Kulisu drží v mezích .over-backdrop, jinak by rolovací plocha nabobtnala na velikost paprsků. */ overflow: clip auto; background: radial-gradient(90% 60% at 50% 46%, rgba(255,214,120,0.20), transparent 62%), radial-gradient(120% 100% at 50% 50%, rgba(14,30,20,0.42), rgba(6,16,10,0.78) 78%); backdrop-filter: blur(4px) saturate(1.1); } /* vějíř paprsků za kartou – jeden opakovaný conic gradient, doprostřed vymaskovaný, ať nevzniká ostrý střed */ /* ořezaný obal kulisy – viz komentář u #screen-over */ .over-backdrop { position: absolute; inset: 0; overflow: clip; pointer-events: none; } .over-rays { position: absolute; left: 50%; top: 50%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255,224,138,0.12) 0deg 5deg, transparent 5deg 16deg); -webkit-mask-image: radial-gradient(closest-side, transparent 8%, #000 26%, transparent 62%); mask-image: radial-gradient(closest-side, transparent 8%, #000 26%, transparent 62%); } #screen-over.visible .over-rays { animation: overRaysIn 1.1s ease-out .1s forwards, overRaysSpin 64s linear infinite; } @keyframes overRaysIn { to { opacity: 1; } } @keyframes overRaysSpin { to { rotate: 360deg; } } /* pyl se půjčuje z menu (.menu-fx), jen se přebarví do zlata */ .over-fx i { background: radial-gradient(circle, rgba(255,236,180,0.95), rgba(255,201,74,0) 70%); } /* Karta roste s displejem: na notebooku i televizi má vtip skoro dvojnásobek písma proti telefonu, aby se nekrčil uprostřed velké plochy. Telefon na šířku si níž v @media stejně všechno přenastaví na pevné hodnoty. */ .over-card { position: relative; isolation: isolate; background: linear-gradient(180deg, #fffdf5, #f5ecd8); border-radius: 30px; padding: clamp(20px, 3.2vmin, 34px) clamp(22px, 4vmin, 44px) clamp(18px, 2.8vmin, 30px); max-width: min(700px, calc(94 * var(--gvw))); width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.8vmin, 20px); box-shadow: 0 0 0 2px rgba(216,155,38,0.35), 0 30px 70px rgba(0,0,0,0.45), 0 0 90px rgba(255,201,74,0.12), inset 0 2px 0 rgba(255,255,255,0.9); } #screen-over.visible .over-card.anim { animation: overCardIn .5s var(--ease-back) both; } @keyframes overCardIn { from { opacity: 0; transform: translateY(26px) scale(0.86); } to { opacity: 1; transform: none; } } /* přejezd světla po kartě – jednou, hned po dosednutí */ .over-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(72deg, transparent 34%, rgba(255,255,255,0.75) 50%, transparent 66%); background-size: 300% 100%; } #screen-over.visible .over-card.anim::after { animation: overSheen .9s ease-out .28s both; } @keyframes overSheen { from { opacity: 0.9; background-position: 160% 0; } to { opacity: 0; background-position: -60% 0; } } .over-card.small { max-width: 340px; } .over-card h2 { color: #4a3220; font-size: clamp(1.45rem, 4.6vmin, 2.4rem); letter-spacing: 0.01em; text-shadow: 0 2px 0 rgba(255,255,255,0.85); } #screen-over.visible .over-card.anim h2 { animation: overTitleIn .45s var(--ease-back) .06s both; } @keyframes overTitleIn { from { opacity: 0; transform: scale(1.35); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } /* rekord: titulek přejde do zlata a pomalu pulzuje */ .over-card.record h2 { color: transparent; background: linear-gradient(100deg, var(--lr-gold-dark), #ffe9a8 42%, var(--lr-gold-2) 58%, var(--lr-gold-dark)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 6px rgba(216,155,38,0.55)); animation: overRecordShine 3.2s linear infinite; } @keyframes overRecordShine { from { background-position: 180% 0; } to { background-position: -80% 0; } } /* ---------- portrét v reflektoru ---------- */ .over-pic { position: relative; display: grid; place-items: center; } /* reflektor je vázaný procenty na portrét, takže se zvětšuje spolu s ním */ .over-pic::before, .over-pic::after { content: ''; position: absolute; inset: -34% -22%; border-radius: 50%; pointer-events: none; z-index: -1; } .over-pic::before { background: radial-gradient(circle, rgba(255,224,138,0.75), rgba(255,201,74,0.28) 42%, transparent 68%); animation: overGlow 3.4s ease-in-out infinite; } .over-pic::after { background: repeating-conic-gradient(from 0deg, rgba(255,224,138,0.5) 0deg 4deg, transparent 4deg 20deg); -webkit-mask-image: radial-gradient(closest-side, transparent 34%, #000 52%, transparent 78%); mask-image: radial-gradient(closest-side, transparent 34%, #000 52%, transparent 78%); animation: overRaysSpin 22s linear infinite; opacity: 0.55; } @keyframes overGlow { 0%, 100% { opacity: 0.55; scale: 0.94; } 50% { opacity: 0.95; scale: 1.06; } } #over-portrait { position: relative; display: block; width: clamp(150px, 24vmin, 230px); height: auto; } #screen-over.visible .over-card.anim #over-portrait { animation: overPicIn .5s var(--ease-back) .12s both, overBob 3.2s ease-in-out .62s infinite; } @keyframes overPicIn { from { opacity: 0; transform: translateY(14px) scale(0.6); } to { opacity: 1; transform: none; } } @keyframes overBob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } } /* ---------- vtip ---------- Hvězda obrazovky, tak dostal největší písmo na kartě. Vypisuje se zleva doprava, takže text musí být zarovnaný doleva – na střed by při každém písmenu poskočil. Výšku panelu drží .story-ghost: neviditelná kopie celého vtipu ve stejné buňce mřížky. Panel je tak přesně tak vysoký, jak je vtip dlouhý (žádná rezerva pod textem) a přitom se během psaní ani nehne. */ .over-card .story { position: relative; width: 100%; display: grid; color: #4a3220; font-weight: 700; font-size: clamp(1rem, 2.5vmin, 1.4rem); line-height: 1.55; text-align: left; background: linear-gradient(165deg, rgba(255,222,130,0.42), rgba(255,201,74,0.20)); border: 1px solid rgba(216,155,38,0.38); border-radius: 18px; padding: clamp(12px, 1.9vmin, 20px) clamp(14px, 2.2vmin, 24px) clamp(12px, 1.9vmin, 20px) clamp(30px, 4.2vmin, 46px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 6px 18px rgba(216,155,38,0.14); } .story-ghost, .story-text { grid-area: 1 / 1; } .story-ghost { visibility: hidden; } .over-card .story::before { content: '\201C'; position: absolute; left: clamp(8px, 1.2vmin, 14px); top: 2px; font-size: clamp(2.3rem, 5vmin, 3.2rem); line-height: 1; color: rgba(216,155,38,0.5); } #screen-over.visible .over-card.anim .story { animation: overStoryIn .45s var(--ease-out) .22s both; } @keyframes overStoryIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* kurzor při psaní */ .story-text::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.14em; background: rgba(216,155,38,0.9); animation: overCaret .7s steps(1) infinite; } .story.done .story-text::after { display: none; } @keyframes overCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* pointa dopadla – panel se nadechne a zlatě problikne */ .story.punch { animation: overPunch .55s var(--ease-back); } @keyframes overPunch { 0% { scale: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 6px 18px rgba(216,155,38,0.14); } 40% { scale: 1.035; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 30px rgba(216,155,38,0.5); } 100% { scale: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 6px 18px rgba(216,155,38,0.14); } } /* ---------- statistiky ---------- */ .over-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; width: 100%; } .stat { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; color: #6a5a48; font-size: clamp(0.92rem, 1.9vmin, 1.12rem); background: rgba(74,50,32,0.05); border-radius: 10px; padding: 4px 10px; } .stat-val { color: #4a3220; font-variant-numeric: tabular-nums; } .stat-val.gold { color: #d89b26; } /* čísla dopadají po řadě – nth-child dělá schody bez jediného řádku JS */ #screen-over.visible .over-card.anim .stat { animation: overRowIn .34s var(--ease-out) both; } .over-card.anim .stat:nth-child(1) { animation-delay: .40s; } .over-card.anim .stat:nth-child(2) { animation-delay: .47s; } .over-card.anim .stat:nth-child(3) { animation-delay: .54s; } .over-card.anim .stat:nth-child(4) { animation-delay: .61s; } .over-card.anim .stat:nth-child(5) { animation-delay: .68s; } @keyframes overRowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } /* doskočení čísla na konci dopočítávání */ .stat-val.pop { animation: overValPop .34s var(--ease-back); } @keyframes overValPop { 0% { scale: 1; } 45% { scale: 1.28; } 100% { scale: 1; } } /* ---------- tlačítka ---------- */ .over-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; } .over-buttons .row { display: flex; gap: 10px; } #screen-over.visible .over-card.anim .over-buttons { animation: overStoryIn .4s var(--ease-out) .74s both; } /* ---------- konfety (jen při rekordu) ---------- Čtrnáct lístků vyletí z horní hrany karty. Směr a dolet nese --a/--d, ať stačí jeden keyframe. */ .over-burst { position: absolute; left: 50%; top: 18%; width: 0; height: 0; pointer-events: none; } .over-burst i { position: absolute; width: 10px; height: 14px; margin: -7px 0 0 -5px; border-radius: 3px; opacity: 0; background: var(--lr-gold-2); } .over-burst i:nth-child(2n) { background: var(--lr-green-2); border-radius: 50%; } .over-burst i:nth-child(3n) { background: #ff9c6e; } .over-burst i:nth-child(5n) { background: #fff3c9; } .over-burst i:nth-child(1) { --a: -84deg; --d: 210px; } .over-burst i:nth-child(2) { --a: -62deg; --d: 260px; } .over-burst i:nth-child(3) { --a: -41deg; --d: 190px; } .over-burst i:nth-child(4) { --a: -19deg; --d: 240px; } .over-burst i:nth-child(5) { --a: 3deg; --d: 200px; } .over-burst i:nth-child(6) { --a: 24deg; --d: 250px; } .over-burst i:nth-child(7) { --a: 46deg; --d: 185px; } .over-burst i:nth-child(8) { --a: 68deg; --d: 230px; } .over-burst i:nth-child(9) { --a: 96deg; --d: 215px; } .over-burst i:nth-child(10) { --a: 118deg; --d: 265px; } .over-burst i:nth-child(11) { --a: 140deg; --d: 195px; } .over-burst i:nth-child(12) { --a: 162deg; --d: 245px; } .over-burst i:nth-child(13) { --a: -140deg; --d: 205px; } .over-burst i:nth-child(14) { --a: -110deg; --d: 255px; } #screen-over.visible .over-card.record .over-burst i { animation: overConfetti 1.5s cubic-bezier(.15,.7,.35,1) .3s both; } .over-card.record .over-burst i:nth-child(2n) { animation-delay: .38s; } .over-card.record .over-burst i:nth-child(3n) { animation-delay: .46s; } @keyframes overConfetti { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(0deg); } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(540deg); } } /* ---------- odznaky (achievementy) ---------- */ .ach-chip { border: none; cursor: pointer; font-family: inherit; font-size: inherit; transition: transform .12s; } .ach-chip:hover { transform: translateY(-2px); } .ach-chip:active { transform: translateY(0); } .ach-card { max-width: 460px; } .ach-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; } .ach-head h2 { margin: 0; font-size: 1.5rem; } /* POZOR na jednotky: `60vh` je 60 % výšky FYZICKÉHO displeje, ale hra na otočeném telefonu má osy prohozené – seznam pak vyšel vyšší než celá herní plocha a odznaky přetekly ven z panelu. Herní výška je --gvh. */ #ach-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-height: calc(58 * var(--gvh)); overflow-y: auto; } .ach-row { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.05); border-radius: 14px; padding: 10px 14px; opacity: 0.55; } .ach-row.got { opacity: 1; background: rgba(255, 207, 77, 0.22); box-shadow: inset 0 0 0 2px rgba(255, 207, 77, 0.5); } .ach-ico { font-size: 1.5rem; width: 30px; text-align: center; flex-shrink: 0; } /* delší, vtipnější názvy se musí vejít i na dva řádky */ .ach-name { flex: 1; min-width: 0; text-align: left; font-weight: 700; color: #5a4a38; line-height: 1.3; font-size: 0.92rem; } .ach-row.got .ach-name { color: #4a3220; } .ach-mark { color: #d89b26; font-weight: 800; font-size: 1.1rem; width: 18px; } /* ---------- vývojářské menu (skryté) ---------- */ /* toast */ #toast { position: fixed; bottom: max(30px, var(--safe-bottom)); left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(40, 34, 26, 0.92); color: #ffe08a; font-weight: 700; padding: 12px 24px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 30; max-width: calc(90 * var(--gvw)); text-align: center; } #toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ========================================================= Výzva k otočení telefonu (jen mobil na výšku) – noční louka se světluškami a telefonem, který se sám otočí. Normálně ji nahrazuje vynucená šířka (viz .force-landscape nahoře); ukáže se jen jako záloha, když selže JavaScript. ========================================================= */ #rotate-overlay { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; padding: max(24px, var(--safe-top)) 24px max(24px, var(--safe-bottom)); background: radial-gradient(95% 60% at 50% -12%, rgba(255, 224, 138, 0.16), rgba(255, 224, 138, 0) 62%), linear-gradient(180deg, #12332a 0%, #22563a 55%, #35804a 100%); color: #fff; text-align: center; overflow: hidden; } @media (orientation: portrait) and (pointer: coarse) { #rotate-overlay { display: flex; } } /* tmavé kopce louky u spodního okraje */ .rotate-meadow { position: absolute; left: -8vw; right: -8vw; bottom: -10vh; height: 26vh; pointer-events: none; background: radial-gradient(58% 100% at 20% 100%, rgba(9, 38, 22, 0.9) 57%, transparent 58%), radial-gradient(66% 112% at 80% 102%, rgba(12, 47, 27, 0.85) 55%, transparent 56%); } /* poletující světlušky */ .rotate-fireflies i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffe08a; filter: blur(1px); box-shadow: 0 0 12px 3px rgba(255, 224, 138, 0.45); opacity: 0; animation: fireflyFloat 6s ease-in-out infinite; } .rotate-fireflies i:nth-child(1) { left: 12%; top: 24%; animation-delay: 0s; animation-duration: 6.4s; } .rotate-fireflies i:nth-child(2) { left: 84%; top: 18%; animation-delay: 1.2s; animation-duration: 7.6s; } .rotate-fireflies i:nth-child(3) { left: 22%; top: 72%; animation-delay: 2.6s; animation-duration: 5.8s; } .rotate-fireflies i:nth-child(4) { left: 76%; top: 66%; animation-delay: 0.8s; animation-duration: 8.2s; } .rotate-fireflies i:nth-child(5) { left: 50%; top: 10%; animation-delay: 3.4s; animation-duration: 7s; } .rotate-fireflies i:nth-child(6) { left: 8%; top: 52%; animation-delay: 4.4s; animation-duration: 6.6s; } @keyframes fireflyFloat { 0%, 100% { opacity: 0; transform: translateY(8px); } 25% { opacity: 0.9; } 55% { opacity: 0.3; transform: translateY(-16px); } 80% { opacity: 0.75; transform: translateY(-4px); } } /* skleněná karta s obsahem */ .rotate-card { position: relative; display: flex; flex-direction: column; align-items: center; max-width: min(86vw, 360px); padding: 26px 30px 24px; background: rgba(7, 27, 17, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 30px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35); animation: rotateCardIn .6s cubic-bezier(.2, .9, .3, 1.15) both; } @keyframes rotateCardIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } } /* telefon s mini loukou na displeji + šipka otočení */ .rotate-stage { position: relative; width: 136px; height: 136px; margin-bottom: 14px; display: grid; place-items: center; } .rotate-arc { position: absolute; inset: 0; width: 100%; height: 100%; animation: arcPulse 3.6s ease-in-out infinite; } @keyframes arcPulse { 0%, 100% { opacity: 0.55; } 30% { opacity: 1; } } .rotate-device { position: relative; width: 56px; height: 100px; border-radius: 14px; background: #0d2418; border: 3px solid #f6f2e7; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); animation: deviceTurn 3.6s cubic-bezier(.65, -0.1, .3, 1.2) infinite; } @keyframes deviceTurn { 0%, 16% { transform: rotate(0deg); } 38% { transform: rotate(96deg); } 46%, 76% { transform: rotate(90deg); } 94%, 100% { transform: rotate(0deg); } } .rotate-notch { position: absolute; top: 5px; left: 50%; width: 16px; height: 3px; margin-left: -8px; border-radius: 999px; background: rgba(246, 242, 231, 0.8); z-index: 1; } .rotate-screen { position: absolute; inset: 6px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #8ed4f7 0%, #cdeef7 54%, #a5cd6f 55%, #7ab84e 100%); } .rs-sun { position: absolute; top: 8px; right: 8px; width: 13px; height: 13px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 10px 3px rgba(255, 224, 138, 0.75); } .rs-hill { position: absolute; bottom: -8px; left: -10px; width: 46px; height: 24px; border-radius: 50%; background: #55a13c; } /* texty výzvy */ .rotate-title { font-size: clamp(1.35rem, 6.2vw, 1.7rem); font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.25); } .rotate-sub { margin-top: 4px; font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); } .rotate-rule { width: 76px; height: 1px; margin: 15px auto 12px; background: linear-gradient(90deg, transparent, rgba(255, 224, 138, 0.65), transparent); } .rotate-en { font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); line-height: 1.45; } .rotate-en strong { display: block; font-size: 0.9rem; font-weight: 700; color: rgba(255, 255, 255, 0.78); } /* šetrný režim – bez točení a poletování, telefon rovnou naležato */ @media (prefers-reduced-motion: reduce) { .rotate-device { animation: none; transform: rotate(90deg); } .rotate-fireflies i, .rotate-arc { animation: none; opacity: 0.6; } .rotate-card { animation: none; } } /* ========================================================= AF signatura – filmová znělka autora před spuštěním hry (logo se vynoří ze tmy, pod ním web, pak se vše prolne do hry) ========================================================= */ #af-splash { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: radial-gradient(52% 42% at 50% 45%, rgba(212, 164, 90, 0.08), rgba(212, 164, 90, 0) 70%), #0a0908; transition: opacity 1s ease .35s; /* pozadí odchází jako poslední */ } /* Pojistka: kdyby JS selhal, znělka se po chvíli sama uklidí. Běží teprve od nasazení .af-armed – tedy až po ťuknutí na startovní obrazovku. Jinak by devět sekund odtikalo ještě pod ní a hráč by znělku nikdy neviděl. */ #af-splash.af-armed { animation: afSafety 1s ease 9s forwards; } @keyframes afSafety { to { opacity: 0; visibility: hidden; } } #af-splash.af-leave { opacity: 0; pointer-events: none; } #af-splash.af-leave .af-inner { animation: afInnerOut .85s ease forwards; } @keyframes afInnerOut { to { opacity: 0; transform: translateY(-2vmin) scale(1.035); } } .af-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3vmin, 26px); transform: translateY(-2vmin); } .af-mark { width: clamp(150px, 32vmin, 250px); height: auto; opacity: 0; filter: drop-shadow(0 0 28px rgba(212, 164, 90, 0.16)); animation: afMarkIn 2.1s cubic-bezier(.22, .6, .2, 1) .45s forwards; } @keyframes afMarkIn { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } } .af-rule { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 164, 90, 0.7), transparent); opacity: 0; animation: afFadeIn 1.2s ease 1.75s forwards; } @keyframes afFadeIn { to { opacity: 1; } } .af-site { font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif; font-size: clamp(0.9rem, 2.8vmin, 1.1rem); letter-spacing: 0.32em; text-indent: 0.32em; /* vyrovnává mezeru za posledním znakem – text sedí opticky na středu */ color: #f1e9d8; opacity: 0; animation: afSiteIn 1.5s ease 2s forwards; } @keyframes afSiteIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 0.85; transform: none; } } @media (prefers-reduced-motion: reduce) { .af-mark { animation: afFadeIn 1s ease .3s forwards; transform: none; } .af-site { animation: afFadeIn 1s ease 1s forwards; transform: none; opacity: 0; } #af-splash.af-leave .af-inner { animation: none; opacity: 0; transition: opacity .8s ease; } } /* ========================================================= Nízké displeje (telefon na šířku) – všechno se musí vejít na obrazovku bez rolování ========================================================= */ @media (max-height: 560px), (orientation: portrait) and (pointer: coarse) and (max-width: 560px) { .screen { padding: max(8px, var(--safe-top)) 16px max(8px, var(--safe-bottom)); } /* menu na šířku – vymazlená verze */ #screen-menu { background: linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0) 34%), linear-gradient(0deg, rgba(0,0,0,0.22), rgba(0,0,0,0) 30%); } .menu-rail { top: max(8px, var(--safe-top)); right: max(10px, var(--safe-right)); gap: 6px; } .lang-btn { font-size: 0.74rem; padding: 5px 11px; } } /* na úzkém displeji na šířku zbydou z přepínače jen vlaječky, ať nekolidují s titulem */ @media (max-height: 560px) and (max-width: 740px), (orientation: portrait) and (pointer: coarse) and (max-width: 560px) and (max-height: 740px) { .lang-label { display: none; } .lang-btn { font-size: 0.95rem; padding: 4px 10px; } } @media (max-height: 560px), (orientation: portrait) and (pointer: coarse) and (max-width: 560px) { /* ---------- menu na šířku ---------- Grid: značka vlevo nahoře, deck vpravo přes dva řádky, mise vlevo dole. Pravý horní roh zůstává prázdný – sedí v něm absolutní systémová lišta. Levý sloupec je záměrně volný: běží v něm vybrané zvířátko na canvasu. */ #screen-menu { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; grid-template-areas: "brand ." ". deck" "missions deck"; align-items: start; justify-items: start; gap: 6px 12px; padding-right: max(calc(2 * var(--gvw)), var(--safe-right), 12px); } .menu-brand { grid-area: brand; text-align: left; } .menu-deck { grid-area: deck; align-self: center; justify-self: end; } .menu-missions { grid-area: missions; align-self: end; } .game-title { font-size: clamp(1.9rem, calc(14 * var(--gvh)), 3.4rem); text-shadow: 0 3px 0 var(--lr-green-dark), 0 6px 0 rgba(0,0,0,0.15), 0 10px 22px rgba(0,0,0,0.3); } .game-title span { text-shadow: 0 3px 0 var(--lr-gold-dark), 0 6px 0 rgba(0,0,0,0.15), 0 10px 22px rgba(0,0,0,0.3); } .subtitle { margin-top: 2px; font-size: 0.8rem; max-width: calc(46 * var(--gvw)); } /* deck se stáhne, ať vlevo zbyde místo na zvířátko */ .menu-deck { width: min(calc(46 * var(--gvw)), 320px); gap: 8px; padding: 10px 14px 12px; border-radius: 20px; } .deck-chips { gap: 6px; padding-bottom: 8px; } .deck-char .charname { font-size: 1.05rem; } .deck-char .perk { font-size: 0.76rem; } .deck-stats { margin-top: 6px; } .deck-actions { gap: 8px; } .btn { font-size: 0.92rem; padding: 8px 20px; } .btn.big { font-size: 1.15rem; padding: 10px 32px; } .btn.tiny { font-size: 0.76rem; padding: 6px 12px; } .btn.round { width: 40px; height: 40px; line-height: 1; font-size: min(1.1rem, 18px); } .hud-chip { padding: 4px 12px; font-size: 0.85rem; } .controls-hint { font-size: 0.7rem; } /* popover misí se otevírá od levého okraje, ne od středu */ .daily-pop { left: 0; translate: 0 0; width: min(340px, calc(56 * var(--gvw))); } .daily-pop[hidden] { translate: 0 0; } .daily-title { font-size: 0.7rem; margin-bottom: 3px; } .daily-row { font-size: 0.72rem; padding: 2px 0; gap: 6px; } .daily-alldone { font-size: 0.72rem; } /* deníček na nízkém displeji – ať se vedle knížky vejde hlavička i lišta listování */ .book { height: min(540px, calc(62 * var(--gvh))); } .book-head h2 { font-size: 1.1rem; } .book-stage { gap: 6px; } .book-nav { gap: 10px; } /* karta po doběhnutí – přeskládaná na šířku */ #screen-over { padding: 8px 12px; } .over-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "title title" "pic story" "stats story" "btns btns"; align-items: center; gap: 6px 16px; max-width: min(680px, calc(96 * var(--gvw))); padding: 12px 20px; } .over-card h2 { grid-area: title; font-size: 1.25rem; } .over-pic { grid-area: pic; justify-self: center; } #over-portrait { width: 118px; } .over-card .story { grid-area: story; align-self: center; font-size: clamp(0.95rem, calc(4.4 * var(--gvh)), 1.2rem); line-height: 1.45; padding: 10px 13px 10px 30px; } .over-card .story::before { font-size: 2.1rem; left: 7px; top: 2px; } .over-stats { grid-area: stats; grid-template-columns: 1fr; gap: 2px; } .stat { padding: 2px 8px; font-size: 0.92rem; } .over-stats .stat { gap: 14px; } .over-buttons { grid-area: btns; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; } /* pauza zůstává jednoduchá */ .over-card.small { display: flex; padding: 16px 22px; gap: 10px; } .over-card.small h2 { font-size: 1.25rem; } } /* Nejnižší herní plocha: karta po doběhnutí se musí vejít celá i s tlačítky. Portrét se zmenší (ne zruší – je to odměna za běh), statistiky a tlačítka se stáhnou. Bez tohohle usekl displej spodní řadu „Pochlubit se / Zvířátka / Menu“ a hráč se k nim dostal jen odrolováním. */ @media (max-height: 360px), (orientation: portrait) and (pointer: coarse) and (max-width: 360px) { .book { height: min(540px, calc(56 * var(--gvh))); } .book-head h2 { font-size: 1rem; } #screen-over { padding: 6px 10px; } .over-card { gap: 4px 12px; padding: 8px 14px; } .over-card h2 { font-size: 1.05rem; } #over-portrait { width: 84px; } .over-card .story { font-size: 0.86rem; line-height: 1.35; padding: 7px 10px 7px 24px; } .over-card .story::before { font-size: 1.6rem; left: 5px; } .stat { padding: 1px 7px; font-size: 0.8rem; } .over-buttons { gap: 6px; } .over-buttons .btn { font-size: 0.82rem; padding: 6px 14px; } .over-buttons .btn.big { font-size: 0.95rem; padding: 7px 20px; } } /* úzký telefon na šířku – deck se stáhne, aby vlevo zbylo místo na vybrané zvířátko */ @media (max-height: 560px) and (max-width: 540px), (orientation: portrait) and (pointer: coarse) and (max-width: 560px) and (max-height: 540px) { .menu-deck { gap: 6px; padding: 8px 12px 10px; width: min(calc(48 * var(--gvw)), 280px); } .deck-chips { padding-bottom: 6px; } .btn.big { font-size: 1.05rem; padding: 9px 24px; } .btn { font-size: 0.85rem; padding: 7px 14px; } } /* opravdu nízký displej – rozhoduje výška, ne šířka. Obětují se stat bary a podtitul, ne popis schopnosti: ten je jediný důvod, proč si hráč postavu vybírá (a v obchodě jsou pruhy pořád vidět). */ @media (max-height: 360px), (orientation: portrait) and (pointer: coarse) and (max-width: 360px) { .deck-stats { display: none; } .subtitle { display: none; } .menu-deck { gap: 6px; padding: 8px 12px 10px; } .deck-chips { padding-bottom: 6px; } .deck-actions { gap: 6px; } .btn.big { font-size: 1.05rem; padding: 8px 24px; } } /* ========================================================= POJISTKY POHYBU „low-fx“ nasazuje js/game.js, když v menu klesnou snímky – efekty zhasnou dřív, než se z menu stane trhaná diashow. Šetrný režim (nastavení systému) vypíná totéž plus animace, které tu byly dřív a nebyly nijak ošetřené. ========================================================= */ html.low-fx .menu-fx, html.low-fx .rotate-fireflies { display: none; } html.low-fx .game-title::after, html.low-fx .btn.play::after { display: none; } html.low-fx .game-title span, html.low-fx .btn.play, html.low-fx .hud-chip.lucky { animation: none; } html.low-fx .menu-deck { backdrop-filter: none; background: rgba(20,46,35,0.62); } html.low-fx .lang-switch, html.low-fx #btn-settings { backdrop-filter: none; background: rgba(255,255,255,0.34); } html.low-fx #screen-over, html.low-fx #screen-pause, html.low-fx #screen-settings { backdrop-filter: none; } html.low-fx .menu-brand, html.low-fx .menu-deck { translate: none; } /* cílová obrazovka: kulisa pryč, karta naskočí hotová (js/game.js v tomhle režimu ani nenasadí .anim, tohle je pojistka) */ html.low-fx .over-rays, html.low-fx .over-burst, html.low-fx .over-pic::before, html.low-fx .over-pic::after, html.low-fx .story-text::after { display: none; } html.low-fx .over-card, html.low-fx .over-card::after, html.low-fx .over-card h2, html.low-fx #over-portrait, html.low-fx .over-card .story, html.low-fx .over-card .stat, html.low-fx .over-buttons { animation: none; opacity: 1; } /* deníček: papír zůstane, pohyb zmizí (js/game.js v tomhle režimu list ani nerozehraje, tohle je pojistka pro nástup obsahu a pečeť) */ html.low-fx .book-page > *, html.low-fx .book-page > .fact-card, html.low-fx #screen-diary.visible .book { animation: none; opacity: 1; transform: none; } html.low-fx .book-page > .fact-card { transform: rotate(-0.7deg); } html.low-fx .page-wax { animation: none; } html.low-fx .page-extras .scrap-photo.l { animation: none; opacity: 1; transform: rotate(-3.4deg); } html.low-fx .page-extras .scrap-photo.r { animation: none; opacity: 1; transform: rotate(2.8deg); } html.low-fx .page-extras .scrap-note, html.low-fx .page-extras .scrap-stain { animation: none; opacity: 1; } html.low-fx .scrap-doodle svg > * { animation: none; stroke-dashoffset: 0; } html.low-fx .book-cast, html.low-fx .book-leaf { display: none; } @media (prefers-reduced-motion: reduce) { .menu-fx { display: none; } .game-title::after, .btn.play::after { display: none; } .game-title span, .btn.play, .hud-chip.lucky, #hud-energy-fill.low, #btn-tut-continue { animation: none; } .menu-brand, .menu-deck { translate: none; } #screen-menu.fade-in { animation: none; } #screen-menu.launching::after { animation: none; } .book-page > *, .book-page > .fact-card, #screen-diary.visible .book { animation: none; opacity: 1; transform: none; } .book-page > .fact-card { transform: rotate(-0.7deg); } .page-wax { animation: none; } .page-extras .scrap-photo.l { animation: none; opacity: 1; transform: rotate(-3.4deg); } .page-extras .scrap-photo.r { animation: none; opacity: 1; transform: rotate(2.8deg); } .page-extras .scrap-note, .page-extras .scrap-stain { animation: none; opacity: 1; } .scrap-doodle svg > * { animation: none; stroke-dashoffset: 0; } .book-cast, .book-leaf { display: none; } /* nástup i přechody obrazovek zůstanou, ale jen jako prolnutí */ #screen-menu.visible > .menu-brand, #screen-menu.visible > .menu-rail, #screen-menu.visible > .menu-deck, #screen-menu.visible > .menu-missions { animation: none; } .screen, .screen.visible, #screen-shop, #screen-ach, #screen-settings, #screen-over { transform: none; } /* cílová obrazovka – zůstane jen ztmavené pozadí a hotová karta */ .over-rays, .over-burst, .over-pic::before, .over-pic::after, .story-text::after { display: none; } .over-card, .over-card::after, .over-card h2, .over-card.record h2, #over-portrait, .over-card .story, .over-card .stat, .over-buttons { animation: none; opacity: 1; } .daily-pop, .daily-pop[hidden] { transform: none; } } /* ========================================================= KARLOVO UVÍTÁNÍ (#screen-karel) Scéna má vlastní plátno přes celou plochu; DOM nad ním nese jenom text bubliny, odkazy a tlačítka. Layout .screen (sloupec s odsazením a rolováním) by tady překážel, proto se přepisuje. ========================================================= */ /* `hidden` musí vyhrát nad display: flex/inline-block níž – jinak zůstane spodní lišta i odkaz v bublině klikatelné, i když je „schovaná" */ .karel-screen [hidden] { display: none; } .karel-screen { display: block; padding: 0; overflow: hidden; z-index: 60; background: #ffd79a; /* než se plátno poprvé vykreslí */ } #karel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; } /* křížek vpravo nahoře – vždycky nad vším ostatním ve scéně */ .karel-skip { position: absolute; top: max(10px, var(--safe-top)); right: max(10px, var(--safe-right)); z-index: 4; } /* ---------- bublina ---------- Jezdí za Karlovou hlavou (transform nastavuje js/karel.js), ocásek se posouvá přes --tail, aby mířil na hlavu i tehdy, když se bublina opře o kraj obrazovky. */ .karel-bubble { position: absolute; top: 0; left: 0; z-index: 3; /* --gvw/--gvh jsou „herní" procenta – při vynucené rotaci prohozená, obyčejné vw/vh by tady měřilo špatnou osu */ max-width: min(46ch, calc(74 * var(--gvw))); padding: 14px 18px 12px; border-radius: 20px; /* papír, ne bílý obdélník: teplý přechod, světlo shora a vrstvený stín */ background: linear-gradient(180deg, rgba(255,254,250,0.975), rgba(253,246,229,0.965)); border: 3px solid #ffc94a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(90, 60, 20, 0.14), 0 14px 30px -10px rgba(90, 60, 20, 0.35); color: #4a3220; /* Nejméně 18 px v PIXELECH, ne v rem: Karel mluví k novému hráči dřív, než si stihne nastavit cokoli ve hře, a dřív tu na telefonu vycházelo kolem 14 px (kompaktní scéna to stahovala na 0,86 rem). */ font-size: clamp(18px, calc(2.6 * var(--gvh)), 22px); font-weight: 600; line-height: 1.38; text-align: left; cursor: pointer; will-change: transform; } .karel-bubble.warm { border-color: #7ac95e; background: rgba(246, 255, 240, 0.97); } .karel-bubble p { white-space: pre-line; /* věty v hláškách jsou zalomené ručně */ min-height: 1.38em; } .karel-bubble::after { /* ocásek dolů k hlavě */ content: ""; position: absolute; bottom: -13px; left: 50%; margin-left: calc(-10px + var(--tail, 0px)); border: 10px solid transparent; border-top-color: #ffc94a; border-bottom: 0; } .karel-bubble.warm::after { border-top-color: #7ac95e; } .karel-bubble.pop { animation: karelPop var(--dur-base) var(--ease-back); } @keyframes karelPop { from { opacity: 0; } to { opacity: 1; } } .karel-link { display: inline-block; margin-top: 10px; padding: 8px 18px; border-radius: 999px; background: linear-gradient(180deg, #b0e89a, #7ac95e); box-shadow: 0 3px 0 #55a13c; color: #234a12; font-weight: 800; text-decoration: none; } .karel-link:active { transform: translateY(2px); box-shadow: 0 1px 0 #55a13c; } /* Volba jazyka – první, na co se Karel nového hráče zeptá. Dvě velká tlačítka, protože na tuhle otázku se nečte, na ni se ťuká. */ .karel-choice { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .karel-choice .karel-lang { flex: 1 1 8em; min-height: 48px; font-size: 1.1rem; padding: 10px 18px; } .karel-go { display: block; width: 100%; margin-top: 12px; min-height: 48px; } .karel-choice .karel-lang.active { background: linear-gradient(180deg, #b0e89a, #7ac95e); box-shadow: 0 3px 0 #55a13c; color: #234a12; } /* Šipka „ťukni dál". Není to jen znak – je to jediné, co hráči řekne, že se dá pokračovat, takže vypadá jako ovládací prvek: kolečko v barvě rámečku bubliny, které se lehce nadechuje. */ .karel-next { position: absolute; right: 8px; bottom: 6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 201, 74, 0.28); box-shadow: inset 0 0 0 1px rgba(216, 155, 38, 0.45); font-size: 0.72rem; line-height: 1; color: #b57d16; animation: karelNext 1.3s ease-in-out infinite; } .karel-bubble.warm .karel-next { background: rgba(122, 201, 94, 0.26); box-shadow: inset 0 0 0 1px rgba(85, 161, 60, 0.45); color: #3f7a28; } @keyframes karelNext { 0%, 100% { transform: translateX(0) scale(1); opacity: .6; } 50% { transform: translateX(3px) scale(1.08); opacity: 1; } } /* ---------- nápověda po dohrání řeči ---------- */ .karel-hint { position: absolute; left: 50%; top: max(12px, var(--safe-top)); transform: translateX(-50%); z-index: 3; padding: 6px 16px; border-radius: 999px; background: rgba(58, 38, 20, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 244, 214, 0.2), 0 4px 12px rgba(40, 26, 12, 0.25); color: #fff6e2; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em; text-align: center; pointer-events: none; max-width: 62%; } @supports (backdrop-filter: blur(4px)) { .karel-hint { backdrop-filter: blur(5px); background: rgba(58, 38, 20, 0.3); } html.low-fx .karel-hint { backdrop-filter: none; background: rgba(58, 38, 20, 0.42); } } /* ---------- spodní lišta ---------- */ .karel-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px max(12px, var(--safe-left)) max(12px, var(--safe-bottom)) max(12px, var(--safe-right)); /* Lišta má být pult, ne pruh: nahoře se rozplyne do scény, dole drží tmavší podklad, aby na něm bílý text a zlatá tlačítka opravdu držela. */ background: linear-gradient(180deg, rgba(52, 34, 18, 0) 0%, rgba(52, 34, 18, 0.3) 38%, rgba(44, 28, 14, 0.62) 100%); } /* vlásková linka, kde lišta začíná – z pruhu se stane deska */ .karel-bar::before { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,240,200,0.34), transparent); pointer-events: none; } .karel-bar.in { animation: karelBarIn var(--dur-slow) var(--ease-out); } @keyframes karelBarIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .karel-actions, .karel-links, .karel-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .karel-actions .btn { font-size: 1rem; padding: 10px 20px; } .karel-end .btn.big { font-size: 1.15rem; padding: 12px 30px; } .karel-links a { color: #fff6e2; font-weight: 700; font-size: 0.88rem; text-decoration: none; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 1px rgba(255, 244, 214, 0.22); transition: background .16s ease, box-shadow .16s ease; } .karel-links a:hover { background: rgba(255, 255, 255, 0.22); } .karel-links a:active { background: rgba(255, 255, 255, 0.32); box-shadow: inset 0 0 0 1px rgba(255, 244, 214, 0.4); } /* „ukazuj se pokaždé" – vypnuté je nenápadné, zapnuté září */ .btn.ghost { background: rgba(255, 253, 245, 0.86); box-shadow: 0 3px 0 rgba(90, 60, 20, 0.28); font-size: 0.95rem; padding: 9px 18px; } .btn.ghost.on { background: linear-gradient(180deg, #ffe08a, #ffc94a); box-shadow: 0 3px 0 #d89b26, 0 6px 14px rgba(0, 0, 0, 0.16); } /* tlačítko v menu, kterým se Karel dá zavolat znovu */ .karel-call { font-size: 1.45rem; } .karel-call.nudge { animation: karelNudge 2.4s ease-in-out 3; } @keyframes karelNudge { 0%, 72%, 100% { transform: none; } 78% { transform: rotate(-9deg) scale(1.08); } 86% { transform: rotate(9deg) scale(1.08); } 92% { transform: rotate(-4deg) scale(1.04); } } /* ---------- bublina vedle hlavy ---------- Na širokém a nízkém pruhu (telefon naležato) se nad hlavu nevejde – mluví se tedy do strany jako v komiksu a ocásek míří doleva. Třídu .side nasazuje js/karel.js podle skutečného poměru scény. */ .karel-bubble.side { max-width: min(38ch, calc(46 * var(--gvw))); } .karel-bubble.side::after { bottom: auto; left: -13px; top: var(--tail, 30px); margin-left: 0; margin-top: -10px; border: 10px solid transparent; border-right-color: #ffc94a; border-left: 0; } .karel-bubble.side.warm::after { border-right-color: #7ac95e; border-top-color: transparent; } /* ---------- nízká scéna ---------- Lišta se srovná do jedné řady a vše se umenší, aby z Karla zbylo co nejvíc. Řídí se třídou .compact (viz layout() v js/karel.js), ne media query – ta by v otočeném režimu měřila druhou osu. */ .karel-screen.compact .karel-bubble { padding: 10px 13px 9px; line-height: 1.3; } /* první uvítání má delší věty – na nízkém telefonu dostane bublina víc šířky, jinak by se 18px písmo rozlámalo do osmi řádků a přetekla výšku */ .karel-screen.first .karel-bubble.side { max-width: min(46ch, calc(58 * var(--gvw))); } .karel-screen.first .karel-bubble { max-width: min(50ch, calc(84 * var(--gvw))); } .karel-screen.compact .karel-bar { flex-direction: row; flex-wrap: wrap; gap: 6px 8px; padding-top: 6px; } .karel-screen.compact .karel-actions .btn { font-size: 0.85rem; padding: 6px 13px; } .karel-screen.compact .karel-end .btn.big { font-size: 0.92rem; padding: 7px 18px; } .karel-screen.compact .karel-links a { font-size: 0.76rem; padding: 3px 8px; } .karel-screen.compact .btn.ghost { font-size: 0.78rem; padding: 6px 12px; } .karel-screen.compact .karel-hint { font-size: 0.76rem; padding: 4px 12px; } /* odkazy zůstávají i na nejmenší scéně – jsou to ony, kvůli kterým scéna vznikla; jenom se srazí na velikost popisku */ .karel-screen.compact.aside .karel-links a { font-size: 0.72rem; padding: 2px 7px; } @media (prefers-reduced-motion: reduce) { .karel-bubble.pop, .karel-bar.in, .karel-next, .karel-call.nudge { animation: none; } #hud .hud-left, #hud .hud-center, #hud .hud-right { transition: none; } } /* ========================================================= STARTOVNÍ OBRAZOVKA (jen web) – gesto pro fullscreen Prohlížeč nepustí celou obrazovku ani zvuk bez uživatelského gesta a hra na první ťuknutí čekala až u tlačítka BĚŽET. Do té doby jelo intro i menu v okně s adresním řádkem: na telefonu drženém na výšku se hra otočila o 90° a vešla se jen do výřezu mezi lištami. Tahle obrazovka si gesto vyžádá dřív, než se cokoli rozjede – a než hráč ťukne, stáhnou se na pozadí písma i zvuky, takže intro nejede přes prázdnou cache. Z-index je nad znělkou (200), aby ji překryla, dokud hráč neťukne. ========================================================= */ #start-gate { position: fixed; inset: 0; z-index: 260; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, calc(3 * var(--gvh)), 24px); padding: max(14px, var(--safe-top)) max(14px, var(--safe-right)) max(14px, var(--safe-bottom)) max(14px, var(--safe-left)); background: linear-gradient(180deg, #fffdf5 0%, #f2f8ea 62%, #dff0cd 100%); cursor: pointer; transition: opacity .45s ease; } #start-gate img { /* obrázek se vejde vždy celý – rozhoduje ta těsnější osa displeje */ max-width: min(88%, 720px); max-height: 56%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 26px rgba(85,161,60,0.18)); } #start-gate .start-note { font-size: 0.82rem; font-weight: 700; color: #5a6a48; text-align: center; max-width: 26rem; } #start-gate.gate-leave { opacity: 0; pointer-events: none; } /* nízký displej naležato: obrázek ustoupí tlačítku, ať je pořád na dosah. Druhá podmínka = vynucená šířka (hra otočená o 90°), stejně jako u obchodu. */ @media (max-height: 420px), (orientation: portrait) and (pointer: coarse) and (max-width: 420px) { #start-gate img { max-height: 46%; } #start-gate .start-note { font-size: 0.74rem; } } /* Comfort panel: readable, scrollable and usable on short landscape phones. */ #screen-settings { justify-content: flex-start; touch-action: pan-y; } #screen-settings .settings-card { width: min(720px, 100%); max-width: 720px; margin: auto 0; } #comfort-settings { width: 100%; text-align: left; } /* Zavřený panel je jen řádek s názvem – žádný rámeček, žádné odsazení. Karta nastavení je na iPhoneSE a phone720x320 přesně na hranici výšky (audit-rozvrzeni.js hlásí na čistém stavu nulu), takže cokoli navíc ji přetlačí přes okraj. Krabice se proto kreslí až otevřená a záporný horní okraj vrací zpátky mezeru, kterou řádku dává `.settings-card { gap: 12px }`. Ta čísla nejsou odhad: s `margin: 6px` a `padding: 6px` hlásil audit +23 px na čtyřech rozvrženích, s těmihle nulu. Než je změníš, změř to. */ .comfort-panel { border: 0; padding: 0; margin: -6px 0 0; background: none; color: #344529; } .comfort-panel.open { border: 1px solid rgba(85,161,60,.25); border-radius: 18px; padding: 10px 16px 16px; margin: 12px 0; background: linear-gradient(145deg, #fffdf5, #edf5e5); } .comfort-toggle { width: 100%; padding: 2px; font: inherit; font-size: 1rem; font-weight: 800; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; line-height: 1.5; } .comfort-panel.open > .comfort-toggle { margin-bottom: 10px; } /* O viditelnosti rozhoduje atribut, ne prohlížeč – proto !important. */ .comfort-body[hidden] { display: none !important; } .comfort-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } .comfort-row { min-height: 48px; display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.35; cursor: pointer; } .comfort-range { display: grid; grid-template-columns: 1fr auto; } .comfort-range input { grid-column: 1 / -1; width: 100%; height: 32px; accent-color: #397b36; cursor: pointer; touch-action: none; } .comfort-range output { font-variant-numeric: tabular-nums; font-weight: 800; } .comfort-checkbox input { flex: 0 0 24px; width: 24px; height: 24px; accent-color: #397b36; } .comfort-note, .comfort-status { font-size: 14px; line-height: 1.45; margin-top: 12px; } .comfort-status:empty { display: none; } .comfort-status { color: #8a351d; font-weight: 700; } .comfort-controls { display: none; position: fixed; right: max(16px, var(--safe-right)); bottom: max(10px, var(--safe-bottom)); gap: 12px; pointer-events: auto; } .comfort-action { min-width: 76px; min-height: 52px; padding: 8px 14px; font-size: 16px; touch-action: none; opacity: .9; } @media (pointer: coarse) { html.comfort-touch-controls .comfort-controls { display: flex; } } html.comfort-large-text .settings-card .controls-hint, html.comfort-large-text .comfort-row, html.comfort-large-text .settings-links { font-size: 18px; } html.comfort-large-text .page-body, html.comfort-large-text .fact-body, html.comfort-large-text .page-locked-text { font-size: 21px !important; line-height: 1.55; } html.comfort-large-text .book-page { overflow-y: auto; } :where(button, a, input, select):focus-visible { outline: 3px solid #153f2b; outline-offset: 4px; box-shadow: 0 0 0 6px #fffdf5; } html.comfort-reduced .menu-fx, html.comfort-reduced .over-rays, html.comfort-reduced .over-burst { display: none; } html.comfort-reduced *, html.comfort-reduced *::before, html.comfort-reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } @media (max-width: 520px) and (orientation: landscape) { .comfort-grid { grid-template-columns: 1fr; } }