/* FLAF.cz — Člověče, nezlob se (herní CSS). * Převzato z ChciHry.cz (css/clovece.css) a PŘEBARVENO do palety FLAF: * - tokeny z variables.css (theme-aware light/dark), fonty Baloo 2 / Nunito, * - deska = fialový panel (--bulo-purple) se světlými poli; akcenty zlatá/tyrkys, * - 4 barvy figurek zachovány (červená/zelená/žlutá/modrá = identita hry). * Vše SCOPED pod .clovece-shell (originál používal globální .btn/.toast/.dlg → kolize s webem). * Layout přizpůsoben fullscreen shellu (bez .app gridu, bez panelu — jen chipy/deska/kostka). */ /* 4 barvy hráčů na :root — figurkové SVG gradienty (injectDefs) se vkládají do , MIMO .clovece-shell, takže proměnné musí být globální, jinak jsou pěšci černí. */ :root { --c0: #D9534F; --c0d: #9e302c; --c0l: #ff8e8a; --c0t: rgba(217, 83, 79, .16); --c1: #4FA94F; --c1d: #2f7a30; --c1l: #93e093; --c1t: rgba(79, 169, 79, .16); --c2: #E8B53A; --c2d: #a9801b; --c2l: #ffe08a; --c2t: rgba(232, 181, 58, .16); --c3: #4A90D9; --c3d: #2a5e98; --c3l: #9ec8f5; --c3t: rgba(74, 144, 217, .16); } .clovece-shell { /* 4 barvy hráčů (colorblind: doplněno ikonou 👤/🤖 na chipu) — hodnoty z :root výše */ --cl-gold: #FFD700; --cl-accent: #7FFFD4; --cl-accent-hover: #5fffc4; /* pozadí je vždy tmavé kosmické (styl Sčítátka) → prvky stylované pro tmavé, ne theme-aware */ --cl-panel-a: #2a2358; --cl-panel-b: #3b2f74; /* glass tokeny převzaté ze Sčítátka (game-core.css) */ --cl-glass-1: rgba(255, 255, 255, .07); --cl-glass-2: rgba(255, 255, 255, .12); --cl-glass-3: rgba(255, 255, 255, .17); --cl-glass-edge: rgba(255, 255, 255, .28); --cl-glass-inner: rgba(255, 255, 255, .5); --cl-glass-base: rgba(14, 13, 43, .35); --cl-shadow-deep: 0 30px 60px -20px rgba(0, 0, 0, .6), inset 0 1px 0 var(--cl-glass-inner), inset 0 -1px 0 rgba(0, 0, 0, .25); /* fullscreen shell (jako .maze-shell/.pexeso-shell v sections.css [0b]) — self-contained */ position: relative; z-index: 0; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; padding: .5rem .75rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); gap: .5rem; font-family: var(--font-body, sans-serif); } @media (max-height: 640px) { .clovece-shell { padding: .35rem .5rem .5rem; gap: .35rem; } } /* ---------- tmavé kosmické pozadí (styl Sčítátka), vždy — nezávislé na light/dark ---------- */ body.game-clovece { background: radial-gradient(at 15% 10%, #3a2a78 0, transparent 55%), radial-gradient(at 85% 15%, #1e4d9c 0, transparent 55%), radial-gradient(at 75% 90%, #5b2a9c 0, transparent 55%), radial-gradient(at 10% 85%, #2a6db5 0, transparent 55%), #0e0d2b; } .clovece-shell .cl-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .clovece-shell .cl-blob { position: absolute; border-radius: 50%; filter: blur(52px); opacity: .42; animation: clFloat2 22s ease-in-out infinite; } .clovece-shell .cl-blob--1 { width: 46vw; height: 46vw; background: #6f3fff; top: -14vw; left: -10vw; } .clovece-shell .cl-blob--2 { width: 52vw; height: 52vw; background: #00b4d8; bottom: -16vw; right: -12vw; animation-delay: -7s; } .clovece-shell .cl-blob--3 { width: 40vw; height: 40vw; background: #ff5f9e; top: 40%; right: -12vw; animation-delay: -14s; } @keyframes clFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, -5vw) scale(1.1); } } .clovece-shell .cl-stars { position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 68%, #fff, transparent), radial-gradient(1.5px 1.5px at 56% 34%, #fff, transparent), radial-gradient(1px 1px at 82% 78%, #fff, transparent), radial-gradient(1px 1px at 91% 24%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 48%, #fff, transparent), radial-gradient(1px 1px at 66% 60%, #fff, transparent), radial-gradient(1px 1px at 46% 88%, #fff, transparent); animation: clTwinkle 4s ease-in-out infinite; } @keyframes clTwinkle { 50% { opacity: .28; } } /* obsah nad pozadím */ .clovece-shell .players, .clovece-shell .board-zone, .clovece-shell .dock { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .clovece-shell .cl-blob, .clovece-shell .cl-stars { animation: none; } } .clovece-shell__game { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; min-height: 0; flex: 1 1 auto; -webkit-user-select: none; user-select: none; } .clovece-shell button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .clovece-shell svg { display: block; } /* ---------- hráči (chipy) ---------- */ .clovece-shell .players { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; width: 100%; } .clovece-shell .players:empty { display: none; } .clovece-shell .pchip { display: inline-flex; align-items: center; gap: .3rem; padding: .24rem .5rem; border-radius: 9999px; background: linear-gradient(180deg, var(--cl-glass-2), var(--cl-glass-1)), var(--cl-glass-base); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1.5px solid var(--cl-glass-edge); font-weight: 800; font-size: .8rem; color: #f4f1ff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .22); transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; } .clovece-shell .pchip .pdot { width: .8rem; height: .8rem; border-radius: 50%; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4), 0 0 6px rgba(255, 255, 255, .25); } .clovece-shell .pchip .pdone { font-weight: 800; } .clovece-shell .pchip.active { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .38), 0 0 16px rgba(127, 255, 212, .35), inset 0 1px 0 rgba(255, 255, 255, .3); } .clovece-shell .pchip.cl-s0, .clovece-shell .pchip.s0 { border-color: var(--c0); } .clovece-shell .pchip.s1 { border-color: var(--c1); } .clovece-shell .pchip.s2 { border-color: var(--c2); } .clovece-shell .pchip.s3 { border-color: var(--c3); } .clovece-shell .pchip.active.s0 { background: var(--c0t); } .clovece-shell .pchip.active.s1 { background: var(--c1t); } .clovece-shell .pchip.active.s2 { background: var(--c2t); } .clovece-shell .pchip.active.s3 { background: var(--c3t); } .clovece-shell .pchip.winner { background: var(--cl-accent); border-color: var(--cl-accent); } .clovece-shell .pchip.s0 .pdot { background: radial-gradient(circle at 38% 30%, var(--c0l), var(--c0) 60%, var(--c0d)); } .clovece-shell .pchip.s1 .pdot { background: radial-gradient(circle at 38% 30%, var(--c1l), var(--c1) 60%, var(--c1d)); } .clovece-shell .pchip.s2 .pdot { background: radial-gradient(circle at 38% 30%, var(--c2l), var(--c2) 60%, var(--c2d)); } .clovece-shell .pchip.s3 .pdot { background: radial-gradient(circle at 38% 30%, var(--c3l), var(--c3) 60%, var(--c3d)); } /* ---------- deska ---------- */ .clovece-shell .board-zone { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; container-type: size; /* deska = největší ČTVEREC, co se vejde (viz min(cqw,cqh) níže) */ } .clovece-shell .board-wrap { /* přesně 1:1 — strana = menší z rozměrů zóny; aspect-ratio jako pojistka pro starší prohlížeče */ width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); aspect-ratio: 1; padding: 3%; border-radius: 28px; border: 1px solid var(--cl-glass-edge); background: linear-gradient(160deg, var(--cl-glass-3) 0%, var(--cl-glass-1) 42%, transparent 100%), radial-gradient(circle at 50% 38%, rgba(127, 255, 212, .12), transparent 55%), linear-gradient(150deg, var(--cl-panel-b), var(--cl-panel-a)); box-shadow: var(--cl-shadow-deep), 0 0 48px rgba(127, 255, 212, .14), inset 0 0 0 1px rgba(255, 215, 0, .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); touch-action: manipulation; position: relative; /* ŽÁDNÝ overflow:hidden — figurky kotvené spodkem musí horní částí přečuhovat přes okraj desky (pseudo-3D). Pozadí si ořezává border-radius samo. */ } /* horní odlesk skla */ .clovece-shell .board-wrap::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--cl-glass-inner), transparent); pointer-events: none; z-index: 2; } .clovece-shell .board { position: relative; width: 100%; height: 100%; z-index: 1; } .clovece-shell .cross { position: absolute; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 215, 0, .14); border-radius: 14px; box-shadow: inset 0 0 18px rgba(0, 0, 0, .18); } .clovece-shell .cross-v { left: 36.36%; width: 27.27%; top: 0; height: 100%; } .clovece-shell .cross-h { top: 36.36%; height: 27.27%; left: 0; width: 100%; } .clovece-shell .cell-layer { position: absolute; inset: 0; pointer-events: none; } .clovece-shell .cell { position: absolute; width: 7.6%; height: 7.6%; transform: translate(-50%, -50%); border-radius: 26%; background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(222, 228, 248, .8)); border: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -2px 4px rgba(60, 50, 110, .18), 0 1px 3px rgba(0, 0, 0, .28); } .clovece-shell .cell.home { border-radius: 50%; width: 8.7%; height: 8.7%; } .clovece-shell .cell.finish { border-radius: 30%; } .clovece-shell .cell.start.s0 { border-color: var(--c0); box-shadow: 0 0 0 2px var(--c0t); } .clovece-shell .cell.start.s1 { border-color: var(--c1); box-shadow: 0 0 0 2px var(--c1t); } .clovece-shell .cell.start.s2 { border-color: var(--c2); box-shadow: 0 0 0 2px var(--c2t); } .clovece-shell .cell.start.s3 { border-color: var(--c3); box-shadow: 0 0 0 2px var(--c3t); } .clovece-shell .cell.finish.s0, .clovece-shell .cell.home.s0 { background: var(--c0t); border-color: var(--c0); } .clovece-shell .cell.finish.s1, .clovece-shell .cell.home.s1 { background: var(--c1t); border-color: var(--c1); } .clovece-shell .cell.finish.s2, .clovece-shell .cell.home.s2 { background: var(--c2t); border-color: var(--c2); } .clovece-shell .cell.finish.s3, .clovece-shell .cell.home.s3 { background: var(--c3t); border-color: var(--c3); } .clovece-shell .cell.target::after { content: ''; position: absolute; inset: 16%; border-radius: inherit; background: var(--cl-gold); box-shadow: 0 0 12px var(--cl-gold); animation: clTdot .2s ease-out; } @keyframes clTdot { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* středový medailon zrušen — uprostřed desky je jen Flaf (.board-mascot) */ /* Středový medailon: tmavý kruh s jemným fialovým rámečkem (paleta FLAF), uvnitř Flaf s tyrkysovým glow. Menší než dřív, ať tolik nezasahuje do cílových políček. Pod figurkami (z-index 2), neruší klikání. */ .clovece-shell .board-medallion { position: absolute; left: 50%; top: 50%; width: 13.5%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; display: grid; place-items: center; border-radius: 50%; /* výplň shodná s políčkem pro figurky (konzistence s deskou), BEZ rámečku — jen stín, takže kruh působí jako další políčko desky. Flaf je sám fialový → na světlém je čitelný. */ background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(222, 228, 248, .8)); border: 0; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(60, 50, 110, .22), 0 5px 14px rgba(0, 0, 0, .5); } .clovece-shell .board-mascot { width: 82%; height: auto; display: block; filter: drop-shadow(0 2px 3px rgba(60, 50, 110, .45)); } /* výměna výrazu Flafa (reakce na dění) = krátký pružný pop; návrat k neutrálu jede bez něj */ .clovece-shell .board-mascot.react { animation: mascotPop .45s cubic-bezier(.34, 1.56, .64, 1); } @keyframes mascotPop { 0% { transform: scale(.72); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .clovece-shell .board-mascot.react { animation: none; } } /* ---------- figurky ---------- */ .clovece-shell .pieces { position: absolute; inset: 0; } /* Figurka větší a kotvená SPODKEM na střed pole (--pawn-y): pata „stojí" na políčku, hlava přesahuje nahoru přes okraj. Všechny animace vycházejí z tohoto základu. */ .clovece-shell .piece { --pawn-y: -72%; position: absolute; width: 8.6%; height: calc(8.6% * 1.62); /* poměr viewBoxu 26:42 */ /* pseudo-3D hloubka: --z = Y pozice v % (nastavuje JS positionPiece) → níž = blíž divákovi */ z-index: calc(10 + var(--z, 0)); transform: translate(-50%, var(--pawn-y)); padding: 0; cursor: default; transition: left .32s cubic-bezier(.34, 1.4, .64, 1), top .32s cubic-bezier(.34, 1.4, .64, 1), transform .18s ease; touch-action: none; } /* Směrový vržený stín (světlo zleva shora) — figurka je ukotvená na desce a má plasticitu. Žádná elipsa pod patou (ta působila levitačně), stín „padá" na políčko vpravo dolů. */ .clovece-shell .piece .pawn { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; filter: drop-shadow(1.8px 2.4px 1.8px rgba(12, 8, 34, .72)); } .clovece-shell .pawn-sh { fill: transparent; } .clovece-shell .pawn-gl { fill: rgba(255, 255, 255, .55); } .clovece-shell .piece.selectable { cursor: pointer; } .clovece-shell .piece.selectable:hover { transform: translate(-50%, var(--pawn-y)) scale(1.08); } .clovece-shell .piece:focus { outline: none; } /* stavy: vyšší hladina, ale uvnitř hladiny se pořadí dál řídí Y (pseudo-3D zůstává platné) */ .clovece-shell .piece:focus-visible { outline: 3px solid var(--cl-accent); outline-offset: 2px; z-index: calc(600 + var(--z, 0)); } .clovece-shell .piece.sel { z-index: calc(500 + var(--z, 0)); filter: drop-shadow(0 0 6px var(--cl-gold)) drop-shadow(0 0 3px var(--cl-gold)); animation: clFloat 1.4s ease-in-out infinite; } @keyframes clFloat { 0%, 100% { transform: translate(-50%, -75%) scale(1.06); } 50% { transform: translate(-50%, -69%) scale(1.06); } } .clovece-shell .piece.hintable { filter: drop-shadow(0 0 6px var(--cl-gold)); } /* soupeř, kterého lze klepnutím vyhodit — pulzující červené zvýraznění */ .clovece-shell .piece.capturable { cursor: pointer; z-index: calc(300 + var(--z, 0)); animation: clCapturable 1s ease-in-out infinite; } @keyframes clCapturable { 0%, 100% { filter: drop-shadow(0 0 5px #ff5a5a) drop-shadow(0 0 10px rgba(255, 90, 90, .6)); } 50% { filter: drop-shadow(0 0 10px #ff5a5a) drop-shadow(0 0 18px rgba(255, 90, 90, .9)); } } @media (prefers-reduced-motion: reduce) { .clovece-shell .piece.capturable { animation: none; filter: drop-shadow(0 0 8px #ff5a5a); } } .clovece-shell .piece.dragging { transition: none; z-index: 900; transform: translate(-50%, var(--pawn-y)) scale(1.12); cursor: grabbing; } /* během krokování je přechod kratší než interval kroku → každé políčko je znatelný „ťap" */ .clovece-shell .piece.stepping { transition: left .2s linear, top .2s linear, transform .18s ease; } /* Poslední krok se pohybuje STEJNĚ jako mezikroky (lineárně, bez pružiny) — jen po něm následuje delší pauza, než se předá tah (STEP_LAST_FACTOR v controlleru). */ /* R2: políčko, na které figurka právě vstoupila — krátce se rozsvítí (trasa tahu) */ .clovece-shell .cell.walk { animation: clWalk .52s ease-out; } @keyframes clWalk { 0% { box-shadow: inset 0 0 0 2px var(--cl-accent), 0 0 14px rgba(127, 255, 212, .75); } 60% { box-shadow: inset 0 0 0 2px rgba(127, 255, 212, .5), 0 0 8px rgba(127, 255, 212, .35); } 100% { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -2px 4px rgba(60, 50, 110, .18), 0 1px 3px rgba(0, 0, 0, .28); } } @media (prefers-reduced-motion: reduce) { .clovece-shell .cell.walk { animation: none; } } .clovece-shell .piece.nogo { animation: clShake .4s ease; } @keyframes clShake { 0%, 100% { transform: translate(-50%, -72%); } 25% { transform: translate(-60%, -72%); } 75% { transform: translate(-40%, -72%); } } .clovece-shell .piece.captured { animation: clCap .45s ease forwards; } @keyframes clCap { 0% { transform: translate(-50%, -72%) scale(1); } 40% { transform: translate(-50%, -100%) scale(1.12); } 100% { transform: translate(-50%, -72%) scale(1); } } /* ---------- dock: status + kostka ---------- */ .clovece-shell .dock { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; padding-bottom: max(.25rem, env(safe-area-inset-bottom)); } .clovece-shell .status { margin: 0; font-family: var(--font-heading, sans-serif); font-weight: 800; font-size: clamp(1.1rem, 5vw, 1.6rem); letter-spacing: .01em; color: #d6d0f5; min-height: 1.4em; text-align: center; line-height: 1.15; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); } /* dětský barevný popisek „ČERVENÁ HRAJE" — velké písmo v barvě hráče + glow v barvě */ .clovece-shell .status.turn { text-shadow: 0 0 16px currentColor, 0 2px 5px rgba(0, 0, 0, .6); } .clovece-shell .status.turn.s0 { color: var(--c0l); } .clovece-shell .status.turn.s1 { color: var(--c1l); } .clovece-shell .status.turn.s2 { color: var(--c2l); } .clovece-shell .status.turn.s3 { color: var(--c3l); } .clovece-shell .dice-zone { display: flex; align-items: center; gap: .7rem; } .clovece-shell .die { width: clamp(46px, 12vw, 60px); height: clamp(46px, 12vw, 60px); border-radius: 22%; position: relative; cursor: pointer; background: linear-gradient(150deg, #fff, #dfe3ee); box-shadow: 0 7px 18px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 255, 255, .2), inset 0 -3px 6px rgba(0, 0, 0, .14), inset 0 2px 5px rgba(255, 255, 255, .95); transition: transform .12s ease; } .clovece-shell .die:hover { transform: translateY(-2px); } .clovece-shell .die:active { transform: scale(.93); } .clovece-shell .die .pips { position: absolute; inset: 16%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 8%; } .clovece-shell .die .pip { width: 78%; height: 78%; border-radius: 50%; background: var(--bulo-purple-dark, #483D8B); visibility: hidden; place-self: center; } .clovece-shell .die .pip.on { visibility: visible; } .clovece-shell .die.rolling { animation: clRoll .5s ease; } @keyframes clRoll { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(160deg) scale(1.12); } 60% { transform: rotate(300deg) scale(.96); } 100% { transform: rotate(360deg) scale(1); } } /* ---------- tlačítka ---------- */ .clovece-shell .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem 1rem; font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: .95rem; border: 2px solid var(--bulo-purple-light, #6B5B95); border-radius: 9999px; background: var(--cloud-white, #fff); color: var(--text-primary, #2D2D44); cursor: pointer; transition: transform .12s ease, background .2s ease, border-color .2s ease; } .clovece-shell .btn:hover { transform: translateY(-1px); } .clovece-shell .btn:active { transform: translateY(1px); } .clovece-shell .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .clovece-shell .btn:focus-visible { outline: 3px solid var(--cl-accent); outline-offset: 2px; } .clovece-shell .btn-roll { min-width: 10.5rem; border: 0; background: linear-gradient(135deg, #8163e0, #4a3d9e); color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .22), 0 8px 22px rgba(129, 99, 224, .5), inset 0 1px 0 rgba(255, 255, 255, .28); } .clovece-shell .btn-roll:hover { background: linear-gradient(135deg, #8f72ea, #52459f); } .clovece-shell .btn-roll:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .22), 0 4px 14px rgba(129, 99, 224, .4); } .clovece-shell .btn-roll:disabled { box-shadow: 0 6px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .2); } .clovece-shell .btn-primary { background: var(--cl-accent); color: var(--text-on-bright, #2D2D44); border-color: var(--cl-accent); } .clovece-shell .btn-primary:hover { background: var(--cl-accent-hover); } .clovece-shell .btn-cta { background: var(--cl-accent); color: var(--text-on-bright, #2D2D44); border-color: var(--cl-accent); font-size: 1.15rem; min-height: 54px; min-width: 12rem; box-shadow: 0 6px 0 rgba(0, 0, 0, .12), 0 8px 22px rgba(127, 255, 212, .4); } .clovece-shell .btn-cta:hover { background: var(--cl-accent-hover); } /* ---------- úvodní menu (styl Sčítátka: fullscreen glass, prvky plavou BEZ rámečků/karty) ---------- */ .clovece-shell .dlg { margin: 0; padding: 0; max-width: none; max-height: none; width: 100%; height: 100%; background: none; border: 0; color: #fff; overflow-y: auto; } .clovece-shell .dlg::backdrop { background: radial-gradient(at 20% 20%, rgba(107, 91, 149, .75) 0, transparent 55%), radial-gradient(at 80% 80%, rgba(72, 61, 139, .75) 0, transparent 55%), rgba(14, 13, 43, .82); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); } .clovece-shell .dlg[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: calc(64px + env(safe-area-inset-top, 0px)) 22px calc(28px + env(safe-area-inset-bottom, 0px)); animation: clPop .35s cubic-bezier(.34, 1.56, .64, 1); } .clovece-shell .dlg > * { width: min(420px, 100%); } @keyframes clPop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .clovece-shell .dlg h2 { font-family: var(--font-display, sans-serif); font-size: 1.6rem; color: #fff; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); margin: 0; } .clovece-shell .dlg fieldset { border: 0; margin: 0; padding: 0; } .clovece-shell .dlg legend { display: block; width: 100%; text-align: center; font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.1rem; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .45); margin-bottom: .7rem; padding: 0; } /* segment počtu lidí — měkká glass tlačítka, bez tvrdého rámečku */ .clovece-shell .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .6rem; max-width: 16rem; margin: 0 auto .8rem; } .clovece-shell .seg-btn { min-height: 54px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .08); color: #fff; font-family: var(--font-heading, sans-serif); font-weight: 800; font-size: 1.35rem; cursor: pointer; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: background .15s ease, transform .12s ease; } .clovece-shell .seg-btn:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); } .clovece-shell .seg-btn.on { background: var(--cl-accent); color: #2D2D44; text-shadow: none; box-shadow: 0 0 18px rgba(127, 255, 212, .5); } /* náhled sedadel — chipy jsou tlačítka: ťuknutí na robota přehodí jeho barvu člověku */ .clovece-shell .seats-hint { text-align: center; font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: .85rem; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 4px rgba(0, 0, 0, .4); margin: 0 0 .35rem; } .clovece-shell .seats { display: flex; justify-content: center; gap: .6rem; margin: .2rem 0 .6rem; } .clovece-shell .seat { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; padding: 0; font-size: 1.3rem; line-height: 1; border: 3px solid transparent; background: rgba(255, 255, 255, .10); color: #fff; transition: opacity .15s ease, transform .12s ease; } .clovece-shell .seat:disabled { cursor: default; } .clovece-shell .seat.s0 { border-color: var(--c0); } .clovece-shell .seat.s1 { border-color: var(--c1); } .clovece-shell .seat.s2 { border-color: var(--c2); } .clovece-shell .seat.s3 { border-color: var(--c3); } .clovece-shell .seat.cpu { opacity: .55; } .clovece-shell .seat.cpu:not(:disabled) { cursor: pointer; } .clovece-shell .seat.cpu:not(:disabled):hover { opacity: .9; transform: translateY(-2px); } .clovece-shell .seat:focus-visible { outline: 3px solid var(--cl-accent); outline-offset: 2px; } .clovece-shell .seats-desc { text-align: center; font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1rem; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .45); margin: 0; min-height: 1.3em; } /* přepínače — styl Sčítátka (průhledné pozadí, jemný okraj) */ .clovece-shell .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 20px; margin: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; cursor: pointer; font: inherit; text-align: left; transition: background .15s ease; } .clovece-shell .toggle-row:hover { background: rgba(255, 255, 255, .10); } .clovece-shell .toggle-label { font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.05rem; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); } .clovece-shell .toggle-label small { display: block; font-weight: 500; font-size: .8rem; color: rgba(255, 255, 255, .75); text-shadow: none; } .clovece-shell .toggle-switch { position: relative; flex: 0 0 auto; width: 56px; height: 32px; border-radius: 9999px; background: rgba(120, 120, 140, .55); transition: background .2s ease; } .clovece-shell .toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); } .clovece-shell .toggle-row[aria-pressed="true"] .toggle-switch { background: var(--cl-accent); box-shadow: 0 0 16px rgba(127, 255, 212, .55); } .clovece-shell .toggle-row[aria-pressed="true"] .toggle-switch::after { transform: translateX(24px); } /* konec hry */ .clovece-shell .dlg-text { color: rgba(255, 255, 255, .9); font-size: 1rem; line-height: 1.5; text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); margin: 0; } .clovece-shell .result-emoji { display: block; text-align: center; font-size: 3rem; margin-bottom: .2rem; } .clovece-shell .dlg-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; } .clovece-shell .dlg-actions .btn { flex: 1 1 auto; background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); } .clovece-shell .dlg-actions .btn-primary { background: var(--cl-accent); color: #2D2D44; border-color: var(--cl-accent); } /* velké CTA HRÁT (styl Sčítátka menu-cta, pulsující) */ .clovece-shell .dlg-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 32px; min-height: 60px; width: min(420px, 100%); font-family: var(--font-heading, sans-serif); font-weight: 800; font-size: 1.5rem; letter-spacing: .04em; color: #2D2D44; background: var(--cl-accent); border: 0; border-radius: 9999px; cursor: pointer; box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 10px 28px rgba(127, 255, 212, .35); animation: clMenuPulse 2s infinite; transition: transform .12s ease, background .2s ease; } .clovece-shell .dlg-cta:hover { background: var(--cl-accent-hover); transform: translateY(-2px); } .clovece-shell .dlg-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 4px 16px rgba(127, 255, 212, .3); } @keyframes clMenuPulse { 0%, 100% { box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 0 0 0 rgba(127, 255, 212, .7), 0 10px 28px rgba(127, 255, 212, .35); } 50% { box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 0 0 18px rgba(127, 255, 212, 0), 0 10px 28px rgba(127, 255, 212, .35); } } /* sekundární tlačítko (NOVÁ HRA v menu rozehrané hry) — styl Sčítátka menu-secondary */ .clovece-shell .dlg-secondary { display: inline-flex; align-items: center; justify-content: center; width: min(420px, 100%); padding: 14px 28px; min-height: 52px; font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; color: #fff; background: transparent; border: 3px solid rgba(255, 255, 255, .85); border-radius: 9999px; cursor: pointer; transition: transform .12s ease, background .2s ease; } .clovece-shell .dlg-secondary:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); } .clovece-shell .dlg-secondary:active { transform: translateY(2px); } /* ---------- toast ---------- */ .clovece-shell .toast { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; display: flex; gap: .5rem; align-items: center; background: var(--bulo-purple-dark, #483D8B); color: #fff; border-radius: 9999px; padding: .5rem .9rem; font-weight: 700; font-size: .85rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); max-width: 90vw; text-align: center; transition: opacity .3s ease, transform .3s ease; } .clovece-shell .toast[hidden] { display: none; } .clovece-shell .toast.is-bad { background: var(--error, #FF6B6B); } .clovece-shell .toast.hiding { opacity: 0; transform: translateX(-50%) translateY(10px); } .clovece-shell .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; } /* ---------- landscape: deska vlevo, ovládání vpravo ---------- */ @media (max-height: 520px) and (orientation: landscape) { .clovece-shell__game { flex-direction: row; flex-wrap: wrap; align-items: stretch; } .clovece-shell .players { flex: 0 0 100%; order: 0; } .clovece-shell .board-zone { flex: 1 1 auto; order: 1; } .clovece-shell .dock { flex: 0 0 auto; order: 2; width: auto; justify-content: center; } } @media (max-height: 640px) { .clovece-shell__game { gap: .35rem; } } /* ---------- omezený pohyb: bez smyčkových animací (zvuk se NEvypíná) ---------- */ @media (prefers-reduced-motion: reduce) { .clovece-shell .piece.sel { animation: none; } .clovece-shell .piece { transition: none; } .clovece-shell .dlg { animation: none; } }