/* Global helpers (shared with injected game markup) */ .hidden { display: none !important; } /* * The chosen game's markup (#app) is injected into #gameRoot. Karma's layout * relies on #app being a direct child of for its height:100% chain, so * we make #gameRoot transparent to layout. */ #gameRoot { display: contents; } /* Cards lobby shell — scoped so it never bleeds into the injected game UI. * Custom palette (purple) lives on #cardsShell so it overrides the shared * menu.css vars only for the lobby, not the launched Karma/Durak game. */ #cardsShell { --panel: #f1ecfb; --line: #4c2f92; --accent: #c4b5fd; --accent-2: #7c3aed; --text: #241a3a; --muted: #6b5b8a; --shadow: #2a1d4d; max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; text-align: center; } #cardsShell .back-link { display: inline-block; margin-bottom: 12px; color: var(--muted); text-decoration: none; font-size: 14px; } #cardsShell .back-link:hover { color: var(--accent-2); } #cardsShell .cards-title { margin: 0 0 18px; line-height: 1; } #cardsShell .cards-title-frame { display: inline-block; padding: 0.08em 0.42em 0.12em; font-size: clamp(2rem, 7vw, 2.8rem); letter-spacing: 0.06em; color: #ffffff; background: var(--line); border: 3px solid var(--shadow); border-radius: 12px; } #cardsShell .panel { background: var(--panel); border: 3px solid var(--line); border-radius: 12px; box-shadow: 4px 4px 0 var(--shadow); padding: 20px; margin-bottom: 18px; text-align: left; } #cardsShell .subtitle { margin: 0 0 16px; color: var(--muted); text-align: center; } #cardsShell label { display: block; margin-bottom: 12px; font-size: 14px; color: var(--muted); } #cardsShell input { width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 16px; color: var(--text); background: #fff; border: 2px solid var(--line); border-radius: 8px; } #cardsShell .lobby-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } #cardsShell .lobby-actions input { width: 120px; margin-top: 0; text-transform: uppercase; } #cardsShell button { padding: 10px 16px; font-size: 15px; color: #fff; background: var(--accent-2); border: 2px solid var(--shadow); border-radius: 8px; box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; } #cardsShell button:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow); } #cardsShell button:disabled { opacity: 0.55; cursor: not-allowed; } #cardsShell .text-btn { margin-top: 14px; color: var(--muted); background: transparent; border: none; box-shadow: none; text-decoration: underline; padding: 4px; } #cardsShell .text-btn:hover:not(:disabled) { color: var(--accent-2); transform: none; box-shadow: none; } #cardsShell .cards-status { margin: 12px 0 0; min-height: 18px; color: var(--accent-2); font-size: 14px; text-align: center; } #cardsShell .waiting-room-code { text-align: center; font-size: 16px; color: var(--muted); } #cardsShell .waiting-room-code strong { color: var(--accent-2); letter-spacing: 0.12em; } #cardsShell .waiting-player-list { list-style: none; padding: 0; margin: 12px 0 18px; display: flex; flex-direction: column; gap: 6px; } #cardsShell .waiting-player-list li { padding: 8px 12px; background: #fff; border: 2px solid var(--line); border-radius: 8px; } #cardsShell .game-pick { margin: 8px 0 16px; text-align: center; } #cardsShell .game-pick-label { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); } #cardsShell .game-pick-buttons { display: flex; gap: 12px; justify-content: center; } #cardsShell .game-pick-btn { flex: 1; max-width: 160px; background: #fff; color: var(--text); } #cardsShell .game-pick-btn.selected { background: var(--accent); color: var(--shadow); } #cardsShell .game-pick-chosen { margin: 12px 0 0; font-size: 14px; color: var(--muted); } #cardsShell #cardsStart { display: block; width: 100%; margin-top: 4px; } #cardsShell .waiting-host-message { text-align: center; color: var(--muted); font-style: italic; } #cardsShell #cardsLeave { display: block; margin: 14px auto 0; }