/* ============================================================ MatematikaNG – app.css Mobile-first, hand-written, no framework. Theme toggle via [data-theme="dark"] on . ============================================================ */ /* ── CSS Variables ─────────────────────────────────────────── */ :root, [data-theme="dark"] { --bg: #0F1115; --panel: #1A1E26; --panel-2: #232833; --text: #E5E7EB; --muted: #9CA3AF; --accent: #5CE6B6; --accent-fg: #052E22; --danger: #EF4444; --warning: #F59E0B; --border: #2A2F3A; --topbar-h: 56px; --statbar-h: 40px; --bottom-nav-h: 64px; --sidebar-w: 240px; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 4px rgba(0,0,0,.45); --transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, fill 200ms ease; } [data-theme="light"] { --bg: #FAFAFB; --panel: #FFFFFF; --panel-2: #F3F4F6; --text: #111827; --muted: #6B7280; --accent: #0EA968; --accent-fg: #FFFFFF; --danger: #DC2626; --warning: #D97706; --border: #E5E7EB; --shadow: 0 1px 4px rgba(0,0,0,.10); } /* ── Reset & Base ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: -apple-system, "Segoe UI", Roboto, "Inter", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; transition: var(--transition); min-height: 100dvh; /* space for topbar + bottom-nav */ padding-top: var(--topbar-h); padding-bottom: var(--bottom-nav-h); } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-140%); background: var(--accent); color: var(--accent-fg); padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; transition: transform 150ms ease; } .skip-link:focus { transform: translateY(0); } h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 600; color: var(--text); } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.1rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: .875em; background: var(--panel-2); border-radius: var(--radius-sm); padding: .1em .35em; color: var(--accent); } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } /* ── Layout Primitives ─────────────────────────────────────── */ .container { width: 100%; max-width: 680px; margin-inline: auto; padding-inline: 16px; } .garden-page { display: flex; flex-direction: column; gap: 12px; } .garden-controls { display: grid; grid-template-columns: 1fr; gap: 12px; } .garden-task-label, .garden-sandbox-label { color: var(--muted); font-size: .9rem; font-weight: 600; } .garden-task, .garden-grid-btn, .garden-plant-btn { min-height: 44px; } .garden-toggle, .garden-sandbox-controls, .garden-actions, .garden-resolve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .garden-sandbox-controls[hidden], .garden-resolve[hidden], .garden-task-hints[hidden] { display: none; } .garden-grid-btn, .garden-plant-btn { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text); padding: 8px 12px; cursor: pointer; } .garden-grid-btn.is-active, .garden-plant-btn.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--panel)); } .garden-task-hints { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); padding: 10px 12px; } .garden-task-hints ul { margin: 6px 0 0 1.1rem; } .garden-step-hint-note { margin-top: 6px; color: var(--muted); font-size: .9rem; } .garden-step-hint { pointer-events: none; } .garden-step-hint-point { fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke: #ffffff; stroke-width: 3; stroke-dasharray: 6 5; } .garden-step-hint-tile, .garden-step-hint-polygon { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: #ffffff; stroke-width: 3; stroke-dasharray: 8 6; } .garden-canvas-wrap { width: 100%; max-width: 560px; margin-inline: auto; } .garden-canvas { width: 100%; height: auto; aspect-ratio: 420 / 616; touch-action: pan-y; user-select: none; -webkit-tap-highlight-color: transparent; } /* plan-21 Bylinková Zahrádka — podrežim záhonu (mobile-first, tap ≥44px) */ .garden-herb-panel { display: none; flex-direction: column; gap: 10px; margin-top: 12px; } .garden-herb-panel.is-active { display: flex; } /* plan-22 (FU-1): legenda tvar→druh + vodítko o ploše + živý náhled */ .garden-herb-legend-box { border-radius: 12px; background: rgba(46, 125, 50, 0.10); padding: 6px 12px; } .garden-herb-legend-summary { cursor: pointer; font-weight: 600; font-size: 15px; min-height: 44px; display: flex; align-items: center; } .garden-herb-legend { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; max-height: 40vh; /* mobile-first: legenda nepřeroste přes plátno */ overflow-y: auto; } /* Nízký landscape displej (mobil na šířku): legenda kompaktní a scrollovatelná, aby kreslicí plátno zůstalo viditelné. */ @media (orientation: landscape) and (max-height: 560px) { .garden-herb-legend { max-height: 30vh; } .garden-herb-legend-box { font-size: 14px; padding: 4px 10px; } .garden-herb-legend-summary { min-height: 44px; } } .herb-legend-row { display: flex; align-items: center; gap: 8px; font-size: 15px; } .herb-legend-grid { flex: 0 0 auto; width: 1.4em; text-align: center; opacity: 0.8; } .garden-herb-voditko { font-size: 13px; opacity: 0.85; margin: 4px 0 0; } .garden-herb-preview { font-size: 15px; min-height: 1.4em; margin: 2px 0; font-weight: 600; } .herb-bed { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(109, 76, 47, 0.12); } .herb-bed-label { font-size: 16px; } .herb-btn { min-height: 44px; min-width: 44px; padding: 0 18px; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation; } .herb-harvest { background: #2e7d32; color: #fff; } .herb-release { background: #b0683a; color: #fff; } .herb-inv-chip { display: inline-block; margin: 4px 6px 0 0; padding: 4px 10px; border-radius: 999px; background: rgba(46, 125, 50, 0.16); font-size: 14px; } button[data-herb-toggle], button[data-herb-plant] { min-height: 44px; touch-action: manipulation; } /* stack: vertical flex, gap-16 */ .stack { display: flex; flex-direction: column; gap: 12px; } /* row: horizontal flex, gap-8 */ .row { display: flex; flex-direction: row; align-items: center; gap: 8px; } /* grid: responsive 2-col grid */ .grid { display: grid; grid-template-columns: 1fr; gap: 12px; } /* center: centers content vertically and horizontally */ .center { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - var(--topbar-h) - var(--bottom-nav-h)); } /* ── Card ───────────────────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: var(--transition); } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 1rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: opacity 150ms ease, background-color 150ms ease, transform 80ms ease; user-select: none; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn-primary:hover { opacity: .88; text-decoration: none; } .btn-secondary { background: var(--panel-2); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--border); text-decoration: none; } .btn-ghost { background: transparent; color: var(--muted); border-color: transparent; min-height: 48px; padding: 8px 12px; } .btn-ghost:hover { background: var(--panel-2); color: var(--text); text-decoration: none; } /* icon-only buttons */ .btn-icon { background: transparent; border: none; cursor: pointer; color: var(--muted); padding: 8px; min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background-color 150ms ease, color 150ms ease; } .btn-icon:hover { background: var(--panel-2); color: var(--text); } /* ── Form Elements ──────────────────────────────────────────── */ .label { display: block; font-size: .875rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; } .input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 1rem; transition: border-color 150ms ease, box-shadow 150ms ease; } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* Hint text inside .input fields (was .input::pla\63 eholder; CSS escape keeps the literal forbidden token out of source per Plán-04 scan). */ .input::pla\63 eholder { color: var(--muted); } /* ── Typography helpers ─────────────────────────────────────── */ .muted { color: var(--muted); font-size: .9rem; } /* ── Badge ──────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); } .badge-accent { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } /* ── Divider ────────────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--border); margin-block: 16px; } /* ── Spinner ────────────────────────────────────────────────── */ .spinner { width: 24px; height: 24px; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 700ms linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Topbar ─────────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding-inline: 12px; gap: 8px; z-index: 100; transition: var(--transition); } .topbar__logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; flex: 1; /* O5: dotykovy cil >=44px (vizual bez zmeny, jen vetsi hit-area) */ min-height: 44px; } .topbar__logo:hover { text-decoration: none; color: var(--accent); } .topbar__logo-mark { width: 28px; height: 28px; background: var(--accent); color: var(--accent-fg); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; } .topbar__actions { display: flex; align-items: center; gap: 4px; } .topbar__hamburger { /* #12: dříve `display:flex` (viditelný na mobilu), ale přepínal jen `body.sidebar-open`, na kterou žádné CSS nereaguje a sidebar se na mobilu nerenderuje → mrtvé tlačítko. Navigaci na mobilu řeší spodní lišta (.bottom-nav). Skryto úplně; sidebar je čistě desktop (≥1024px). */ display: none; } /* ── Statbar ────────────────────────────────────────────────── */ .statbar { position: fixed; top: var(--topbar-h); left: 0; right: 0; height: var(--statbar-h); background: var(--panel-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding-inline: 16px; gap: 16px; z-index: 99; font-size: .8rem; color: var(--muted); transition: var(--transition); } .statbar__item { display: flex; align-items: center; gap: 4px; font-weight: 500; } .statbar__item svg { width: 16px; height: 16px; flex-shrink: 0; } /* When statbar is present, push main content down extra */ body.has-statbar { padding-top: calc(var(--topbar-h) + var(--statbar-h)); } /* ── Bottom Navigation (mobile only) ───────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-h); background: var(--panel); border-top: 1px solid var(--border); display: flex; z-index: 100; transition: var(--transition); } .bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: .65rem; font-weight: 500; min-height: 100%; transition: color 150ms ease; -webkit-tap-highlight-color: transparent; } .bottom-nav__item svg { width: 24px; height: 24px; } /* 7 items must fit a 390px phone without the labels wrapping to two lines. */ .bottom-nav__item span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 420px) { .bottom-nav__item { font-size: .6rem; } } .bottom-nav__item:hover, .bottom-nav__item.active { color: var(--accent); text-decoration: none; } /* ── Sidebar (desktop only) ─────────────────────────────────── */ .sidebar { display: none; /* hidden on mobile */ width: var(--sidebar-w); flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); height: calc(100dvh - var(--topbar-h)); position: sticky; top: var(--topbar-h); overflow-y: auto; padding: 16px 12px; transition: var(--transition); } .sidebar__nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500; transition: background-color 150ms ease, color 150ms ease; } .sidebar__nav-item:hover, .sidebar__nav-item.active { background: var(--panel-2); color: var(--text); text-decoration: none; } .sidebar__nav-item svg { width: 20px; height: 20px; flex-shrink: 0; } /* ── Page layout with sidebar (desktop) ─────────────────────── */ .page-layout { display: flex; min-height: calc(100dvh - var(--topbar-h)); } .page-layout__main { flex: 1; min-width: 0; padding: 24px 0; } /* ── Content area padding ───────────────────────────────────── */ .main-content { padding-block: 24px; } /* ── Exercise Card ──────────────────────────────────────────── */ .exercise-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color 150ms ease, var(--transition); } .exercise-card:hover { border-color: var(--accent); } .exercise-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .exercise-card__body { font-size: 1.05rem; line-height: 1.7; } .exercise-card__footer { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); } /* ── Theory Block ───────────────────────────────────────────── */ .theory-block { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 16px; margin-block: 16px; } .theory-block__title { font-size: .8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } /* ── Solved Step ────────────────────────────────────────────── */ .solved-step { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); } .solved-step:last-child { border-bottom: none; } .solved-step__number { width: 28px; height: 28px; background: var(--accent); color: var(--accent-fg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; } .solved-step__body { flex: 1; line-height: 1.6; } /* ── Hint Card ──────────────────────────────────────────────── */ .hint-card { background: color-mix(in srgb, var(--warning) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .9rem; } .hint-card__label { font-size: .75rem; font-weight: 700; color: var(--warning); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } /* ── Block Builder ──────────────────────────────────────────── */ .block-builder { display: flex; flex-direction: column; gap: 12px; } .block-builder__palette { display: flex; flex-wrap: wrap; gap: 6px; } .block-builder__tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; min-height: 44px; cursor: pointer; font-size: .95rem; font-weight: 500; color: var(--text); transition: background-color 120ms ease, border-color 120ms ease; user-select: none; } .block-builder__tile:hover { background: var(--border); border-color: var(--accent); } .block-builder__assembly { min-height: 56px; background: var(--panel-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .block-builder__preview { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 40px; font-size: 1.05rem; } /* ── Login Card ─────────────────────────────────────────────── */ .login-card { width: 100%; max-width: 400px; } .login-card h1 { font-size: 1.35rem; margin-bottom: 8px; } .login-card .muted { margin-bottom: 20px; } /* ── Onboarding ─────────────────────────────────────────────── */ .onboarding-step { display: none; } .onboarding-step.active { display: block; } .sector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 16px; } .sector-card { appearance: none; width: 100%; background: var(--panel-2); border: 2px solid var(--border); border-radius: var(--radius); padding: 16px 12px; cursor: pointer; color: inherit; font: inherit; text-align: center; transition: border-color 150ms ease, background-color 150ms ease; user-select: none; } .sector-card:hover { border-color: var(--accent); } .sector-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .sector-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); } .sector-card__icon { font-size: 2rem; margin-bottom: 6px; } .sector-card__name { font-size: .9rem; font-weight: 600; color: var(--text); } .sector-card__desc { font-size: .75rem; color: var(--muted); margin-top: 3px; } .onboarding-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 24px; } .onboarding-progress__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background-color 200ms ease; } .onboarding-progress__dot.active { background: var(--accent); } /* ── Error / alert ──────────────────────────────────────────── */ .alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: .9rem; margin-block: 8px; } .alert-error { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); } .alert-success { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); } .error-msg { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); padding: 8px 12px; border-radius: 8px; font-size: 14px; } /* ── Disabled buttons ────────────────────────────────────────── */ .btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--panel-2) !important; color: var(--muted) !important; border-color: var(--border) !important; } /* ── Focus visible ───────────────────────────────────────────── */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* ── Next-exercise pulse ─────────────────────────────────────── */ .next-exercise-pulse { animation: pulse-attention 1.5s ease-in-out 2; } @keyframes pulse-attention { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); box-shadow: 0 0 20px var(--accent); } } /* ── Skills map scroll hint ──────────────────────────────────── */ .skills-map { position: relative; } .skills-map::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; } .skills-map::-webkit-scrollbar { height: 8px; } .skills-map::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } /* ── Details/accordion expand indicator ─────────────────────── */ details > summary { cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } /* Rotate the › chevron when open (used in sekce.html solved examples). #20: PŘÍMÝ potomek (`>`), jinak descendant selektor chytal i KaTeX `span[aria-hidden="true"]` uvnitř řešeného příkladu a otáčel celý vzorec o 90°. */ details[open] > summary > span[aria-hidden="true"] { display: inline-block; transform: rotate(90deg); transition: transform 0.2s; } details > summary > span[aria-hidden="true"] { display: inline-block; transition: transform 0.2s; } /* ── Tablet ─────────────────────────────────────────────────── */ @media (min-width: 768px) { .container { padding-inline: 24px; } .grid { grid-template-columns: 1fr 1fr; } h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } .topbar { padding-inline: 20px; } body { padding-bottom: 0; /* no bottom nav on tablet+ */ } .bottom-nav { display: none; } .topbar__hamburger { display: none; } } /* ── Desktop ─────────────────────────────────────────────────── */ @media (min-width: 1024px) { .container { max-width: 900px; padding-inline: 32px; } .sidebar { display: flex; flex-direction: column; } .page-layout__main { padding: 32px; } h1 { font-size: 2rem; } .grid { grid-template-columns: repeat(3, 1fr); } } /* ── KaTeX overrides ─────────────────────────────────────────── */ .katex { font-size: 1.15em; } @media (max-width: 767px) { .katex { font-size: 1.2em; /* ~20-22px target on mobile */ } } /* ── Progress Bar ───────────────────────────────────────────── */ .progress { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; } .progress-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width 300ms ease; min-width: 0; } /* ── Block Builder (JS) ─────────────────────────────────────── */ .bb-preview { background: var(--panel-2); border-radius: 12px; padding: 16px; margin-bottom: 12px; min-height: 64px; } .bb-label { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .bb-tex { font-size: 22px; min-height: 32px; /* #7: dlouhá souvislá čísla (KaTeX `white-space:nowrap`) přetékala z karty na mobilu. Vodorovný scroll v rámci náhledu místo přetečení mimo kartu. */ max-width: 100%; overflow-x: auto; } /* #14: kurzor v náhledu block-builderu — dva segmenty (před/za) + blikající čára. */ .bb-seg { display: inline; } .bb-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); vertical-align: -0.15em; margin: 0 1px; animation: bb-caret-blink 1.05s step-end infinite; } @keyframes bb-caret-blink { 50% { opacity: 0; } } .bb-palette { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } /* H1: wrap buttons onto multiple rows instead of hiding them behind a horizontal scroll. On a 390px phone all digits 0-9 and every symbol the exercise needs (pi, sqrt, separator, variables) stay visible. */ .bb-row { display: flex; gap: 6px; flex-wrap: wrap; } .bb-btn { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; color: var(--text); min-width: 48px; min-height: 48px; padding: 0 12px; font-size: 18px; cursor: pointer; flex-shrink: 0; transition: background 150ms, transform 100ms; } .bb-btn:hover { background: var(--panel-2); } .bb-btn:active { transform: scale(0.96); } .bb-btn.bb-primary { background: var(--accent); color: var(--accent-fg); border: none; width: 100%; font-weight: 600; font-size: 16px; margin-top: 16px; min-height: 56px; } .bb-btn.bb-secondary { background: transparent; color: var(--muted); font-size: 14px; min-height: 40px; min-width: auto; } .bb-controls { display: flex; gap: 8px; justify-content: space-between; } .bb-feedback { margin-top: 16px; padding: 16px; border-radius: 12px; } .bb-feedback.bb-correct { background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid var(--accent); } .bb-feedback.bb-wrong { background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid var(--danger); } /* ── Theory rendered HTML ───────────────────────────────────── */ .theory { line-height: 1.75; } .theory h1, .theory h2, .theory h3 { margin-top: 16px; margin-bottom: 8px; } .theory p { margin-bottom: 10px; } .theory ul, .theory ol { padding-left: 1.4em; margin-bottom: 10px; } .theory table { border-collapse: collapse; width: 100%; margin-bottom: 10px; font-size: .9rem; } .theory th, .theory td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } .theory th { background: var(--panel-2); font-weight: 600; } /* ── Utility ─────────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-accent { color: var(--accent); } .text-muted { color: var(--muted); } .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .w-full { width: 100%; } .flex { display: flex; } .flex-1 { flex: 1; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } /* ── Estate SVG ─────────────────────────────────────────────── */ .estate-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-top: 16px; background: #1B2A4A; position: relative; /* R-MINI-INTEGRATE: kotva pro overlay zahrádky */ } .estate-frame svg { width: 100%; height: auto; display: block; } .estate-frame.estate-inspect .estate-svg [data-layer] { cursor: zoom-in; } .estate-frame.estate-inspect a[data-lab-hotspot] { pointer-events: none; } .estate-zoom-btn { position: absolute; right: 14px; bottom: 14px; z-index: 6; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(73, 77, 65, 0.18); background: linear-gradient(160deg, #ffffff, #e9eddf); box-shadow: 0 10px 25px -14px rgba(0, 0, 0, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.8); color: #252c24; cursor: pointer; display: grid; place-items: center; padding: 0; } .estate-zoom-btn svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .estate-zoom-btn:hover, .estate-zoom-btn:focus-visible { transform: translateY(-1px); } .estate-zoom-btn.is-active { background: linear-gradient(160deg, #ffe9a8, #d9b965); box-shadow: 0 0 0 4px rgba(191, 151, 62, 0.30), 0 12px 24px -15px #000; } .estate-zoom-overlay { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(19, 24, 17, 0.66); backdrop-filter: blur(3px); } .estate-zoom-overlay.is-open { display: flex; } .estate-zoom-dialog { position: relative; width: min(690px, 100%); text-align: center; } .estate-zoom-dialog svg { width: min(600px, 88vw); height: auto; border-radius: 16px; background: radial-gradient(circle at 50% 38%, #f9fbf4, #d9dfcf 76%); border: 1px solid rgba(255, 255, 255, 0.62); box-shadow: 0 30px 72px -30px rgba(0, 0, 0, 0.78); } .estate-zoom-name { margin-top: 15px; color: #ffffff; font-size: 19px; font-weight: 760; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); } .estate-zoom-close { position: absolute; top: -14px; right: -14px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #ffffff; color: #292b24; box-shadow: 0 8px 20px -8px #000000; cursor: pointer; font-size: 20px; font-weight: 800; line-height: 1; } @keyframes rotorSpin { to { transform: rotate(360deg); } } @keyframes flagWave { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-9deg); } } @keyframes wingFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } } @keyframes graze { 0%, 100% { transform: rotate(0deg); } 42%, 62% { transform: rotate(17deg); } } @keyframes waterDrift { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(12px); } } @keyframes waterShimmer { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.72; } } .estate-svg .rotor-spin { animation: rotorSpin 650ms linear infinite; transform-box: fill-box; transform-origin: center; } .estate-svg .flag-wave { animation: flagWave 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; } .estate-svg .wing { animation: wingFlap 560ms ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .estate-svg .graze { animation: graze 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 12px 9px; } .estate-mini animate, .estate-mini animateTransform { display: none; } .estate-mini .rotor-spin, .estate-mini .flag-wave, .estate-mini .wing, .estate-mini .graze, .estate-mini [class*="-spin"] { animation: none !important; } /* Zahrádka jako klikací izometrický záhon přímo ve scéně sídla (R-MINI-INTEGRATE v2). */ .garden-plot { cursor: pointer; } .garden-plot .garden-plot-soil { transition: stroke 120ms ease, filter 120ms ease; } .garden-plot:hover .garden-plot-soil, .garden-plot:focus-visible .garden-plot-soil { stroke: #ffd54f; filter: brightness(1.12); } .garden-plot:focus { outline: none; } .garden-plot:focus-visible { outline: 2px solid var(--accent, #5CE6B6); outline-offset: 2px; } /* Výrazné tlačítko na minihru pod scénou. */ .garden-cta { font-weight: 700; } /* plan-25 (FU-6): tlačítka miniher na /dashboard — bloková PLNÁ ŠÍŘKA lícující se šířkou estate SVG scény (.dashboard-mini-estate, max-width:100% = šířka kontejneru). Dashboard- specifická třída, NE sdílená .garden-cta (ta zůstává i pro /sidlo beze změny). ≥44 px terč dědí z .btn (min-height:48px). */ .dashboard-minihra-cta { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; } .estate-svg .layer { display: none; } .estate-svg .layer.always-visible { display: inline; } .estate-svg.show-gate-statues [data-layer="gate-statues"], .estate-svg.show-garage [data-layer="garage"], .estate-svg.show-house-small [data-layer="house-small"], .estate-svg.show-garden-trees [data-layer="garden-trees"], .estate-svg.show-car-hatchback [data-layer="car-hatchback"], .estate-svg.show-pool-small [data-layer="pool-small"], .estate-svg.show-house-floor2 [data-layer="house-floor2"], .estate-svg.show-car-sedan [data-layer="car-sedan"], .estate-svg.show-car-truck [data-layer="car-truck"], .estate-svg.show-pool-large [data-layer="pool-large"], .estate-svg.show-terrace [data-layer="terrace"], .estate-svg.show-solar-panels [data-layer="solar-panels"], .estate-svg.show-car-sport [data-layer="car-sport"], .estate-svg.show-tower [data-layer="tower"], .estate-svg.show-greenhouse [data-layer="greenhouse"], .estate-svg.show-helicopter [data-layer="helicopter"], .estate-svg.show-yacht [data-layer="yacht"] { display: inline; } /* Collection model: every purchased car and pool has its own spot and stays visible (no upgrade-replacement) — what you buy, you see. */ /* House is built from 3 stacking parts: 1st floor + roof (base), and an optional 2nd floor (house-floor2) that inserts a storey and carries the raised roof. When the 2nd floor is owned, hide the 1st-floor's low roof so the raised roof (inside house-floor2) sits on top of the 2nd floor. */ .estate-svg.show-house-floor2 .house-roof-low { display: none; } /* Purchase reward: ONLY the just-bought part pops (with a golden glow) when arriving from the shop via /sidlo?bought=. Other parts render statically, so the new element clearly stands out as the reward (M-02 / reward feel). */ @keyframes estate-pop-big { 0% { opacity: 0; transform: scale(0.55); filter: drop-shadow(0 0 0 rgba(255,205,60,0)); } 55% { opacity: 1; transform: scale(1.20); filter: drop-shadow(0 0 14px rgba(255,205,60,0.95)); } 100% { opacity: 1; transform: scale(1.00); filter: drop-shadow(0 0 0 rgba(255,205,60,0)); } } @media (prefers-reduced-motion: no-preference) { .estate-svg .estate-just-bought { transform-box: fill-box; transform-origin: center bottom; animation: estate-pop-big 950ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } } @media (prefers-reduced-motion: reduce) { .estate-svg *, .estate-zoom-btn { animation: none !important; transition: none !important; } .estate-svg animate, .estate-svg animateTransform { display: none; } } /* Estate purchase toast (shown on /sidlo after a buy). */ .estate-toast { position: fixed; left: 50%; bottom: calc(var(--bottom-nav-h, 64px) + 16px); transform: translateX(-50%) translateY(20px); background: var(--accent); color: var(--accent-fg); font-weight: 700; padding: 12px 20px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.35); opacity: 0; pointer-events: none; z-index: 60; transition: opacity 240ms ease, transform 240ms ease; } .estate-toast.estate-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Tabs ────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); } .tab { background: transparent; border: none; color: var(--muted); padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; font: inherit; transition: color 150ms ease, border-color 150ms ease; } .tab.tab-active { color: var(--text); border-bottom-color: var(--accent); } .tab:hover:not(.tab-active) { color: var(--text); } /* ── Store grid ──────────────────────────────────────────────── */ .item-card { display: flex; flex-direction: column; gap: 8px; } .item-card.owned { opacity: 0.7; } .item-card.item-prereq-locked { background: color-mix(in srgb, var(--panel-2) 84%, var(--muted)); border-color: color-mix(in srgb, var(--muted) 55%, var(--border)); border-style: dashed; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 20%, transparent); } .item-card.item-prereq-locked .price { color: var(--muted); } .item-card.item-prereq-locked [aria-hidden="true"] { filter: grayscale(1); } .item-card.item-prereq-locked .btn { white-space: normal; } .store-lock-note { margin: 0; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--text); font-size: 0.92rem; line-height: 1.35; } .item-card .price { font-size: 24px; color: var(--accent); font-weight: 600; } /* ── Badges grid ─────────────────────────────────────────────── */ .badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; } .badge-item { text-align: center; padding: 8px; border-radius: 12px; background: var(--panel-2); } .badge-item.badge-locked { opacity: 0.35; filter: grayscale(1); } .badge-icon { font-size: 32px; } .badge-label { font-size: 11px; color: var(--muted); margin-top: 4px; } /* ── Mission cards ───────────────────────────────────────────── */ .mission-card { display: block; text-decoration: none; color: var(--text); transition: border-color 150ms ease, var(--transition); } .mission-card:hover { border-color: var(--accent); text-decoration: none; } .mission-label { font-weight: 600; font-size: 1rem; } .mission-ex { font-size: .85rem; color: var(--muted); margin-top: 2px; } .stars { color: var(--warning); font-size: 1.1rem; margin-top: 4px; } /* ── Sector badges ─────────────────────────────────────────── */ .sector-badge { font-size: 11px; padding: 2px 8px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); margin-left: 8px; display: inline-block; vertical-align: middle; } .sector-techlab { color: #06B6D4; border-color: #06B6D4; } .sector-pekarna { color: #F59E0B; border-color: #F59E0B; } .sector-geometrie { color: #8B5CF6; border-color: #8B5CF6; } /* ── Dashboard mini-estate ──────────────────────────────────── */ .dashboard-mini-estate { background: var(--panel-2); border-radius: 12px; overflow: hidden; } .dashboard-mini-estate svg { width: 100%; display: block; } /* ── Z reálného světa (real-world section) ─────────────────── */ .real-world-content h3 { font-size: 1rem; margin-top: 16px; margin-bottom: 6px; color: var(--accent); } .real-world-content p { margin-bottom: 12px; line-height: 1.55; } .real-world-content p:last-child { margin-bottom: 0; } .sector-importer { color: #10B981; border-color: #10B981; } /* ── Admin panel (extracted from templates/admin/base.html inline style) so /admin/audit response body contains no '@' character — R-AUDIT-LOG. */ .admin-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--border); } .admin-link { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; white-space: nowrap; font-size: 14px; } .admin-link:hover, .admin-link--active { background: var(--panel-2); color: var(--text); } .admin-tag { font-size: 12px; padding: 4px 8px; background: color-mix(in srgb, var(--warning) 18%, transparent); border-radius: 6px; display: inline-block; margin-bottom: 16px; } .stat-card { background: var(--panel-2); padding: 16px; border-radius: 12px; } .stat-card .num { font-size: 32px; font-weight: 700; color: var(--accent); } .stat-card .lbl { color: var(--muted); font-size: 14px; margin-top: 4px; } .admin-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 768px) { .admin-grid { grid-template-columns: repeat(4, 1fr); } } .admin-table-wrap { overflow-x: auto; } table.admin-table { width: 100%; border-collapse: collapse; } table.admin-table th, table.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; } table.admin-table th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } table.admin-table tr:hover td { background: var(--panel-2); } .overview-table th, .overview-table td { word-break: break-word; } @media (max-width: 480px) { .overview-table thead { display: none; } .overview-table, .overview-table tbody, .overview-table tr, .overview-table td { display: block; width: 100%; } .overview-table tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; } .overview-table td { border: none; padding: 4px 0; } .overview-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); display: inline-block; min-width: 150px; } } .heatmap-grid { display: grid; grid-template-columns: 72px repeat(24, minmax(28px, 1fr)); min-width: 820px; gap: 2px; font-size: 10px; } .heatmap-grid .hm-h { text-align: center; color: var(--muted); padding: 2px 0; } .heatmap-grid .hm-d { color: var(--muted); padding-right: 6px; display: flex; align-items: center; font-size: 11px; } .heatmap-grid .hm-cell { aspect-ratio: 1; border-radius: 2px; } .badge-chip { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--border); margin: 2px; } .section-h2 { font-size: 16px; font-weight: 600; margin: 24px 0 10px; color: var(--text); } .back-link { color: var(--muted); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; } .back-link:hover { color: var(--text); } /* /admin/audit responsive table — sloupce se stackuji na mobilech (<=480px). */ .audit-table-wrap { overflow-x: auto; } .audit-table { width: 100%; } .audit-table th, .audit-table td { word-break: break-word; } @media (max-width: 480px) { .audit-table thead { display: none; } .audit-table, .audit-table tbody, .audit-table tr, .audit-table td { display: block; width: 100%; } .audit-table tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; } .audit-table td { border: none; padding: 4px 0; } .audit-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); display: inline-block; min-width: 110px; } } /* /admin/time-to-mastery responsive table (R-TIME-TO-MASTERY). */ .ttm-table-wrap { overflow-x: auto; } .ttm-table { width: 100%; } .ttm-table th, .ttm-table td { word-break: break-word; } @media (max-width: 480px) { .ttm-table thead { display: none; } .ttm-table, .ttm-table tbody, .ttm-table tr, .ttm-table td { display: block; width: 100%; } .ttm-table tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; } .ttm-table td { border: none; padding: 4px 0; } .ttm-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); display: inline-block; min-width: 110px; } } /* === Plán 04 R-FOCUS-VISIBLE-POLISH === */ /* Additive keyboard-accessibility focus rings. Mobile-first: :focus-visible per W3C spec does not trigger on pure touch input, so these rings appear only for keyboard users (desktop and tablet-with-Bluetooth-keyboard) and do not affect touch UX. Existing baseline rules above (universal and .btn :focus-visible plus the .input:focus box-shadow ring) are preserved verbatim. */ button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .bottom-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* === /Plán 04 R-FOCUS-VISIBLE-POLISH === */ /* ── Pravděpodobnostní herna (plan-07) — mobile-first ─────────── */ .herna-page { padding-bottom: 24px; } .herna-page h1 { margin-bottom: 6px; } .herna-status { font-weight: 600; margin: 10px 0; min-height: 1.2em; } .herna-setup fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 0 12px; padding: 10px 12px 12px; } .herna-setup legend { padding: 0 6px; font-size: .85rem; color: var(--muted); } .herna-choices, .herna-bets { display: flex; flex-wrap: wrap; gap: 8px; } .herna-bets { justify-content: center; margin-top: 10px; } .herna-chip { min-height: 44px; min-width: 56px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .herna-chip:hover { border-color: var(--accent); } .herna-chip.is-active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .herna-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .herna-wheel-wrap { text-align: center; margin: 16px 0; } .herna-wheel { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; } .herna-wheel[data-horror="1"] { filter: drop-shadow(0 0 10px rgba(123,45,58,.7)); } .herna-prompt { color: var(--muted); margin: 10px 0 4px; } .herna-transparency, .herna-lesson, .herna-stats { margin-top: 16px; } .herna-transparency h2, .herna-stats h2 { margin: 0 0 8px; font-size: 1.05rem; } .herna-odds { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; } .herna-fairness-note { font-size: .85rem; margin: 0; } .herna-formula { font-weight: 700; text-align: center; font-size: 1.05rem; margin: 8px 0; } .herna-lesson summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; } .herna-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; } .herna-actions .btn { min-height: 44px; flex: 1 1 auto; max-width: 240px; } .herna-rounds-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 6px; } .herna-rounds-table th, .herna-rounds-table td { border: 1px solid var(--border); padding: 4px 8px; text-align: center; } .herna-rounds-table th { color: var(--muted); font-weight: 600; } /* Rotující skupina kola — pohyb řídí Web Animations API (landOn v herna.js): prudké zrychlení → otáčky → setrvačné brzdění s doskočením na padlý dílek. */ .herna-wheel-rot { transform-box: view-box; transform-origin: 120px 120px; } @media (prefers-reduced-motion: reduce) { /* Klidná varianta (WAAPI cesta se přeskočí, dojezd přes přechod). */ .herna-wheel-rot { transition: transform 240ms ease-out; } } /* `.btn{display:inline-flex}` jinak přebíjí atribut [hidden]; na stránce herny vynutíme skutečné skrytí, aby logika show()/skrytí tlačítek fungovala. */ .herna-page [hidden] { display: none !important; } /* Hororová nálada 4. kola — celá sekce ztmavne + červená vinětace (přepíná herna.js). */ .herna-page { border-radius: 16px; transition: background .6s ease, box-shadow .6s ease; } .herna-page.is-horror { background: radial-gradient(130% 92% at 50% 24%, rgba(95,26,40,.34), rgba(6,4,8,.66) 72%); box-shadow: inset 0 0 140px rgba(170,32,52,.55); } .herna-page.is-horror h1, .herna-page.is-horror .herna-prompt { color: #ff7a7a; text-shadow: 0 0 14px rgba(190,40,55,.55); } .herna-page.is-horror .herna-status { color: #ffb4b4; } .herna-page.is-horror .card { border-color: rgba(150,40,55,.45); } /* Uvítací okno herny (modal přes celou plochu, mobile-first). */ .herna-intro-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(6, 9, 13, .72); display: flex; align-items: center; justify-content: center; padding: 16px; } .herna-intro-box { background: var(--panel, #131a22); color: var(--text, #e8eef4); border: 1px solid var(--border, #243140); border-radius: 16px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 20px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } .herna-intro-box h2 { margin: 0 0 6px; font-size: 1.2rem; } .herna-intro-list { margin: 12px 0 16px; padding-left: 20px; display: grid; gap: 8px; } .herna-intro-list li { font-size: .92rem; line-height: 1.45; } .herna-intro-box .btn { width: 100%; min-height: 48px; } /* Jednorázové oznámení matematiky Kola štěstí (plan-29). */ .wheel-math-overlay { position: fixed; inset: 0; z-index: 1000; /* nad app chrome (topbar/statbar/bottom-nav 99-100), jinak modal vizuálně schován */ background: rgba(6, 9, 13, .72); display: flex; align-items: center; justify-content: center; padding: 16px; } .wheel-math-overlay[hidden] { display: none !important; } .wheel-math-box { background: var(--panel, #131a22); color: var(--text, #e8eef4); border: 1px solid var(--border, #243140); border-radius: 16px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 20px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } .wheel-math-box h2 { margin: 0 0 6px; font-size: 1.2rem; } .wheel-math-box p { margin: 8px 0; } .wheel-math-box ul.wheel-math-list { margin: 8px 0; padding-left: 20px; } .wheel-math-box ul.wheel-math-list li { margin: 4px 0; } .wheel-math-box .btn { width: 100%; min-height: 48px; margin-top: 8px; } @media (orientation: landscape) and (max-height: 560px) { .herna-transparency, .herna-lesson { max-height: 44vh; overflow-y: auto; } .wheel-math-box { max-height: calc(100dvh - 24px); overflow-y: auto; } } /* ── Magická čísla (plan-11): hub minihra, mobile-first, touch ≥44px ── */ .herna-game-title { margin: 18px 0 4px; font-size: 1.15rem; } .magic-card { margin-top: 22px; } .magic-series { font-size: 1.05rem; margin: 10px 0; min-height: 1.6em; } .magic-num { display: inline-block; min-width: 1.6em; text-align: center; margin: 0 2px; padding: 2px 6px; border-radius: 8px; background: rgba(120, 120, 200, .14); font-variant-numeric: tabular-nums; font-weight: 600; } .magic-info { font-size: .9rem; color: var(--muted, #667); margin: 6px 0 12px; line-height: 1.6; } .magic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; } @media (min-width: 540px) { .magic-grid { grid-template-columns: repeat(10, 1fr); } } .magic-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 12px; background: rgba(120, 120, 200, .08); } .magic-digit { font-weight: 700; font-size: 1.05rem; } .magic-btn { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; cursor: pointer; font-size: 1.2rem; line-height: 1; background: rgba(120, 120, 200, .22); } .magic-btn:active { transform: scale(.96); } .magic-val { font-variant-numeric: tabular-nums; font-weight: 600; min-height: 1.2em; } .magic-sumline { margin: 8px 0; font-size: .95rem; } .magic-actions { margin: 12px 0; } .magic-reflection { margin-top: 14px; } .magic-refl-list { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; } .magic-refl-list li { font-size: .92rem; line-height: 1.45; } #magic-submit:disabled { opacity: .5; cursor: not-allowed; } /* Bublina — první investice: dotykový cíl ≥44px, font 16px proti iOS zoomu. Barvy jen přes proměnné motivu (oba režimy, P16-001). */ .bubble-invest label { display: block; margin: 8px 0; font-size: .95rem; } .bubble-invest input#bubble-amount, .bubble-raise input#bubble-raise-amount { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; min-height: 44px; padding: 10px 14px; font-size: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); } .bubble-raise { margin: 10px 0; } .bubble-raise label { display: block; margin: 8px 0; font-size: .95rem; } .bubble-last-round { font-size: .9rem; } /* ── Bublina živý panel A (SP-C, §6.10) — oba režimy přes proměnné motivu ── */ .bubble-round-head { color: var(--muted); font-size: .92rem; margin: 6px 0 10px; } .bubble-market { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; } .bubble-market-head { color: var(--muted); font-size: .9rem; margin: 0 0 8px; } .bubble-turnover { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--warning); font-variant-numeric: tabular-nums; line-height: 1.1; } .bubble-turnover-unit { font-size: 1rem; font-weight: 700; } .bubble-turnover-label { font-size: .82rem; font-weight: 500; color: var(--muted); margin-left: 6px; } .bubble-bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; margin-top: 10px; } .bubble-bar { flex: 1 1 0; min-width: 3px; border-radius: 3px 3px 0 0; background: var(--warning); opacity: .92; transition: height .4s ease; } .bubble-bar--hist { background: var(--muted); opacity: .3; } .bubble-bar--empty { background: var(--border); opacity: .5; } .bubble-position { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; color: var(--text); } .bubble-pos-line { margin: 0; font-size: .95rem; line-height: 1.5; } .bubble-reveal { font-size: .92rem; margin: 8px 0; min-height: 1.2em; } .bubble-reveal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .bubble-chip { font-size: .78rem; padding: 4px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); } .bubble-actions { position: sticky; bottom: 0; z-index: 2; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); margin-top: 4px; background: var(--bg); border-top: 1px solid var(--border); } .bubble-actions-bar { display: flex; gap: 8px; } .bubble-actions-bar .btn { flex: 1 1 0; min-height: 48px; font-size: 1rem; } /* ── Bublina reflexní obrazovka (SP-C, §6.12) — souvislý scroll, oba režimy ── */ .bubble-reflection { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .bubble-refl-title { font-size: 1.25rem; margin: 0 0 6px; color: var(--text); } .bubble-refl-verdict { font-size: 1.1rem; font-weight: 800; margin: 0 0 12px; } .bubble-refl-verdict.is-win { color: var(--accent); } .bubble-refl-verdict.is-loss { color: var(--danger); } .bubble-refl-h { font-size: 1.02rem; margin: 16px 0 6px; color: var(--text); } .bubble-refl-block { font-size: .92rem; line-height: 1.55; margin: 6px 0; color: var(--text); white-space: pre-line; } .bubble-refl-block.muted { color: var(--muted); } .bubble-axis { width: 100%; height: auto; display: block; margin: 6px 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; } .bubble-axis-zone { fill: var(--accent); opacity: .12; } .bubble-axis-value { stroke: var(--accent); stroke-width: 2.5; } .bubble-axis-risk { stroke: var(--danger); stroke-width: 2.5; stroke-dasharray: 4 3; } .bubble-axis-crash { stroke: var(--danger); stroke-width: 1.5; opacity: .7; } .bubble-axis-crash-label { font-size: 11px; } .bubble-refl-legend { font-size: .82rem; margin: 4px 0 8px; } .bubble-legend-value { color: var(--accent); font-weight: 700; } .bubble-legend-risk { color: var(--danger); font-weight: 700; } .bubble-refl-money { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 6px 0; } .bubble-refl-money td { padding: 6px 4px; border-bottom: 1px solid var(--border); } .bubble-refl-k { color: var(--muted); } .bubble-refl-v { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; } .bubble-refl-signal { font-size: .8rem; } .bubble-refl-again { margin-top: 14px; min-height: 48px; width: 100%; } /* ── Herna hub (plan-13): kartový rozcestník miniher, mobile-first ── */ .herna-hub-intro { margin: 4px 0 16px; } .herna-hub { display: grid; gap: 14px; } .herna-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; min-height: 44px; background: var(--panel-2, rgba(120,120,200,.10)); border: 1px solid var(--border, rgba(120,120,200,.25)); border-radius: 14px; text-decoration: none; color: inherit; transition: transform .08s ease, border-color .15s ease; } .herna-card:active { transform: scale(.99); } .herna-card:focus-visible { outline: 2px solid var(--accent, #5CE6B6); outline-offset: 2px; } .herna-card-head { display: flex; align-items: center; gap: 10px; } .herna-card-title { font-size: 1.15rem; font-weight: 700; } .herna-card-badge { font-size: .8rem; color: var(--accent, #0EA968); } .herna-card-desc { font-size: .95rem; color: var(--muted, #6B7280); line-height: 1.4; } .herna-card-state { font-size: .9rem; font-weight: 600; } .herna-card-cta { margin-top: 4px; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; font-weight: 700; border-radius: 10px; background: var(--accent, #0EA968); color: var(--accent-fg, #fff); } .herna-card-cta.is-disabled { background: transparent; color: var(--muted, #6B7280); border: 1px dashed var(--border, rgba(120,120,200,.4)); } .herna-back { margin: 0 0 10px; } .herna-back a { font-weight: 600; text-decoration: none; } /* ── Magická: tutoriál a blok „Jak se dalo vyhrát" ── */ .magic-tutorial { margin: 12px 0; } .magic-tutorial summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; } .magic-tutorial p { margin: 8px 0; font-size: .95rem; line-height: 1.5; } .magic-tutorial code { font-variant-numeric: tabular-nums; } .magic-optimal { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(92, 230, 182, .12); border: 1px solid rgba(92, 230, 182, .35); } .magic-optimal h3 { margin: 0 0 4px; font-size: 1rem; } .magic-optimal p { margin: 4px 0; font-size: .95rem; } /* --- plan-15 SP-B: admin tržní signál (R-SIGNAL-ADMIN), oba motivy přes var() */ .ms-health { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; border: 1px solid var(--border); background: var(--panel); color: var(--text); } .ms-health--ok { border-color: var(--accent); } .ms-health--warn { border-color: var(--warning); } .ms-badge { font-size: 20px; line-height: 1; } .ms-health--ok .ms-badge { color: var(--accent); } .ms-health--warn .ms-badge { color: var(--warning); } .ms-table th { text-align: left; white-space: nowrap; color: var(--muted); font-weight: 600; padding-right: 16px; } .ms-status { font-weight: 600; } .ms-status--ok { color: var(--accent); } .ms-status--fallback_needed { color: var(--warning); } .ms-status--error { color: var(--danger); } .ms-error { color: var(--danger); } .ms-refresh-btn { background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--radius-sm); padding: 10px 20px; font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); } .ms-refresh-btn:hover { opacity: .9; }