/* ============================================================ * Čtyřklubka — vlastní vizuální identita: MODROTISK * ============================================================ * Tradiční česká indigem barvená látka s bílými vzory — žádná jiná * hra série tuhle paletu nepoužívá. Stojan na klubíčka je modrotiskový * pás s vytečkovaným vzorem, pozadí režné plátno. * * Barevné motivy (Část C3 konvencí): přepínané , * výchozí je první SVĚTLÝ (funguje i bez JS). Motiv mění prostředí, * NE barvy klubíček — malinová a medová jsou ve všech motivech stejné. * Jediná akcentní proměnná hry: --accent. * ============================================================ */ :root { /* Motiv 1 (výchozí): Bílý den ☀️ — režné plátno, indigový stojan */ --bg1: #f6f2e8; --bg2: #efe8d8; --ink: #2b3350; --card: #fdfbf4; --accent: #31519e; /* indigo — jediná akcentní barva hry */ --accent-soft: rgba(49, 81, 158, 0.14); --topbar1: #31519e; --topbar2: #24407f; --rack1: #33549f; /* stojan (deska) — modrotisk */ --rack2: #223c78; --rack-edge: #1a2f60; --hole: #f8f4ea; /* prázdné "díry" stojanu */ --hole-edge: rgba(20, 33, 66, 0.35); --dot: rgba(255, 255, 255, 0.35); /* bílé tečky modrotiskového vzoru */ --shadow: 0 6px 18px rgba(43, 51, 80, 0.18); /* klubíčka — na motivu NEZÁVISLÁ */ --p1: #d13c5f; --p1-light: #ef7d97; --p1-dark: #9c2745; /* malinová */ --p2: #e3a52e; --p2-light: #f4cd7a; --p2-dark: #b07a17; /* medová */ } html[data-theme="pulnoc"] { /* Půlnoční modrotisk 🌙 — tmavá dílna, svítící vzor */ --bg1: #151a2c; --bg2: #101527; --ink: #e8ebf7; --card: #202844; --accent: #8ba3ea; --accent-soft: rgba(139, 163, 234, 0.18); --topbar1: #1d2540; --topbar2: #141a30; --rack1: #2a3a6e; --rack2: #1b2850; --rack-edge: #101a3a; --hole: #0d1222; --hole-edge: rgba(0, 0, 0, 0.5); --dot: rgba(180, 198, 255, 0.28); --shadow: 0 6px 18px rgba(0, 0, 0, 0.45); } html[data-theme="jarmark"] { /* Jarmark 🎪 — teplý stánek s perníky, bordó stojan */ --bg1: #f9efdf; --bg2: #f3e3c9; --ink: #4a2e24; --card: #fdf7ec; --accent: #a04434; --accent-soft: rgba(160, 68, 52, 0.14); --topbar1: #a04434; --topbar2: #7f3225; --rack1: #a34a38; --rack2: #7c3325; --rack-edge: #5f2419; --hole: #faf2e2; --hole-edge: rgba(80, 35, 20, 0.35); --dot: rgba(255, 236, 200, 0.4); --shadow: 0 6px 18px rgba(95, 36, 25, 0.22); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: radial-gradient(circle at 20% 10%, var(--bg1), transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg2)); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; padding-top: 54px; } #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; } /* ---------- Horní lišta -------------------------------------------------- */ #topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: linear-gradient(180deg, var(--topbar1), var(--topbar2)); box-shadow: 0 3px 12px rgba(20, 28, 58, 0.35); color: #f4f6ff; } .brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .brand h1 { margin: 0; font-size: 1.2rem; letter-spacing: 1.5px; font-weight: 800; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); white-space: nowrap; } .brand .vs { font-size: 0.82rem; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shop-top { color: #ffe9b8; text-decoration: none; font-weight: 700; font-size: 0.85rem; white-space: nowrap; } .shop-top:hover { text-decoration: underline; } /* HUD vpravo nahoře: čas partie */ .hud { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 0.84rem; font-weight: 700; } .hud span { background: rgba(0, 0, 0, 0.24); border-radius: 999px; padding: 3px 10px; } .hud #hudTime i { margin-right: 5px; opacity: 0.85; font-size: 0.78rem; } @media (max-width: 420px) { .hud { font-size: 0.78rem; } .hud span { padding: 3px 8px; } } @media (max-width: 560px) { .hide-sm { display: none; } .brand .vs { display: none; } } /* ---------- Stavový řádek a toast ---------------------------------------- */ .status-chip { margin: 10px auto 0; padding: 6px 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-weight: 700; font-size: 0.95rem; text-align: center; max-width: 92vw; } .status-chip .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; } .status-chip .dot.d1 { background: radial-gradient(circle at 35% 30%, var(--p1-light), var(--p1)); } .status-chip .dot.d2 { background: radial-gradient(circle at 35% 30%, var(--p2-light), var(--p2)); } #toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(16px); background: var(--ink); color: var(--card); padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 60; white-space: nowrap; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Hrací plocha (stojan) ---------------------------------------- */ #stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 6px calc(74px + env(safe-area-inset-bottom)); /* spodní odsazení = výška plovoucího toolbaru, ať deska nepodjede pod něj */ } #boardWrap { display: flex; flex-direction: column; align-items: center; } /* ukazatel sloupce nad stojanem (duch klubíčka) */ #arrows { display: grid; grid-template-columns: repeat(7, var(--cell)); gap: var(--gap); padding: 0 var(--pad); height: calc(var(--cell) * 0.9); align-items: end; } .arrow { display: flex; justify-content: center; align-items: flex-end; } .arrow .ghost { width: calc(var(--cell) * 0.78); height: calc(var(--cell) * 0.78); border-radius: 50%; opacity: 0; transform: translateY(4px); transition: opacity 0.12s; } .arrow.on .ghost { opacity: 0.45; } .arrow .ghost.g1 { background: radial-gradient(circle at 35% 30%, var(--p1-light), var(--p1) 65%, var(--p1-dark)); } .arrow .ghost.g2 { background: radial-gradient(circle at 35% 30%, var(--p2-light), var(--p2) 65%, var(--p2-dark)); } #board { --cell: 52px; --gap: 6px; --pad: 12px; display: grid; grid-template-columns: repeat(7, var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); padding: var(--pad); border-radius: 18px; background: radial-gradient(var(--dot) 1.6px, transparent 1.7px), radial-gradient(var(--dot) 1.1px, transparent 1.2px), linear-gradient(180deg, var(--rack1), var(--rack2)); background-size: 26px 26px, 26px 26px, 100% 100%; background-position: 0 0, 13px 13px, 0 0; border: 3px solid var(--rack-edge); box-shadow: var(--shadow), inset 0 2px 0 rgba(255, 255, 255, 0.12); position: relative; touch-action: manipulation; } /* "díra" stojanu */ .cell { width: var(--cell); height: var(--cell); border-radius: 50%; background: var(--hole); box-shadow: inset 0 3px 7px var(--hole-edge), inset 0 -1px 0 rgba(255, 255, 255, 0.35); position: relative; cursor: pointer; } .cell.full { cursor: default; } #board.locked .cell { cursor: default; } /* klubíčko */ .piece { position: absolute; inset: 6%; border-radius: 50%; animation: drop 0.38s cubic-bezier(0.34, 1.3, 0.64, 1); } .piece.p1 { background: radial-gradient(circle at 35% 30%, var(--p1-light), var(--p1) 62%, var(--p1-dark)); } .piece.p2 { background: radial-gradient(circle at 35% 30%, var(--p2-light), var(--p2) 62%, var(--p2-dark)); } /* namotaná příze — obloučky přes povrch */ .piece::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-30deg); } .piece::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.14); border-right-color: transparent; border-top-color: transparent; transform: rotate(20deg); } @keyframes drop { from { transform: translateY(calc(-1px * var(--fall))); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .piece { animation: none; } } /* vítězná řada */ .cell.win .piece { animation: winPulse 0.9s ease-in-out infinite; box-shadow: 0 0 0 3px #fff, 0 0 14px 4px rgba(255, 255, 255, 0.65); } @keyframes winPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { .cell.win .piece { animation: none; } } #board.dim .cell:not(.win) .piece { opacity: 0.45; } /* ---------- Toolbar ------------------------------------------------------- */ #toolbar { position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 8px; padding: 8px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); max-width: calc(100vw - 16px); } #toolbar button { font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 8px 10px; border: none; border-radius: 12px; background: transparent; color: var(--ink); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: transform 0.1s, background 0.15s; } #toolbar button i { font-size: 1.15rem; color: var(--accent); } #toolbar button:hover { background: var(--accent-soft); } #toolbar button:active { transform: scale(0.94); } #toolbar button:disabled { opacity: 0.35; cursor: default; } /* ---------- Menu (#sheet) -------------------------------------------------- */ #sheet { position: fixed; z-index: 70; left: 50%; bottom: 0; width: min(94vw, 440px); transform: translate(-50%, 110%); background: var(--card); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(20, 28, 58, 0.3); padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; transition: transform 0.24s ease; } #sheet.open { transform: translate(-50%, 0); } #sheet h2 { margin: 0 0 6px; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; } #sheet h2 button { background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: var(--ink); } .sheet-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--accent-soft); font-size: 1rem; } .sheet-row.sheet-col { flex-direction: column; align-items: stretch; } .sheet-row select { font-family: inherit; font-size: 0.95rem; padding: 7px 10px; border-radius: 10px; border: 2px solid var(--accent); background: var(--card); color: var(--ink); } .sheet-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); } .diff-desc { margin: 6px 0 0; font-size: 0.85rem; opacity: 0.75; } .rules-btn, .install-btn { font-family: inherit; border: 2px solid var(--accent); background: none; color: var(--accent); font-weight: 700; font-size: 0.9rem; padding: 7px 12px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .rules-btn:active, .install-btn:active { transform: scale(0.96); } .stats-grid { display: grid; gap: 6px; text-align: center; } .stat { display: flex; flex-direction: column; } .stat b { font-size: 1.05rem; } .stat span { font-size: 0.72rem; opacity: 0.7; } .sheet-help { font-size: 0.9rem; opacity: 0.85; padding-top: 10px; } .sheet-help p { margin: 6px 0; } .sheet-help i { color: var(--accent); width: 18px; text-align: center; margin-right: 4px; } .sheet-promo { display: block; margin-top: 12px; padding: 11px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; text-decoration: none; text-align: center; font-size: 0.92rem; } /* ---------- Modály --------------------------------------------------------- */ #endModal, #rulesModal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 22, 44, 0.55); } #endModal.visible, #rulesModal.visible { display: flex; } .end-box { max-width: min(90vw, 400px); width: 100%; background: var(--card); color: var(--ink); border-radius: 16px; padding: 20px 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); text-align: center; } .end-box h2 { margin: 0 0 6px; font-size: 1.3rem; } .end-box p { margin: 0 0 14px; font-size: 0.95rem; opacity: 0.85; } .end-box .btns { display: flex; gap: 8px; } .end-box .btns button { flex: 1; justify-content: center; } .end-box .btns + .btns { margin-top: 8px; } .end-box button { font-family: inherit; font-size: 0.95rem; font-weight: 700; padding: 9px 16px; border-radius: 11px; border: none; cursor: pointer; background: var(--accent); color: #fff; display: inline-flex; align-items: center; gap: 7px; } .end-box #endClose { background: none; border: 2px solid var(--accent); color: var(--accent); } .end-box #endShare { background: none; border: 2px solid var(--accent); color: var(--accent); } .end-box button:active { transform: scale(0.96); } .end-promo { display: block; margin-top: 14px; font-size: 0.88rem; color: var(--accent); text-decoration: none; font-weight: 700; } .rules-box { max-width: min(92vw, 430px); width: 100%; max-height: 86vh; overflow-y: auto; background: var(--card); color: var(--ink); border-radius: 16px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .rules-box h2 { margin: 0 0 8px; font-size: 1.15rem; display: flex; justify-content: space-between; align-items: center; } .rules-box h2 button { background: none; border: 0; font-size: 1.15rem; cursor: pointer; color: var(--ink); } .rules-box p, .rules-box li { font-size: 0.93rem; line-height: 1.5; } .rules-box ul { padding-left: 20px; margin: 8px 0; } .rules-box b { color: var(--accent); }