* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #0a0a1a;
    color: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Screens */
.screen {
    display: none;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}
.screen.active {
    display: flex;
    flex-direction: column;
}

/* Background animation */
.bg-animation {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 8s ease-in-out infinite;
}
.circle-1 { width: 400px; height: 400px; background: #6c5ce7; top: -100px; left: -100px; }
.circle-2 { width: 300px; height: 300px; background: #e84393; top: 50%; right: -50px; animation-delay: 2s; }
.circle-3 { width: 350px; height: 350px; background: #00cec9; bottom: -100px; left: 30%; animation-delay: 4s; }
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* Header */
header {
    position: fixed;
    top: 0; width: 100%;
    z-index: 100;
    background: rgba(10, 10, 26, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 800;
}
.logo-icon { font-size: 2rem; color: #6c5ce7; }
.logo-text {
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.logo-dot {
    background: linear-gradient(135deg, #e84393, #fd79a8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.85em;
}

/* Hero */
.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}
#screen-home .hero {
    padding-top: 7rem;
    padding-bottom: 3rem;
    justify-content: flex-start;
}
.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.highlight {
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.subtitle {
    font-size: 1.3rem;
    color: #b0b0c0;
    margin-bottom: 2.5rem;
}
.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Game Cards (Home) */
.game-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
    max-width: 900px;
    width: 90%;
    margin-top: 1rem;
    position: relative;
    z-index: 5;
}
.game-card {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    position: relative;
    z-index: 6;
    overflow: hidden;
}
.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6c5ce7, #e84393);
    opacity: 0;
    transition: opacity 0.3s;
}
.game-card:hover {
    border-color: rgba(108, 92, 231, 0.4);
    background: rgba(108, 92, 231, 0.08);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(108, 92, 231, 0.2);
}
.game-card:hover::before {
    opacity: 1;
}
.game-card-icon {
    font-size: 3.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(108, 92, 231, 0.4));
}
.game-card-content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}
.game-card-content p {
    font-size: 0.9rem;
    color: #b0b0c0;
    line-height: 1.4;
}
.game-card-players {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6c5ce7;
    background: rgba(108, 92, 231, 0.15);
    padding: 0.25rem 0.8rem;
    border-radius: 20px;
    letter-spacing: 0.5px;
}
.game-card-soon {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.game-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fdcb6e;
    background: rgba(253, 203, 110, 0.15);
    padding: 0.2rem 0.6rem;
    border-radius: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Selected game badge */
.selected-game-badge {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

/* Home footer */
.home-footer {
    text-align: center;
    padding: 1.5rem;
    color: rgba(176, 176, 192, 0.5);
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .game-cards { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.5rem; }
}

/* Buttons */
.btn {
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}
.btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.btn-primary {
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    color: #fff;
    box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(108, 92, 231, 0.6);
}
.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}
.btn-full { width: 100%; }
.btn-back {
    background: none;
    border: none;
    color: #b0b0c0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: color 0.3s;
}
.btn-back:hover { color: #fff; }
.btn-copy {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}
.btn-copy:hover { background: rgba(255, 255, 255, 0.2); }

/* Panel (forms) */
.panel {
    max-width: 480px;
    width: 90%;
    margin: auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
}
.panel h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #b0b0c0;
    font-weight: 600;
    font-size: 0.9rem;
}
.form-group input[type="text"],
.form-group select {
    width: 100%;
    padding: 0.9rem 1.2rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}
.form-group input[type="text"]:focus,
.form-group select:focus {
    border-color: #6c5ce7;
}
.form-group select option {
    background: #1a1a2e;
    color: #fff;
}

/* Game mode checkboxes */
.game-mode-options {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 0.95rem;
    color: #b0b0c0;
}
.checkbox-label:hover {
    background: rgba(108, 92, 231, 0.1);
    border-color: rgba(108, 92, 231, 0.3);
}
.checkbox-label input[type="checkbox"] {
    display: none;
}
.checkbox-custom {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s;
}
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    border-color: transparent;
}
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
}
.checkbox-label input[type="checkbox"]:checked ~ * {
    color: #fff;
}

.status-msg {
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
}
.status-msg.success { background: rgba(0, 184, 148, 0.15); color: #00b894; }
.status-msg.error { background: rgba(255, 71, 87, 0.15); color: #ff4757; }
.hidden { display: none !important; }

/* Lobby */
.lobby-panel { max-width: 520px; }
.room-code-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.room-code-label {
    color: #b0b0c0;
    font-size: 0.85rem;
    width: 100%;
    text-align: center;
}
.room-code-value {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 12px;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lobby-info {
    text-align: center;
    color: #b0b0c0;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
}

/* Mode badges */
.lobby-mode-badges {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.mode-badge {
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.jokers-badge {
    background: rgba(108, 92, 231, 0.2);
    color: #a29bfe;
    border: 1px solid rgba(108, 92, 231, 0.3);
}
.events-badge {
    background: rgba(232, 67, 147, 0.2);
    color: #fd79a8;
    border: 1px solid rgba(232, 67, 147, 0.3);
}
.classic-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #b0b0c0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.players-list {
    margin-bottom: 2rem;
}
.player-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
}
.player-nickname { flex: 1; font-weight: 600; }
.host-badge {
    background: rgba(108, 92, 231, 0.2);
    color: #6c5ce7;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
}
.waiting-msg {
    text-align: center;
    color: #b0b0c0;
    font-style: italic;
    animation: pulse-text 2s ease-in-out infinite;
}
@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Game Screen */
.game-container {
    max-width: 700px;
    width: 90%;
    margin: auto;
    padding: 2rem 0;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.round-info {
    font-size: 1.2rem;
    font-weight: 600;
    color: #b0b0c0;
}
.round-info span { color: #fff; }

.timer-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
    max-width: 300px;
    margin-left: 2rem;
}
.timer-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}
.timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #e84393, #6c5ce7);
    border-radius: 4px;
    transition: width 30s linear;
}
.timer-text {
    font-weight: 800;
    font-size: 1.1rem;
    min-width: 35px;
}

/* Round modifier badge */
.round-modifier-badge {
    text-align: center;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    animation: badgePulse 2s ease-in-out infinite;
}
.penalty-badge {
    background: rgba(255, 71, 87, 0.15);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.3);
}
.steal-badge {
    background: rgba(253, 203, 110, 0.15);
    color: #fdcb6e;
    border: 1px solid rgba(253, 203, 110, 0.3);
}
.double-badge {
    background: rgba(0, 184, 148, 0.15);
    color: #00b894;
    border: 1px solid rgba(0, 184, 148, 0.3);
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Active joker display */
.active-joker-display {
    text-align: center;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
    background: rgba(108, 92, 231, 0.15);
    color: #a29bfe;
    border: 1px solid rgba(108, 92, 231, 0.3);
    animation: fadeIn 0.3s ease;
}

/* Audio Visualizer */
.audio-visualizer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 120px;
    margin-bottom: 2rem;
}
.visualizer-bar {
    width: 12px;
    height: 20px;
    background: linear-gradient(to top, #6c5ce7, #e84393);
    border-radius: 6px;
    transition: height 0.1s;
}
.visualizer-bar.active {
    animation: visualize 0.5s ease-in-out infinite alternate;
}
.visualizer-bar:nth-child(1).active { animation-duration: 0.4s; }
.visualizer-bar:nth-child(2).active { animation-duration: 0.35s; }
.visualizer-bar:nth-child(3).active { animation-duration: 0.55s; }
.visualizer-bar:nth-child(4).active { animation-duration: 0.45s; }
.visualizer-bar:nth-child(5).active { animation-duration: 0.5s; }
.visualizer-bar:nth-child(6).active { animation-duration: 0.38s; }
.visualizer-bar:nth-child(7).active { animation-duration: 0.52s; }
.visualizer-bar:nth-child(8).active { animation-duration: 0.42s; }
.visualizer-bar:nth-child(9).active { animation-duration: 0.48s; }
.visualizer-bar:nth-child(10).active { animation-duration: 0.36s; }
.visualizer-bar:nth-child(11).active { animation-duration: 0.53s; }
.visualizer-bar:nth-child(12).active { animation-duration: 0.41s; }
@keyframes visualize {
    from { height: 15px; }
    to { height: 100px; }
}

.game-question {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* QCM Grid */
.qcm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.qcm-btn {
    padding: 1.2rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    line-height: 1.3;
}
.qcm-btn:hover:not(:disabled) {
    background: rgba(108, 92, 231, 0.2);
    border-color: #6c5ce7;
    transform: scale(1.02);
}
.qcm-btn:disabled {
    cursor: default;
    opacity: 0.7;
}
.qcm-btn.selected {
    border-color: #6c5ce7;
    background: rgba(108, 92, 231, 0.25);
}
.qcm-btn.correct {
    border-color: #00b894 !important;
    background: rgba(0, 184, 148, 0.2) !important;
    opacity: 1 !important;
    animation: correctPulse 0.5s ease;
}
.qcm-btn.wrong {
    border-color: #ff4757 !important;
    background: rgba(255, 71, 87, 0.2) !important;
    opacity: 1 !important;
}
.qcm-btn.qcm-hidden {
    opacity: 0.15 !important;
    pointer-events: none;
    transform: scale(0.95);
}
.qcm-btn.qcm-highlighted {
    border-color: #a29bfe;
    background: rgba(108, 92, 231, 0.15);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
}
@keyframes correctPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Points info */
.points-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.points-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.points-label {
    color: #b0b0c0;
    font-size: 0.85rem;
}

/* Answer feedback */
.answer-feedback {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}
.result-answer {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.result-answer.correct { color: #00b894; }
.result-answer.wrong { color: #ff4757; }
.result-song {
    color: #b0b0c0;
    font-size: 1rem;
}
.result-song strong { color: #fff; }
.modifier-info {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.modifier-info.penalty { color: #ff4757; }

/* Game scoreboard */
.game-scoreboard {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    overflow: hidden;
}
.scoreboard-row {
    display: grid;
    grid-template-columns: 40px 1fr 80px;
    padding: 0.8rem 1.2rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s;
}
.scoreboard-row:last-child { border-bottom: none; }
.scoreboard-row.me { background: rgba(108, 92, 231, 0.15); }
.sb-rank { font-weight: 800; color: #b0b0c0; }
.sb-name { font-weight: 600; }
.sb-score { text-align: right; font-weight: 600; color: #6c5ce7; }

/* ========================= */
/* GAME OVERLAYS             */
/* ========================= */

.game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: rgba(10, 10, 26, 0.92);
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.4s ease;
}

/* Pause overlay */
.pause-content {
    text-align: center;
    max-width: 500px;
    width: 90%;
}
.pause-countdown-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid rgba(108, 92, 231, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    animation: countdownPulse 1s ease-in-out infinite;
}
.pause-countdown-number {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@keyframes countdownPulse {
    0%, 100% { transform: scale(1); border-color: rgba(108, 92, 231, 0.4); }
    50% { transform: scale(1.05); border-color: rgba(232, 67, 147, 0.6); }
}
.pause-subtitle {
    color: #b0b0c0;
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* Joker bar */
.joker-bar {
    margin-bottom: 1.5rem;
}
.joker-bar-title {
    font-size: 0.9rem;
    color: #b0b0c0;
    margin-bottom: 1rem;
    font-weight: 600;
}
.joker-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.joker-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.25s ease;
}
.joker-btn:hover:not(:disabled) {
    background: rgba(108, 92, 231, 0.2);
    border-color: #6c5ce7;
    transform: scale(1.05);
}
.joker-btn:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
}
.joker-btn.joker-used {
    opacity: 0.3;
    text-decoration: line-through;
}
.joker-icon {
    font-size: 1.5rem;
    font-weight: 800;
}
.joker-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #b0b0c0;
}

/* Joker log */
.joker-log {
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
}
.joker-log-entry {
    padding: 0.5rem 1rem;
    margin-bottom: 0.3rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(108, 92, 231, 0.1);
    color: #a29bfe;
    animation: fadeIn 0.3s ease;
}
.joker-log-entry.steal-log {
    background: rgba(253, 203, 110, 0.1);
    color: #fdcb6e;
}

/* Pause scoreboard */
.pause-sb-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #b0b0c0;
    padding: 0.6rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Event overlay */
.event-content {
    text-align: center;
    max-width: 500px;
    width: 90%;
    animation: eventAppear 0.6s ease;
}
@keyframes eventAppear {
    from { opacity: 0; transform: scale(0.8) translateY(30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.event-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: eventIconPulse 1.5s ease-in-out infinite;
}
@keyframes eventIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.event-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffd700, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.event-message {
    font-size: 1.1rem;
    color: #d0d0e0;
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
}

/* Modal overlay (steal) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 60;
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}
.modal-content {
    text-align: center;
    max-width: 400px;
    width: 90%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2rem;
}
.modal-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #fdcb6e, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.modal-subtitle {
    color: #b0b0c0;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.steal-targets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.steal-target-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.25s ease;
}
.steal-target-btn:hover {
    background: rgba(253, 203, 110, 0.15);
    border-color: #fdcb6e;
    transform: scale(1.02);
}
.steal-target-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}
.steal-target-name {
    flex: 1;
    font-weight: 600;
    text-align: left;
}
.steal-target-score {
    font-weight: 600;
    color: #6c5ce7;
    font-size: 0.9rem;
}

/* Results */
.results-panel {
    max-width: 650px;
    position: relative;
    overflow: visible;
}
.results-panel h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Champion crown */
.champion-crown {
    text-align: center;
    font-size: 4rem;
    animation: crownBounce 1s ease infinite, crownGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    margin-bottom: 0.5rem;
}
@keyframes crownBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-3deg); }
    75% { transform: translateY(-4px) rotate(3deg); }
}
@keyframes crownGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4)); }
    50% { filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9)); }
}

.champion-name {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, #ffd700, #ffaa00, #ffd700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
    to { background-position: 200% center; }
}

/* Podium visual */
.podium-visual {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    min-height: 280px;
    padding: 0 1rem;
}

.podium-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 160px;
}

.podium-player-info {
    text-align: center;
    margin-bottom: 0.8rem;
    animation: fadeInDown 0.8s ease;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.podium-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
}
.podium-1st .podium-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}
.podium-2nd .podium-avatar {
    background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.3);
}
.podium-3rd .podium-avatar {
    background: linear-gradient(135deg, #cd7f32, #e8a850);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.3);
}

.podium-player-name {
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.podium-1st .podium-player-name {
    font-size: 1.1rem;
    color: #ffd700;
}

.podium-player-score {
    font-weight: 600;
    font-size: 0.85rem;
    color: #6c5ce7;
}

/* Podium pillars */
.podium-pillar {
    width: 100%;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;
    position: relative;
    animation: pillarGrow 0.8s ease forwards;
    transform-origin: bottom;
}
@keyframes pillarGrow {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

.gold-pillar {
    height: 160px;
    background: linear-gradient(180deg, #ffd700 0%, #b8960f 100%);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    animation-delay: 0.3s;
    animation-fill-mode: both;
}
.silver-pillar {
    height: 120px;
    background: linear-gradient(180deg, #c0c0c0 0%, #8a8a8a 100%);
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.2);
    animation-delay: 0.5s;
    animation-fill-mode: both;
}
.bronze-pillar {
    height: 90px;
    background: linear-gradient(180deg, #cd7f32 0%, #8b5a1b 100%);
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.2);
    animation-delay: 0.7s;
    animation-fill-mode: both;
}

.pillar-rank {
    font-size: 2rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.3);
}

/* Confetti */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 200;
    overflow: hidden;
}
.confetti {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    opacity: 0.9;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg) scale(0.3); opacity: 0; }
}

/* Final scores list (below podium) */
.final-scores {
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    overflow: hidden;
}
.final-score-row {
    display: grid;
    grid-template-columns: 40px 1fr 100px;
    padding: 0.9rem 1.2rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.final-score-row:last-child { border-bottom: none; }
.final-score-row.champion-row {
    background: rgba(255, 215, 0, 0.08);
}
.fs-rank { font-weight: 800; color: #b0b0c0; font-size: 1.1rem; }
.fs-name { font-weight: 600; }
.fs-score { text-align: right; font-weight: 600; color: #6c5ce7; }

/* Responsive */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .subtitle { font-size: 1rem; }
    .hero-buttons { flex-direction: column; }
    .panel { padding: 1.5rem; }
    .room-code-value { font-size: 2.2rem; letter-spacing: 8px; }
    .game-header { flex-direction: column; gap: 1rem; }
    .timer-container { margin-left: 0; max-width: 100%; }
    .qcm-grid { grid-template-columns: 1fr; }
    .qcm-btn { font-size: 0.85rem; padding: 1rem; }
    .podium { flex-direction: column; align-items: center; }
    .podium-item.gold { transform: scale(1); }
    .joker-buttons { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .event-title { font-size: 1.6rem; }
    .event-icon { font-size: 3.5rem; }
    .pause-countdown-circle { width: 80px; height: 80px; }
    .pause-countdown-number { font-size: 2.5rem; }
}

/* ========================= */
/* UNDERCOVER                */
/* ========================= */
.uc-container {
    max-width: 500px;
    width: 90%;
    margin: auto;
    padding: 2rem 0;
    text-align: center;
}
.uc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.uc-turn { font-size: 1.1rem; font-weight: 700; color: #a29bfe; }
.uc-alive-count { font-size: 0.9rem; color: #b0b0c0; }
.uc-role-card {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.uc-role-label { font-size: 0.85rem; color: #b0b0c0; margin-bottom: 0.3rem; }
.uc-role-name { font-size: 1.8rem; font-weight: 800; margin-bottom: 1rem; }
.uc-word {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0.5rem 0;
    animation: fadeIn 0.3s ease;
}
.uc-info {
    font-size: 0.85rem;
    color: #a29bfe;
    background: rgba(108, 92, 231, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}
.uc-players-label { font-size: 0.8rem; color: #b0b0c0; margin-bottom: 0.3rem; }
.uc-alive {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.6;
}
.uc-status {
    font-size: 0.9rem;
    color: #b0b0c0;
    margin-bottom: 1rem;
    min-height: 2rem;
    line-height: 1.4;
}
.uc-winner {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}
.uc-all-roles {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 1rem;
    text-align: left;
    margin-top: 1rem;
}

/* ========================= */
/* PETIT BAC CLASSIQUE       */
/* ========================= */
.pb-container {
    max-width: 550px;
    width: 90%;
    margin: auto;
    padding: 1.5rem 0;
}
.pb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.pb-round { font-size: 0.9rem; font-weight: 600; color: #b0b0c0; }
.pb-letter-badge {
    font-size: 2.5rem;
    font-weight: 800;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    color: #fff;
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.4);
}
.pb-timer {
    font-size: 1.3rem;
    font-weight: 800;
    color: #e84393;
}
.pb-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}
.pb-field {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.pb-label {
    min-width: 110px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #a29bfe;
    text-align: right;
}
.pb-input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s;
}
.pb-input:focus { border-color: #6c5ce7; }
.pb-vote-cat {
    font-size: 0.9rem;
    font-weight: 700;
    color: #a29bfe;
    margin-bottom: 0.3rem;
}
.pb-vote-letter {
    font-size: 0.8rem;
    color: #b0b0c0;
    margin-bottom: 0.8rem;
}
.pb-status {
    text-align: center;
    font-size: 0.85rem;
    color: #b0b0c0;
    margin-top: 1rem;
}
.pb-result-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pb-result-table {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.pb-result-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    padding: 0.7rem 1rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pb-result-row:last-child { border-bottom: none; }
.pb-result-row.me { background: rgba(108, 92, 231, 0.15); }
.pb-result-name { font-weight: 600; }
.pb-result-round { text-align: right; color: #00b894; font-weight: 700; }
.pb-result-total { text-align: right; color: #6c5ce7; font-weight: 700; }
.pb-next-info {
    text-align: center;
    color: #b0b0c0;
    font-size: 0.85rem;
    font-style: italic;
}
@media (max-width: 768px) {
    .pb-field { flex-direction: column; gap: 0.2rem; }
    .pb-label { min-width: auto; text-align: left; }
    .pb-letter-badge { font-size: 2rem; width: 50px; height: 50px; }
}

/* ========================= */
/* SPEED BAC                 */
/* ========================= */
.bac-container {
    max-width: 600px;
    width: 90%;
    margin: auto;
    padding: 2rem 0;
    text-align: center;
    box-sizing: border-box;
    overflow-x: hidden;
}
.bac-header {
    margin-bottom: 2rem;
}
.bac-cards-left {
    font-size: 0.9rem;
    font-weight: 700;
    color: #a29bfe;
    margin-bottom: 0.5rem;
}
.bac-theme-label {
    font-size: 0.85rem;
    color: #b0b0c0;
}
.bac-theme {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 0.3rem;
}
.bac-hand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.bac-card {
    width: 48px;
    height: 64px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(232, 67, 147, 0.2));
    border: 2px solid rgba(108, 92, 231, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    animation: fadeIn 0.3s ease;
    transition: transform 0.2s, opacity 0.3s;
}
.bac-card:hover {
    transform: translateY(-3px);
}
.bac-input-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    padding: 0 0.5rem;
    margin-left: auto;
    margin-right: auto;
}
.bac-input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.3s;
    text-transform: lowercase;
}
.bac-input:focus {
    border-color: #6c5ce7;
}
.bac-feedback {
    padding: 0.8rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    font-weight: 700;
    font-size: 1rem;
}
.bac-status {
    font-size: 0.85rem;
    color: #b0b0c0;
    margin-bottom: 1.5rem;
    min-height: 1.2rem;
}
.bac-vote-area {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    margin-bottom: 1.5rem;
    animation: fadeIn 0.3s ease;
}
.bac-vote-header {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fdcb6e;
    margin-bottom: 0.5rem;
}
.bac-vote-theme {
    font-size: 0.85rem;
    color: #b0b0c0;
    margin-bottom: 0.5rem;
}
.bac-vote-word {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
    background: linear-gradient(135deg, #6c5ce7, #e84393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bac-vote-player {
    font-size: 0.9rem;
    color: #b0b0c0;
    margin-bottom: 1rem;
}
.bac-vote-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.bac-vote-yes {
    background: rgba(0, 184, 148, 0.2);
    color: #00b894;
    border: 2px solid rgba(0, 184, 148, 0.4);
    padding: 0.7rem 1.5rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.bac-vote-yes:hover:not(:disabled) { background: rgba(0, 184, 148, 0.3); transform: scale(1.05); }
.bac-vote-no {
    background: rgba(255, 71, 87, 0.2);
    color: #ff4757;
    border: 2px solid rgba(255, 71, 87, 0.4);
    padding: 0.7rem 1.5rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.bac-vote-no:hover:not(:disabled) { background: rgba(255, 71, 87, 0.3); transform: scale(1.05); }
.bac-vote-yes:disabled, .bac-vote-no:disabled { opacity: 0.4; cursor: default; transform: none; }
.bac-vote-status {
    font-size: 0.85rem;
    color: #b0b0c0;
    font-style: italic;
}

@media (max-width: 768px) {
    .bac-card { width: 40px; height: 54px; font-size: 1.2rem; }
    .bac-theme { font-size: 1.5rem; }
}

/* ========================= */
/* MEMORY GAME               */
/* ========================= */
.memory-container {
    max-width: 600px;
    width: 90%;
    margin: auto;
    padding: 2rem 0;
}
.memory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.memory-phase {
    font-weight: 700;
    font-size: 1rem;
    color: #a29bfe;
    background: rgba(108, 92, 231, 0.15);
    padding: 0.3rem 1rem;
    border-radius: 20px;
}
.memory-timer {
    font-weight: 800;
    font-size: 1.3rem;
    color: #e84393;
}

/* Color sequence display */
.memory-sequence {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    min-height: 80px;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.memory-color-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    animation: colorAppear 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}
.memory-color-dot.hidden-color {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none;
}
.memory-color-dot.correct-dot {
    box-shadow: 0 0 12px rgba(0, 184, 148, 0.6);
    border: 2px solid #00b894;
}
.memory-color-dot.wrong-dot {
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.6);
    border: 2px solid #ff4757;
}
@keyframes colorAppear {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.color-red { background: #e74c3c; }
.color-blue { background: #3498db; }
.color-green { background: #2ecc71; }
.color-yellow { background: #f1c40f; }

/* Player input */
.memory-input {
    text-align: center;
}
.memory-input-label {
    font-size: 1rem;
    color: #b0b0c0;
    margin-bottom: 1rem;
    font-weight: 600;
}
.memory-player-sequence {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    min-height: 50px;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}
.memory-player-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    animation: colorAppear 0.2s ease;
}
.memory-color-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 320px;
    margin: 0 auto 1.5rem;
}
.memory-color-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    margin: 0 auto;
}
.memory-color-btn:hover {
    transform: scale(1.15);
    border-color: #fff;
}
.memory-color-btn:active {
    transform: scale(0.95);
}
.memory-red { background: #e74c3c; }
.memory-blue { background: #3498db; }
.memory-green { background: #2ecc71; }
.memory-yellow { background: #f1c40f; }

.memory-input-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Feedback */
.memory-feedback {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1.2rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    font-weight: 700;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .memory-color-btn { width: 60px; height: 60px; }
    .memory-color-dot { width: 38px; height: 38px; }
    .memory-player-dot { width: 28px; height: 28px; }
}

/* ========================= */
/* IMAGE QUIZ                */
/* ========================= */
.image-quiz-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    min-height: 250px;
}
.image-quiz-frame {
    width: 280px;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
}
.image-quiz-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(25px);
    transition: filter 0.5s linear;
}
.effect-label {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(162, 155, 254, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.image-quiz-label {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #b0b0c0;
    margin-bottom: 1rem;
}
/* Puzzle mode overlay */
.image-quiz-puzzle {
    display: grid;
    width: 280px;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    background: #111;
}
.puzzle-piece {
    background-size: 280px 280px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.puzzle-piece.revealed {
    opacity: 1;
}
@media (max-width: 768px) {
    .image-quiz-frame, .image-quiz-puzzle { width: 220px; height: 220px; }
    .puzzle-piece { background-size: 220px 220px; }
}

/* =============================================
   SCRABBLE
   ============================================= */

.scr-container {
    max-width: 500px; width: 100%; margin: 0 auto;
    padding: 0.4rem; min-height: 100vh;
    display: flex; flex-direction: column; gap: 0.3rem; align-items: center;
}

.scr-scores {
    display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center;
    width: 100%; padding: 0.3rem; font-size: 0.8rem;
}
.scr-score-item { color: #b0b0c0; }
.scr-me { color: #ffeaa7; font-weight: 700; }
.scr-current { text-decoration: underline; }
.scr-bag-count { color: #74b9ff; }

.scr-board {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 1px; width: 100%; max-width: 450px;
    aspect-ratio: 1; background: #1a1a2e;
}

.scr-cell {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: clamp(0.45rem, 2vw, 0.7rem); font-weight: 700; cursor: pointer;
    background: #0d1117; color: #ddd; border: 1px solid #222;
}

.scr-tw { background: #c0392b30; color: #c0392b; font-size: 0.4rem; }
.scr-tw::before { content: '×3M'; }
.scr-dw { background: #e67e2230; color: #e67e22; font-size: 0.4rem; }
.scr-dw::before { content: '×2M'; }
.scr-tl { background: #2980b930; color: #2980b9; font-size: 0.4rem; }
.scr-tl::before { content: '×3L'; }
.scr-dl { background: #27ae6030; color: #27ae60; font-size: 0.4rem; }
.scr-dl::before { content: '×2L'; }
.scr-center { background: #ffeaa720; }
.scr-center::before { content: '★'; }

.scr-filled { background: #2d3436; color: #fff; border-color: #555; }
.scr-placed { background: #2d2d1a; color: #ffeaa7; border-color: #ffeaa7; }

.scr-status { text-align: center; font-size: 0.85rem; font-weight: 600; padding: 0.2rem; }

.scr-rack {
    display: flex; gap: 0.3rem; justify-content: center; padding: 0.3rem;
}

.scr-tile {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: #f5deb3; color: #333; font-weight: 800; font-size: 0.95rem;
    border-radius: 4px; cursor: pointer; position: relative;
    border: 2px solid #d4a574;
}
.scr-tile sub { font-size: 0.5rem; position: absolute; bottom: 2px; right: 3px; }
.scr-tile-selected { border-color: #ffeaa7; box-shadow: 0 0 8px #ffeaa7; transform: translateY(-4px); }
.scr-tile-empty { background: transparent; border: 2px dashed #444; }

.scr-actions {
    display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap;
}
.scr-btn { font-size: 0.85rem; padding: 0.4rem 1rem; }

.scr-joker-picker { padding: 0.5rem; background: rgba(0,0,0,0.8); border-radius: 10px; margin-top: 0.3rem; }
.scr-joker-letters { display: flex; flex-wrap: wrap; gap: 0.2rem; justify-content: center; }
.scr-joker-letter { width: 30px; height: 30px; font-size: 0.8rem; cursor: pointer; }
.scr-joker-letter:hover { border-color: #ffeaa7; }

/* =============================================
   POKER
   ============================================= */

.pk-container {
    max-width: 500px; width: 100%; margin: 0 auto;
    padding: 0.8rem; min-height: 100vh;
    display: flex; flex-direction: column; gap: 0.6rem;
    box-sizing: border-box;
}

.pk-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 1rem; background: rgba(255,255,255,0.06);
    border-radius: 12px; font-weight: 600; font-size: 0.95rem; color: #a29bfe;
}
.pk-phase { color: #ffeaa7; }
.pk-pot { color: #00b894; font-size: 1.1rem; }

.pk-community {
    display: flex; justify-content: center; gap: 0.4rem;
    padding: 0.8rem 0.5rem; background: rgba(0,100,0,0.2); border-radius: 12px;
}

.pk-card {
    width: 48px; height: 64px; border-radius: 8px;
    background: #fff; color: #000; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; border: 2px solid #ddd;
    flex-shrink: 0;
}
.pk-card-empty { background: rgba(255,255,255,0.08); border: 2px dashed #333; }
.pk-red { color: #e74c3c; }
.pk-suit { font-size: 0.85rem; }

.pk-seats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.4rem;
}
.pk-seat {
    padding: 0.5rem; background: rgba(255,255,255,0.05);
    border-radius: 10px; text-align: center;
    border: 2px solid transparent; font-size: 0.8rem;
    overflow: hidden;
}
.pk-active { border-color: #ffeaa7; background: rgba(255,234,167,0.1); }
.pk-me { border-color: #74b9ff; }
.pk-folded { opacity: 0.3; }
.pk-allin { border-color: #e74c3c; }
.pk-seat-name { font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-seat-chips { color: #ffeaa7; font-size: 0.8rem; }
.pk-seat-bet { color: #00b894; font-size: 0.75rem; }
.pk-seat-status { color: #ff6b6b; font-size: 0.75rem; }
.pk-allin-label { color: #e74c3c; font-weight: 700; }

.pk-myhand {
    display: flex; justify-content: center; gap: 0.5rem; padding: 0.5rem;
}
.pk-myhand .pk-card { width: 60px; height: 84px; font-size: 1.3rem; border-width: 3px; }
.pk-myhand .pk-suit { font-size: 1rem; }

.pk-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem; padding: 0.3rem;
}
.pk-btn {
    padding: 0.6rem 0.4rem; border: none; border-radius: 10px;
    font-weight: 700; font-size: 0.85rem; cursor: pointer;
    font-family: 'Poppins', sans-serif; color: #fff;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-fold { background: #636e72; }
.pk-check { background: #74b9ff; }
.pk-call { background: #00b894; }
.pk-raise { background: #e67e22; }
.pk-allin-btn { background: linear-gradient(135deg, #e74c3c, #c0392b); grid-column: span 3; }

.pk-custom {
    display: flex; gap: 0.4rem; width: 100%; margin-top: 0.3rem;
    grid-column: span 3;
}
.pk-input {
    flex: 1; min-width: 0; padding: 0.5rem; border-radius: 10px;
    border: 2px solid #444; background: rgba(255,255,255,0.06);
    color: #fff; font-size: 1rem; text-align: center;
    font-family: 'Poppins', sans-serif;
}

.pk-waiting { text-align: center; color: #74b9ff; font-size: 1rem; padding: 0.8rem; }

.pk-showdown { display: flex; flex-direction: column; gap: 0.5rem; }
.pk-show-row {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem;
    background: rgba(255,255,255,0.04); border-radius: 10px; flex-wrap: wrap;
}
.pk-winner { background: rgba(255,234,167,0.1); border: 2px solid #ffeaa7; }
.pk-show-name { font-weight: 700; font-size: 0.9rem; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.pk-show-cards { display: flex; gap: 0.3rem; }
.pk-show-cards .pk-card { width: 38px; height: 52px; font-size: 0.8rem; }
.pk-show-hand { color: #a29bfe; font-size: 0.85rem; font-weight: 600; }
.pk-show-chips { color: #ffeaa7; margin-left: auto; font-weight: 600; }

/* =============================================
   6 QUI PREND
   ============================================= */

.sqp-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 0.8rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-sizing: border-box;
}

.sqp-status { text-align: center; font-weight: 700; font-size: 1rem; color: #a29bfe; padding: 0.5rem; }
.sqp-waiting { color: #74b9ff; }
.sqp-pick { color: #ff6b6b; animation: mmPulse 1s infinite; }
.sqp-end { color: #00b894; }

.sqp-rows { display: flex; flex-direction: column; gap: 0.4rem; }

.sqp-row {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem; background: rgba(255,255,255,0.04);
    border-radius: 10px; min-height: 50px;
}

.sqp-row-label { font-size: 0.75rem; color: #888; width: 16px; flex-shrink: 0; font-weight: 700; }
.sqp-row-count { font-size: 0.7rem; color: #888; margin-left: auto; flex-shrink: 0; }

.sqp-card {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 0;
    min-width: 44px; height: 50px;
    border-radius: 8px; font-weight: 700;
    background: #1a1a2e; border: 2px solid #333;
    flex-shrink: 0; padding: 2px 4px;
}

.sqp-card-value { font-size: 1rem; }
.sqp-card-heads { font-size: 0.6rem; opacity: 0.7; }

.sqp-heads-1 { border-color: #555; }
.sqp-heads-2 { border-color: #f39c12; background: #1a1a10; }
.sqp-heads-3 { border-color: #e67e22; background: #1a1508; }
.sqp-heads-5 { border-color: #e74c3c; background: #2d1a1a; }
.sqp-heads-7 { border-color: #ff0000; background: #3d1010; box-shadow: 0 0 6px rgba(255,0,0,0.3); }

.sqp-selected { border-color: #ffeaa7 !important; background: #2d2d1a !important; transform: translateY(-5px); box-shadow: 0 4px 12px rgba(255,234,167,0.3); }
.sqp-clickable { cursor: pointer; transition: transform 0.1s; }
.sqp-clickable:hover { border-color: #74b9ff; transform: translateY(-2px); }
.sqp-danger .sqp-card:last-child { box-shadow: 0 0 10px rgba(255,0,0,0.5); }

.sqp-hand-label { text-align: center; font-size: 0.85rem; color: #888; margin-top: 0.3rem; font-weight: 600; }

.sqp-hand {
    display: flex; gap: 0.3rem; flex-wrap: wrap;
    justify-content: center; padding: 0.4rem;
}

.sqp-hand .sqp-card { min-width: 56px; height: 50px; }
.sqp-hand .sqp-card-value { font-size: 1.1rem; }

.sqp-card-wrap { cursor: pointer; }

.sqp-penalties {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.6rem; padding: 0.5rem;
    background: rgba(255,255,255,0.04); border-radius: 10px;
}

.sqp-pen-item { font-size: 0.85rem; color: #b0b0c0; }
.sqp-pen-me { color: #ffeaa7; font-weight: 700; }

.sqp-submit { margin: 0.3rem auto; display: block; }

.sqp-submit { margin: 0.5rem auto; display: block; }

/* =============================================
   CHEMIN
   ============================================= */

.chem-container {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 0.8rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    box-sizing: border-box;
}

.chem-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #a29bfe;
}

.chem-status {
    text-align: center;
    font-size: 0.9rem;
    color: #b0b0c0;
    font-weight: 600;
}

#chemCanvas {
    border-radius: 8px;
    touch-action: none;
}

.chem-actions {
    display: flex;
    gap: 0.5rem;
}

/* =============================================
   BOWLING
   ============================================= */

.bowling-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 0.5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
}

.bowling-hud {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

.bowling-hud span:nth-child(1) { color: #a29bfe; }
.bowling-hud span:nth-child(2) { color: #ffeaa7; font-size: 1.1rem; }
.bowling-hud span:nth-child(3) { color: #74b9ff; }

.bowling-canvas-wrap {
    border-radius: 12px;
    overflow: hidden;
    touch-action: none;
}

.bowling-canvas-wrap canvas { touch-action: none; display: block; }

.bowling-message {
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    padding: 0.3rem;
}

.bowling-frames {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.bowl-frame-cell {
    padding: 0.2rem 0.5rem;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ddd;
}

.bowling-hint {
    font-size: 0.85rem;
    color: #888;
    text-align: center;
}

.bowling-status {
    font-size: 0.85rem;
    color: #74b9ff;
    text-align: center;
}

/* =============================================
   DOMINO
   ============================================= */

.domino-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#dominoCanvas { touch-action: none; }

.dom-btn-bar {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.5rem;
    position: absolute;
    bottom: 90px;
    left: 0;
    right: 0;
}

.dom-btn {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    border: none;
}

.dom-btn-pass {
    background: linear-gradient(135deg, #ff4757, #c0392b);
    color: #fff;
}

.domino-container {
    position: relative;
}

/* =============================================
   PACMAN
   ============================================= */

.pacman-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background: #000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

#pacmanCanvas { touch-action: none; flex: 0 0 auto; }

.pacman-back {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
}

/* D-pad tactile (mobile uniquement) : sous le canvas dans le flex column, sans marge */
.pacman-dpad {
    position: relative;
    width: 170px;
    height: 170px;
    flex: 0 0 auto;
    margin: 0;
    z-index: 20;
    pointer-events: none;
}
.pacman-dpad-btn {
    position: absolute;
    width: 54px;
    height: 54px;
    background: rgba(255, 234, 167, 0.45);
    color: #1a3a5c;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.05s ease, background-color 0.05s ease;
    padding: 0;
    line-height: 1;
}
.pacman-dpad-btn.active,
.pacman-dpad-btn:active {
    background: rgba(255, 234, 167, 0.9);
    transform: scale(0.93);
}
.pacman-dpad-up    { top: 0;    left: 50%; transform: translateX(-50%); }
.pacman-dpad-down  { bottom: 0; left: 50%; transform: translateX(-50%); }
.pacman-dpad-left  { left: 0;   top: 50%;  transform: translateY(-50%); }
.pacman-dpad-right { right: 0;  top: 50%;  transform: translateY(-50%); }
.pacman-dpad-up.active,    .pacman-dpad-up:active    { transform: translateX(-50%) scale(0.93); }
.pacman-dpad-down.active,  .pacman-dpad-down:active  { transform: translateX(-50%) scale(0.93); }
.pacman-dpad-left.active,  .pacman-dpad-left:active  { transform: translateY(-50%) scale(0.93); }
.pacman-dpad-right.active, .pacman-dpad-right:active { transform: translateY(-50%) scale(0.93); }

@media (min-width: 769px) {
    .pacman-dpad { display: none; }
}
/* Petits écrans : D-pad plus compact */
@media (max-height: 700px) {
    .pacman-dpad {
        width: 150px;
        height: 150px;
    }
    .pacman-dpad-btn {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
}

/* =============================================
   BOMBERMAN
   ============================================= */

.bomberman-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background: #14161a;
    padding: 4px 4px env(safe-area-inset-bottom, 0px);
}

.bomberman-back {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
}

.bomberman-hud {
    display: flex;
    gap: 0.8rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.bomberman-hud-item { opacity: 0.92; }

.bomberman-status {
    color: #ffeaa7;
    font-size: 0.9rem;
    text-align: center;
    min-height: 1.2em;
}

#bombermanCanvas {
    touch-action: none;
    flex: 0 0 auto;
    background: #1e2125;
}

.bomberman-stats {
    display: flex;
    gap: 0.2rem;
    font-size: 0.85rem;
    color: #b0b0c0;
    padding: 2px 4px;
    min-height: 1.2em;
}

.bomberman-controls {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    flex: 0 0 auto;
    pointer-events: none;
}
.bomberman-dpad {
    position: relative;
    width: 170px;
    height: 170px;
    flex: 0 0 auto;
    z-index: 20;
    pointer-events: none;
}
.bomberman-dpad-btn {
    position: absolute;
    width: 54px;
    height: 54px;
    background: rgba(255, 234, 167, 0.45);
    color: #1a3a5c;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.05s ease, background-color 0.05s ease;
    padding: 0;
    line-height: 1;
}
.bomberman-dpad-btn.active,
.bomberman-dpad-btn:active {
    background: rgba(255, 234, 167, 0.9);
    transform: scale(0.93);
}
.bomberman-dpad-up    { top: 0;    left: 50%; transform: translateX(-50%); }
.bomberman-dpad-down  { bottom: 0; left: 50%; transform: translateX(-50%); }
.bomberman-dpad-left  { left: 0;   top: 50%;  transform: translateY(-50%); }
.bomberman-dpad-right { right: 0;  top: 50%;  transform: translateY(-50%); }
.bomberman-dpad-up.active,    .bomberman-dpad-up:active    { transform: translateX(-50%) scale(0.93); }
.bomberman-dpad-down.active,  .bomberman-dpad-down:active  { transform: translateX(-50%) scale(0.93); }
.bomberman-dpad-left.active,  .bomberman-dpad-left:active  { transform: translateY(-50%) scale(0.93); }
.bomberman-dpad-right.active, .bomberman-dpad-right:active { transform: translateY(-50%) scale(0.93); }

.bomberman-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: flex-end;
    align-items: flex-end;
    pointer-events: none;
}
.bomberman-action-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.55);
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.05s ease, filter 0.05s ease;
}
.bomberman-btn-a { background: linear-gradient(145deg, #ff6b6b, #c0392b); }
.bomberman-btn-b { background: linear-gradient(145deg, #a29bfe, #6c5ce7); }
.bomberman-action-btn.active,
.bomberman-action-btn:active {
    transform: scale(0.93);
    filter: brightness(1.2);
}

@media (min-width: 769px) {
    .bomberman-controls { display: none; }
}
@media (max-height: 700px) {
    .bomberman-dpad { width: 150px; height: 150px; }
    .bomberman-dpad-btn { width: 48px; height: 48px; font-size: 1.2rem; }
    .bomberman-action-btn { width: 56px; height: 56px; }
}

/* =============================================
   SNAKE
   ============================================= */

.snake-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#snakeCanvas {
    touch-action: none;
}

/* =============================================
   MEMORY PAIRES
   ============================================= */

.memorypairs-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px 20px;
    box-sizing: border-box;
    gap: 10px;
    user-select: none;
    -webkit-user-select: none;
}

.memorypairs-header {
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(20, 20, 35, 0.7);
    border: 1px solid rgba(162, 155, 254, 0.3);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    color: #e0e0ee;
    font-size: 0.95rem;
    font-weight: 600;
}

.memorypairs-head-cell { flex: 1; text-align: center; }
.memorypairs-head-cell:first-child { text-align: left; color: #a29bfe; }
.memorypairs-head-cell:last-child { text-align: right; }
.memorypairs-mode { color: #ffeaa7; }
.memorypairs-timer { color: #ffeaa7; font-size: 1.1rem; }

.memorypairs-stats {
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: space-around;
    font-size: 0.9rem;
    color: #b0b0c0;
}
.memorypairs-stats b { color: #fff; }

.memorypairs-board {
    width: 100%;
    max-width: 480px;
    display: grid;
    gap: 8px;
    padding: 4px;
}

.mp-card {
    aspect-ratio: 3 / 4;
    background: transparent;
    border: none;
    padding: 0;
    perspective: 600px;
    cursor: pointer;
    touch-action: manipulation;
}

.mp-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.45s;
    transform-style: preserve-3d;
}

.mp-card.flipped .mp-card-inner {
    transform: rotateY(180deg);
}

.mp-card-back, .mp-card-front {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.mp-card-back {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.mp-card-front {
    background: #fff;
    color: #222;
    font-size: 2rem;
    transform: rotateY(180deg);
    border: 2px solid #ffd700;
}

.mp-card.matched .mp-card-front {
    background: #d5f5e3;
    border-color: #27ae60;
    box-shadow: 0 0 12px rgba(39, 174, 96, 0.6);
}

.memorypairs-feedback {
    width: 100%;
    max-width: 480px;
    background: rgba(20, 20, 35, 0.95);
    border: 1px solid rgba(162, 155, 254, 0.3);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    color: #e0e0ee;
    font-size: 0.9rem;
    line-height: 1.45;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.memorypairs-feedback.hidden { display: none; }

/* =============================================
   PAINTFUL
   ============================================= */

.paintful-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 8px 16px;
    box-sizing: border-box;
    gap: 10px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#screen-paintful.active {
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
}

#paintfulCanvas {
    touch-action: none;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    background: #0f0f1a;
}

.paintful-feedback {
    width: 100%;
    max-width: 520px;
    background: rgba(20, 20, 35, 0.95);
    border: 1px solid rgba(162, 155, 254, 0.3);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    color: #e0e0ee;
    font-size: 0.9rem;
    line-height: 1.45;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.paintful-feedback.hidden {
    display: none;
}

/* =============================================
   UNO
   ============================================= */

.uno-container {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.uno-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    color: #e0e0ee;
    font-weight: 700;
    font-size: 0.95rem;
}

.uno-direction {
    font-size: 1.6rem;
    color: #ffeaa7;
    line-height: 1;
}

.uno-seats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.uno-seat {
    padding: 6px 10px;
    min-width: 82px;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid transparent;
    border-radius: 8px;
    color: #e0e0ee;
    font-size: 0.82rem;
    transition: border-color 0.2s, background 0.2s;
}

.uno-seat-turn {
    border-color: #ffeaa7;
    background: rgba(255, 234, 167, 0.15);
    box-shadow: 0 0 12px rgba(255, 234, 167, 0.25);
}

.uno-seat-me .uno-seat-name {
    color: #ffeaa7;
    font-weight: 700;
}

.uno-seat-count {
    color: #74b9ff;
    font-weight: 700;
    font-size: 0.88rem;
    margin-top: 2px;
}

.uno-seat-score {
    color: #b0b0c0;
    font-size: 0.75rem;
    margin-top: 2px;
}

.uno-table {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 14px;
    background: radial-gradient(circle, rgba(162, 155, 254, 0.12), transparent 70%);
    border-radius: 14px;
}

.uno-deck {
    text-align: center;
}

.uno-deck-label {
    font-size: 0.72rem;
    color: #b0b0c0;
    margin-top: 4px;
}

.uno-card {
    width: 64px;
    height: 94px;
    border-radius: 10px;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    position: relative;
}

.uno-card-label {
    display: inline-block;
    transform: rotate(-8deg);
}

.uno-card-back {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #e74c3c;
    font-family: 'Poppins', sans-serif;
}

.uno-card-back::before {
    content: 'UNO';
    letter-spacing: -2px;
    font-size: 1.3rem;
    font-weight: 900;
    transform: skewX(-15deg);
    text-shadow: 0 0 6px rgba(231, 76, 60, 0.6);
}

.uno-color-red { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.uno-color-yellow { background: linear-gradient(135deg, #f1c40f, #d4a30b); color: #2c3e50; text-shadow: none; }
.uno-color-green { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.uno-color-blue { background: linear-gradient(135deg, #3498db, #2980b9); }
.uno-color-wild {
    background:
        conic-gradient(from 0deg,
            #e74c3c 0 25%, #f1c40f 25% 50%,
            #2ecc71 50% 75%, #3498db 75% 100%);
    color: #fff;
}

.uno-card-wild .uno-card-label {
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 8px;
    border-radius: 6px;
}

.uno-turn {
    text-align: center;
    color: #b0b0c0;
    font-weight: 700;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.uno-turn.uno-mine {
    color: #00b894;
    background: rgba(0, 184, 148, 0.15);
    box-shadow: 0 0 12px rgba(0, 184, 148, 0.2);
}

.uno-myhand {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    gap: 6px;
    padding: 14px 6px 10px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 12px;
    min-height: 120px;
    scrollbar-width: thin;
}

.uno-handcard {
    flex: 0 0 auto;
    transition: transform 0.15s;
    cursor: default;
}

.uno-handcard.uno-card-playable {
    cursor: pointer;
    filter: drop-shadow(0 0 6px rgba(255, 234, 167, 0.55));
}

.uno-handcard.uno-card-playable:hover,
.uno-handcard.uno-card-playable:active {
    transform: translateY(-10px);
}

.uno-handcard.uno-card-disabled {
    opacity: 0.45;
}

.uno-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 4px;
}

.uno-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.uno-btn-draw {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.uno-btn-pass {
    background: linear-gradient(135deg, #636e72, #2d3436);
}

.uno-wild-picker {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.uno-wild-picker.hidden { display: none; }

.uno-wild-inner {
    background: #1a1a2e;
    border: 2px solid #a29bfe;
    border-radius: 14px;
    padding: 24px;
    max-width: 90vw;
}

.uno-wild-title {
    color: #fff;
    text-align: center;
    margin-bottom: 14px;
    font-weight: 700;
}

.uno-wild-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.uno-wild-btn {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    border: 3px solid #fff;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.uno-winner {
    text-align: center;
    font-size: 1.25rem;
    color: #ffd700;
    font-weight: 800;
    padding: 14px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
}

.uno-roundscores {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.uno-score-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: #e0e0ee;
}

.uno-score-me {
    color: #ffeaa7;
    border: 1px solid rgba(255, 234, 167, 0.3);
}

.uno-score-extra {
    opacity: 0.6;
    font-size: 0.78em;
}

@media (max-width: 400px) {
    .uno-card { width: 56px; height: 82px; font-size: 1.7rem; }
    .uno-seat { min-width: 72px; font-size: 0.76rem; }
}

/* =============================================
   COMPTEUR
   ============================================= */

.cpt-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.cpt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1rem;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    font-size: 0.95rem;
}

.cpt-round { color: #a29bfe; font-weight: 600; }
.cpt-status { color: #b0b0c0; font-weight: 600; }

#cptCanvas { border-radius: 14px; }

.cpt-points-display {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffeaa7;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cpt-answer-area {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 350px;
}

.cpt-answer-area .btn-primary {
    padding: 0.7rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    min-width: 100px;
}

.cpt-input {
    flex: 1;
    padding: 0.7rem 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

.cpt-input:focus { border-color: #a29bfe; }

.cpt-joker-bar {
    width: 100%;
    max-width: 400px;
}

.cpt-joker-buttons {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cpt-joker-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.7rem;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: all 0.2s;
}

.cpt-joker-btn:hover:not(:disabled) {
    border-color: #a29bfe;
    background: rgba(108, 92, 231, 0.15);
}

.cpt-joker-btn:disabled { opacity: 0.3; cursor: default; }
.cpt-joker-used { opacity: 0.2; text-decoration: line-through; }
.cpt-joker-icon { font-size: 1.2rem; }
.cpt-joker-label { font-size: 0.65rem; color: #b0b0c0; }

/* =============================================
   GOBELET
   ============================================= */

.gob-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.gob-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1rem;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    font-size: 0.95rem;
}

.gob-round { color: #a29bfe; font-weight: 600; }

.gob-status {
    color: #b0b0c0;
    font-weight: 600;
    transition: color 0.3s;
}

#gobCanvas {
    border-radius: 14px;
    touch-action: none;
    cursor: pointer;
}

.gob-feedback {
    text-align: center;
    padding: 0.7rem 1rem;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    width: 100%;
}

.gob-scoreboard {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
}

.gob-sb-row {
    display: block;
    padding: 0.4rem 0.8rem;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    font-size: 0.85rem;
}

.gob-sb-me {
    background: rgba(108, 92, 231, 0.15);
    border: 1px solid rgba(108, 92, 231, 0.3);
    font-weight: 600;
}

/* =============================================
   AIR HOCKEY
   ============================================= */

.ah-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0.5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#ahCanvas {
    border-radius: 12px;
    touch-action: none;
}

.ah-scores-bar {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    min-height: 36px;
    width: 100%;
    max-width: 500px;
}

.ah-score-item {
    font-variant-numeric: tabular-nums;
}

/* =============================================
   MASTERMIND
   ============================================= */

.mm-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
}

.mm-round-info { color: #a29bfe; }
.mm-attempt-info { color: #fd79a8; }

.mm-timer {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffeaa7;
    background: rgba(255,255,255,0.08);
    padding: 0.2rem 0.7rem;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.mm-role-info {
    text-align: center;
    padding: 0.8rem;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    font-size: 1rem;
}

.mm-role-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-right: 0.4rem;
}

.mm-role-coder {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}

.mm-role-decoder {
    background: linear-gradient(135deg, #e84393, #fd79a8);
}

.mm-section-title {
    text-align: center;
    font-size: 0.9rem;
    color: #b0b0c0;
    margin-bottom: 0.5rem;
}

/* Peg slots (code / current guess) */
.mm-code-slots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.mm-peg-slot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 2px dashed rgba(255,255,255,0.2);
    transition: all 0.2s;
}

/* Peg colors */
.mm-peg-red { background: #e74c3c !important; border-color: #c0392b !important; border-style: solid !important; }
.mm-peg-blue { background: #3498db !important; border-color: #2980b9 !important; border-style: solid !important; }
.mm-peg-green { background: #2ecc71 !important; border-color: #27ae60 !important; border-style: solid !important; }
.mm-peg-yellow { background: #f1c40f !important; border-color: #f39c12 !important; border-style: solid !important; }
.mm-peg-purple { background: #9b59b6 !important; border-color: #8e44ad !important; border-style: solid !important; }
.mm-peg-orange { background: #e67e22 !important; border-color: #d35400 !important; border-style: solid !important; }

/* Color palette buttons */
.mm-color-palette {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

.mm-color-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mm-color-btn:active {
    transform: scale(0.9);
}

.mm-color-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}

/* Action buttons */
.mm-action-buttons {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

/* Attempts grid */
.mm-attempts-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
}

.mm-attempt-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    animation: mmSlideIn 0.3s ease;
}

@keyframes mmSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mm-attempt-num {
    font-size: 0.8rem;
    color: #888;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.mm-attempt-pegs {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.mm-peg {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
}

.mm-hints {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
}

.mm-hint {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.mm-hint-red {
    background: #e74c3c;
    border: 2px solid #c0392b;
}

.mm-hint-white {
    background: #dfe6e9;
    border: 2px solid #b2bec3;
}

.mm-hint-black {
    background: #1a1a2e;
    border: 2px solid #333;
}

/* Waiting area */
.mm-waiting-text {
    text-align: center;
    font-size: 1.1rem;
    color: #b0b0c0;
    padding: 2rem;
    animation: mmPulse 2s infinite;
}

@keyframes mmPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Feedback */
.mm-feedback {
    text-align: center;
    padding: 1rem;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-top: 0.5rem;
}

.mm-success {
    color: #00b894;
    font-size: 1.2rem;
    font-weight: 700;
}

.mm-fail {
    color: #ff4757;
    font-size: 1.1rem;
    font-weight: 600;
}

.mm-code-reveal {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.mm-code-reveal .mm-peg {
    width: 42px;
    height: 42px;
    animation: mmReveal 0.5s ease;
}

@keyframes mmReveal {
    from { transform: scale(0) rotate(180deg); }
    to { transform: scale(1) rotate(0deg); }
}

.mm-next-round-info {
    margin-top: 0.8rem;
    color: #a29bfe;
    font-size: 0.95rem;
    animation: mmPulse 1.5s infinite;
}

/* Multi mode: players status */
.mm-players-status {
    text-align: center;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    font-size: 0.9rem;
    color: #74b9ff;
}

/* Multi mode: notification */
.mm-notif {
    text-align: center;
    padding: 0.5rem;
    background: rgba(108, 92, 231, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #a29bfe;
    margin-bottom: 0.5rem;
    animation: mmNotifIn 0.3s ease, mmNotifOut 0.3s ease 2.7s forwards;
}

@keyframes mmNotifIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mmNotifOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Round results */
.mm-round-results {
    padding: 1.2rem;
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
    text-align: center;
}

.mm-rr-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #a29bfe;
    margin-bottom: 1rem;
}

.mm-ranking {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
}

.mm-ranking-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    font-size: 0.9rem;
}

.mm-ranking-me {
    background: rgba(108, 92, 231, 0.15);
    border: 1px solid rgba(108, 92, 231, 0.3);
}

.mm-ranking-pos {
    font-weight: 700;
    color: #ffeaa7;
    width: 30px;
    flex-shrink: 0;
}

.mm-ranking-name {
    flex: 1;
    text-align: left;
}

.mm-ranking-status {
    color: #b0b0c0;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.wordle-goal {
    text-align: center;
    color: #dfe6e9;
    font-weight: 700;
    margin-bottom: 1rem;
}

.wordle-letters {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.wordle-letter-tile {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #101522;
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
    box-shadow: 0 10px 24px rgba(253, 203, 110, 0.2);
}

.wordle-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.wordle-count {
    color: #b0b0c0;
    font-size: 0.95rem;
}

.wordle-words {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-height: 48px;
    margin-bottom: 1rem;
}

.wordle-word-chip {
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-weight: 600;
}

.wordle-round-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.wordle-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: #dfe6e9;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .wordle-letter-tile {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .wordle-result-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mots Mêlés */
.mm-word {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #b0b0c0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* =============================================
   MOTUS
   ============================================= */
.motus-first-letter {
    text-align: center;
    margin: 0.3rem 0 0.6rem;
    letter-spacing: 6px;
}
.motus-first-letter-big {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 900;
    color: #e74c3c;
    background: rgba(231,76,60,0.12);
    border: 2px solid rgba(231,76,60,0.5);
    border-radius: 8px;
    padding: 0.15rem 0.5rem;
    margin-right: 4px;
}
.motus-first-letter-dot {
    display: inline-block;
    color: #808095;
    font-size: 1.3rem;
    margin: 0 2px;
}
.motus-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    margin-bottom: 0.6rem;
}
.motus-row {
    display: grid;
    grid-template-columns: repeat(var(--motus-cols, 6), 40px);
    gap: 4px;
}
.motus-cell {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    text-transform: uppercase;
    user-select: none;
}
.motus-cell.motus-correct {
    background: #e74c3c;
    border-color: #c0392b;
    color: #fff;
    border-radius: 6px;
}
.motus-cell.motus-present {
    background: transparent;
    border: 2px solid #f1c40f;
    color: #f1c40f;
    border-radius: 50%;
    position: relative;
}
.motus-cell.motus-present::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: rgba(241,196,15,0.15);
    z-index: 0;
}
.motus-cell.motus-absent {
    background: rgba(70,70,80,0.55);
    border-color: rgba(255,255,255,0.05);
    color: #dfe6e9;
}
.motus-cell.motus-hint {
    color: #e74c3c;
    background: rgba(231,76,60,0.12);
    border-color: rgba(231,76,60,0.35);
    border-style: dashed;
}
.motus-input-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: center;
    margin-top: 0.3rem;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}
.motus-input-row .btn {
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 1.05rem;
}
.motus-input {
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    outline: none;
}
.motus-input:focus {
    border-color: #e74c3c;
    background: rgba(231,76,60,0.08);
}
@media (max-width: 600px) {
    .motus-row {
        grid-template-columns: repeat(var(--motus-cols, 6), 34px);
        gap: 3px;
    }
    .motus-cell {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    .motus-first-letter-big {
        font-size: 1.5rem;
    }
}

/* =============================================================
   JEUX FAMILLE — HOMEPAGE (scoped to #screen-home)
   Design: terracotta papier, Fraunces + Inter.
   ============================================================= */

#screen-home {
    --jf-bg:        #F5EFE4;
    --jf-paper:     #EFE7D7;
    --jf-ink:       #1B1410;
    --jf-ink-soft:  #4A3D33;
    --jf-ink-faint: rgba(27,20,16,.55);
    --jf-line:      rgba(27,20,16,.14);
    --jf-brick:     #C94A3A;
    --jf-ocre:      #E8A530;
    --jf-forest:    #1E3A34;

    --jf-radius-sm: 10px;
    --jf-radius:    18px;
    --jf-radius-lg: 28px;

    --jf-maxw:      1240px;
    --jf-gutter:    32px;

    --jf-font-display: "Fraunces", ui-serif, Georgia, serif;
    --jf-font-ui:      "Inter", ui-sans-serif, system-ui, sans-serif;
    --jf-font-mono:    "JetBrains Mono", ui-monospace, monospace;

    background: var(--jf-bg);
    color: var(--jf-ink);
    font-family: var(--jf-font-ui);
    min-height: auto;
    padding-top: 0;
    overflow-x: hidden;
}

/* La home s'affiche en block (non-flex) mais uniquement quand active,
   sinon .screen { display: none } doit continuer à la masquer. */
#screen-home.screen.active { display: block; }

#screen-home *,
#screen-home *::before,
#screen-home *::after { box-sizing: border-box; }

/* Neutralise les règles globales qui fuitent dans la home */
#screen-home header,
#screen-home header.jf-hero {
    position: static;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: auto;
    z-index: auto;
}
#screen-home nav,
#screen-home nav.jf-nav {
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    justify-content: initial;
    align-items: initial;
}
#screen-home .jf-hero,
#screen-home section.jf-section {
    flex: none;
    align-items: initial;
    justify-content: initial;
    text-align: initial;
}
#screen-home footer {
    position: static;
}

#screen-home .jf-wrap {
    max-width: var(--jf-maxw);
    margin: 0 auto;
    padding: 0 var(--jf-gutter);
}

/* ===== NAV ===== */
#screen-home .jf-nav {
    position: sticky; top: 0; z-index: 40;
    background: rgba(245, 239, 228, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--jf-line);
}
#screen-home .jf-nav .jf-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px; padding-bottom: 18px;
}
#screen-home .jf-brand,
#screen-home .jf-brand:hover,
#screen-home .jf-brand:focus,
#screen-home .jf-brand:visited,
#screen-home .jf-brand:active,
#screen-home .jf-brand span {
    text-decoration: none !important;
    border-bottom: 0 !important;
}
#screen-home .jf-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--jf-font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 100;
    color: var(--jf-ink);
    transition: opacity 0.2s ease;
}
#screen-home .jf-brand:hover { opacity: 0.8; }
#screen-home .jf-mark {
    width: 36px;
    height: 36px;
    background: var(--jf-brick);
    border-radius: 10px;
    position: relative;
    transform: rotate(-6deg);
    display: inline-block;
    flex: 0 0 auto;
}
#screen-home .jf-mark::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 6px;
    border: 2px solid var(--jf-bg);
}
#screen-home .jf-mark::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--jf-bg);
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#screen-home .jf-nav-links {
    display: flex; gap: 32px;
    list-style: none; margin: 0; padding: 0;
    font-size: 15px; font-weight: 500;
}
#screen-home .jf-nav-links a {
    color: var(--jf-ink-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}
#screen-home .jf-nav-links a:hover { color: var(--jf-ink); }
#screen-home .jf-nav-cta { display: flex; gap: 10px; align-items: center; }

@media (max-width: 820px) {
    #screen-home .jf-nav-links { display: none; }
}

/* ===== BUTTONS ===== */
#screen-home .jf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    font-family: var(--jf-font-ui);
    font-weight: 600; font-size: 15px;
    border: 1.5px solid var(--jf-ink);
    color: var(--jf-ink);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
#screen-home .jf-btn:hover { transform: translateY(-1px); }
#screen-home .jf-btn.primary {
    background: var(--jf-ink);
    color: var(--jf-bg);
    border-color: var(--jf-ink);
}
#screen-home .jf-btn.primary:hover {
    background: var(--jf-brick);
    border-color: var(--jf-brick);
}
#screen-home .jf-btn.ghost {
    border-color: var(--jf-line);
    color: var(--jf-ink);
}
#screen-home .jf-btn.sm { padding: 9px 14px; font-size: 13px; }
#screen-home .jf-arr { transition: transform 0.2s ease; display: inline-block; }
#screen-home .jf-btn:hover .jf-arr { transform: translateX(3px); }

/* ===== HERO ===== */
#screen-home .jf-hero {
    padding: 77px 0 99px;
    position: relative;
}
#screen-home .jf-eyebrow {
    font-family: var(--jf-font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jf-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--jf-line);
    border-radius: 999px;
    background: var(--jf-paper);
}
#screen-home .jf-dot {
    width: 8px; height: 8px;
    background: var(--jf-brick);
    border-radius: 50%;
    display: inline-block;
}
#screen-home .jf-h1 {
    font-family: var(--jf-font-display);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-size: clamp(44px, 7.2vw, 108px);
    line-height: 0.94;
    letter-spacing: -0.035em;
    margin: 22px 0;
    color: var(--jf-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-home .jf-h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--jf-brick);
}
#screen-home .jf-stamp {
    display: inline-block;
    padding: 0 18px 6px;
    background: var(--jf-ocre);
    border-radius: 14px;
    transform: rotate(-2deg);
    color: var(--jf-ink);
    font-style: normal;
}
#screen-home .jf-lede {
    font-size: clamp(17px, 1.5vw, 20px);
    color: var(--jf-ink-soft);
    max-width: 540px;
    line-height: 1.5;
    margin: 0;
}
#screen-home .jf-lede strong { color: var(--jf-ink); }
#screen-home .jf-hero .jf-cta-row {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
#screen-home .jf-proof {
    margin-top: 38px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--jf-ink-faint);
    font-size: 14px;
}
#screen-home .jf-proof strong { color: var(--jf-ink); }
#screen-home .jf-avatars { display: flex; }
#screen-home .jf-avatars span {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid var(--jf-bg);
    display: inline-block;
    margin-left: -8px;
    background: var(--jf-ocre);
}
#screen-home .jf-avatars span:nth-child(2) { background: var(--jf-brick); }
#screen-home .jf-avatars span:nth-child(3) { background: var(--jf-forest); }
#screen-home .jf-avatars span:nth-child(4) { background: var(--jf-ink); }
#screen-home .jf-avatars span:first-child { margin-left: 0; }

#screen-home .jf-hero-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}
@media (max-width: 900px) {
    #screen-home .jf-hero-split { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 820px) {
    #screen-home { overflow-x: hidden; }
    #screen-home .jf-wrap { padding: 0 18px; }
    #screen-home .jf-hero { padding: 32px 0 48px; overflow: hidden; }
    #screen-home .jf-h1 { font-size: clamp(44px, 12vw, 72px); margin: 16px 0; }
    #screen-home .jf-stamp { padding: 0 12px 4px; border-radius: 10px; }
    #screen-home .jf-lede { font-size: 16px; max-width: 100%; }
    #screen-home .jf-hero .jf-cta-row { margin-top: 24px; }
    #screen-home .jf-proof { margin-top: 24px; font-size: 13px; }
    #screen-home .jf-eyebrow { font-size: 11px; }

    #screen-home .jf-scene {
        max-width: 100%;
        min-height: 360px;
        aspect-ratio: 5 / 4;
        margin: 0 auto;
        justify-self: center;
        overflow: hidden;
    }
    /* Contain cards inside scene bounds (no overflow from rotations) */
    #screen-home .jf-card-tile {
        padding: 14px;
    }
    #screen-home .jf-card-tile .jf-big { font-size: 28px !important; }
    #screen-home .jf-card-tile .jf-glyph { font-size: 40px; }
    #screen-home .jf-card-tile .jf-lbl { font-size: 10px; }
    /* Inset tiles a bit so rotation doesn't push them off-screen */
    #screen-home .jf-t1 { top: 4%; left: 4%; width: 52%; height: 42%; }
    #screen-home .jf-t2 { top: 22%; right: 4%; width: 48%; height: 34%; }
    #screen-home .jf-t3 { bottom: 16%; left: 4%; width: 48%; height: 36%; }
    #screen-home .jf-t4 { bottom: 4%; right: 4%; width: 44%; height: 30%; }
    /* Hide confetti on mobile — they sit outside the scene and cause overflow */
    #screen-home .jf-confetti { display: none; }

    /* Home sections mobile padding */
    #screen-home .jf-section { padding: 48px 0; }
    #screen-home .jf-sec-head { gap: 20px; margin-bottom: 28px; }
    #screen-home .jf-games { gap: 14px; }
    #screen-home .jf-game { padding: 22px; min-height: 240px; }
    #screen-home .jf-game-title { font-size: 28px; }
    #screen-home .jf-tiles { gap: 10px; }
    #screen-home .jf-tile { padding: 14px; min-height: 120px; }
    #screen-home .jf-cat-head { margin: 36px 0 12px; }
    #screen-home .jf-cat-head h3 { font-size: 22px; }
    #screen-home .jf-stats { margin: 0 18px; padding: 36px 0; }
    #screen-home .jf-stats-grid { gap: 16px; }
    #screen-home .jf-cta-banner { margin: 0 18px; padding: 40px 24px; }
    #screen-home .jf-footer-cols { gap: 24px; }
    #screen-home .jf-big-mark { margin: 24px 0 16px; }
}

@media (max-width: 480px) {
    #screen-home .jf-wrap { padding: 0 14px; }
    #screen-home .jf-hero .jf-cta-row { flex-direction: column; align-items: stretch; }
    #screen-home .jf-btn { justify-content: center; }
    #screen-home .jf-scene {
        min-height: 300px;
    }
    #screen-home .jf-card-tile .jf-big { font-size: 22px !important; }
    #screen-home .jf-card-tile .jf-glyph { font-size: 32px; }
}

/* ===== HERO SCENE ===== */
#screen-home .jf-scene {
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 480px;
    justify-self: end;
    min-height: 520px;
}
#screen-home .jf-card-tile {
    position: absolute;
    border-radius: var(--jf-radius);
    padding: 22px;
    box-shadow: 0 30px 60px -30px rgba(27,20,16,0.35),
                0 2px 0 rgba(27,20,16,0.06);
    font-family: var(--jf-font-display);
    font-weight: 700;
    color: var(--jf-ink);
    font-variation-settings: "SOFT" 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
#screen-home .jf-card-tile .jf-lbl {
    font-family: var(--jf-font-mono);
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--jf-ink-soft);
    font-weight: 500;
}
#screen-home .jf-card-tile .jf-big {
    font-size: 40px;
    line-height: 0.95;
    letter-spacing: -0.02em;
}
#screen-home .jf-card-tile .jf-glyph {
    font-size: 56px;
    line-height: 1;
}
#screen-home .jf-t1 {
    top: 2%; left: 6%; width: 58%; height: 42%;
    background: var(--jf-ocre);
    transform: rotate(-5deg);
    animation: jf-float1 7s ease-in-out infinite;
}
#screen-home .jf-t2 {
    top: 20%; right: 0%; width: 50%; height: 34%;
    background: var(--jf-brick); color: #fff;
    transform: rotate(4deg);
    animation: jf-float2 8s ease-in-out infinite 0.6s;
}
#screen-home .jf-t2 .jf-lbl { color: rgba(255,255,255,0.7); }
#screen-home .jf-t3 {
    bottom: 14%; left: 0%; width: 52%; height: 36%;
    background: var(--jf-forest); color: #FEFBF2;
    transform: rotate(-3deg);
    animation: jf-float1 9s ease-in-out infinite 1.2s;
}
#screen-home .jf-t3 .jf-lbl { color: rgba(254,251,242,0.65); }
#screen-home .jf-t4 {
    bottom: 0%; right: 8%; width: 46%; height: 30%;
    background: var(--jf-paper);
    border: 1.5px solid var(--jf-line);
    transform: rotate(6deg);
    animation: jf-float2 10s ease-in-out infinite 0.3s;
}

@keyframes jf-float1 {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    50%      { transform: rotate(-3deg) translateY(-10px); }
}
@keyframes jf-float2 {
    0%, 100% { transform: rotate(4deg) translateY(0); }
    50%      { transform: rotate(6deg) translateY(-12px); }
}

#screen-home .jf-confetti {
    position: absolute;
    pointer-events: none;
}
#screen-home .jf-c1 { top: -4%; right: 10%; color: var(--jf-brick); }
#screen-home .jf-c2 { bottom: 8%; left: -4%; color: var(--jf-forest); }
#screen-home .jf-c3 { top: 42%; right: -6%; color: var(--jf-ocre); }

/* ===== SECTION PRIMITIVES ===== */
#screen-home .jf-section {
    padding: 88px 0;
    position: relative;
}
#screen-home .jf-sec-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}
#screen-home .jf-sec-head-centered {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
}
#screen-home .jf-sec-eye {
    font-family: var(--jf-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--jf-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
#screen-home .jf-sec-eye::before {
    content: "";
    width: 28px; height: 1px;
    background: var(--jf-ink-soft);
}
#screen-home .jf-sec-title {
    font-family: var(--jf-font-display);
    font-weight: 700;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 14px 0 0;
    max-width: 18ch;
    color: var(--jf-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-home .jf-sec-sub {
    color: var(--jf-ink-soft);
    font-size: 17px;
    max-width: 44ch;
    margin: 0;
}

/* ===== GAMES GRID ===== */
#screen-home .jf-games {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
}
#screen-home .jf-game {
    position: relative;
    border-radius: var(--jf-radius);
    padding: 28px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--jf-paper);
    border: 1px solid var(--jf-line);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1),
                box-shadow 0.35s ease;
    color: var(--jf-ink);
    text-decoration: none;
}
#screen-home .jf-game:hover {
    transform: translateY(-6px) rotate(-0.4deg);
    box-shadow: 0 30px 50px -30px rgba(27,20,16,0.35);
}
#screen-home .jf-game-tag {
    position: absolute;
    top: 20px; right: 20px;
    font-family: var(--jf-font-mono);
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
    color: var(--jf-ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
#screen-home .jf-game-meta {
    font-family: var(--jf-font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jf-ink-soft);
}
#screen-home .jf-game-title {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 700;
    font-size: 34px;
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 10px 0 6px;
    color: currentColor;
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-home .jf-game-desc {
    color: var(--jf-ink-soft);
    font-size: 14.5px;
    margin: 0;
    max-width: 34ch;
}
#screen-home .jf-game-foot {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: 22px;
}
#screen-home .jf-play {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--jf-ink);
    color: var(--jf-bg);
    transition: transform 0.3s ease, background 0.3s ease;
}
#screen-home .jf-game:hover .jf-play {
    transform: scale(1.1) rotate(-10deg);
    background: var(--jf-brick);
}
#screen-home .jf-emblem {
    position: absolute;
    font-family: var(--jf-font-display);
    font-weight: 900;
    font-variation-settings: "SOFT" 100;
    font-size: 220px;
    line-height: 0.8;
    bottom: -40px; right: -10px;
    color: rgba(0,0,0,0.06);
    pointer-events: none;
    letter-spacing: -0.06em;
}

#screen-home .jf-game.g-brick {
    background: var(--jf-brick);
    color: #FEFBF2;
    border-color: transparent;
}
#screen-home .jf-game.g-brick .jf-game-meta,
#screen-home .jf-game.g-brick .jf-game-desc { color: rgba(254,251,242,0.85); }
#screen-home .jf-game.g-brick .jf-emblem    { color: rgba(255,255,255,0.12); }
#screen-home .jf-game.g-brick .jf-game-tag  { background: rgba(255,255,255,0.2); color: #fff; }
#screen-home .jf-game.g-brick .jf-play      { background: #FEFBF2; color: var(--jf-brick); }

#screen-home .jf-game.g-forest {
    background: var(--jf-forest);
    color: #FEFBF2;
    border-color: transparent;
}
#screen-home .jf-game.g-forest .jf-game-meta,
#screen-home .jf-game.g-forest .jf-game-desc { color: rgba(254,251,242,0.78); }
#screen-home .jf-game.g-forest .jf-emblem    { color: rgba(255,255,255,0.1); }
#screen-home .jf-game.g-forest .jf-game-tag  { background: rgba(255,255,255,0.2); color: #fff; }
#screen-home .jf-game.g-forest .jf-play      { background: var(--jf-ocre); color: var(--jf-forest); }

#screen-home .jf-game.g-ocre {
    background: var(--jf-ocre);
    color: var(--jf-ink);
    border-color: transparent;
}
#screen-home .jf-game.g-ocre .jf-emblem { color: rgba(0,0,0,0.1); }

#screen-home .jf-game.span-6 { grid-column: span 6; }
#screen-home .jf-game.span-4 { grid-column: span 4; }
#screen-home .jf-game.span-8 { grid-column: span 8; }

@media (max-width: 900px) {
    #screen-home .jf-game.span-6,
    #screen-home .jf-game.span-4,
    #screen-home .jf-game.span-8 { grid-column: span 12; }
}

/* ===== CATALOG CATEGORIES ===== */
#screen-home .jf-cat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 56px 0 18px;
    gap: 20px;
    flex-wrap: wrap;
}
#screen-home .jf-cat-head h3 {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--jf-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-home .jf-count {
    font-family: var(--jf-font-mono);
    font-size: 13px;
    color: var(--jf-ink-faint);
    margin-left: 10px;
    letter-spacing: 0.08em;
    font-weight: 500;
}
#screen-home .jf-line {
    flex: 1;
    height: 1px;
    background: var(--jf-line);
    margin: 0 8px;
    min-width: 40px;
}

#screen-home .jf-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { #screen-home .jf-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { #screen-home .jf-tiles { grid-template-columns: 1fr; } }

#screen-home .jf-tile {
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--jf-line);
    background: var(--jf-paper);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 140px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    position: relative;
    text-decoration: none;
    color: var(--jf-ink);
}
#screen-home .jf-tile:hover {
    transform: translateY(-3px);
    background: var(--jf-bg);
    border-color: var(--jf-ink);
}
#screen-home .jf-tile-glyph {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    color: var(--jf-brick);
    letter-spacing: -0.02em;
}
#screen-home .jf-tile h4 {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--jf-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-home .jf-tile p {
    font-size: 13px;
    color: var(--jf-ink-soft);
    margin: 0;
    line-height: 1.4;
}
#screen-home .jf-meta-line {
    margin-top: auto;
    font-family: var(--jf-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jf-ink-faint);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}
#screen-home .jf-tile-arrow {
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(-4px);
}
#screen-home .jf-tile:hover .jf-tile-arrow {
    opacity: 1;
    transform: translateX(0);
}
#screen-home .jf-tile.soon {
    opacity: 0.5;
    cursor: default;
}
#screen-home .jf-tile.soon:hover {
    transform: none;
    background: var(--jf-paper);
    border-color: var(--jf-line);
}

/* ===== HOW ===== */
#screen-home .jf-how {
    background: var(--jf-paper);
    border-top: 1px solid var(--jf-line);
    border-bottom: 1px solid var(--jf-line);
}
#screen-home .jf-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 10px;
}
#screen-home .jf-step {
    padding: 36px 32px 36px 0;
    border-right: 1px solid var(--jf-line);
    position: relative;
}
#screen-home .jf-step:last-child { border-right: none; }
#screen-home .jf-step + .jf-step { padding-left: 32px; }
#screen-home .jf-num {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 800;
    font-size: 80px;
    line-height: 1;
    color: var(--jf-brick);
    letter-spacing: -0.04em;
}
#screen-home .jf-step h4 {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 18px 0 8px;
    color: var(--jf-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-home .jf-step p {
    color: var(--jf-ink-soft);
    margin: 0;
    font-size: 15px;
    max-width: 32ch;
}
@media (max-width: 820px) {
    #screen-home .jf-steps { grid-template-columns: 1fr; }
    #screen-home .jf-step {
        border-right: none;
        border-bottom: 1px solid var(--jf-line);
        padding: 24px 0;
    }
    #screen-home .jf-step + .jf-step { padding-left: 0; }
}

/* ===== MODES ===== */
#screen-home .jf-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { #screen-home .jf-modes { grid-template-columns: 1fr; } }
#screen-home .jf-mode {
    padding: 28px;
    border-radius: var(--jf-radius);
    border: 1px solid var(--jf-line);
    background: var(--jf-bg);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
#screen-home .jf-mode:hover {
    border-color: var(--jf-ink);
    transform: translateY(-3px);
}
#screen-home .jf-icn {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 26px;
    background: var(--jf-paper);
    border: 1px solid var(--jf-line);
    font-family: var(--jf-font-display);
    font-weight: 800;
    font-variation-settings: "SOFT" 100;
    color: var(--jf-ink);
}
#screen-home .jf-mode h4 {
    font-family: var(--jf-font-display);
    font-weight: 700;
    font-size: 22px;
    margin: 0;
    letter-spacing: -0.01em;
    font-variation-settings: "SOFT" 100;
    color: var(--jf-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-home .jf-mode p {
    color: var(--jf-ink-soft);
    margin: 0;
    font-size: 15px;
}
#screen-home .jf-tag-line {
    font-family: var(--jf-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--jf-brick);
}

/* ===== STATS ===== */
#screen-home .jf-stats {
    background: var(--jf-ink);
    color: var(--jf-bg);
    padding: 54px 0;
    border-radius: var(--jf-radius-lg);
    margin: 0 var(--jf-gutter);
    overflow: hidden;
}
#screen-home .jf-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: end;
}
@media (max-width: 820px) {
    #screen-home .jf-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
#screen-home .jf-stat-num {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 800;
    font-size: clamp(48px, 6vw, 88px);
    line-height: 0.9;
    letter-spacing: -0.035em;
    color: var(--jf-ocre);
}
#screen-home .jf-stat-lbl {
    font-family: var(--jf-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(245, 239, 228, 0.6);
    margin-top: 8px;
}
#screen-home .jf-stat:nth-child(2) .jf-stat-num { color: #F5EFE4; }
#screen-home .jf-stat:nth-child(3) .jf-stat-num { color: #E8654F; }
#screen-home .jf-stat:nth-child(4) .jf-stat-num { color: #6FBF8A; }

/* ===== TESTIMONIALS ===== */
#screen-home .jf-quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { #screen-home .jf-quotes { grid-template-columns: 1fr; } }
#screen-home .jf-quote {
    padding: 28px;
    border: 1px solid var(--jf-line);
    border-radius: var(--jf-radius);
    background: var(--jf-paper);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
#screen-home .jf-marks {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 900;
    font-size: 54px;
    line-height: 0.4;
    color: var(--jf-brick);
}
#screen-home .jf-quote p {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.35;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--jf-ink);
}
#screen-home .jf-who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    font-size: 14px;
    color: var(--jf-ink-soft);
}
#screen-home .jf-who span { color: var(--jf-ink-faint); font-size: 12.5px; }
#screen-home .jf-av {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--jf-ocre);
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--jf-ink);
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
}
#screen-home .jf-av-brick  { background: var(--jf-brick); color: #FEFBF2; }
#screen-home .jf-av-forest { background: var(--jf-forest); color: #FEFBF2; }

/* ===== FAQ ===== */
#screen-home .jf-faq {
    max-width: 820px;
    margin: 0 auto;
}
#screen-home .jf-faq details {
    border-bottom: 1px solid var(--jf-line);
    padding: 22px 0;
}
#screen-home .jf-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--jf-ink);
}
#screen-home .jf-faq summary::-webkit-details-marker { display: none; }
#screen-home .jf-plus {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--jf-ink);
    display: grid;
    place-items: center;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    font-family: var(--jf-font-ui);
    font-weight: 500;
}
#screen-home .jf-faq details[open] .jf-plus {
    transform: rotate(45deg);
    background: var(--jf-ink);
    color: var(--jf-bg);
}
#screen-home .jf-ans {
    color: var(--jf-ink-soft);
    padding: 14px 52px 4px 0;
    font-size: 16px;
    line-height: 1.55;
}

/* ===== CTA BANNER ===== */
#screen-home .jf-cta-banner {
    background: var(--jf-brick);
    color: #FEFBF2;
    border-radius: var(--jf-radius-lg);
    padding: 64px;
    margin: 0 var(--jf-gutter);
    text-align: center;
    position: relative;
    overflow: hidden;
}
#screen-home .jf-cta-banner h2 {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0 0 14px;
    color: #FEFBF2;
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-home .jf-cta-banner p {
    color: rgba(255,255,255,0.8);
    margin: 0 0 28px;
    font-size: 17px;
}
#screen-home .jf-cta-banner .jf-btn.primary {
    background: #FEFBF2;
    color: var(--jf-brick);
    border-color: #FEFBF2;
}
#screen-home .jf-cta-banner .jf-btn.primary:hover {
    background: var(--jf-ink);
    color: #FEFBF2;
    border-color: var(--jf-ink);
}
#screen-home .jf-deco {
    position: absolute;
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 900;
    color: rgba(255,255,255,0.08);
    pointer-events: none;
    font-size: 260px;
    line-height: 0.8;
    letter-spacing: -0.06em;
}
#screen-home .jf-d-l { bottom: -80px; left: -20px; }
#screen-home .jf-d-r { top: -60px; right: -20px; transform: rotate(8deg); }

/* ===== FOOTER ===== */
#screen-home .jf-footer {
    padding: 60px 0 28px;
    border-top: 1px solid var(--jf-line);
    margin-top: 80px;
    background: transparent;
    position: static;
}
#screen-home .jf-footer-cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}
@media (max-width: 820px) {
    #screen-home .jf-footer-cols { grid-template-columns: 1fr 1fr; }
}
#screen-home .jf-footer h5 {
    font-family: var(--jf-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--jf-ink-soft);
    margin: 0 0 16px;
    font-weight: 500;
}
#screen-home .jf-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#screen-home .jf-footer a {
    color: var(--jf-ink);
    text-decoration: none;
    font-size: 15px;
}
#screen-home .jf-footer a:hover { color: var(--jf-brick); }
#screen-home .jf-footer p {
    margin: 0;
    color: var(--jf-ink-soft);
    font-size: 15px;
    max-width: 32ch;
}
#screen-home .jf-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 28px;
    border-top: 1px solid var(--jf-line);
    font-family: var(--jf-font-mono);
    font-size: 12px;
    color: var(--jf-ink-faint);
}
#screen-home .jf-big-mark {
    font-family: var(--jf-font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 900;
    font-size: clamp(80px, 14vw, 220px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    margin: 40px 0 20px;
    color: var(--jf-ink);
    white-space: nowrap;
    overflow: hidden;
}
#screen-home .jf-big-mark span {
    color: var(--jf-brick);
    font-style: italic;
    font-weight: 500;
}

/* =============================================================
   PARTY FAMILY GAME SCREENS — Flow d'un jeu
   4 écrans communs redesignés (game-select / create / lobby / results)
   2 variations : A = papier éditorial · B = prime-time TV sombre
   ============================================================= */

#screen-game-select.pf-screen,
#screen-create.pf-screen,
#screen-lobby.pf-screen,
#screen-results.pf-screen,
#screen-game.pf-screen {
    --pf-bg:        #F5EFE4;
    --pf-paper:     #EFE7D7;
    --pf-ink:       #1B1410;
    --pf-ink-soft:  #4A3D33;
    --pf-ink-faint: rgba(27,20,16,.55);
    --pf-line:      rgba(27,20,16,.14);
    --pf-cream:     #FEFBF2;
    --pf-accent:    #C94A3A;
    --pf-accent-2:  #E8A530;
    --pf-font-display: "Fraunces", ui-serif, Georgia, serif;
    --pf-font-ui:      "Inter", ui-sans-serif, system-ui, sans-serif;
    --pf-font-mono:    "JetBrains Mono", ui-monospace, monospace;
    font-family: var(--pf-font-ui);
    padding: 0;
    min-height: 100vh;
}

/* Palette par jeu — accent couleur */
.pf-screen[data-pf-accent="brick"]  { --pf-accent: #C94A3A; --pf-accent-2: #E8A530; }
.pf-screen[data-pf-accent="forest"] { --pf-accent: #1E3A34; --pf-accent-2: #E8A530; }
.pf-screen[data-pf-accent="ocre"]   { --pf-accent: #E8A530; --pf-accent-2: #C94A3A; }
.pf-screen[data-pf-accent="plum"]   { --pf-accent: #8B4A7F; --pf-accent-2: #E8A530; }
.pf-screen[data-pf-accent="blue"]   { --pf-accent: #3A7CA5; --pf-accent-2: #E8A530; }
.pf-screen[data-pf-accent="coral"]  { --pf-accent: #E8654F; --pf-accent-2: #F0B846; }
.pf-screen[data-pf-accent="mint"]   { --pf-accent: #2E9B76; --pf-accent-2: #F0B846; }

/* ---------- VARIATION A : papier éditorial ---------- */
.pf-screen[data-pf-variation="a"] {
    background: var(--pf-bg);
    color: var(--pf-ink);
}
.pf-screen[data-pf-variation="a"].screen.active {
    display: flex;
    flex-direction: column;
}

/* ---------- VARIATION B : prime-time TV ---------- */
.pf-screen[data-pf-variation="b"] {
    background: #0E0908;
    color: #FEFBF2;
    position: relative;
}
.pf-screen[data-pf-variation="b"].screen.active {
    display: flex;
    flex-direction: column;
}
.pf-screen[data-pf-variation="b"]::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 10% 20%, color-mix(in srgb, var(--pf-accent) 22%, transparent), transparent 55%),
        radial-gradient(ellipse at 90% 90%, color-mix(in srgb, var(--pf-accent-2) 18%, transparent), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.pf-screen[data-pf-variation="b"]::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 48px 48px;
}
.pf-screen[data-pf-variation="b"] > * { position: relative; z-index: 1; }

/* ---------- CHROME HEADER ---------- */
.pf-chrome {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 40px;
    border-bottom: 1px solid var(--pf-line);
    font-size: 14px; flex-shrink: 0;
}
.pf-screen[data-pf-variation="b"] .pf-chrome {
    border-bottom-color: rgba(255,255,255,.08);
}
.pf-chrome-left { display: flex; align-items: center; gap: 14px; }
.pf-chrome-right {
    display: flex; align-items: center; gap: 14px;
    color: var(--pf-ink-faint); font-size: 13px;
}
.pf-screen[data-pf-variation="b"] .pf-chrome-right { color: rgba(255,255,255,.6); }
.pf-brand-lockup {
    font-family: var(--pf-font-display);
    font-weight: 800; font-size: 22px;
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 100;
    color: var(--pf-ink);
    text-decoration: none;
}
.pf-screen[data-pf-variation="b"] .pf-brand-lockup { color: #FEFBF2; }
.pf-brand-lockup .pf-brand-dot { color: var(--pf-accent); }
.pf-chrome-sep { width: 1px; height: 18px; background: var(--pf-line); }
.pf-screen[data-pf-variation="b"] .pf-chrome-sep { background: rgba(255,255,255,.1); }

.pf-eyebrow {
    font-family: var(--pf-font-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--pf-ink-faint);
    font-weight: 500;
}
.pf-screen[data-pf-variation="b"] .pf-eyebrow { color: rgba(255,255,255,.55); }
.pf-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; display: inline-block;
}
.pf-eyebrow.pf-accent-eye { color: var(--pf-accent); }
.pf-live-dot { animation: pf-blink 1.2s infinite; }
@keyframes pf-blink { 50% { opacity: .3; } }

.pf-mono {
    font-family: var(--pf-font-mono);
    letter-spacing: .08em;
}

.pf-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    font-family: var(--pf-font-mono);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(27,20,16,.06); color: var(--pf-ink-soft);
    font-weight: 500;
}
.pf-screen[data-pf-variation="b"] .pf-chip {
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
}

/* ---------- BUTTONS ---------- */
.pf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    font-family: var(--pf-font-ui); font-weight: 600; font-size: 15px;
    border: none; cursor: pointer; text-decoration: none;
    transition: transform .15s, filter .15s, box-shadow .15s;
    color: inherit; background: transparent;
}
.pf-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pf-btn-primary {
    background: var(--pf-accent); color: #fff;
}
.pf-btn-dark {
    background: var(--pf-ink); color: var(--pf-cream);
}
.pf-btn-ghost {
    border: 1.5px solid var(--pf-line); color: var(--pf-ink);
}
.pf-screen[data-pf-variation="b"] .pf-btn-ghost {
    border-color: rgba(255,255,255,.2); color: #FEFBF2;
}
.pf-btn-big { padding: 18px 28px; font-size: 17px; }
.pf-btn-full { width: 100%; }

/* ---------- GIANT TYPOGRAPHY ---------- */
.pf-giant {
    font-family: var(--pf-font-display);
    font-weight: 900; line-height: .82;
    letter-spacing: -0.05em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    margin: 0;
}
.pf-giant em { font-style: italic; color: var(--pf-accent); font-weight: 900; }

.pf-h2-display {
    font-family: var(--pf-font-display);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: currentColor;
    background: none;
    -webkit-text-fill-color: currentColor;
}

/* ---------- CODE LETTERS (4 letter room code) ---------- */
.pf-code-row { display: flex; gap: 12px; }
.pf-code-letter {
    flex: 1;
    aspect-ratio: 1;
    background: var(--pf-cream);
    border: 2px solid var(--pf-ink);
    border-radius: 18px;
    display: grid; place-items: center;
    font-family: var(--pf-font-display); font-weight: 900;
    font-variation-settings: "SOFT" 100;
    font-size: clamp(56px, 6vw, 90px);
    color: var(--pf-ink);
}
.pf-code-letter.pf-code-shadow:nth-child(odd)  { box-shadow: 6px 6px 0 var(--pf-accent); }
.pf-code-letter.pf-code-shadow:nth-child(even) { box-shadow: 6px 6px 0 var(--pf-accent-2); }
.pf-screen[data-pf-variation="b"] .pf-code-letter {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.2);
    color: #FEFBF2;
    border-width: 1.5px;
    box-shadow: none;
}
.pf-screen[data-pf-variation="b"] .pf-code-letter.pf-code-shadow {
    box-shadow: 0 0 40px color-mix(in srgb, var(--pf-accent) 40%, transparent);
}

/* ---------- AVATAR ---------- */
.pf-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-grid; place-items: center;
    font-family: var(--pf-font-display); font-weight: 700;
    font-variation-settings: "SOFT" 100, "opsz" 60;
    font-size: 18px; color: var(--pf-ink);
    flex-shrink: 0;
}
.pf-avatar.pf-avatar-sm { width: 32px; height: 32px; font-size: 14px; }
.pf-avatar.pf-avatar-lg { width: 64px; height: 64px; font-size: 24px; }
.pf-avatar.pf-avatar-xl {
    width: 120px; height: 120px; font-size: 52px;
    border: 4px solid var(--pf-accent-2);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--pf-accent) 30%, transparent);
}

/* =============================================================
   #screen-game-select — Page du jeu (Créer / Rejoindre)
   ============================================================= */

#screen-game-select.pf-screen header,
#screen-game-select.pf-screen section.hero {
    all: unset;
    display: block;
}
#screen-game-select.pf-screen .hero-buttons { display: none; }
/* Legacy hidden elements only — new pf-* H1 must stay visible */
#screen-game-select.pf-screen #selectedGameTitle,
#screen-game-select.pf-screen #selectedGameSubtitle,
#screen-game-select.pf-screen #selectedGameBadge {
    display: none !important;
}

#screen-game-select .pf-gs-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 0;
}
@media (max-width: 900px) {
    #screen-game-select .pf-gs-body { grid-template-columns: 1fr; }
}

#screen-game-select .pf-gs-left {
    padding: 80px 60px 40px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}
#screen-game-select[data-pf-variation="b"] .pf-gs-left {
    padding: 60px 60px 40px;
}
#screen-game-select .pf-gs-title {
    font-size: clamp(72px, 10vw, 132px);
    margin-top: 20px;
    color: var(--pf-ink);
    -webkit-text-fill-color: currentColor;
}
#screen-game-select[data-pf-variation="b"] .pf-gs-title {
    color: #FEFBF2;
    -webkit-text-fill-color: currentColor;
}
/* Override the legacy .highlight gradient with per-game accent italic */
#screen-game-select .pf-gs-title .highlight {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--pf-accent) !important;
    color: var(--pf-accent) !important;
    font-style: italic;
    font-weight: 500;
}
#screen-game-select .pf-gs-lede {
    margin-top: 32px;
    max-width: 500px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--pf-ink-soft);
}
#screen-game-select[data-pf-variation="b"] .pf-gs-lede {
    color: rgba(255,255,255,.75);
    border-left: 3px solid var(--pf-accent);
    padding-left: 20px;
}
#screen-game-select .pf-gs-chips { display: flex; gap: 12px; flex-wrap: wrap; }

#screen-game-select .pf-gs-right {
    padding: 60px 50px;
    background: var(--pf-paper);
    border-left: 1px solid var(--pf-line);
    display: flex; flex-direction: column; justify-content: center;
    gap: 32px;
    position: relative; overflow: hidden;
}
#screen-game-select .pf-gs-right > * { position: relative; z-index: 1; }
#screen-game-select[data-pf-variation="b"] .pf-gs-right {
    background: rgba(0,0,0,.2);
    border-left: 1px solid rgba(255,255,255,.08);
}
#screen-game-select .pf-gs-right::before {
    content: attr(data-motif);
    position: absolute; right: -60px; top: -80px;
    font-family: var(--pf-font-display); font-weight: 900;
    font-size: 500px; line-height: 1;
    color: var(--pf-accent); opacity: .06;
    font-variation-settings: "SOFT" 100;
    pointer-events: none;
}
#screen-game-select[data-pf-variation="b"] .pf-gs-right::before {
    color: var(--pf-accent);
    opacity: .08;
}

#screen-game-select .pf-gs-create,
#screen-game-select .pf-gs-join { position: relative; z-index: 1; }
#screen-game-select .pf-gs-divider {
    display: flex; align-items: center; gap: 14px;
    color: var(--pf-ink-faint); font-size: 13px;
    position: relative; z-index: 1;
}
#screen-game-select .pf-gs-divider .pf-gs-line {
    flex: 1; height: 1px; background: var(--pf-line);
}
#screen-game-select[data-pf-variation="b"] .pf-gs-divider { color: rgba(255,255,255,.4); }
#screen-game-select[data-pf-variation="b"] .pf-gs-divider .pf-gs-line { background: rgba(255,255,255,.15); }

#screen-game-select .pf-gs-action-title {
    font-family: var(--pf-font-display); font-weight: 800;
    font-variation-settings: "SOFT" 100;
    font-size: 32px; letter-spacing: -0.015em;
    margin: 10px 0 16px;
    color: currentColor;
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-game-select .pf-gs-action-desc {
    color: var(--pf-ink-soft); line-height: 1.5; margin: 0 0 20px;
}
#screen-game-select[data-pf-variation="b"] .pf-gs-action-desc {
    color: rgba(255,255,255,.6);
}

#screen-game-select .pf-back-btn {
    position: absolute; top: 80px; left: 60px;
    background: transparent; border: none; cursor: pointer;
    color: var(--pf-ink-soft); font: inherit; font-size: 14px;
    padding: 6px 10px; border-radius: 999px;
    transition: background .15s;
}
#screen-game-select .pf-back-btn:hover { background: var(--pf-line); }
#screen-game-select[data-pf-variation="b"] .pf-back-btn { color: rgba(255,255,255,.6); }
#screen-game-select[data-pf-variation="b"] .pf-back-btn:hover { background: rgba(255,255,255,.05); }

/* =============================================================
   #screen-create — Configuration de partie
   ============================================================= */

#screen-create.pf-screen .panel {
    all: unset; display: block;
}
#screen-create.pf-screen h2 { display: none; }
#screen-create.pf-screen .btn-back { display: none; }

#screen-create .pf-gs-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 900px) {
    #screen-create .pf-gs-body { grid-template-columns: 1fr; }
}

#screen-create .pf-gs-hero {
    background: var(--pf-accent);
    color: #fff;
    padding: 60px 50px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
    gap: 24px;
}
#screen-create .pf-gs-hero > * {
    position: relative;
    z-index: 1;
}
#screen-create[data-pf-variation="b"] .pf-gs-hero {
    background: transparent;
    color: #FEFBF2;
}
#screen-create .pf-gs-hero::before {
    content: attr(data-motif);
    position: absolute; bottom: -100px; right: -40px;
    font-family: var(--pf-font-display); font-weight: 900;
    font-size: 400px; line-height: 1; opacity: .08;
    font-variation-settings: "SOFT" 100;
    pointer-events: none;
}
#screen-create .pf-gs-hero h1 {
    font-family: var(--pf-font-display); font-weight: 900;
    font-size: clamp(56px, 7vw, 92px);
    line-height: .88; letter-spacing: -0.04em;
    margin: 20px 0 0;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    color: currentColor;
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-create .pf-gs-hero h1 em {
    font-style: italic; font-weight: 900;
    color: #fff; opacity: .85;
}
#screen-create[data-pf-variation="b"] .pf-gs-hero h1 em {
    color: var(--pf-accent);
    opacity: 1;
}
#screen-create .pf-gs-hero p {
    margin-top: 24px; font-size: 16px; line-height: 1.5;
    opacity: .85; max-width: 360px;
}
#screen-create[data-pf-variation="b"] .pf-gs-hero p { opacity: .7; }
#screen-create .pf-gs-hero-chips { display: flex; gap: 10px; position: relative; z-index: 1; }
#screen-create .pf-gs-hero-chips .pf-chip {
    background: rgba(255,255,255,.15); color: #fff;
}

#screen-create .pf-gs-form {
    padding: 50px 60px;
    overflow-y: auto;
    background: var(--pf-bg);
}
#screen-create[data-pf-variation="b"] .pf-gs-form {
    background: transparent;
}
#screen-create .pf-gs-form-inner {
    display: grid; gap: 24px; max-width: 560px;
}
#screen-create .form-group { margin: 0; display: block; }
#screen-create .form-group label:not(.checkbox-label) {
    font-family: var(--pf-font-mono); font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--pf-ink-faint);
    display: block; margin-bottom: 10px;
    font-weight: 500;
}
#screen-create[data-pf-variation="b"] .form-group label:not(.checkbox-label) {
    color: rgba(255,255,255,.55);
}
#screen-create .form-group input[type="text"],
#screen-create .form-group select {
    width: 100%;
    background: var(--pf-cream);
    border: 1.5px solid var(--pf-line);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: var(--pf-font-ui); font-size: 15px;
    color: var(--pf-ink);
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--pf-ink-soft) 50%),
        linear-gradient(-45deg, transparent 50%, var(--pf-ink-soft) 50%);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
}
#screen-create .form-group input[type="text"] {
    background-image: none;
}
#screen-create[data-pf-variation="b"] .form-group input[type="text"],
#screen-create[data-pf-variation="b"] .form-group select {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.15);
    color: #FEFBF2;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
        linear-gradient(-45deg, transparent 50%, rgba(255,255,255,.6) 50%);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
}
#screen-create[data-pf-variation="b"] .form-group input[type="text"] {
    background-image: none;
}
#screen-create .form-group input:focus,
#screen-create .form-group select:focus {
    border-color: var(--pf-accent);
}
#screen-create .game-mode-options {
    display: flex; flex-direction: column; gap: 10px;
}
#screen-create .checkbox-label {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--pf-paper);
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px; color: var(--pf-ink);
    transition: border-color .15s, background .15s;
}
#screen-create[data-pf-variation="b"] .checkbox-label {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
    color: #FEFBF2;
}
#screen-create .checkbox-label:hover { border-color: var(--pf-accent); }
#screen-create .checkbox-label input[type="checkbox"] { display: none; }
#screen-create .checkbox-label .checkbox-custom {
    width: 18px; height: 18px; border-radius: 4px;
    border: 1.5px solid var(--pf-line);
    display: inline-grid; place-items: center;
    flex-shrink: 0;
    background: var(--pf-cream);
    transition: background .15s, border-color .15s;
}
#screen-create[data-pf-variation="b"] .checkbox-label .checkbox-custom {
    background: rgba(0,0,0,.2);
    border-color: rgba(255,255,255,.2);
}
#screen-create .checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
}
#screen-create .checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom::after {
    content: "✓"; color: #fff; font-size: 12px; font-weight: 700;
}

#screen-create button[type="submit"],
#screen-create .btn.btn-primary.btn-full {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 18px 28px;
    border-radius: 999px;
    font-family: var(--pf-font-ui); font-weight: 600; font-size: 17px;
    border: none; cursor: pointer;
    background: var(--pf-accent); color: #fff;
    transition: transform .15s, filter .15s;
    width: 100%;
    margin-top: 8px;
}
#screen-create button[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* =============================================================
   #screen-lobby — Salon d'attente
   ============================================================= */

#screen-lobby.pf-screen .panel { all: unset; display: block; }
#screen-lobby.pf-screen h2 { display: none; }
#screen-lobby.pf-screen .lobby-info,
#screen-lobby.pf-screen .lobby-mode-badges,
#screen-lobby.pf-screen .room-code-display,
#screen-lobby.pf-screen .waiting-msg { display: none; }

#screen-lobby .pf-gs-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
}
@media (max-width: 900px) {
    #screen-lobby .pf-gs-body { grid-template-columns: 1fr; }
}

#screen-lobby .pf-gs-left {
    padding: 60px 60px;
    background: var(--pf-paper);
    border-right: 1px solid var(--pf-line);
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
    gap: 28px;
}
#screen-lobby[data-pf-variation="b"] .pf-gs-left {
    background: rgba(0,0,0,.2);
    border-right: 1px solid rgba(255,255,255,.08);
}
#screen-lobby .pf-gs-left::before {
    content: attr(data-motif);
    position: absolute; right: -40px; bottom: -80px;
    font-family: var(--pf-font-display); font-weight: 900;
    font-size: 400px; line-height: 1;
    color: var(--pf-accent); opacity: .08;
    font-variation-settings: "SOFT" 100;
    pointer-events: none;
}
#screen-lobby .pf-gs-private-note {
    font-size: 13px; color: var(--pf-ink-faint);
    display: flex; align-items: center; gap: 10px;
    position: relative; z-index: 1;
}
#screen-lobby[data-pf-variation="b"] .pf-gs-private-note { color: rgba(255,255,255,.5); }
#screen-lobby .pf-gs-private-note::before {
    content: ""; width: 20px; height: 1px; background: var(--pf-line);
}
#screen-lobby[data-pf-variation="b"] .pf-gs-private-note::before { background: rgba(255,255,255,.2); }

#screen-lobby .pf-gs-right {
    padding: 50px 50px;
    display: flex; flex-direction: column;
}
#screen-lobby .pf-gs-players-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 24px; gap: 16px;
}
#screen-lobby .pf-gs-players-title {
    font-family: var(--pf-font-display);
    font-weight: 800; font-size: 28px;
    font-variation-settings: "SOFT" 100;
    margin: 6px 0 0;
    letter-spacing: -0.015em;
    color: currentColor;
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-lobby .pf-gs-players-title .pf-gs-faint {
    color: var(--pf-ink-faint); font-weight: 400; font-size: 18px;
}
#screen-lobby[data-pf-variation="b"] .pf-gs-players-title .pf-gs-faint {
    color: rgba(255,255,255,.5);
}

#screen-lobby .players-list {
    flex: 1;
    display: flex; flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    min-height: 0;
    overflow-y: auto;
}
#screen-lobby .player-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--pf-paper);
    border: 1px solid var(--pf-line);
    border-radius: 14px;
    transition: border-color .15s;
    color: var(--pf-ink);
    position: relative;
}
#screen-lobby[data-pf-variation="b"] .player-item {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    color: #FEFBF2;
}
#screen-lobby .player-item::after {
    content: "";
    position: absolute; top: 50%; right: 16px;
    transform: translateY(-50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: #6FBF8A;
}
#screen-lobby .player-item .player-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-grid; place-items: center;
    font-family: var(--pf-font-display); font-weight: 700;
    font-variation-settings: "SOFT" 100, "opsz" 60;
    font-size: 18px; color: var(--pf-ink);
    background: var(--pf-accent-2);
    flex-shrink: 0;
}
#screen-lobby .player-item .player-nickname {
    flex: 1;
    font-weight: 700; font-size: 16px;
    padding-right: 24px;
}
#screen-lobby .player-item .host-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pf-accent);
    color: #fff;
    margin-right: 12px;
}
#screen-lobby[data-pf-variation="b"] .player-item .host-badge {
    background: var(--pf-accent);
}
#screen-lobby .players-list .players-waiting {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border: 1.5px dashed var(--pf-line);
    border-radius: 14px;
    color: var(--pf-ink-faint);
    font-size: 14px;
}
#screen-lobby[data-pf-variation="b"] .players-list .players-waiting {
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.5);
}
#screen-lobby .players-waiting .players-waiting-icon {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px dashed var(--pf-line);
    flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 20px; color: var(--pf-ink-faint);
}
#screen-lobby[data-pf-variation="b"] .players-waiting .players-waiting-icon {
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.4);
}

#screen-lobby #btnStartGame {
    display: inline-flex !important;
    align-items: center; justify-content: center; gap: 10px;
    padding: 18px 28px;
    border-radius: 999px;
    font-family: var(--pf-font-ui); font-weight: 600; font-size: 17px;
    border: none; cursor: pointer;
    background: var(--pf-accent); color: #fff;
    width: 100%;
    transition: transform .15s, filter .15s;
}
#screen-lobby #btnStartGame[style*="display:none"],
#screen-lobby #btnStartGame[style*="display: none"] { display: none !important; }
#screen-lobby #btnStartGame:hover { transform: translateY(-1px); filter: brightness(1.05); }
#screen-lobby #btnCloseLobby {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; margin-top: 12px;
    border-radius: 999px;
    font-family: var(--pf-font-ui); font-weight: 500; font-size: 14px;
    cursor: pointer;
    background: transparent;
    border: 1.5px solid var(--pf-line);
    color: var(--pf-ink-soft);
    width: 100%;
}
#screen-lobby[data-pf-variation="b"] #btnCloseLobby {
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.6);
}

/* =============================================================
   #screen-results — Podium final
   ============================================================= */

#screen-results.pf-screen .panel { all: unset; display: block; }
#screen-results.pf-screen .champion-crown,
#screen-results.pf-screen .champion-name,
#screen-results.pf-screen .podium-visual,
#screen-results.pf-screen h2#resultsTitle { display: none; }
#screen-results.pf-screen .confetti-container { z-index: 5; }

#screen-results[data-pf-variation="a"] {
    background: #0E0908;
    color: #FEFBF2;
}
#screen-results[data-pf-variation="b"] {
    background: #0E0908;
    color: #FEFBF2;
}

#screen-results .pf-gs-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    position: relative;
}
@media (max-width: 900px) {
    #screen-results .pf-gs-body { grid-template-columns: 1fr; }
}

#screen-results .pf-gs-body::before {
    content: attr(data-motif);
    position: absolute; top: -40px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--pf-font-display); font-weight: 900;
    font-size: 500px; line-height: 1;
    color: #fff; opacity: .035;
    font-variation-settings: "SOFT" 100;
    pointer-events: none;
}

#screen-results .pf-gs-winner {
    padding: 60px 50px 60px 60px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
    gap: 24px;
}
#screen-results .pf-gs-winner-title {
    font-family: var(--pf-font-display);
    font-weight: 900; font-size: clamp(80px, 10vw, 136px);
    line-height: .85; letter-spacing: -0.05em;
    margin: 20px 0 24px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    color: #FEFBF2;
}
#screen-results .pf-gs-winner-title em {
    font-style: italic; color: var(--pf-accent);
    font-weight: 900;
}
#screen-results .pf-gs-winner-desc {
    font-size: 17px; color: rgba(255,255,255,.7);
    line-height: 1.5; max-width: 460px; margin: 0;
}
#screen-results .pf-gs-score-block {
    display: flex; align-items: center; gap: 28px;
    position: relative;
    flex-wrap: wrap;
}
#screen-results .pf-gs-score-info .pf-gs-score-label {
    font-family: var(--pf-font-mono); font-size: 12px;
    letter-spacing: .2em; color: rgba(255,255,255,.5);
    text-transform: uppercase;
}
#screen-results .pf-gs-score-info .pf-gs-score-value {
    font-family: var(--pf-font-display); font-weight: 900;
    font-size: 90px; letter-spacing: -0.05em; line-height: 1;
    color: var(--pf-accent-2);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    margin: 6px 0;
}

#screen-results .pf-gs-ranking {
    padding: 60px 60px 60px 50px;
    border-left: 1px solid rgba(255,255,255,.08);
    display: flex; flex-direction: column;
    min-height: 0;
}
#screen-results .pf-gs-ranking-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 24px;
}
#screen-results .pf-gs-ranking-title {
    font-family: var(--pf-font-display);
    font-weight: 800; font-size: 32px;
    font-variation-settings: "SOFT" 100;
    letter-spacing: -0.015em;
    margin: 0;
    color: #FEFBF2;
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-results .final-scores {
    flex: 1;
    display: flex; flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 24px;
}
#screen-results .final-score-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 16px; align-items: center;
    padding: 14px 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    color: #FEFBF2;
}
#screen-results .final-score-row.champion-row {
    background: color-mix(in srgb, var(--pf-accent) 22%, transparent);
    border-color: var(--pf-accent);
}
#screen-results .final-score-row .fs-rank {
    font-family: var(--pf-font-display);
    font-variation-settings: "SOFT" 100, "opsz" 60;
    font-weight: 900;
    font-size: 24px;
    text-align: center;
    color: rgba(255,255,255,.55);
}
#screen-results .final-score-row.champion-row .fs-rank {
    color: var(--pf-accent-2);
}
#screen-results .final-score-row .fs-name {
    font-weight: 700; font-size: 17px;
}
#screen-results .final-score-row .fs-score {
    font-family: var(--pf-font-display);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 800;
    font-size: 24px; letter-spacing: -0.02em;
    color: #FEFBF2;
}
#screen-results .final-score-row.champion-row .fs-score { color: var(--pf-accent-2); }

#screen-results #btnReplay,
#screen-results #btnBackHomeResults {
    display: inline-flex !important;
    align-items: center; justify-content: center; gap: 10px;
    padding: 16px 24px;
    border-radius: 999px;
    font-family: var(--pf-font-ui); font-weight: 600; font-size: 16px;
    border: none; cursor: pointer;
    transition: transform .15s, filter .15s;
}
#screen-results #btnReplay {
    background: var(--pf-accent); color: #fff;
    flex: 1;
}
#screen-results #btnReplay[style*="display:none"] { display: none !important; }
#screen-results #btnBackHomeResults {
    background: transparent; color: #FEFBF2;
    border: 1.5px solid rgba(255,255,255,.2);
}
#screen-results #btnDownloadLog {
    background: transparent; color: rgba(255,255,255,.5);
    border: none; font-size: 12px;
    margin-top: 8px;
    cursor: pointer; text-decoration: underline;
    font-family: inherit;
}
#screen-results .pf-gs-results-actions {
    display: flex; gap: 12px;
}

/* =============================================================
   PARTY FAMILY GAME SCREENS — Mobile responsiveness
   ============================================================= */
@media (max-width: 900px) {
    .pf-screen .pf-chrome {
        padding: 14px 18px;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 13px;
    }
    .pf-screen .pf-brand-lockup { font-size: 18px; }
    .pf-screen .pf-chrome-right {
        font-size: 12px;
        flex-wrap: wrap;
    }
    .pf-screen .pf-eyebrow { font-size: 10px; letter-spacing: .14em; }
    .pf-screen .pf-chip { padding: 5px 10px; font-size: 10px; }

    /* ---- screen-game-select ---- */
    #screen-game-select .pf-gs-left {
        padding: 40px 22px 28px;
        gap: 24px;
    }
    #screen-game-select .pf-gs-right {
        padding: 36px 22px;
        gap: 26px;
    }
    #screen-game-select .pf-gs-right::before {
        font-size: 280px;
        right: -40px; top: -40px;
    }
    #screen-game-select .pf-gs-title {
        font-size: clamp(48px, 13vw, 78px);
        margin-top: 14px;
    }
    #screen-game-select .pf-gs-lede {
        margin-top: 20px;
        font-size: 15px;
    }
    #screen-game-select .pf-gs-action-title { font-size: 26px; margin: 8px 0 10px; }
    #screen-game-select .pf-gs-action-desc { font-size: 14px; margin-bottom: 16px; }
    #screen-game-select .pf-back-btn {
        position: static;
    }

    /* ---- screen-create ---- */
    #screen-create .pf-gs-hero {
        padding: 36px 24px;
        gap: 20px;
    }
    #screen-create .pf-gs-hero h1 {
        font-size: clamp(44px, 11vw, 60px);
        margin-top: 14px;
    }
    #screen-create .pf-gs-hero p {
        margin-top: 16px;
        font-size: 14px;
    }
    #screen-create .pf-gs-hero::before {
        font-size: 240px;
        bottom: -60px;
    }
    #screen-create .pf-gs-form {
        padding: 32px 22px 48px;
    }
    #screen-create .pf-gs-form-inner {
        gap: 20px;
    }

    /* ---- screen-lobby ---- */
    #screen-lobby .pf-gs-left {
        padding: 36px 22px;
        gap: 22px;
    }
    #screen-lobby .pf-gs-right {
        padding: 28px 22px 36px;
    }
    #screen-lobby .pf-gs-left::before {
        font-size: 260px;
        right: -60px; bottom: -60px;
    }
    #screen-lobby .pf-h2-display {
        font-size: 26px;
        margin: 14px 0 24px !important;
    }
    #screen-lobby .pf-code-row { gap: 8px; }
    #screen-lobby .pf-code-letter {
        border-radius: 14px;
        font-size: clamp(40px, 10vw, 58px);
    }
    #screen-lobby .pf-code-letter.pf-code-shadow:nth-child(odd),
    #screen-lobby .pf-code-letter.pf-code-shadow:nth-child(even) {
        box-shadow: 4px 4px 0 var(--pf-accent);
    }
    #screen-lobby .pf-gs-players-title {
        font-size: 24px;
    }
    #screen-lobby .pf-gs-players-title .pf-gs-faint {
        font-size: 14px;
    }
    #screen-lobby .player-item { padding: 12px 14px; gap: 12px; }
    #screen-lobby .player-item .player-avatar { width: 38px; height: 38px; font-size: 16px; }
    #screen-lobby .player-item .player-nickname { font-size: 15px; }

    /* ---- screen-results ---- */
    #screen-results .pf-gs-winner {
        padding: 36px 22px 20px;
        gap: 20px;
    }
    #screen-results .pf-gs-winner-title {
        font-size: clamp(52px, 13vw, 80px);
        margin: 14px 0 16px;
    }
    #screen-results .pf-gs-winner-desc { font-size: 15px; }
    #screen-results .pf-gs-ranking {
        padding: 24px 22px 36px;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    #screen-results .pf-gs-ranking-title { font-size: 24px; }
    #screen-results .pf-gs-score-info .pf-gs-score-value { font-size: 60px; }
    #screen-results .pf-avatar.pf-avatar-xl { width: 88px; height: 88px; font-size: 36px; }
    #screen-results .pf-gs-body::before {
        font-size: 360px;
        top: -30px;
    }
    #screen-results .pf-gs-results-actions { flex-direction: column; gap: 10px; }
    #screen-results #btnReplay,
    #screen-results #btnBackHomeResults { width: 100%; flex: none; }
    #screen-results .final-score-row {
        padding: 12px 14px;
        grid-template-columns: 40px 1fr auto;
        gap: 12px;
    }
    #screen-results .final-score-row .fs-rank { font-size: 22px; }
    #screen-results .final-score-row .fs-name { font-size: 15px; }
    #screen-results .final-score-row .fs-score { font-size: 20px; }

    .pf-btn-big { padding: 14px 22px; font-size: 15px; }
    .pf-btn { padding: 12px 18px; font-size: 14px; }
}

/* Hero pre-title (game name shown above the H1) */
#screen-create .pf-hero-pretitle {
    font-family: var(--pf-font-mono);
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff !important;
    margin-top: 12px;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .25) !important;
    position: relative;
    z-index: 2;
}
/* H1 "Configure ta partie" — toujours visible avec text-shadow pour tous les accents */
#screen-create .pf-gs-hero h1 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    position: relative;
    z-index: 2;
}
#screen-create .pf-gs-hero h1 em {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: .78;
}
#screen-create .pf-hero-eyebrow {
    color: rgba(255, 255, 255, .8) !important;
}
#screen-create .pf-hero-eyebrow .pf-eyebrow-dot {
    background: #fff !important;
}

/* Accent clair (ocre) : bascule le hero en texte sombre pour le contraste */
#screen-create[data-pf-accent="ocre"] .pf-gs-hero {
    color: var(--pf-ink);
}
#screen-create[data-pf-accent="ocre"] .pf-gs-hero h1,
#screen-create[data-pf-accent="ocre"] .pf-gs-hero h1 em {
    color: var(--pf-ink) !important;
    -webkit-text-fill-color: var(--pf-ink) !important;
    text-shadow: none;
}
#screen-create[data-pf-accent="ocre"] .pf-gs-hero h1 em { opacity: 0.75; }
#screen-create[data-pf-accent="ocre"] .pf-hero-eyebrow {
    color: rgba(27, 20, 16, .7) !important;
}
#screen-create[data-pf-accent="ocre"] .pf-hero-eyebrow .pf-eyebrow-dot {
    background: var(--pf-ink) !important;
}
#screen-create[data-pf-accent="ocre"] .pf-hero-pretitle {
    color: var(--pf-ink) !important;
    background: rgba(27, 20, 16, .18) !important;
}
#screen-create[data-pf-accent="ocre"] .pf-gs-hero p {
    color: var(--pf-ink) !important;
    opacity: 0.8;
}
#screen-create[data-pf-accent="ocre"] .pf-gs-hero-chips .pf-chip {
    background: rgba(27, 20, 16, .12) !important;
    color: var(--pf-ink) !important;
}

/* Variation B : le hero est transparent + texte cream */
#screen-create[data-pf-variation="b"] .pf-hero-pretitle {
    color: var(--pf-accent);
    background: color-mix(in srgb, var(--pf-accent) 15%, transparent);
}

/* =============================================================
   #screen-join — Rejoindre une partie (mirroir de screen-game-select)
   ============================================================= */

#screen-join.pf-screen,
#screen-game-select.pf-screen,
#screen-create.pf-screen,
#screen-lobby.pf-screen,
#screen-results.pf-screen {
    /* NOTE : #screen-join est ajouté ici en plus des 4 autres pour partager les tokens --pf-* */
}
#screen-join.pf-screen {
    --pf-bg: #F5EFE4;
    --pf-paper: #EFE7D7;
    --pf-ink: #1B1410;
    --pf-ink-soft: #4A3D33;
    --pf-ink-faint: rgba(27,20,16,.55);
    --pf-line: rgba(27,20,16,.14);
    --pf-cream: #FEFBF2;
    --pf-accent: #C94A3A;
    --pf-accent-2: #E8A530;
    --pf-font-display: "Fraunces", ui-serif, Georgia, serif;
    --pf-font-ui: "Inter", ui-sans-serif, system-ui, sans-serif;
    --pf-font-mono: "JetBrains Mono", ui-monospace, monospace;
    font-family: var(--pf-font-ui);
    padding: 0;
    min-height: 100vh;
    background: var(--pf-bg);
    color: var(--pf-ink);
}
#screen-join.pf-screen[data-pf-variation="b"] {
    background: #0E0908;
    color: #FEFBF2;
}

/* Layout identique à screen-game-select (text left, actions right) */
#screen-join .pf-gs-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 0;
}

#screen-join .pf-gs-left {
    padding: 80px 60px 40px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}
#screen-join[data-pf-variation="b"] .pf-gs-left {
    padding: 60px 60px 40px;
}
#screen-join .pf-gs-title {
    font-size: clamp(72px, 10vw, 132px);
    margin-top: 20px;
}
#screen-join .pf-gs-lede {
    margin-top: 32px; max-width: 500px;
    font-size: 17px; line-height: 1.55;
    color: var(--pf-ink-soft);
    margin-bottom: 0;
}
#screen-join[data-pf-variation="b"] .pf-gs-lede {
    color: rgba(255,255,255,.75);
    border-left: 3px solid var(--pf-accent);
    padding-left: 20px;
}
#screen-join .pf-gs-chips { display: flex; gap: 12px; flex-wrap: wrap; }

#screen-join .pf-gs-right {
    padding: 60px 50px;
    background: var(--pf-paper);
    border-left: 1px solid var(--pf-line);
    display: flex; flex-direction: column; justify-content: center;
    gap: 22px;
    position: relative; overflow: hidden;
}
#screen-join[data-pf-variation="b"] .pf-gs-right {
    background: rgba(0, 0, 0, .2);
    border-left: 1px solid rgba(255,255,255,.08);
}
#screen-join .pf-gs-right::before {
    content: attr(data-motif);
    position: absolute; right: -60px; top: -80px;
    font-family: var(--pf-font-display); font-weight: 900;
    font-size: 500px; line-height: 1;
    color: var(--pf-accent); opacity: .06;
    font-variation-settings: "SOFT" 100;
    pointer-events: none;
    z-index: 0;
}
#screen-join[data-pf-variation="b"] .pf-gs-right::before { opacity: .08; }
#screen-join .pf-gs-right > * { position: relative; z-index: 1; }

#screen-join .pf-gs-join-inner {
    display: flex; flex-direction: column; gap: 16px;
}
#screen-join .pf-gs-action-title {
    font-family: var(--pf-font-display); font-weight: 800;
    font-variation-settings: "SOFT" 100;
    font-size: 32px; letter-spacing: -0.015em;
    margin: 8px 0 16px;
    color: var(--pf-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-join[data-pf-variation="b"] .pf-gs-action-title { color: #FEFBF2; }

#screen-join .form-group {
    margin: 0;
    display: block;
}
#screen-join .form-group label:not(.checkbox-label) {
    font-family: var(--pf-font-mono); font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--pf-ink-faint);
    display: block; margin-bottom: 10px;
    font-weight: 500;
}
#screen-join[data-pf-variation="b"] .form-group label:not(.checkbox-label) {
    color: rgba(255,255,255,.55);
}
#screen-join .form-group input[type="text"] {
    width: 100%;
    background: var(--pf-cream);
    border: 1.5px solid var(--pf-line);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: var(--pf-font-ui); font-size: 15px;
    color: var(--pf-ink);
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
#screen-join[data-pf-variation="b"] .form-group input[type="text"] {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.15);
    color: #FEFBF2;
}
#screen-join .form-group input[type="text"]:focus {
    border-color: var(--pf-accent);
}
#screen-join .pf-join-code-input {
    text-transform: uppercase;
    letter-spacing: 14px;
    text-align: center;
    font-family: var(--pf-font-display) !important;
    font-weight: 900 !important;
    font-variation-settings: "SOFT" 100;
    font-size: 36px !important;
    padding: 18px 16px !important;
}

/* =============================================================
   Chrome bar responsive — back button pinned top-right on mobile
   ============================================================= */

@media (max-width: 900px) {
    /* Chrome en colonne sur mobile : brand+game en haut, back button pin top-right */
    .pf-screen .pf-chrome {
        position: relative;
        flex-wrap: wrap;
        padding: 12px 14px 12px 14px;
        gap: 6px;
        min-height: 0;
    }
    .pf-screen .pf-chrome-left {
        flex-wrap: wrap;
        min-width: 0;
        max-width: calc(100% - 110px); /* laisse de la place pour le back btn pin */
        gap: 8px;
    }
    /* Hide secondary status eyebrows + code mono on mobile to save room */
    .pf-screen .pf-chrome-right > .pf-eyebrow,
    .pf-screen .pf-chrome-right > .pf-mono,
    .pf-screen .pf-chrome-right > span {
        display: none !important;
    }
    .pf-screen .pf-chrome-right {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        justify-content: flex-end;
        gap: 8px;
        padding: 0;
        margin: 0;
    }
    .pf-screen .pf-back-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    .pf-screen .pf-chrome-sep { display: none; }
    .pf-screen .pf-chrome-left .pf-eyebrow { font-size: 10px; }

    /* Screen-join mobile : centered */
    #screen-join .pf-gs-body {
        grid-template-columns: 1fr !important;
    }
    #screen-join .pf-gs-left {
        padding: 36px 24px 16px !important;
        gap: 18px;
        text-align: center;
        align-items: center;
    }
    #screen-join .pf-gs-title {
        font-size: clamp(52px, 13vw, 80px);
        margin-top: 14px;
    }
    #screen-join .pf-gs-lede {
        margin-top: 16px;
        font-size: 15px;
        margin-left: auto; margin-right: auto;
        max-width: 420px;
    }
    #screen-join .pf-gs-chips {
        justify-content: center;
    }
    #screen-join .pf-gs-right {
        padding: 24px 24px 40px !important;
        border-left: none !important;
        border-top: 1px solid var(--pf-line);
    }
    #screen-join[data-pf-variation="b"] .pf-gs-right {
        border-top: 1px solid rgba(255,255,255,.08);
    }
    #screen-join .pf-gs-join-inner {
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
    #screen-join .pf-gs-action-title {
        text-align: center;
    }
    #screen-join .form-group label:not(.checkbox-label) {
        text-align: left; /* labels left-aligned inside centered container */
    }
}

@media (max-width: 480px) {
    /* Pré-titre hero plus compact */
    #screen-create .pf-hero-pretitle {
        font-size: 10px;
        padding: 5px 10px;
        letter-spacing: .14em;
    }
    /* Join code input plus petit */
    #screen-join .pf-join-code-input {
        font-size: 28px !important;
        letter-spacing: 10px;
        padding: 14px 12px !important;
    }
    .pf-screen .pf-back-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    .pf-screen .pf-chrome-left { max-width: calc(100% - 90px); }
}

@media (max-width: 480px) {
    .pf-screen .pf-chrome {
        padding: 12px 14px;
        font-size: 12px;
    }
    .pf-screen .pf-brand-lockup { font-size: 16px; }
    #screen-game-select .pf-gs-left,
    #screen-game-select .pf-gs-right,
    #screen-create .pf-gs-hero,
    #screen-create .pf-gs-form,
    #screen-lobby .pf-gs-left,
    #screen-lobby .pf-gs-right,
    #screen-results .pf-gs-winner,
    #screen-results .pf-gs-ranking {
        padding-left: 16px;
        padding-right: 16px;
    }
    #screen-lobby .pf-code-row { gap: 6px; }
    #screen-lobby .pf-code-letter { border-radius: 10px; border-width: 1.5px; }
}

/* =============================================================
   PARTY FAMILY — In-game overlays for Blind Test / Quiz / Image Quiz
   Activated via body[data-pf-game-active="blindtest|quiz|imagequiz"]
   ============================================================= */

body[data-pf-game-active="blindtest"],
body[data-pf-game-active="quiz"],
body[data-pf-game-active="imagequiz"] {
    --pf-bg-ol:       #F5EFE4;
    --pf-paper-ol:    #EFE7D7;
    --pf-ink-ol:      #1B1410;
    --pf-ink-soft-ol: #4A3D33;
    --pf-ink-faint-ol:rgba(27,20,16,.55);
    --pf-line-ol:     rgba(27,20,16,.14);
    --pf-cream-ol:    #FEFBF2;
    --pf-accent-ol:   #C94A3A;
    --pf-accent2-ol:  #E8A530;
    --pf-font-disp:   "Fraunces", ui-serif, Georgia, serif;
    --pf-font-ui-ol:  "Inter", ui-sans-serif, system-ui, sans-serif;
    --pf-font-mono-ol:"JetBrains Mono", ui-monospace, monospace;
}

/* -------- EVENT OVERLAY (event dramatique entre manches) -------- */
body[data-pf-game-active="blindtest"] #eventOverlay,
body[data-pf-game-active="quiz"] #eventOverlay,
body[data-pf-game-active="imagequiz"] #eventOverlay {
    background: rgba(14, 9, 8, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
body[data-pf-game-active="blindtest"] #eventOverlay.hidden,
body[data-pf-game-active="quiz"] #eventOverlay.hidden,
body[data-pf-game-active="imagequiz"] #eventOverlay.hidden {
    display: none;
}
body[data-pf-game-active="blindtest"] #eventOverlay .event-content,
body[data-pf-game-active="quiz"] #eventOverlay .event-content,
body[data-pf-game-active="imagequiz"] #eventOverlay .event-content {
    background: var(--pf-bg-ol) !important;
    border-radius: 24px !important;
    padding: 48px 56px !important;
    max-width: 560px !important;
    width: 100% !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .7) !important;
    border: 1px solid var(--pf-line-ol) !important;
    animation: pf-event-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) !important;
}
body[data-pf-game-active="blindtest"] #eventOverlay .event-title,
body[data-pf-game-active="quiz"] #eventOverlay .event-title,
body[data-pf-game-active="imagequiz"] #eventOverlay .event-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--pf-ink-ol) !important;
}
@keyframes pf-event-pop {
    0%   { opacity: 0; transform: scale(0.85) translateY(12px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
body[data-pf-game-active="blindtest"] #eventOverlay .event-content::before,
body[data-pf-game-active="quiz"] #eventOverlay .event-content::before,
body[data-pf-game-active="imagequiz"] #eventOverlay .event-content::before {
    content: "!";
    position: absolute;
    right: -24px; bottom: -90px;
    font-family: var(--pf-font-disp);
    font-weight: 900;
    font-size: 360px;
    line-height: 1;
    color: var(--pf-accent-ol);
    opacity: .08;
    font-variation-settings: "SOFT" 100;
    pointer-events: none;
}
body[data-pf-game-active="blindtest"] #eventOverlay .event-icon,
body[data-pf-game-active="quiz"] #eventOverlay .event-icon,
body[data-pf-game-active="imagequiz"] #eventOverlay .event-icon {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 18px;
    display: block;
    position: relative; z-index: 1;
    color: var(--pf-accent-ol);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: currentColor;
    animation: pf-float 2.5s ease-in-out infinite;
}
@keyframes pf-float { 50% { transform: translateY(-8px); } }
body[data-pf-game-active="blindtest"] #eventOverlay .event-title,
body[data-pf-game-active="quiz"] #eventOverlay .event-title,
body[data-pf-game-active="imagequiz"] #eventOverlay .event-title {
    font-family: var(--pf-font-disp);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 900;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--pf-ink-ol);
    background: none;
    -webkit-text-fill-color: var(--pf-ink-ol);
    margin: 0 0 12px;
    position: relative; z-index: 1;
}
body[data-pf-game-active="blindtest"] #eventOverlay .event-message,
body[data-pf-game-active="quiz"] #eventOverlay .event-message,
body[data-pf-game-active="imagequiz"] #eventOverlay .event-message {
    font-family: var(--pf-font-ui-ol);
    font-size: 17px; line-height: 1.5;
    color: var(--pf-ink-soft-ol);
    margin: 0; max-width: 42ch;
    margin-left: auto; margin-right: auto;
    position: relative; z-index: 1;
}

/* -------- PAUSE OVERLAY (entre-manches) -------- */
body[data-pf-game-active="blindtest"] #pauseOverlay,
body[data-pf-game-active="quiz"] #pauseOverlay,
body[data-pf-game-active="imagequiz"] #pauseOverlay {
    background: rgba(14, 9, 8, 0.9) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body[data-pf-game-active="blindtest"] #pauseOverlay .pause-content,
body[data-pf-game-active="quiz"] #pauseOverlay .pause-content,
body[data-pf-game-active="imagequiz"] #pauseOverlay .pause-content {
    background: var(--pf-bg-ol) !important;
    border-radius: 24px !important;
    padding: 36px 40px !important;
    max-width: 640px !important;
    width: 94% !important;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .7) !important;
    border: 1px solid var(--pf-line-ol) !important;
    color: var(--pf-ink-ol) !important;
}
body[data-pf-game-active="blindtest"] #pauseOverlay .pause-countdown-circle,
body[data-pf-game-active="quiz"] #pauseOverlay .pause-countdown-circle,
body[data-pf-game-active="imagequiz"] #pauseOverlay .pause-countdown-circle {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    border: 3px solid var(--pf-accent-ol) !important;
    background: var(--pf-cream-ol) !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto 12px !important;
    box-shadow: inset 0 0 0 6px rgba(201, 74, 58, .08) !important;
    animation: none !important;
}
body[data-pf-game-active="blindtest"] #pauseOverlay .pause-countdown-number,
body[data-pf-game-active="quiz"] #pauseOverlay .pause-countdown-number,
body[data-pf-game-active="imagequiz"] #pauseOverlay .pause-countdown-number {
    font-family: var(--pf-font-disp) !important;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 900 !important;
    font-size: 72px !important;
    letter-spacing: -0.05em !important;
    color: var(--pf-accent-ol) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--pf-accent-ol) !important;
}
body[data-pf-game-active="blindtest"] #pauseOverlay .pause-subtitle,
body[data-pf-game-active="quiz"] #pauseOverlay .pause-subtitle,
body[data-pf-game-active="imagequiz"] #pauseOverlay .pause-subtitle {
    font-family: var(--pf-font-mono-ol);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pf-ink-faint-ol);
    text-align: center;
    margin-bottom: 24px;
}
body[data-pf-game-active="blindtest"] #jokerBar,
body[data-pf-game-active="quiz"] #jokerBar,
body[data-pf-game-active="imagequiz"] #jokerBar {
    background: transparent;
    padding: 0; margin: 0 0 20px;
    border: none;
}
body[data-pf-game-active="blindtest"] .joker-bar-title,
body[data-pf-game-active="quiz"] .joker-bar-title,
body[data-pf-game-active="imagequiz"] .joker-bar-title {
    font-family: var(--pf-font-mono-ol);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pf-ink-faint-ol);
    text-align: center;
    margin-bottom: 12px;
    font-weight: 500;
}
body[data-pf-game-active="blindtest"] .joker-buttons,
body[data-pf-game-active="quiz"] .joker-buttons,
body[data-pf-game-active="imagequiz"] .joker-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: none;
}
body[data-pf-game-active="blindtest"] .joker-btn,
body[data-pf-game-active="quiz"] .joker-btn,
body[data-pf-game-active="imagequiz"] .joker-btn {
    padding: 16px 10px !important;
    background: var(--pf-cream-ol) !important;
    border: 1px solid var(--pf-line-ol) !important;
    border-radius: 14px !important;
    color: var(--pf-ink-ol) !important;
    font-family: var(--pf-font-ui-ol);
    font-weight: 700;
    cursor: pointer;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform .15s, border-color .15s, background .15s;
    text-transform: none;
    font-size: 13px;
}
body[data-pf-game-active="blindtest"] .joker-btn .joker-icon,
body[data-pf-game-active="quiz"] .joker-btn .joker-icon,
body[data-pf-game-active="imagequiz"] .joker-btn .joker-icon {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--pf-accent-ol) !important;
}
body[data-pf-game-active="blindtest"] .joker-btn:hover:not(:disabled),
body[data-pf-game-active="quiz"] .joker-btn:hover:not(:disabled),
body[data-pf-game-active="imagequiz"] .joker-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--pf-accent-ol);
    background: #fff;
}
body[data-pf-game-active="blindtest"] .joker-btn .joker-icon,
body[data-pf-game-active="quiz"] .joker-btn .joker-icon,
body[data-pf-game-active="imagequiz"] .joker-btn .joker-icon {
    font-family: var(--pf-font-disp);
    font-variation-settings: "SOFT" 100;
    font-weight: 800;
    font-size: 22px;
    color: var(--pf-accent-ol);
    line-height: 1;
}
body[data-pf-game-active="blindtest"] .joker-btn .joker-name,
body[data-pf-game-active="quiz"] .joker-btn .joker-name,
body[data-pf-game-active="imagequiz"] .joker-btn .joker-name {
    font-family: var(--pf-font-mono-ol);
    font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pf-ink-soft-ol);
    font-weight: 500;
}
body[data-pf-game-active="blindtest"] .joker-btn:disabled,
body[data-pf-game-active="blindtest"] .joker-btn.joker-used,
body[data-pf-game-active="quiz"] .joker-btn:disabled,
body[data-pf-game-active="quiz"] .joker-btn.joker-used,
body[data-pf-game-active="imagequiz"] .joker-btn:disabled,
body[data-pf-game-active="imagequiz"] .joker-btn.joker-used {
    opacity: .35;
    cursor: not-allowed;
    filter: grayscale(100%);
}
body[data-pf-game-active="blindtest"] #jokerLog,
body[data-pf-game-active="quiz"] #jokerLog,
body[data-pf-game-active="imagequiz"] #jokerLog {
    max-height: 100px; overflow-y: auto;
    padding: 10px; margin: 12px 0 16px;
    background: var(--pf-paper-ol);
    border-radius: 12px;
    border: 1px solid var(--pf-line-ol);
    display: flex; flex-direction: column; gap: 4px;
}
body[data-pf-game-active="blindtest"] .joker-log-entry,
body[data-pf-game-active="quiz"] .joker-log-entry,
body[data-pf-game-active="imagequiz"] .joker-log-entry {
    font-family: var(--pf-font-ui-ol);
    font-size: 12px;
    color: var(--pf-ink-soft-ol);
    padding: 4px 8px;
    border-left: 2px solid var(--pf-accent-ol);
    background: var(--pf-cream-ol);
    border-radius: 4px;
}
body[data-pf-game-active="blindtest"] .joker-log-entry.steal-log,
body[data-pf-game-active="quiz"] .joker-log-entry.steal-log,
body[data-pf-game-active="imagequiz"] .joker-log-entry.steal-log {
    border-left-color: var(--pf-accent2-ol);
    color: var(--pf-ink-ol);
    font-weight: 600;
}
body[data-pf-game-active="blindtest"] .pause-scoreboard,
body[data-pf-game-active="quiz"] .pause-scoreboard,
body[data-pf-game-active="imagequiz"] .pause-scoreboard {
    background: transparent;
    padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}

/* -------- ACTIVE JOKER DISPLAY (Indice / 50/50 badge) -------- */
body[data-pf-game-active="blindtest"] #activeJokerDisplay,
body[data-pf-game-active="quiz"] #activeJokerDisplay,
body[data-pf-game-active="imagequiz"] #activeJokerDisplay {
    background: var(--pf-accent-ol);
    color: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--pf-font-ui-ol);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center; gap: 8px;
    box-shadow: 0 6px 24px -6px rgba(201, 74, 58, .5);
    animation: pf-active-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    border: none;
}
body[data-pf-game-active="blindtest"] #activeJokerDisplay::before,
body[data-pf-game-active="quiz"] #activeJokerDisplay::before,
body[data-pf-game-active="imagequiz"] #activeJokerDisplay::before {
    content: "✦";
    color: var(--pf-accent2-ol);
    font-size: 14px;
}
@keyframes pf-active-in {
    0% { opacity: 0; transform: translate(-50%, -20px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

/* -------- STEAL MODAL (Choisir cible du vol) -------- */
body[data-pf-game-active="blindtest"] #stealModal,
body[data-pf-game-active="quiz"] #stealModal,
body[data-pf-game-active="imagequiz"] #stealModal {
    background: rgba(14, 9, 8, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
body[data-pf-game-active="blindtest"] #stealModal.hidden,
body[data-pf-game-active="quiz"] #stealModal.hidden,
body[data-pf-game-active="imagequiz"] #stealModal.hidden {
    display: none;
}
body[data-pf-game-active="blindtest"] #stealModal .modal-content,
body[data-pf-game-active="quiz"] #stealModal .modal-content,
body[data-pf-game-active="imagequiz"] #stealModal .modal-content {
    background: var(--pf-bg-ol) !important;
    border-radius: 24px !important;
    padding: 36px 40px !important;
    max-width: 520px !important;
    width: 100% !important;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .7) !important;
    border: 1px solid var(--pf-line-ol) !important;
    animation: pf-event-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    position: relative !important;
    overflow: hidden !important;
}
body[data-pf-game-active="blindtest"] #stealModal .modal-title,
body[data-pf-game-active="quiz"] #stealModal .modal-title,
body[data-pf-game-active="imagequiz"] #stealModal .modal-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--pf-ink-ol) !important;
}
body[data-pf-game-active="blindtest"] #stealModal .modal-content::before,
body[data-pf-game-active="quiz"] #stealModal .modal-content::before,
body[data-pf-game-active="imagequiz"] #stealModal .modal-content::before {
    content: "$";
    position: absolute;
    right: -30px; bottom: -80px;
    font-family: var(--pf-font-disp); font-weight: 900;
    font-size: 300px; line-height: 1;
    color: var(--pf-accent2-ol); opacity: .1;
    font-variation-settings: "SOFT" 100;
    pointer-events: none;
}
body[data-pf-game-active="blindtest"] #stealModal .modal-title,
body[data-pf-game-active="quiz"] #stealModal .modal-title,
body[data-pf-game-active="imagequiz"] #stealModal .modal-title {
    font-family: var(--pf-font-disp);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 800;
    font-size: 28px; letter-spacing: -0.02em;
    color: var(--pf-ink-ol);
    margin-bottom: 8px;
    position: relative; z-index: 1;
    background: none;
    -webkit-text-fill-color: currentColor;
}
body[data-pf-game-active="blindtest"] #stealModal .modal-subtitle,
body[data-pf-game-active="quiz"] #stealModal .modal-subtitle,
body[data-pf-game-active="imagequiz"] #stealModal .modal-subtitle {
    font-family: var(--pf-font-mono-ol);
    font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pf-ink-faint-ol);
    margin-bottom: 20px;
    position: relative; z-index: 1;
}
body[data-pf-game-active="blindtest"] #stealTargets,
body[data-pf-game-active="quiz"] #stealTargets,
body[data-pf-game-active="imagequiz"] #stealTargets {
    display: flex; flex-direction: column; gap: 10px;
    position: relative; z-index: 1;
}
body[data-pf-game-active="blindtest"] .steal-target-btn,
body[data-pf-game-active="quiz"] .steal-target-btn,
body[data-pf-game-active="imagequiz"] .steal-target-btn {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px; align-items: center;
    padding: 14px 18px;
    background: var(--pf-paper-ol);
    border: 1px solid var(--pf-line-ol);
    border-radius: 14px;
    color: var(--pf-ink-ol);
    font-family: var(--pf-font-ui-ol);
    cursor: pointer;
    text-align: left;
    transition: transform .15s, border-color .15s, background .15s;
}
body[data-pf-game-active="blindtest"] .steal-target-btn:hover,
body[data-pf-game-active="quiz"] .steal-target-btn:hover,
body[data-pf-game-active="imagequiz"] .steal-target-btn:hover {
    transform: translateY(-2px);
    border-color: var(--pf-accent-ol);
    background: var(--pf-cream-ol);
}
body[data-pf-game-active="blindtest"] .steal-target-avatar,
body[data-pf-game-active="quiz"] .steal-target-avatar,
body[data-pf-game-active="imagequiz"] .steal-target-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--pf-accent-ol);
    color: #fff;
    font-family: var(--pf-font-disp);
    font-variation-settings: "SOFT" 100, "opsz" 60;
    font-weight: 700; font-size: 18px;
}
body[data-pf-game-active="blindtest"] .steal-target-name,
body[data-pf-game-active="quiz"] .steal-target-name,
body[data-pf-game-active="imagequiz"] .steal-target-name {
    font-weight: 700; font-size: 16px;
    color: var(--pf-ink-ol);
}
body[data-pf-game-active="blindtest"] .steal-target-score,
body[data-pf-game-active="quiz"] .steal-target-score,
body[data-pf-game-active="imagequiz"] .steal-target-score {
    font-family: var(--pf-font-mono-ol);
    font-size: 13px;
    color: var(--pf-ink-soft-ol);
    font-weight: 500;
}

/* -------- 50/50 applied — highlight des 2 réponses restantes -------- */
body[data-pf-game-active="blindtest"] .qcm-btn.qcm-highlighted,
body[data-pf-game-active="quiz"] .qcm-btn.qcm-highlighted,
body[data-pf-game-active="imagequiz"] .qcm-btn.qcm-highlighted {
    box-shadow: 0 0 0 3px var(--pf-accent-ol), 0 8px 32px -8px rgba(201, 74, 58, .5);
    animation: pf-highlight-pulse 1.4s ease-in-out infinite;
}
@keyframes pf-highlight-pulse {
    50% { box-shadow: 0 0 0 5px var(--pf-accent-ol), 0 12px 40px -8px rgba(201, 74, 58, .7); }
}
body[data-pf-game-active="blindtest"] .qcm-btn.qcm-hidden,
body[data-pf-game-active="quiz"] .qcm-btn.qcm-hidden,
body[data-pf-game-active="imagequiz"] .qcm-btn.qcm-hidden {
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.5s ease;
    filter: grayscale(100%) blur(1px);
}

/* -------- Responsive mobile des overlays -------- */
@media (max-width: 640px) {
    body[data-pf-game-active="blindtest"] #eventOverlay .event-content,
    body[data-pf-game-active="quiz"] #eventOverlay .event-content,
    body[data-pf-game-active="imagequiz"] #eventOverlay .event-content,
    body[data-pf-game-active="blindtest"] #pauseOverlay .pause-content,
    body[data-pf-game-active="quiz"] #pauseOverlay .pause-content,
    body[data-pf-game-active="imagequiz"] #pauseOverlay .pause-content,
    body[data-pf-game-active="blindtest"] #stealModal .modal-content,
    body[data-pf-game-active="quiz"] #stealModal .modal-content,
    body[data-pf-game-active="imagequiz"] #stealModal .modal-content {
        padding: 28px 22px;
        border-radius: 18px;
    }
    body[data-pf-game-active="blindtest"] #eventOverlay .event-icon,
    body[data-pf-game-active="quiz"] #eventOverlay .event-icon,
    body[data-pf-game-active="imagequiz"] #eventOverlay .event-icon {
        font-size: 56px;
    }
    body[data-pf-game-active="blindtest"] #eventOverlay .event-title,
    body[data-pf-game-active="quiz"] #eventOverlay .event-title,
    body[data-pf-game-active="imagequiz"] #eventOverlay .event-title {
        font-size: clamp(28px, 7vw, 40px);
    }
    body[data-pf-game-active="blindtest"] #pauseOverlay .pause-countdown-circle,
    body[data-pf-game-active="quiz"] #pauseOverlay .pause-countdown-circle,
    body[data-pf-game-active="imagequiz"] #pauseOverlay .pause-countdown-circle {
        width: 96px; height: 96px;
    }
    body[data-pf-game-active="blindtest"] #pauseOverlay .pause-countdown-number,
    body[data-pf-game-active="quiz"] #pauseOverlay .pause-countdown-number,
    body[data-pf-game-active="imagequiz"] #pauseOverlay .pause-countdown-number {
        font-size: 52px;
    }
    body[data-pf-game-active="blindtest"] .joker-buttons,
    body[data-pf-game-active="quiz"] .joker-buttons,
    body[data-pf-game-active="imagequiz"] .joker-buttons {
        grid-template-columns: 1fr 1fr;
    }
    body[data-pf-game-active="blindtest"] #stealModal .modal-title,
    body[data-pf-game-active="quiz"] #stealModal .modal-title,
    body[data-pf-game-active="imagequiz"] #stealModal .modal-title {
        font-size: 22px;
    }
}

/* =============================================================
   #screen-game — Party Family in-round design (blindtest / quiz / imagequiz)
   ============================================================= */

#screen-game.pf-screen {
    background: var(--pf-bg) !important;
    color: var(--pf-ink) !important;
    font-family: var(--pf-font-ui) !important;
    min-height: 100vh;
    padding: 0 !important;
}
/* display only when active — laissez le .screen { display:none } global masquer sinon */
#screen-game.pf-screen.active {
    display: flex !important;
    flex-direction: column !important;
}

/* Override legacy #screen-game > .game-container used on non-PF games */
#screen-game.pf-screen > .game-container { all: unset; display: contents; }

#screen-game.pf-screen .pf-game-body {
    flex: 1;
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 0;
    gap: 0;
}
@media (max-width: 900px) {
    #screen-game.pf-screen .pf-game-body { grid-template-columns: 1fr; }
}

/* ===== LEFT ASIDE — big timer in pf-giant ===== */
#screen-game.pf-screen .pf-game-aside {
    background: var(--pf-paper);
    border-right: 1px solid var(--pf-line);
    padding: 48px 36px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
}
#screen-game.pf-screen .pf-game-aside::before {
    content: attr(data-motif);
    position: absolute;
    bottom: -80px;
    right: -40px;
    font-family: var(--pf-font-display);
    font-weight: 900;
    font-size: 360px;
    line-height: 1;
    color: var(--pf-accent);
    opacity: .06;
    font-variation-settings: "SOFT" 100;
    pointer-events: none;
}
#screen-game.pf-screen .pf-game-aside > * {
    position: relative;
    z-index: 1;
}
#screen-game.pf-screen .pf-game-timer-wrap {
    margin-top: 4px;
}
#screen-game.pf-screen .pf-game-timer-value {
    display: inline-block;
    color: var(--pf-accent) !important;
    font-size: clamp(96px, 14vw, 180px) !important;
    font-family: var(--pf-font-display) !important;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 900 !important;
    letter-spacing: -0.06em;
    line-height: 0.85;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--pf-accent) !important;
}
#screen-game.pf-screen .pf-timer-bar-wrap {
    margin-top: 8px;
}
#screen-game.pf-screen .pf-timer-bar {
    width: 100%;
    height: 6px;
    background: rgba(27, 20, 16, .12);
    border-radius: 999px;
    overflow: hidden;
}
#screen-game.pf-screen .pf-timer-fill {
    width: 100%;
    height: 100%;
    background: var(--pf-accent);
    border-radius: 999px;
}

/* Legacy ancien badge de modifier — restylé dans le nouveau chrome */
#screen-game.pf-screen #roundModifierBadge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--pf-font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--pf-accent);
    color: #fff;
    margin-left: 8px;
}
#screen-game.pf-screen #roundModifierBadge.hidden { display: none; }

/* ===== MAIN COLUMN — visualizer, question, qcm, points, feedback ===== */
#screen-game.pf-screen .pf-game-main {
    padding: 40px 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* Visualizer — restyle dans les tons terracotta/ocre */
#screen-game.pf-screen .audio-visualizer {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    margin: 0 !important;
    background: transparent !important;
}
#screen-game.pf-screen .audio-visualizer .visualizer-bar {
    width: 7px !important;
    height: 100% !important;
    background: linear-gradient(to top, var(--pf-accent), var(--pf-accent-2)) !important;
    border-radius: 999px !important;
    animation: pf-viz-bounce 1.3s ease-in-out infinite !important;
    transform-origin: center !important;
}
@keyframes pf-viz-bounce {
    0%, 100% { transform: scaleY(0.45); opacity: 0.75; }
    50%      { transform: scaleY(1);    opacity: 1; }
}
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(1)  { animation-delay: 0.00s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(2)  { animation-delay: 0.08s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(3)  { animation-delay: 0.16s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(4)  { animation-delay: 0.24s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(5)  { animation-delay: 0.32s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(6)  { animation-delay: 0.40s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(7)  { animation-delay: 0.48s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(8)  { animation-delay: 0.40s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(9)  { animation-delay: 0.32s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(10) { animation-delay: 0.24s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(11) { animation-delay: 0.16s; }
#screen-game.pf-screen .audio-visualizer .visualizer-bar:nth-child(12) { animation-delay: 0.08s; }

/* Active joker pill during round (override legacy dark-theme styling) */
#screen-game.pf-screen #activeJokerDisplay {
    background: var(--pf-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--pf-font-ui);
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 6px 24px -6px rgba(201, 74, 58, 0.5);
    animation: none;
}
#screen-game.pf-screen #activeJokerDisplay.hidden { display: none; }

/* Question — Fraunces */
#screen-game.pf-screen .game-question,
#screen-game.pf-screen #gameQuestion {
    font-family: var(--pf-font-display) !important;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 700;
    font-size: clamp(24px, 3.2vw, 38px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-align: center;
    max-width: 900px;
    color: var(--pf-ink) !important;
    margin: 4px 0 6px;
    background: none;
    -webkit-text-fill-color: currentColor;
}
#screen-game.pf-screen .game-question.hidden { display: none; }

/* QCM — 2x2 grid with A/B/C/D letters via ::before */
#screen-game.pf-screen .qcm-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 900px !important;
}
#screen-game.pf-screen .qcm-grid.hidden { display: none; }
@media (max-width: 900px) {
    #screen-game.pf-screen .qcm-grid { grid-template-columns: 1fr !important; }
}

#screen-game.pf-screen .qcm-btn {
    position: relative;
    background: var(--pf-cream) !important;
    border: 2px solid var(--pf-line) !important;
    border-radius: 16px !important;
    padding: 18px 20px 18px 72px !important;
    font-family: var(--pf-font-ui) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--pf-ink) !important;
    text-align: left !important;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    box-shadow: 0 2px 0 rgba(27, 20, 16, 0.06);
    min-height: 64px;
    width: 100%;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.3;
    font-style: normal;
}
#screen-game.pf-screen .qcm-btn::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pf-paper);
    border: 2px solid var(--pf-line);
    display: grid;
    place-items: center;
    font-family: var(--pf-font-display);
    font-variation-settings: "SOFT" 100, "opsz" 60;
    font-weight: 900;
    font-size: 18px;
    color: var(--pf-ink);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#screen-game.pf-screen .qcm-btn[data-choice="0"]::before { content: "A"; }
#screen-game.pf-screen .qcm-btn[data-choice="1"]::before { content: "B"; }
#screen-game.pf-screen .qcm-btn[data-choice="2"]::before { content: "C"; }
#screen-game.pf-screen .qcm-btn[data-choice="3"]::before { content: "D"; }

#screen-game.pf-screen .qcm-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--pf-accent) !important;
    background: #fff !important;
}
#screen-game.pf-screen .qcm-btn:hover:not(:disabled)::before {
    background: var(--pf-accent);
    color: #fff;
    border-color: var(--pf-accent);
}

#screen-game.pf-screen .qcm-btn.selected {
    border-color: var(--pf-accent) !important;
    background: color-mix(in srgb, var(--pf-accent) 10%, var(--pf-cream)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-accent) 30%, transparent);
}
#screen-game.pf-screen .qcm-btn.selected::before {
    background: var(--pf-accent);
    color: #fff;
    border-color: var(--pf-accent);
}

#screen-game.pf-screen .qcm-btn.correct {
    border-color: #2ed573 !important;
    background: rgba(46, 213, 115, 0.12) !important;
}
#screen-game.pf-screen .qcm-btn.correct::before {
    background: #2ed573;
    color: #fff;
    border-color: #2ed573;
}
#screen-game.pf-screen .qcm-btn.incorrect {
    border-color: #ff4757 !important;
    background: rgba(255, 71, 87, 0.1) !important;
    opacity: 0.8;
}
#screen-game.pf-screen .qcm-btn.incorrect::before {
    background: #ff4757;
    color: #fff;
    border-color: #ff4757;
}

#screen-game.pf-screen .qcm-btn.qcm-hidden {
    opacity: 0.2 !important;
    filter: grayscale(100%) blur(1px);
    pointer-events: none;
}
#screen-game.pf-screen .qcm-btn.qcm-highlighted {
    box-shadow: 0 0 0 3px var(--pf-accent), 0 8px 32px -8px rgba(201, 74, 58, 0.5) !important;
    animation: pf-highlight-pulse 1.4s ease-in-out infinite;
}

#screen-game.pf-screen .qcm-btn:disabled {
    cursor: default;
}

/* Points info */
#screen-game.pf-screen .points-info {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 18px;
    background: var(--pf-paper);
    border: 1px solid var(--pf-line);
    border-radius: 999px;
}
#screen-game.pf-screen .points-info.hidden { display: none; }
#screen-game.pf-screen .points-info .points-value {
    font-family: var(--pf-font-display) !important;
    font-variation-settings: "SOFT" 100, "opsz" 60;
    font-weight: 900 !important;
    font-size: 26px !important;
    color: var(--pf-accent) !important;
    line-height: 1;
    background: none !important;
    -webkit-text-fill-color: var(--pf-accent) !important;
}
#screen-game.pf-screen .points-info .points-label {
    font-family: var(--pf-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pf-ink-soft);
    font-weight: 500;
}

/* Answer feedback */
#screen-game.pf-screen .answer-feedback {
    font-family: var(--pf-font-display);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.02em;
    color: var(--pf-ink);
    text-align: center;
    padding: 18px 22px;
    border-radius: 16px;
    background: var(--pf-paper);
    border: 1px solid var(--pf-line);
    min-width: 240px;
    max-width: 620px;
}
#screen-game.pf-screen .answer-feedback.hidden { display: none; }
#screen-game.pf-screen .answer-feedback.correct {
    background: rgba(46, 213, 115, 0.12);
    border-color: #2ed573;
    color: #2ed573;
}
#screen-game.pf-screen .answer-feedback.incorrect {
    background: rgba(255, 71, 87, 0.1);
    border-color: #ff4757;
    color: #ff4757;
}

/* ===== SCOREBOARD ===== */
#screen-game.pf-screen .game-scoreboard {
    background: var(--pf-paper) !important;
    border-top: 1px solid var(--pf-line) !important;
    border-radius: 0 !important;
    padding: 14px 28px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    justify-content: center !important;
    font-family: var(--pf-font-ui) !important;
    font-size: 13px !important;
    color: var(--pf-ink) !important;
    overflow: visible !important;
}
#screen-game.pf-screen .game-scoreboard .player-score {
    background: var(--pf-cream);
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
#screen-game.pf-screen .game-scoreboard .player-score .score-value {
    font-family: var(--pf-font-display);
    font-variation-settings: "SOFT" 100, "opsz" 60;
    font-weight: 800;
    color: var(--pf-accent);
}

/* ===== JOKER DOCK (bottom sticky) ===== */
#screen-game.pf-screen .pf-joker-dock {
    background: var(--pf-ink);
    color: var(--pf-cream);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#screen-game.pf-screen .pf-joker-dock-label {
    font-family: var(--pf-font-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(245, 239, 228, 0.5);
    font-weight: 500;
}
#screen-game.pf-screen .pf-joker-dock-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
#screen-game.pf-screen .pf-joker-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid rgba(245, 239, 228, 0.25);
    border-radius: 999px;
    font-family: var(--pf-font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--pf-cream);
    background: rgba(255, 255, 255, 0.04);
    transition: opacity 0.2s ease;
}
#screen-game.pf-screen .pf-joker-chip.joker-used {
    opacity: 0.3;
    text-decoration: line-through;
}
#screen-game.pf-screen .pf-joker-dock-hint {
    font-family: var(--pf-font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 239, 228, 0.5);
}

/* ===== MOBILE ===== */
@media (max-width: 900px) {
    #screen-game.pf-screen .pf-game-aside {
        padding: 24px 22px 16px;
        border-right: none;
        border-bottom: 1px solid var(--pf-line);
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 10px 20px;
        align-items: center;
    }
    #screen-game.pf-screen .pf-game-aside::before {
        font-size: 220px;
        bottom: -60px;
        right: -20px;
    }
    #screen-game.pf-screen .pf-game-aside > .pf-eyebrow {
        grid-column: 1 / -1;
    }
    #screen-game.pf-screen .pf-game-timer-wrap { grid-column: 1; grid-row: 2; }
    #screen-game.pf-screen .pf-game-timer-value {
        font-size: clamp(56px, 18vw, 88px) !important;
    }
    #screen-game.pf-screen .pf-timer-bar-wrap {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }
    #screen-game.pf-screen .pf-game-main {
        padding: 20px 18px;
        gap: 18px;
    }
    #screen-game.pf-screen .audio-visualizer {
        height: 64px;
        gap: 4px;
    }
    #screen-game.pf-screen .audio-visualizer .visualizer-bar {
        width: 6px;
    }
    #screen-game.pf-screen .game-question {
        font-size: 20px;
    }
    #screen-game.pf-screen .qcm-btn {
        padding: 14px 16px 14px 60px !important;
        font-size: 14px !important;
        min-height: 56px;
    }
    #screen-game.pf-screen .qcm-btn::before {
        width: 34px; height: 34px;
        font-size: 16px;
        left: 12px;
    }
    #screen-game.pf-screen .game-scoreboard {
        padding: 10px 14px;
        font-size: 12px;
    }
    #screen-game.pf-screen .pf-joker-dock {
        padding: 10px 14px;
        gap: 8px;
    }
    #screen-game.pf-screen .pf-joker-chip {
        padding: 5px 10px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    #screen-game.pf-screen .pf-game-aside {
        padding: 18px 16px 14px;
    }
    #screen-game.pf-screen .pf-game-main {
        padding: 18px 14px;
    }
    #screen-game.pf-screen .game-scoreboard .player-score {
        padding: 4px 10px;
        font-size: 11px;
    }
    #screen-game.pf-screen .pf-joker-dock-label,
    #screen-game.pf-screen .pf-joker-dock-hint {
        display: none;
    }
}