/* ═══════════════════════════════════════════════════════════
   THE GROUP CHAT ASTROLOGER — MULTIPLAYER — Game-Specific Styles
   Shared styles (buttons, lang dropdown, tools section, arena/modal) → game-shared-style.css
   Different mechanic from the 2-player alignment games — own .gca-* set,
   no scale-list/track (single group reveal instead), styled to match
   Zodiac Sign Deep Dive Multiplayer's .zsm-hero-glow-box/.zsm-choice-card
   pattern for the landing choice cards.
   ═══════════════════════════════════════════════════════════ */

.gca-hero { padding-top: 44px; padding-bottom: 8px; text-align: center; }
.gca-title { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 5.5vw, 3.6rem); margin-bottom: 10px; }
.gca-subtitle { max-width: 560px; margin: 0 auto; color: var(--text-secondary); font-size: 1rem; line-height: 1.55; }
.gca-game-section { padding-top: 18px; padding-bottom: 56px; }

#gca-app { background-image: linear-gradient(160deg, rgba(139, 92, 246, 0.07), transparent 60%); border-radius: 14px; padding: 6px 2px; position: relative; min-height: 280px; overflow: hidden; }

.gca-view { display: none; }
.gca-view-active { display: block; animation: gca-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes gca-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.gca-view-title { font-family: 'Playfair Display', serif; color: var(--text-primary); font-size: 1.4rem; margin-bottom: 18px; text-align: center; }

.gca-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .gca-choice-grid { grid-template-columns: 1fr; } }
.gca-choice-card { background: rgba(139, 92, 246, 0.05); border: 1px solid var(--border-card); border-radius: 16px; padding: 24px 16px; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-family: inherit; }
.gca-choice-card:hover { border-color: var(--brand-primary-light); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(139, 92, 246, 0.22); }
.gca-choice-icon { font-size: 2.2rem; display: block; margin-bottom: 10px; }
.gca-choice-card h3 { color: var(--text-primary); font-size: 1.02rem; margin-bottom: 6px; font-weight: 600; }
.gca-choice-card p { color: var(--text-secondary); font-size: 0.83rem; margin: 0; }

.gca-form { display: flex; flex-direction: column; gap: 6px; }
.gca-input-field { background: rgba(255,255,255,0.03); border: 1px solid var(--border-card); border-radius: 12px; padding: 13px 15px; color: var(--text-primary); font-size: 1rem; font-family: inherit; outline: none; margin-bottom: 14px; }
.gca-input-field:focus { border-color: var(--brand-primary-light); box-shadow: 0 0 0 3px rgba(139,92,246,0.12); }
.gca-btn-block { width: 100%; margin-top: 10px; text-align: center; justify-content: center; }

.gca-lobby-code { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 700; letter-spacing: 0.15em; color: var(--text-primary); background: rgba(139,92,246,0.1); border: 1px solid var(--brand-primary-light); border-radius: 16px; padding: 14px 24px; display: block; text-align: center; margin: 0 auto 18px; }

/* ===== LOBBY player list (2-6 players, unlike the 2-player games) ===== */
.gca-player-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.gca-player-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-card); border-radius: 12px; padding: 10px 14px; font-size: 0.92rem; color: var(--text-primary); }
.gca-player-row .gca-host-tag { margin-left: auto; font-size: 0.72rem; color: var(--brand-primary-light); }

/* ===== DATE COLLECTION step ===== */
.gca-collect-progress { text-align: center; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 18px; }
.gca-progress-track { height: 8px; border-radius: 20px; background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 22px; }
.gca-progress-fill { height: 100%; border-radius: 20px; background: var(--gradient-primary); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.gca-submitted-note { text-align: center; color: var(--brand-primary-light); font-size: 0.9rem; font-style: italic; margin-top: 10px; }

/* ===== GROUP REVEAL — member cards + harmony bar ===== */
.gca-harmony-score { text-align: center; margin-bottom: 20px; }
.gca-harmony-number { font-family: 'Playfair Display', serif; font-size: 3.2rem; font-weight: 700; color: var(--brand-primary-light); line-height: 1; }
.gca-harmony-label { color: var(--text-secondary); font-size: 0.85rem; margin-top: 4px; }
.gca-dominant-element { text-align: center; color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 22px; }
.gca-dominant-element strong { color: var(--text-primary); }

.gca-member-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.gca-member-card { display: flex; align-items: center; gap: 12px; background: rgba(139, 92, 246, 0.05); border: 1px solid var(--border-card); border-radius: 14px; padding: 12px 16px; }
.gca-member-emoji { font-size: 1.6rem; flex-shrink: 0; }
.gca-member-name { color: var(--text-primary); font-weight: 600; font-size: 0.95rem; }
.gca-member-sign { color: var(--text-secondary); font-size: 0.82rem; }