/* Homepage layout polish: center relative to viewport like login */ @media (min-width: 992px){ body[data-page="index"] .home-layout{ position: relative; left: calc(50vw - 50% - (var(--menu-w) + 15px) + (var(--bs-gutter-x, 1.5rem) / 2)); } } /* Ensure cards grid doesn't stretch oddly and stays balanced */ body[data-page="index"] .cards-grid{ align-items: start; } /* Minimal polish only: keep original lemon theme; no hard overrides. */ /* Subtle hover for cards without changing theme */ body[data-page="index"] .crossword-card{ transition: transform .08s ease, box-shadow .2s ease; } body[data-page="index"] .crossword-card:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.10); } /* Vulgar marking: tint the preview background and add subtle symbol pattern */ body[data-page="index"] .crossword-card--vulgar .puzzle-cover{ /* Darker tint for light mode */ background-color:#d36b77 !important; position: relative; /* Pattern as background-image to avoid stacking issues */ background-image: url("data:image/svg+xml;utf8,!@#$"); background-repeat: repeat; background-size: 96px 96px; background-blend-mode: multiply; } html[data-theme="dark"] body[data-page="index"] .crossword-card--vulgar .puzzle-cover{ background-color:#3a0f14 !important; /* deeper tint for dark mode */ background-image: url("data:image/svg+xml;utf8,!@#$"); background-repeat: repeat; background-size: 96px 96px; background-blend-mode: screen; } /* Keep the original glow overlay and cell opacity; do not override here */ /* Account for fixed header so content (and footer) are not hidden */ body[data-page="index"] { padding-top: var(--header-h, 72px); } /* Make footer stick to bottom when content is short */ body[data-page="index"] #app-wrapper{ min-height: calc(100vh - var(--header-h, 72px)); display: flex; flex-direction: column; } body[data-page="index"] main{ flex: 1 0 auto; } /* Panoramic preview helpers */ body[data-page="index"] .preview-grid{ display: grid; gap: 2px; animation: previewFade 240ms ease-out; position: relative; max-width: 100%; max-height: 100%; overflow: hidden; /* keep cells inside card */ } body[data-page="index"] .preview-overlay{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; } body[data-page="index"] .crossword-preview{ justify-content: center; align-items: center; } body[data-page="index"] .preview-cell{ position: relative; border: 1px solid #ddd; background: rgba(255,255,255,0.92); box-sizing: border-box; transition: none; } body[data-page="index"] .preview-cell.preview-q{ background:#fff2cc !important; } html[data-theme="dark"] body[data-page="index"] .preview-cell.preview-q{ background:#3b2a00 !important; } body[data-page="index"] .preview-cell .start-arrow{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; } body[data-page="index"] .preview-cell .start-arrow polygon{ fill:#7b3fa3; } body[data-page="index"] .preview-cell .start-arrow polyline{ fill:none; stroke:#7b3fa3; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; } body[data-page="index"] .preview-qband{ position:absolute; border:1px solid rgba(217,72,15,0.8); background:rgba(255,240,200,0.75); border-radius:6px; pointer-events:none; box-shadow:0 2px 4px rgba(0,0,0,0.08); } body[data-page="index"] .preview-qband.span2{ border-width:2px; } body[data-page="index"] .preview-qslot{ position:absolute; border-radius:6px; mix-blend-mode:multiply; } @keyframes previewFade{ from { opacity:0; transform:scale(.98); } to { opacity:1; transform:scale(1); } } /* === Estetyczna plakietka 18+ dla kart z wulgaryzmami (homepage) === */ /* Layout the header so the badge stays inside on all widths */ body[data-page="index"] .crossword-card--vulgar .crossword-header{ position: relative; display: flex; align-items: center; gap: 8px; } body[data-page="index"] .crossword-card--vulgar .crossword-header h2{ flex: 1 1 auto; margin: 0; } body[data-page="index"] .crossword-card--vulgar .crossword-header::after{ content: "18+"; position: static; /* flex item */ display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 1.4rem; padding: 0 .45rem; font-weight: 700; font-size: .72rem; line-height: 1; font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji"); letter-spacing: .02em; color: #111; background: color-mix(in srgb, var(--bs-warning, #ffc107) 92%, #fff 8%); border: 1px solid rgba(0,0,0,.18); border-radius: .5rem; box-shadow: 0 2px 8px rgba(0,0,0,.18); backdrop-filter: saturate(120%) blur(1.5px); } @media (max-width: 576px){ body[data-page="index"] .crossword-card--vulgar .crossword-header::after{ min-width: 2rem; height: 1.25rem; font-size: .66rem; } } @media (prefers-color-scheme: dark){ body[data-page="index"] .crossword-card--vulgar .crossword-header::after{ background: color-mix(in srgb, var(--lemon-600, #c9aa3c) 92%, #000 8%); color: #0c0c0c; border-color: rgba(0,0,0,.35); } } body[data-page="index"] .crossword-card--vulgar .crossword-header:hover::after{ transform: scale(1.03); box-shadow: 0 3px 12px rgba(0,0,0,.22); } /* === Mobile: fullscreen overlay menu when burger opened === */ @media (max-width: 991.98px){ /* Make opened left menu cover the screen (under header) */ #menu.menu-open{ position: fixed !important; top: var(--header-h); left: 0; right: 0; bottom: 0; width: 100% !important; height: calc(100vh - var(--header-h)) !important; overflow: auto; z-index: 1400; background: linear-gradient(180deg, var(--lemon-100), var(--lemon-50)); } /* Stack only top-level items vertically when open (keep submenus collapsible) */ #menu.menu-open nav > ul{ display: block !important; padding: 12px; } #menu.menu-open nav > ul > li{ display: block !important; } } /* Hide home link inside left menu (we have it in header) */ #menu .menu-home{ display: none !important; } /* Theme toggle visibility: only inside mobile menu when open */ @media (min-width: 992px){ #menu .theme-toggle-item{ display: none !important; } } @media (max-width: 991.98px){ #menu .theme-toggle-item{ display: none !important; } #menu.menu-open .theme-toggle-item{ display: block !important; } /* Hide entire menu bar when closed (avoid stray