/* ═══════════════════════════════════════════════════════════
   PAST LIFE ROAST EDITION — MULTIPLAYER — Game-Specific Styles
   Shared styles (buttons, lang dropdown, tools section, arena/modal) → game-shared-style.css
   Structurally identical to soulmate-compatibility-test-multiplayer-style.css /
   love-compatibility-calculator-multiplayer-style.css, classes renamed to plr-.
   ═══════════════════════════════════════════════════════════ */

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

#plr-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; }

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

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

.plr-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .plr-choice-grid { grid-template-columns: 1fr; } }
.plr-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; }
.plr-choice-card:hover { border-color: var(--brand-primary-light); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(139, 92, 246, 0.22); }
.plr-choice-icon { font-size: 2.2rem; display: block; margin-bottom: 10px; }
.plr-choice-card h3 { color: var(--text-primary); font-size: 1.02rem; margin-bottom: 6px; font-weight: 600; }
.plr-choice-card p { color: var(--text-secondary); font-size: 0.83rem; margin: 0; }

.plr-form { display: flex; flex-direction: column; gap: 6px; }
.plr-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; }
.plr-input-field:focus { border-color: var(--brand-primary-light); box-shadow: 0 0 0 3px rgba(139,92,246,0.12); }
.plr-btn-block { width: 100%; margin-top: 10px; text-align: center; justify-content: center; }

.plr-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; }

.plr-round-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.plr-round-badge, .plr-category-badge { background: rgba(139,92,246,0.12); border: 1px solid var(--brand-primary-light); border-radius: 50px; padding: 5px 14px; font-size: 0.8rem; font-weight: 600; color: var(--brand-primary-light); }
.plr-question-text { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--text-primary); line-height: 1.4; text-align: center; margin: 18px 0 22px; }

/* ===== SCALE ANSWER ===== */
.plr-scale-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.plr-scale-option { background: rgba(255,255,255,0.03); border: 1px solid var(--border-card); border-radius: 14px; padding: 13px 16px; color: var(--text-primary); font-size: 0.92rem; text-align: center; cursor: pointer; font-family: inherit; transition: all 0.2s ease; }
.plr-scale-option:hover:not(:disabled) { border-color: var(--brand-primary-light); background: rgba(139,92,246,0.06); }
.plr-scale-selected { border-color: var(--brand-primary-light) !important; background: rgba(139,92,246,0.16) !important; box-shadow: 0 0 0 2px rgba(139,92,246,0.2); }
.plr-scale-option:disabled { cursor: default; opacity: 0.85; }
.plr-waiting-hint { text-align: center; color: var(--text-muted); font-size: 0.82rem; font-style: italic; min-height: 1.2em; opacity: 0; transition: opacity 0.4s ease; margin-top: 4px; }
.plr-waiting-visible { opacity: 1; }

/* ===== REVEAL — dual-dot track ===== */
.plr-track-line { position: relative; height: 46px; background: rgba(255,255,255,0.05); border-radius: 30px; margin: 26px 8px 10px; }
.plr-track-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: left 0.8s cubic-bezier(0.16,1,0.3,1); }
.plr-track-dot span { position: absolute; top: -22px; font-size: 0.65rem; color: var(--text-muted); white-space: nowrap; }
.plr-track-dot-mine { background: var(--gradient-primary); z-index: 2; box-shadow: 0 0 14px rgba(139,92,246,0.6); }
.plr-track-dot-theirs { background: #f472b6; z-index: 1; box-shadow: 0 0 14px rgba(244,114,182,0.6); }
.plr-track-labels { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.72rem; padding: 0 8px; margin-bottom: 14px; }
#plr-reveal-gap-note { text-align: center; color: var(--text-secondary); font-size: 0.85rem; margin: 4px 0 18px; }

/* ===== FINISHED — category breakdown bars ===== */
.plr-cat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.plr-cat-name { flex-shrink: 0; width: 130px; font-size: 0.82rem; color: var(--text-secondary); }
.plr-cat-bar-track { flex: 1; height: 8px; border-radius: 20px; background: rgba(255,255,255,0.06); overflow: hidden; }
.plr-cat-bar-fill { height: 100%; border-radius: 20px; background: var(--gradient-primary); transition: width 1s cubic-bezier(0.16,1,0.3,1); }
.plr-cat-pct { flex-shrink: 0; width: 42px; text-align: right; font-size: 0.78rem; color: var(--text-muted); }
#plr-category-breakdown { margin: 18px 0 8px; }