/* ============================================
   ORACLE — Le Défi des Savants
   Style principal
   © 2026 enigma-game.io — Tous droits réservés
   Reproduction interdite sans autorisation.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
    --purple: #7c3aed;
    --purple-light: #a78bfa;
    --purple-dark: #4c1d95;
    --orange: #f97316;
    --orange-light: #fdba74;
    --green: #16a34a;
    --green-light: #4ade80;
    --red: #dc2626;
    --red-light: #fca5a5;
    --blue: #2563eb;
    --blue-light: #93c5fd;
    --yellow: #eab308;
    --yellow-light: #fde047;
    --pink: #ec4899;
    --bg: #1e1b4b;
    --bg2: #2e1065;
    --card: #312e81;
    --card2: #3730a3;
    --text: #f1f5f9;
    --text-muted: #c4b5fd;
    --font: 'Nunito', sans-serif;
    --font-title: 'Fredoka One', cursive;
}

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

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(124,58,237,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(99,102,241,0.1) 0%, transparent 50%);
}

#confetti-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; }

/* ===== SPLASH ===== */
#splash-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.splash-inner { text-align:center; max-width:480px; width:100%; }
.oracle-title-anim { margin-bottom:40px; animation:floatBounce 3s ease-in-out infinite; }
.oracle-eye-big { font-size:5rem; display:block; margin-bottom:10px; filter:drop-shadow(0 0 30px rgba(167,139,250,0.8)); animation:eyePulse 2s ease-in-out infinite; }
@keyframes eyePulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }
.game-title { font-family:var(--font-title); font-size:4rem; color:#fff; text-shadow:4px 4px 0 var(--purple-dark); letter-spacing:6px; }
.game-subtitle { font-size:1.1rem; color:var(--purple-light); letter-spacing:3px; font-weight:700; text-transform:uppercase; margin-top:5px; }
@keyframes floatBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

.menu-card { background:var(--card); border:3px solid rgba(167,139,250,0.2); border-radius:24px; padding:30px 25px; box-shadow:0 8px 0 rgba(0,0,0,0.3),0 0 40px rgba(124,58,237,0.3); margin-bottom:20px; }
.menu-desc { font-size:0.95rem; color:var(--text-muted); margin-bottom:20px; line-height:1.5; }

.cartoon-input { width:100%; padding:14px 18px; border-radius:16px; border:3px solid var(--purple-light); background:rgba(255,255,255,0.07); color:var(--text); font-family:var(--font); font-size:1rem; font-weight:700; outline:none; margin-bottom:14px; transition:all 0.2s; }
.cartoon-input:focus { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(234,179,8,0.3); }
.cartoon-input::placeholder { color:var(--text-muted); }

.cartoon-btn { width:100%; padding:14px 20px; border-radius:16px; border:none; font-family:var(--font-title); font-size:1.1rem; letter-spacing:1px; cursor:pointer; transition:all 0.15s; margin-bottom:10px; position:relative; top:0; }
.cartoon-btn:active { top:4px; }
.btn-green  { background:linear-gradient(180deg,var(--green-light),var(--green));         color:#fff; box-shadow:0 6px 0 #166534; }
.btn-blue   { background:linear-gradient(180deg,var(--blue-light),var(--blue));           color:#fff; box-shadow:0 6px 0 #1e3a8a; }
.btn-orange { background:linear-gradient(180deg,var(--orange-light),var(--orange));       color:#fff; box-shadow:0 6px 0 #9a3412; }
.btn-red    { background:linear-gradient(180deg,var(--red-light),var(--red));             color:#fff; box-shadow:0 6px 0 #991b1b; }
.btn-purple { background:linear-gradient(180deg,var(--purple-light),var(--purple));       color:#fff; box-shadow:0 6px 0 var(--purple-dark); }
.btn-teal   { background:linear-gradient(180deg,#5eead4,#0d9488);                         color:#fff; box-shadow:0 6px 0 #0f766e; }

.feature-pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pill { background:rgba(124,58,237,0.3); border:2px solid rgba(167,139,250,0.4); border-radius:99px; padding:6px 14px; font-size:0.8rem; font-weight:700; color:var(--purple-light); }

/* ===== GAME SCREEN ===== */
#game-screen { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

.game-header { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; background:var(--card); border-bottom:3px solid rgba(167,139,250,0.3); box-shadow:0 4px 20px rgba(0,0,0,0.3); z-index:100; }
.player-info-top { display:flex; align-items:center; gap:10px; }
.avatar-top { font-size:2rem; background:var(--card2); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:3px solid var(--purple-light); animation:avatarBounce 3s ease-in-out infinite; }
@keyframes avatarBounce { 0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);} }
.player-name-top  { font-family:var(--font-title); font-size:1.1rem; color:var(--yellow-light); }
.player-score-top { font-size:0.85rem; font-weight:800; color:var(--green-light); }
.game-logo-small  { font-family:var(--font-title); font-size:1.5rem; color:var(--purple-light); letter-spacing:2px; filter:drop-shadow(0 0 10px rgba(167,139,250,0.5)); display:flex; flex-direction:column; align-items:center; gap:3px; }

.online-badge { display:flex; align-items:center; gap:6px; background:rgba(22,163,74,0.2); border:2px solid rgba(74,222,128,0.4); padding:6px 12px; border-radius:99px; font-size:0.8rem; font-weight:700; color:var(--green-light); }
.online-dot { width:8px; height:8px; background:var(--green-light); border-radius:50%; animation:blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.2;} }

/* Indicateur IA discret — visible uniquement pendant la génération */
.ai-dot {
    width: 7px; height: 7px;
    background: var(--pink);
    border-radius: 50%;
    display: none;
    animation: aiPulse 1s infinite;
    margin-left: 2px;
}
.ai-dot.active { display: inline-block; }
@keyframes aiPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.6);} }

/* ===== ARENA ===== */
.game-arena { display:grid; grid-template-columns:260px 1fr 260px; flex:1; overflow:hidden; }

.side-panel { background:var(--card); border-right:3px solid rgba(167,139,250,0.2); padding:15px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.right-panel { border-right:none; border-left:3px solid rgba(167,139,250,0.2); }
.left-panel { overflow:hidden; }
.left-panel .live-lb { overflow-y:auto; }

.panel-title { font-family:var(--font-title); font-size:1rem; color:var(--purple-light); text-align:center; background:rgba(124,58,237,0.2); border-radius:10px; padding:6px; letter-spacing:1px; }

.live-lb { display:flex; flex-direction:column; gap:6px; flex:1; }
.lb-empty,.history-empty { text-align:center; color:var(--text-muted); font-size:0.8rem; padding:10px; opacity:0.7; }
.lb-item { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.05); border-radius:10px; padding:8px 10px; border:2px solid transparent; transition:all 0.3s; }
.lb-item.me   { border-color:var(--yellow); background:rgba(234,179,8,0.1); }
.lb-item.top1 { border-color:var(--yellow); }
.lb-item.top2 { border-color:#94a3b8; }
.lb-item.top3 { border-color:#cd7c35; }
.lb-rank  { font-family:var(--font-title); font-size:1rem; min-width:24px; text-align:center; }
.lb-name  { font-weight:700; font-size:0.85rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-score { font-weight:800; font-size:0.9rem; color:var(--yellow-light); }

.chat-box { flex:1; max-height:180px; overflow-y:auto; background:rgba(0,0,0,0.2); border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:4px; min-height:100px; }
.chat-msg .chat-author { font-weight:800; color:var(--purple-light); }
.chat-msg { font-size:0.75rem; line-height:1.4; word-break:break-word; }
.chat-msg.system { color:var(--yellow-light); font-style:italic; }
.chat-input-row { display:flex; gap:6px; }
.chat-input { flex:1; padding:8px 12px; border-radius:10px; border:2px solid rgba(167,139,250,0.3); background:rgba(255,255,255,0.07); color:var(--text); font-family:var(--font); font-size:0.8rem; outline:none; }
.chat-input:focus { border-color:var(--purple-light); }
.chat-send-btn { padding:8px 12px; border-radius:10px; border:none; background:var(--purple); color:#fff; cursor:pointer; font-size:1rem; transition:all 0.15s; }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat-card { background:rgba(255,255,255,0.05); border:2px solid rgba(167,139,250,0.2); border-radius:12px; padding:10px; text-align:center; }
.stat-val { font-family:var(--font-title); font-size:1.5rem; color:var(--yellow-light); }
.stat-lbl { font-size:0.7rem; color:var(--text-muted); font-weight:700; }

.history-box { flex:1; max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.history-item { background:rgba(255,255,255,0.04); border-left:4px solid var(--purple); border-radius:0 8px 8px 0; padding:8px 10px; font-size:0.75rem; line-height:1.4; }
.history-item.correct { border-color:var(--green); }
.history-item.wrong   { border-color:var(--red); }
.history-item.penalty { border-color:var(--orange); }
.history-item .h-q { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-item .h-a { color:var(--text-muted); font-size:0.7rem; }
.quit-btn { margin-top:auto; width:100%; font-size:0.9rem; }

/* ── BOUTONS SOCIAUX ── */
.social-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 6px;
}
.social-btn {
    flex: 1;
    font-size: 0.72rem !important;
    padding: 8px 4px !important;
    min-width: 0;
}
.contact-textarea {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 2px solid rgba(167,139,250,0.35);
    border-radius: 12px;
    color: #e9d5ff;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    padding: 10px 12px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.contact-textarea:focus { border-color: #a78bfa; }
.contact-textarea::placeholder { color: rgba(196,181,253,0.5); }

/* ===== CENTRE ===== */
.center-arena { position:relative; display:flex; flex-direction:column; align-items:center; background:linear-gradient(180deg,#1e1b4b 0%,#2e1065 50%,#1e1b4b 100%); padding:20px; overflow-y:auto; }
.oracle-character-zone { position:relative; display:flex; flex-direction:column; align-items:center; margin-bottom:15px; }

.oracle-bubble { background:#fff; color:#1e1b4b; border-radius:20px; padding:12px 18px; font-weight:800; font-size:0.95rem; max-width:280px; text-align:center; margin-bottom:10px; position:relative; box-shadow:0 8px 0 rgba(0,0,0,0.3); border:3px solid var(--purple-light); animation:bubblePop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.oracle-bubble::after { content:''; position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); border-left:12px solid transparent; border-right:12px solid transparent; border-top:18px solid var(--purple-light); }
@keyframes bubblePop { from{transform:scale(0);opacity:0;} to{transform:scale(1);opacity:1;} }

/* ===== EYE ORACLE CHARACTER ===== */
.oracle-body { position:relative; display:flex; flex-direction:column; align-items:center; }

/* Eye scene container */
.eye-scene { position:relative; display:inline-block; margin-bottom:8px; }

/* Orbital rings */
.orbit-ring { position:absolute; top:50%; left:50%; border-radius:50%; border-style:solid; border-color:transparent; pointer-events:none; transform-origin:center; animation:orbit-spin var(--os) linear infinite; }
@keyframes orbit-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.orbit-1 { width:290px; height:290px; border-top-color:rgba(160,80,255,0.35); border-left-color:rgba(160,80,255,0.15); border-width:2px; --os:12s; transform:translate(-50%,-50%); }
.orbit-2 { width:340px; height:200px; border-top-color:rgba(80,160,255,0.2); border-right-color:rgba(80,160,255,0.1); border-width:1px; --os:18s; transform:translate(-50%,-50%) rotate(40deg); animation:orbit-spin2 18s linear infinite; }
@keyframes orbit-spin2 { to { transform:translate(-50%,-50%) rotate(calc(40deg + 360deg)); } }
.orbit-3 { width:400px; height:400px; border-bottom-color:rgba(255,100,200,0.12); border-left-color:rgba(255,100,200,0.06); border-width:1px; --os:26s; transform:translate(-50%,-50%) rotate(-20deg); animation:orbit-spin3 26s linear infinite reverse; }
@keyframes orbit-spin3 { to { transform:translate(-50%,-50%) rotate(calc(-20deg - 360deg)); } }
.orbit-dot { position:absolute; border-radius:50%; background:rgba(200,140,255,0.8); box-shadow:0 0 6px rgba(200,140,255,0.9); }

/* Ambient glow */
.eye-glow-outer { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(120,50,220,0.22) 0%, transparent 70%); animation:glow-breathe 4s ease-in-out infinite; pointer-events:none; }
@keyframes glow-breathe { 0%,100%{transform:translate(-50%,-50%) scale(1); opacity:0.7;} 50%{transform:translate(-50%,-50%) scale(1.18); opacity:1;} }

/* Eye body */
.eye-body { width:160px; height:160px; border-radius:50%; position:relative; margin:0 auto; animation:eye-float 5s ease-in-out infinite; transition:box-shadow 0.4s; }
@keyframes eye-float { 0%,100%{transform:translateY(0) rotate(-1.5deg);} 33%{transform:translateY(-16px) rotate(2deg);} 66%{transform:translateY(-8px) rotate(-3deg);} }
.eye-body.angry { box-shadow:0 0 40px rgba(255,50,50,0.7); animation:eye-float 5s ease-in-out infinite, angryShake 0.4s; }
.eye-body.happy { box-shadow:0 0 40px rgba(50,255,120,0.6); animation:eye-float 5s ease-in-out infinite, happyWiggle 0.5s; }

/* Sclera */
.eye-sclera { width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 38% 32%, #e8dcff 0%, #c0a0f0 28%, #7040c0 55%, #2a1060 80%, #100830 100%); border:4px solid rgba(80,30,150,0.8); box-shadow:0 0 0 6px rgba(100,50,200,0.12), 0 0 0 14px rgba(100,50,200,0.06), 0 0 40px rgba(120,60,220,0.5), 0 0 80px rgba(80,30,180,0.25), inset 0 -30px 50px rgba(0,0,0,0.5); position:relative; overflow:hidden; }
.sclera-vein { position:absolute; background:rgba(160,80,255,0.25); border-radius:999px; transform-origin:left center; }

/* Iris */
.eye-iris { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%; background:conic-gradient(from 0deg, #001aff, #7700ff, #cc00aa, #ff0066, #ff6600, #ffcc00, #00ff88, #00ccff, #001aff); animation:iris-spin 10s linear infinite; box-shadow:0 0 20px rgba(150,80,255,0.6); }
@keyframes iris-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.eye-iris::after { content:''; position:absolute; inset:6px; border-radius:50%; background:radial-gradient(circle, #1a0040 40%, #3a00a0 100%); }

/* Pupil */
.eye-pupil { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #1a0a2a, #000); z-index:3; animation:pupil-drift 7s ease-in-out infinite; }
@keyframes pupil-drift { 0%,100%{transform:translate(-50%,-50%);} 15%{transform:translate(calc(-50% + 10px), calc(-50% - 8px));} 30%{transform:translate(calc(-50% - 8px), calc(-50% + 6px));} 50%{transform:translate(calc(-50% + 6px), calc(-50% + 10px));} 65%{transform:translate(calc(-50% - 10px), calc(-50% - 4px));} 80%{transform:translate(calc(-50% + 2px), calc(-50% - 12px));} }
.pupil-slit { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:38px; background:#000; border-radius:999px; z-index:4; }
.eye-shine-main { position:absolute; top:7px; right:10px; width:14px; height:14px; background:radial-gradient(circle, rgba(255,255,255,0.95) 40%, transparent 100%); border-radius:50%; z-index:5; }
.eye-shine-2 { position:absolute; top:18px; right:7px; width:7px; height:7px; background:rgba(255,255,255,0.5); border-radius:50%; z-index:5; }
.eye-shine-3 { position:absolute; bottom:12px; left:12px; width:5px; height:5px; background:rgba(150,200,255,0.4); border-radius:50%; z-index:5; }

/* Eyelids blink */
.eye-lid-top, .eye-lid-bot { position:absolute; left:-4px; right:-4px; background:#04020e; z-index:6; }
.eye-lid-top { top:-4px; height:86px; transform:scaleY(0); transform-origin:center top; border-radius:0 0 60% 60%; animation:lid-blink 7s ease-in-out infinite; }
.eye-lid-bot { bottom:-4px; height:86px; transform:scaleY(0); transform-origin:center bottom; border-radius:60% 60% 0 0; animation:lid-blink 7s ease-in-out infinite; }
@keyframes lid-blink { 0%,78%,86%,100%{transform:scaleY(0);} 80%,84%{transform:scaleY(1);} }

/* Mystic tear */
.mystic-tear { position:absolute; bottom:-14px; left:40px; width:10px; height:16px; background:linear-gradient(180deg, rgba(100,200,255,0.8), rgba(60,120,220,0.4)); border-radius:50% 50% 60% 60%; animation:tear-fall 6s ease-in-out infinite 3s; z-index:8; box-shadow:0 0 8px rgba(100,200,255,0.5); }
@keyframes tear-fall { 0%,15%,100%{transform:translateY(0) scaleY(1); opacity:0.8;} 40%{transform:translateY(30px) scaleY(1.4); opacity:0;} 41%{transform:translateY(0) scaleY(0); opacity:0;} 42%{transform:translateY(0) scaleY(1); opacity:0.8;} }

/* Eyebrows */
.brow { position:absolute; height:5px; background:#1a0840; border-radius:999px; z-index:8; box-shadow:0 0 6px rgba(150,80,255,0.4); }
.brow-l { width:36px; top:-18px; left:14px; transform:rotate(-20deg); animation:brow-arch 4s ease-in-out infinite; }
.brow-r { width:36px; top:-18px; right:14px; transform:rotate(20deg); animation:brow-arch 4s ease-in-out infinite 0.5s; }
@keyframes brow-arch { 0%,100%{transform:rotate(var(--bra,-20deg)) scaleX(1);} 50%{transform:rotate(var(--bra,-20deg)) scaleX(0.85) translateY(-3px);} }

/* Floating runes */
.rune { position:absolute; font-family:'Cinzel',serif; color:rgba(180,120,255,0.5); font-size:var(--rs,1rem); animation:rune-orbit var(--rd,8s) linear infinite var(--rdelay,0s); pointer-events:none; text-shadow:0 0 10px rgba(180,120,255,0.6); }
@keyframes rune-orbit { from{transform:rotate(var(--rstart,0deg)) translateX(var(--rr,110px)) rotate(calc(-1 * var(--rstart,0deg)));} to{transform:rotate(calc(var(--rstart,0deg) + 360deg)) translateX(var(--rr,110px)) rotate(calc(-1 * (var(--rstart,0deg) + 360deg)));} }

.oracle-enigma-bubble { margin-top:20px; background:rgba(0,0,0,0.45); border:2px solid var(--purple-light); border-radius:12px; padding:5px 14px; text-align:center; white-space:nowrap; box-shadow:0 0 10px rgba(124,58,237,0.4); }
.oracle-enigma-label { color:var(--text-muted); font-size:0.7rem; display:block; line-height:1.2; font-weight:700; }
.oracle-enigma-val { font-family:var(--font-title); font-size:1.4rem; color:var(--purple-light); line-height:1.1; display:block; }
.oracle-enigma-unit { color:var(--text-muted); font-size:0.65rem; font-weight:700; }

.oracle-hat  { font-size:3rem; position:relative; z-index:2; margin-bottom:-10px; }
@keyframes happyWiggle { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-10deg) scale(1.2);} 75%{transform:rotate(10deg) scale(1.2);} }
@keyframes angryShake  { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-6px);} 40%,80%{transform:translateX(6px);} }
@keyframes glowPulse { 0%,100%{opacity:0.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.2);} }
.oracle-glow { position:absolute; inset:-30px; background:radial-gradient(circle,rgba(167,139,250,0.25) 0%,transparent 65%); border-radius:50%; pointer-events:none; animation:glowPulse 2s ease-in-out infinite; }

.question-zone { width:100%; max-width:560px; display:flex; flex-direction:column; gap:12px; }
.difficulty-badge { text-align:center; font-family:var(--font-title); font-size:0.9rem; padding:6px 18px; border-radius:99px; display:inline-block; align-self:center; }
.difficulty-badge.easy   { background:rgba(22,163,74,0.3);  border:2px solid var(--green);  color:var(--green-light); }
.difficulty-badge.medium { background:rgba(234,179,8,0.3);  border:2px solid var(--yellow); color:var(--yellow-light); }
.difficulty-badge.hard   { background:rgba(249,115,22,0.3); border:2px solid var(--orange); color:var(--orange-light); }
.difficulty-badge.expert { background:rgba(220,38,38,0.3);  border:2px solid var(--red);    color:var(--red-light); }

.question-card { background:rgba(255,255,255,0.06); border:3px solid rgba(167,139,250,0.4); border-radius:20px; padding:25px 20px; box-shadow:0 0 40px rgba(124,58,237,0.2); }
.question-text { font-size:1.15rem; font-weight:800; text-align:center; line-height:1.6; color:#fff; }

/* ===== ÉNIGME VISUELLE ===== */
.visual-question-img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: 14px;
    border: 2px solid rgba(167,139,250,0.35);
    box-shadow: 0 0 24px rgba(124,58,237,0.3);
    display: block;
    background: rgba(0,0,0,0.2);
}
/* Animation blur → net pour le type visual_reveal */
@keyframes unblur {
    from { filter: blur(18px); }
    to   { filter: blur(0px);  }
}
.visual-question-img.reveal {
    animation: unblur var(--reveal-duration, 10s) linear forwards;
}

.timer-zone   { display:flex; align-items:center; gap:10px; }
.timer-bar-bg { flex:1; height:16px; background:rgba(255,255,255,0.1); border-radius:99px; overflow:hidden; border:2px solid rgba(255,255,255,0.15); }
.timer-bar    { height:100%; background:linear-gradient(90deg,var(--green),var(--green-light)); border-radius:99px; transition:width 1s linear,background 0.5s; }
.timer-bar.warning { background:linear-gradient(90deg,var(--yellow),var(--yellow-light)); }
.timer-bar.danger  { background:linear-gradient(90deg,var(--red),var(--red-light)); animation:timerDanger 0.5s infinite alternate; }
@keyframes timerDanger { from{opacity:1;} to{opacity:0.5;} }
.timer-text { font-family:var(--font-title); font-size:1.1rem; min-width:50px; text-align:right; color:var(--yellow-light); }

.hint-zone { background:rgba(234,179,8,0.1); border:2px solid rgba(234,179,8,0.4); border-radius:12px; padding:10px 15px; font-size:0.9rem; }
.hint-label { font-weight:800; color:var(--yellow-light); margin-right:6px; }

.answer-zone { display:flex; gap:10px; }
.answer-input { flex:1; padding:14px 18px; border-radius:16px; border:3px solid var(--purple-light); background:rgba(255,255,255,0.07); color:var(--text); font-family:var(--font); font-size:1rem; font-weight:700; outline:none; transition:all 0.2s; }
.answer-input:focus { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(234,179,8,0.3); }
.answer-btn { width:auto; padding:14px 20px; white-space:nowrap; margin-bottom:0; }
.answer-input.correct { border-color:var(--green); background:rgba(22,163,74,0.15); animation:correctPop 0.4s; }
.answer-input.wrong   { border-color:var(--red);   background:rgba(220,38,38,0.15); animation:wrongShake 0.4s; }
@keyframes correctPop { 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} }
@keyframes wrongShake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-6px);} 40%,80%{transform:translateX(6px);} }

.waiting-zone { text-align:center; padding:30px; }
.waiting-text { font-family:var(--font-title); font-size:1.2rem; color:var(--purple-light); margin-bottom:15px; }
.waiting-dots span { display:inline-block; font-size:2rem; color:var(--purple-light); animation:dotBounce 1.4s infinite both; }
.waiting-dots span:nth-child(2){animation-delay:0.2s;}
.waiting-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes dotBounce { 0%,80%,100%{transform:scale(0);} 40%{transform:scale(1.2);} }

.result-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); z-index:50; }
.result-card { background:var(--card); border:4px solid var(--purple-light); border-radius:24px; padding:40px; text-align:center; box-shadow:0 8px 0 rgba(0,0,0,0.3),0 0 60px rgba(124,58,237,0.4); animation:resultPop 0.5s cubic-bezier(0.34,1.56,0.64,1); max-width:360px; }
@keyframes resultPop { from{transform:scale(0.5) rotate(-5deg);opacity:0;} to{transform:scale(1) rotate(0);opacity:1;} }
.result-emoji  { font-size:4rem; display:block; margin-bottom:10px; }
.result-title  { font-family:var(--font-title); font-size:1.8rem; margin-bottom:8px; }
.result-detail { font-size:0.95rem; color:var(--text-muted); line-height:1.5; }
.result-card.success { border-color:var(--green); }
.result-card.success .result-title { color:var(--green-light); }
.result-card.failure { border-color:var(--red); }
.result-card.failure .result-title { color:var(--red-light); }
.result-card.penalty { border-color:var(--orange); }
.result-card.penalty .result-title { color:var(--orange-light); }

/* ===== MODALS ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(10px); z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal-box { background:var(--card); border:3px solid var(--purple-light); border-radius:24px; padding:30px; max-width:480px; width:90%; box-shadow:0 8px 0 rgba(0,0,0,0.3),0 0 60px rgba(124,58,237,0.4); max-height:80vh; overflow-y:auto; animation:resultPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.modal-title { font-family:var(--font-title); font-size:1.5rem; text-align:center; margin-bottom:20px; color:var(--yellow-light); }
.lb-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.lb-list-item { display:flex; align-items:center; gap:12px; padding:12px 15px; background:rgba(255,255,255,0.05); border-radius:12px; border:2px solid transparent; }
.lb-list-item:nth-child(1){border-color:var(--yellow);background:rgba(234,179,8,0.1);}
.lb-list-item:nth-child(2){border-color:#94a3b8;}
.lb-list-item:nth-child(3){border-color:#cd7c35;}
.lb-medal  { font-size:1.5rem; min-width:30px; }
.lb-pname  { font-weight:800; flex:1; }
.lb-pscore { font-family:var(--font-title); font-size:1.1rem; color:var(--yellow-light); }

/* ===== TOAST ===== */
.toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:var(--card2); border:3px solid var(--purple-light); border-radius:16px; padding:14px 24px; font-weight:800; font-size:0.95rem; z-index:9000; box-shadow:0 8px 0 rgba(0,0,0,0.3); text-align:center; max-width:90vw; }

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0.05); border-radius:99px; }
::-webkit-scrollbar-thumb { background:var(--purple); border-radius:99px; }

/* ===== RESPONSIVE — TABLETTE (max 900px) ===== */
@media (max-width: 900px) {
    .game-arena { grid-template-columns:1fr; overflow-y:auto; }
    .side-panel { border-right:none; border-left:none; border-bottom:3px solid rgba(167,139,250,0.2); max-height:250px; }
    .right-panel { border-top:3px solid rgba(167,139,250,0.2); border-left:none; }
    .center-arena { min-height:400px; }
    .answer-zone { flex-direction:column; }
    .answer-btn { width:100%; }
    .game-logo-small { display:none; }
}

/* ===== RESPONSIVE — MOBILE (max 600px) ===== */
@media (max-width: 600px) {

    /* --- Splash/Menu --- */
    .game-title { font-size:2.8rem; letter-spacing:4px; }
    .game-subtitle { font-size:0.9rem; letter-spacing:2px; }
    .oracle-eye-big { font-size:3.5rem; }
    .menu-card { padding:20px 16px; border-radius:18px; }
    .cartoon-btn { font-size:1rem; padding:12px 16px; }
    .enigma-count-selector { gap:6px; }
    .enigma-btn { font-size:1.1rem; padding:10px 0; }
    .room-code-input-big { font-size:1.5rem; letter-spacing:6px; padding:12px 8px; }
    .room-code-big { font-size:2.4rem; letter-spacing:8px; padding:14px 16px; }
    .feature-pills { gap:5px; }
    .pill { font-size:0.7rem; padding:4px 10px; }

    /* --- Header de jeu --- */
    .game-header { padding:8px 12px; flex-wrap:nowrap; gap:6px; }
    .avatar-top { width:38px; height:38px; font-size:1.5rem; border-width:2px; }
    .player-name-top { font-size:0.9rem; }
    .player-score-top { font-size:0.75rem; }
    .online-badge { padding:4px 8px; font-size:0.7rem; gap:4px; flex-direction:column; align-items:flex-end; }
    .enigma-progress-badge { font-size:0.8rem; padding:2px 7px; margin-top:2px; }

    /* --- Arène centrale --- */
    .center-arena { padding:12px 10px; }
    .eye-body { width:120px; height:120px; }
    .eye-iris { width:72px; height:72px; }
    .eye-pupil { width:36px; height:36px; }
    .orbit-1 { width:220px; height:220px; }
    .orbit-2 { width:260px; height:155px; }
    .orbit-3 { width:300px; height:300px; }
    .eye-glow-outer { width:200px; height:200px; }
    .oracle-bubble { font-size:0.8rem; padding:8px 12px; max-width:220px; }
    .oracle-character-zone { margin-bottom:8px; }

    /* --- Question --- */
    .question-zone { gap:8px; }
    .question-text { font-size:0.95rem; line-height:1.5; }
    .question-card { padding:16px 14px; border-radius:14px; }
    .difficulty-badge { font-size:0.8rem; padding:4px 14px; }
    .timer-text { font-size:0.95rem; min-width:42px; }
    .hint-zone { font-size:0.8rem; padding:8px 12px; }
    .answer-input { padding:11px 14px; font-size:0.95rem; }
    .answer-zone { flex-direction:column; gap:8px; }
    .answer-btn { width:100%; font-size:0.95rem; padding:12px; }

    /* --- Panneaux latéraux --- */
    .side-panel { padding:10px; max-height:200px; }
    .panel-title { font-size:0.85rem; padding:4px; }
    .lb-item { padding:6px 8px; }
    .lb-name { font-size:0.75rem; }
    .lb-score { font-size:0.8rem; }
    .chat-box { max-height:120px; min-height:70px; }
    .chat-msg { font-size:0.7rem; }
    .chat-input { font-size:0.75rem; padding:6px 10px; }
    .stats-grid { gap:5px; }
    .stat-val { font-size:1.2rem; }
    .stat-lbl { font-size:0.6rem; }
    .history-box { max-height:150px; }
    .history-item { font-size:0.7rem; padding:6px 8px; }
    .quit-btn { font-size:0.8rem; padding:10px; }

    /* --- Résultat --- */
    .result-card { padding:24px 18px; max-width:90vw; }
    .result-emoji { font-size:3rem; }
    .result-title { font-size:1.4rem; }
    .result-detail { font-size:0.85rem; }

    /* --- Modals --- */
    .modal-box { padding:20px 16px; border-radius:18px; }
    .modal-title { font-size:1.2rem; }
    .room-modal-box { max-width:95vw; }
}

/* ===== RESPONSIVE — TRÈS PETIT ÉCRAN (max 380px) ===== */
@media (max-width: 380px) {
    .game-title { font-size:2.2rem; letter-spacing:2px; }
    .oracle-eye-big { font-size:3rem; }
    .game-header { padding:6px 8px; }
    .player-name-top { font-size:0.8rem; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .question-text { font-size:0.88rem; }
    .room-code-input-big { font-size:1.2rem; letter-spacing:4px; }
    .room-code-big { font-size:2rem; letter-spacing:6px; }
    .enigma-btn { font-size:1rem; padding:8px 0; }
    .cartoon-btn { font-size:0.9rem; padding:10px 12px; }
}

/* ===== ROOMS PRIVÉES ===== */
.room-divider { text-align:center; color:var(--text-muted); font-size:0.85rem; margin:10px 0; }
.room-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.room-actions .cartoon-btn { flex:1; min-width:140px; padding:10px 14px; font-size:0.9rem; }

.btn-purple { background:linear-gradient(180deg,#a855f7,#7c3aed); border-color:#581c87; color:#fff; }
.btn-purple:hover { background:linear-gradient(180deg,#c084fc,#9333ea); }
.btn-teal   { background:linear-gradient(180deg,#14b8a6,#0d9488); border-color:#0f766e; color:#fff; }
.btn-teal:hover { background:linear-gradient(180deg,#2dd4bf,#14b8a6); }

.room-badge {
    display:inline-block;
    background:rgba(167,139,250,0.2);
    border:2px solid var(--purple-light);
    border-radius:10px;
    padding:2px 8px;
    font-size:0.7rem;
    font-family:monospace;
    letter-spacing:2px;
    cursor:pointer;
    margin-top:4px;
    transition:background 0.2s;
}
.room-badge:hover { background:rgba(167,139,250,0.4); }

#room-code-input { letter-spacing:4px; font-size:1.2em; text-align:center; font-weight:900; }

/* ===== SÉLECTEUR ÉNIGMES ===== */
.enigma-count-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 10px 0 6px;
    text-align: center;
}
.enigma-count-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}
.enigma-btn {
    flex: 1;
    padding: 12px 0;
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 900;
    border: 3px solid var(--purple-light);
    border-radius: 14px;
    background: var(--card);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.enigma-btn:hover {
    background: var(--card2);
    color: var(--text);
    transform: translateY(-2px);
}
.enigma-btn.active {
    background: linear-gradient(180deg, var(--purple-light), var(--purple));
    border-color: var(--purple-dark);
    color: #fff;
    box-shadow: 0 4px 0 var(--purple-dark);
    transform: translateY(-2px);
}

/* ===== GRAND INPUT CODE ROOM ===== */
.room-code-input-big {
    width: 100%;
    padding: 16px 10px;
    font-family: 'Fredoka One', monospace;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 10px;
    text-align: center;
    text-transform: uppercase;
    background: var(--card);
    border: 3px solid var(--purple-light);
    border-radius: 16px;
    color: var(--yellow-light);
    margin-bottom: 10px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.room-code-input-big:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(234,179,8,0.25);
}
.room-code-input-big::placeholder {
    color: rgba(196,181,253,0.4);
    letter-spacing: 6px;
    font-size: 1.4rem;
}

/* ===== MODAL CODE ROOM CRÉÉE ===== */
.room-modal-box {
    text-align: center;
    max-width: 380px;
}
.room-modal-icon {
    font-size: 3rem;
    margin-bottom: 6px;
}
.room-modal-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 16px;
}
.room-code-big {
    font-family: 'Fredoka One', monospace;
    font-size: 3.5rem;
    letter-spacing: 14px;
    color: var(--yellow-light);
    background: var(--card);
    border: 4px solid var(--yellow);
    border-radius: 20px;
    padding: 18px 24px;
    margin: 0 auto 20px;
    text-shadow: 0 2px 8px rgba(234,179,8,0.4);
    box-shadow: 0 6px 0 rgba(0,0,0,0.3);
    user-select: all;
}

/* ===== BADGE PROGRESSION ÉNIGMES ===== */
.enigma-progress-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(124,58,237,0.35);
    border: 2px solid var(--purple-light);
    border-radius: 10px;
    padding: 3px 10px;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 900;
    color: var(--text);
    margin-top: 4px;
    transition: background 0.3s, border-color 0.3s;
    white-space: nowrap;
}
.enigma-progress-badge.danger {
    background: rgba(220,38,38,0.35);
    border-color: var(--red-light);
    color: var(--red-light);
    animation: pulse-danger 0.8s infinite alternate;
}
.enigma-progress-badge.done {
    background: rgba(22,163,74,0.35);
    border-color: var(--green-light);
    color: var(--green-light);
}
@keyframes pulse-danger {
    from { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
    to   { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* ===== BOUTON MUTE ===== */
.mute-btn {
    background: rgba(124,58,237,0.3);
    border: 2px solid rgba(167,139,250,0.4);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
    color: #fff;
}
.mute-btn:hover {
    background: rgba(124,58,237,0.6);
    border-color: var(--purple-light);
    transform: scale(1.1);
}
.mute-btn:active { transform: scale(0.95); }

@media (max-width: 600px) {
    .mute-btn { font-size: 1rem; padding: 5px 8px; }
}

/* ===== PODIUM ===== */
.podium-modal-box {
    max-width: 560px;
    width: 95%;
    padding: 30px 20px 20px;
}
.podium-title {
    font-family: var(--font-title);
    font-size: 2rem;
    color: var(--yellow-light);
    text-align: center;
    margin-bottom: 24px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    letter-spacing: 2px;
}
.podium-container { width: 100%; }
.podium-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.podium-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 160px;
}
.podium-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    width: 100%;
    transition: transform 0.2s;
}
.podium-player.podium-me {
    background: rgba(234,179,8,0.15);
    border: 2px solid var(--yellow);
    animation: podiumMePulse 1.5s ease-in-out infinite;
}
@keyframes podiumMePulse { 0%,100%{box-shadow:0 0 0 0 rgba(234,179,8,0.3);} 50%{box-shadow:0 0 0 8px rgba(234,179,8,0);} }
.podium-avatar { font-size: 2rem; line-height: 1; }
.podium-name {
    font-family: var(--font-title);
    font-size: 0.85rem;
    color: var(--text);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.podium-score {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--yellow-light);
    margin-top: 2px;
}
.podium-block {
    width: 100%;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    position: relative;
}
.podium-medal { position: absolute; top: 8px; }
.podium-1st {
    height: 120px;
    background: linear-gradient(180deg, #fde047, #eab308);
    box-shadow: 0 0 20px rgba(234,179,8,0.5), inset 0 2px 0 rgba(255,255,255,0.3);
}
.podium-2nd {
    height: 85px;
    background: linear-gradient(180deg, #e2e8f0, #94a3b8);
    box-shadow: 0 0 15px rgba(148,163,184,0.4), inset 0 2px 0 rgba(255,255,255,0.3);
}
.podium-3rd {
    height: 60px;
    background: linear-gradient(180deg, #fdba74, #cd7c2f);
    box-shadow: 0 0 12px rgba(205,124,47,0.4), inset 0 2px 0 rgba(255,255,255,0.3);
}
.podium-rest {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 16px;
}
.podium-rest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}
.podium-rest-item.podium-me {
    background: rgba(234,179,8,0.1);
    color: var(--yellow-light);
}
.podium-rest-rank { font-size: 1rem; min-width: 36px; }
.podium-rest-score { margin-left: auto; color: var(--green-light); }
.podium-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.podium-actions .cartoon-btn { margin-bottom: 0; }

/* ===== PLEIN ÉCRAN ===== */
:fullscreen #game-screen,
:-webkit-full-screen #game-screen {
    height: 100vh;
}
@media (hover: hover) and (pointer: fine) {
    /* Afficher le bouton fullscreen uniquement sur non-tactile via JS */
}

/* ===== ANAGRAMME ===== */
.anagram-label {
    font-size: 0.85rem;
    color: var(--purple-light, #c084fc);
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.anagram-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 8px 4px;
    min-height: 48px;
}
.anagram-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border: 2px solid #a78bfa;
    border-radius: 8px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 3px 0 #3730a3, 0 0 8px rgba(167,139,250,0.3);
    animation: tilePop 0.4s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: var(--delay, 0s);
    cursor: default;
    user-select: none;
}
.anagram-tile.space {
    background: transparent;
    border: 2px dashed rgba(167,139,250,0.35);
    box-shadow: none;
    color: rgba(167,139,250,0.5);
    font-size: 0.7rem;
    font-weight: 600;
    width: 28px;
}
@keyframes tilePop {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* ===== SPEED REVEAL ===== */
.speed-label {
    font-size: 0.85rem;
    color: #f97316;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulseSlow 1.5s ease-in-out infinite;
}
@keyframes pulseSlow {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}
.speed-reveal-display {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 8px 4px;
    min-height: 48px;
    font-family: 'Courier New', monospace;
}
.speed-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 30px;
    font-size: 1.05rem;
    font-weight: 900;
    color: #fcd34d;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(252,211,77,0.4);
    transition: color 0.2s, border-color 0.2s;
}
.speed-char.revealed {
    color: #fcd34d;
    border-bottom-color: #fcd34d;
    animation: revealFlash 0.3s ease;
}
.speed-char.hidden {
    color: transparent;
    border-bottom-color: rgba(252,211,77,0.2);
}
.speed-char.space-char {
    border-bottom: none;
    width: 12px;
}
@keyframes revealFlash {
    0%   { color: #fff; transform: scale(1.3); }
    100% { color: #fcd34d; transform: scale(1); }
}

/* ===== SALLE D'ATTENTE (LOBBY) ===== */
.lobby-modal-box {
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.lobby-header {
    text-align: center;
    margin-bottom: 8px;
}
.lobby-icon { font-size: 2.5rem; margin-bottom: 6px; }
.lobby-room-code {
    display: inline-block;
    background: rgba(124,58,237,0.3);
    border: 2px solid var(--purple-light);
    border-radius: 12px;
    padding: 6px 20px;
    font-family: 'Bebas Neue', 'Fredoka One', cursive;
    font-size: 2rem;
    color: var(--yellow-light);
    letter-spacing: 6px;
    margin-top: 6px;
}
.lobby-desc {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 14px;
}
.lobby-copy-btn { margin-bottom: 16px; }
.lobby-section-title {
    font-family: var(--font-title);
    font-size: 0.95rem;
    color: var(--purple-light);
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-left: 4px;
}
.lobby-pending-list,
.lobby-approved-list {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 8px;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lobby-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 10px 0;
    opacity: 0.7;
}
.lobby-player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 8px 12px;
    animation: lobbyRowIn 0.3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lobbyRowIn {
    from { transform: translateX(-20px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
.lobby-player-avatar { font-size: 1.6rem; }
.lobby-player-name {
    flex: 1;
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--text);
}
.lobby-player-actions { display: flex; gap: 6px; }
.lobby-btn-accept,
.lobby-btn-reject {
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 800;
    transition: transform 0.1s;
}
.lobby-btn-accept:active,
.lobby-btn-reject:active { transform: scale(0.92); }
.lobby-btn-accept {
    background: linear-gradient(180deg, var(--green-light), var(--green));
    color: #fff;
    box-shadow: 0 3px 0 #166534;
}
.lobby-btn-reject {
    background: linear-gradient(180deg, var(--red-light), var(--red));
    color: #fff;
    box-shadow: 0 3px 0 #991b1b;
}
.lobby-approved-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(22,163,74,0.12);
    border: 1px solid rgba(74,222,128,0.25);
    border-radius: 10px;
    padding: 8px 12px;
}
.lobby-approved-check { color: var(--green-light); font-size: 1.1rem; }

/* ===== ATTENTE APPROBATION (JOUEUR) ===== */
.pending-player-card {
    background: rgba(124,58,237,0.2);
    border: 2px solid rgba(167,139,250,0.3);
    border-radius: 16px;
    padding: 16px 24px;
    margin: 16px auto 0;
    display: inline-block;
    min-width: 160px;
}
.pending-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.pending-dots span {
    width: 10px; height: 10px;
    background: var(--purple-light);
    border-radius: 50%;
    animation: dotBounce 1.2s ease-in-out infinite;
}
.pending-dots span:nth-child(2) { animation-delay: 0.2s; }
.pending-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1.2); opacity: 1; }
}

/* ============================================
   ZONE AUDIO — Énigmes musicales
   ============================================ */
.audio-player-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(249,115,22,0.15));
    border: 2px solid rgba(167,139,250,0.4);
    border-radius: 18px;
    padding: 18px 20px;
    margin: 10px 0;
    box-shadow: 0 0 24px rgba(124,58,237,0.2);
}

/* Barres d'égaliseur animées */
.audio-wave-anim {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
}
.audio-wave-anim span {
    display: block;
    width: 6px;
    background: linear-gradient(to top, var(--orange), var(--purple-light));
    border-radius: 3px;
    animation: audioBar 0.9s ease-in-out infinite alternate;
    transform-origin: bottom;
}
.audio-wave-anim span:nth-child(1)  { height: 30%; animation-delay: 0.0s; }
.audio-wave-anim span:nth-child(2)  { height: 70%; animation-delay: 0.1s; }
.audio-wave-anim span:nth-child(3)  { height: 50%; animation-delay: 0.2s; }
.audio-wave-anim span:nth-child(4)  { height: 90%; animation-delay: 0.05s; }
.audio-wave-anim span:nth-child(5)  { height: 40%; animation-delay: 0.15s; }
.audio-wave-anim span:nth-child(6)  { height: 80%; animation-delay: 0.25s; }
.audio-wave-anim span:nth-child(7)  { height: 55%; animation-delay: 0.08s; }
.audio-wave-anim span:nth-child(8)  { height: 65%; animation-delay: 0.18s; }
.audio-wave-anim span:nth-child(9)  { height: 35%; animation-delay: 0.12s; }
.audio-wave-anim span:nth-child(10) { height: 75%; animation-delay: 0.22s; }
.audio-wave-anim.paused span {
    animation-play-state: paused;
}
@keyframes audioBar {
    0%   { transform: scaleY(0.3); opacity: 0.6; }
    100% { transform: scaleY(1);   opacity: 1; }
}

/* Style natif de l'élément <audio> */
#audio-player {
    accent-color: var(--orange);
    filter: drop-shadow(0 2px 8px rgba(249,115,22,0.3));
}

/* Bouton Réécouter */
.audio-replay-btn {
    background: linear-gradient(135deg, var(--purple), var(--orange));
    border: none;
    border-radius: 20px;
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 20px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 12px rgba(124,58,237,0.4);
}
.audio-replay-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 5px 18px rgba(249,115,22,0.5);
}

/* Bandeau alerte énigme audio */
.audio-alert-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(249,115,22,0.12));
    border: 2px solid rgba(234,179,8,0.5);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    animation: audioPulse 2s ease-in-out infinite;
}
.audio-alert-icon { font-size: 1.4rem; }
.audio-alert-text {
    font-family: 'Fredoka One', cursive;
    font-size: 0.95rem;
    color: #fde047;
    letter-spacing: 0.3px;
}
@keyframes audioPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(234,179,8,0); }
}

/* Ligne boutons audio */
.audio-controls-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Bouton mute jeu pendant audio */
.audio-gamemute-btn {
    background: linear-gradient(135deg, #1e3a5f, #1d4ed8);
    border: 2px solid rgba(59,130,246,0.5);
    border-radius: 20px;
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
    box-shadow: 0 3px 12px rgba(29,78,216,0.4);
}
.audio-gamemute-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 5px 18px rgba(29,78,216,0.5);
}
.audio-gamemute-btn.muted {
    background: linear-gradient(135deg, #7f1d1d, #dc2626);
    border-color: rgba(220,38,38,0.5);
    box-shadow: 0 3px 12px rgba(220,38,38,0.4);
}

/* ============================================================
   MODE ARÈNE — BOSS FIGHT
   ============================================================ */

/* Barre de vie Oracle */
.arena-boss-zone {
    width: 100%;
    padding: 8px 20px 6px;
    background: linear-gradient(180deg, rgba(30,10,60,0.7) 0%, rgba(0,0,0,0.4) 100%);
    border-bottom: 1px solid rgba(124,58,237,0.4);
    box-shadow: inset 0 -1px 0 rgba(167,139,250,0.1), 0 4px 16px rgba(0,0,0,0.4);
    position: relative;
}
.arena-boss-label {
    font-family: var(--font-title);
    font-size: 0.8rem;
    color: #d8b4fe;
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-align: center;
    text-shadow: 0 0 12px rgba(167,139,250,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.arena-boss-bar {
    width: 100%;
    height: 16px;
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(167,139,250,0.35);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 12px rgba(124,58,237,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
}
/* Segmentation visuelle sur la barre */
.arena-boss-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent calc(10% - 1px),
        rgba(0,0,0,0.3) calc(10% - 1px),
        rgba(0,0,0,0.3) 10%
    );
    z-index: 2;
    border-radius: 10px;
    pointer-events: none;
}
.arena-boss-fill {
    height: 100%;
    background: linear-gradient(90deg,
        #4c1d95 0%,
        #6d28d9 30%,
        #7c3aed 55%,
        #a855f7 75%,
        #c084fc 90%,
        #e879f9 100%
    );
    border-radius: 10px;
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 0 12px rgba(168,85,247,0.7), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}
.arena-boss-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: bossShimmer 2.5s ease-in-out infinite;
}
.arena-boss-fill.warning {
    background: linear-gradient(90deg, #92400e, #b45309, #d97706, #f59e0b);
    box-shadow: 0 0 12px rgba(245,158,11,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.arena-boss-fill.danger {
    background: linear-gradient(90deg, #7f1d1d, #991b1b, #dc2626, #ef4444, #f87171);
    box-shadow: 0 0 16px rgba(220,38,38,0.9), inset 0 1px 0 rgba(255,255,255,0.15);
    animation: dangerPulse 0.5s ease-in-out infinite alternate;
}
@keyframes bossShimmer {
    0%   { left: -60%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}
@keyframes dangerPulse {
    from { box-shadow: 0 0 10px rgba(220,38,38,0.7), inset 0 1px 0 rgba(255,255,255,0.15); }
    to   { box-shadow: 0 0 28px rgba(239,68,68,1),   inset 0 1px 0 rgba(255,255,255,0.15); }
}
/* Shake quand touché */
.arena-boss-bar.hit {
    animation: bossHit 0.35s ease;
}
@keyframes bossHit {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

/* Vies du joueur */
.arena-lives-zone {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 16px 7px;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(10,5,30,0.4) 100%);
    border-bottom: 1px solid rgba(124,58,237,0.2);
}
.arena-lives-label {
    font-size: 0.72rem;
    color: #a78bfa;
    font-weight: 700;
    letter-spacing: 1px;
    margin-right: 6px;
    text-transform: uppercase;
}
.arena-heart {
    font-size: 1.2rem;
    transition: transform 0.3s, opacity 0.3s, filter 0.3s;
    display: inline-block;
}
.arena-heart.alive {
    filter: drop-shadow(0 0 5px rgba(239,68,68,0.9)) drop-shadow(0 0 10px rgba(239,68,68,0.4));
    animation: heartBeat 1.8s ease-in-out infinite;
}
.arena-heart.lost {
    opacity: 0.15;
    filter: grayscale(1) brightness(0.4);
    transform: scale(0.75);
}
@keyframes heartBeat {
    0%,100% { transform: scale(1); }
    14%     { transform: scale(1.18); }
    28%     { transform: scale(1); }
    42%     { transform: scale(1.12); }
    56%     { transform: scale(1); }
}
.arena-lives-zone.flash-red {
    animation: livesFlash 0.6s ease;
}
@keyframes livesFlash {
    0%,100% { background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(10,5,30,0.4) 100%); }
    30%      { background: rgba(220,38,38,0.4); }
}

/* Cœurs dans le leaderboard */
.lb-lives {
    display: flex;
    gap: 1px;
    margin-top: 2px;
    justify-content: flex-end;
}
.lb-heart {
    font-size: 0.65rem;
    transition: opacity 0.3s;
}
.lb-heart.lost {
    opacity: 0.2;
    filter: grayscale(1);
}

/* Overlay Game Over */
.arena-gameover .arena-go-box {
    text-align: center;
    max-width: 380px;
    border: 2px solid rgba(220,38,38,0.6);
    box-shadow: 0 0 40px rgba(220,38,38,0.3), 0 20px 60px rgba(0,0,0,0.5);
}
.arena-go-icon {
    font-size: 4rem;
    margin-bottom: 8px;
    animation: goShake 0.5s ease-in-out 3;
}
@keyframes goShake {
    0%,100% { transform: rotate(0deg); }
    25%      { transform: rotate(-10deg); }
    75%      { transform: rotate(10deg); }
}
.arena-go-title {
    color: #ef4444 !important;
    font-size: 2rem !important;
    text-shadow: 0 0 20px rgba(239,68,68,0.6) !important;
}
.arena-go-msg {
    color: #c4b5fd;
    font-size: 1rem;
    line-height: 1.7;
    margin: 10px 0 14px;
}
.arena-go-score {
    font-size: 1.1rem;
    color: #fde047;
    font-weight: 800;
    margin-bottom: 18px;
    font-family: var(--font-title);
}

/* Overlay Victoire */
.arena-victory .arena-vict-box {
    text-align: center;
    max-width: 400px;
    border: 2px solid rgba(34,197,94,0.6);
    box-shadow: 0 0 40px rgba(34,197,94,0.3), 0 20px 60px rgba(0,0,0,0.5);
}
.arena-vict-icon {
    font-size: 4rem;
    margin-bottom: 8px;
    animation: victFloat 1.5s ease-in-out infinite;
}
@keyframes victFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-8px) scale(1.1); }
}
.arena-vict-title {
    color: #4ade80 !important;
    font-size: 2rem !important;
    text-shadow: 0 0 20px rgba(74,222,128,0.6) !important;
}
.arena-vict-msg {
    color: #c4b5fd;
    font-size: 1rem;
    line-height: 1.7;
    margin: 10px 0 14px;
}

/* Responsive */
@media (max-width: 600px) {
    .arena-boss-zone { padding: 5px 10px 3px; }
    .arena-boss-bar  { height: 11px; }
    .arena-lives-zone { padding: 3px 10px 4px; }
    .arena-heart      { font-size: 0.95rem; }
}

/* ============================================================
   PODIUM VICTOIRE
   ============================================================ */

.podium-box {
    background: linear-gradient(160deg, #1a0533 0%, #0f172a 50%, #1a0533 100%);
    border: 2px solid rgba(168,85,247,0.5);
    border-radius: 24px;
    padding: 28px 24px 22px;
    width: min(460px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(124,58,237,0.4), 0 30px 80px rgba(0,0,0,0.7);
    position: relative;
    animation: podiumAppear 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes podiumAppear {
    from { transform: scale(0.7) translateY(40px); opacity: 0; }
    to   { transform: scale(1) translateY(0);      opacity: 1; }
}

/* Header */
.podium-header { text-align: center; margin-bottom: 20px; }
.podium-oracle-dead {
    font-size: 3rem;
    display: block;
    animation: oracleDead 1s ease-in-out infinite alternate;
}
@keyframes oracleDead {
    from { transform: rotate(-8deg) scale(1);   opacity: 0.7; }
    to   { transform: rotate(8deg)  scale(0.9); opacity: 1;   }
}
.podium-title {
    font-family: var(--font-title);
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    background: linear-gradient(90deg, #fde047, #fb923c, #f472b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 6px 0 4px;
    letter-spacing: 2px;
    text-shadow: none;
}
.podium-subtitle {
    color: #c4b5fd;
    font-size: 0.9rem;
    margin: 0;
}

/* Scène podium */
.podium-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
    padding: 0 8px;
}

.podium-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 130px;
    animation: podiumSlotIn 0.8s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
.podium-1 { animation-delay: 0.2s; }
.podium-2 { animation-delay: 0.4s; }
.podium-3 { animation-delay: 0.6s; }
@keyframes podiumSlotIn {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.podium-crown {
    font-size: 1.6rem;
    animation: crownBounce 1.2s ease-in-out infinite;
    margin-bottom: 2px;
}
@keyframes crownBounce {
    0%,100% { transform: translateY(0)   rotate(-5deg); }
    50%      { transform: translateY(-6px) rotate(5deg);  }
}

.podium-player-avatar {
    font-size: 2rem;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
    margin-bottom: 4px;
}
.podium-1 .podium-player-avatar { font-size: 2.4rem; }

.podium-player-name {
    font-family: var(--font-title);
    font-size: 0.72rem;
    color: #e2e8f0;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}
.podium-1 .podium-player-name { font-size: 0.82rem; color: #fde047; }

.podium-player-score {
    font-size: 0.68rem;
    color: #a78bfa;
    font-weight: 700;
    margin-bottom: 6px;
}
.podium-1 .podium-player-score { color: #fb923c; font-size: 0.78rem; }

/* Blocs du podium */
.podium-block {
    width: 100%;
    border-radius: 10px 10px 4px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.podium-block::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
}
.podium-block-1 {
    height: 90px;
    background: linear-gradient(180deg, #854d0e, #713f12);
    box-shadow: 0 0 20px rgba(251,191,36,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}
.podium-block-1::after { background: linear-gradient(90deg, #fde047, #fb923c, #fde047); }
.podium-block-2 {
    height: 65px;
    background: linear-gradient(180deg, #374151, #1f2937);
    box-shadow: 0 0 15px rgba(148,163,184,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.podium-block-2::after { background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8); }
.podium-block-3 {
    height: 48px;
    background: linear-gradient(180deg, #431407, #3b0f06);
    box-shadow: 0 0 12px rgba(180,83,9,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.podium-block-3::after { background: linear-gradient(90deg, #c2410c, #ea580c, #c2410c); }

.podium-medal { font-size: 1.6rem; }
.podium-block-1 .podium-medal { font-size: 2rem; }

/* Joueur absent du top 3 */
.podium-slot.empty .podium-player-avatar,
.podium-slot.empty .podium-player-name,
.podium-slot.empty .podium-player-score { opacity: 0.3; }

/* Score joueur actuel */
.podium-my-score {
    text-align: center;
    font-size: 0.95rem;
    color: #c4b5fd;
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.3);
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 16px;
}
.podium-my-score strong { color: #fde047; font-size: 1.1rem; }
.podium-my-score.is-top { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.4); }

/* Boutons */
.podium-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.podium-btns .cartoon-btn { flex: 1; max-width: 160px; margin-bottom: 0; }

/* Solo : masquer le podium, juste le score */
.podium-solo-mode .podium-stage { display: none; }

/* Responsive */
@media (max-width: 480px) {
    .podium-box { padding: 20px 14px 18px; }
    .podium-player-avatar { font-size: 1.6rem; }
    .podium-block-1 { height: 70px; }
    .podium-block-2 { height: 50px; }
    .podium-block-3 { height: 38px; }
    .podium-medal { font-size: 1.3rem; }
}

/* Joueur actuel mis en valeur dans le podium */
.podium-slot.podium-me .podium-player-name {
    color: #4ade80;
    text-shadow: 0 0 8px rgba(74,222,128,0.6);
}
.podium-slot.podium-me .podium-player-avatar {
    filter: drop-shadow(0 0 10px rgba(74,222,128,0.8));
    animation: meGlow 1.5s ease-in-out infinite alternate;
}
@keyframes meGlow {
    from { filter: drop-shadow(0 0 6px rgba(74,222,128,0.5)); }
    to   { filter: drop-shadow(0 0 14px rgba(74,222,128,1));  }
}

/* ============================================================
   HALL DES CRÉATEURS — STYLES COMPLETS
   ============================================================ */

/* ─── Bouton Hall dans l'arène ─── */
.btn-hall {
    background: linear-gradient(180deg, #f0b030, #c07808);
    color: #1a0800;
    box-shadow: 0 5px 0 #7a4a00;
    font-size: 0.95rem;
    border: none;
}
.btn-hall:hover { background: linear-gradient(180deg, #ffd060, #e09010); }
.btn-hall:active { top: 5px; }

.hall-lobby-btn {
    margin-top: auto;
    width: 100%;
    font-size: 0.85rem;
    padding: 10px 14px;
    display: none; /* géré par JS */
    flex-shrink: 0;
    animation: hall-btn-pulse 2s ease-in-out infinite;
}
@keyframes hall-btn-pulse {
    0%,100% { box-shadow: 0 5px 0 #7a4a00, 0 0 0 rgba(240,176,48,0); }
    50%     { box-shadow: 0 5px 0 #7a4a00, 0 0 18px rgba(240,176,48,0.35); }
}

/* ─── Bannière explicative arène publique ─── */
.arena-explainer {
    display: flex;
    flex-direction: row;
    gap: 6px 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
    padding: 5px 10px;
    background: rgba(80,30,180,0.25);
    border: 1px solid rgba(167,139,250,0.2);
    border-radius: 8px;
    animation: fade-up 0.4s ease;
    font-family: var(--font);
}
@keyframes fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.arena-explainer-row {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 0.71rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(210,200,255,0.82);
    white-space: nowrap;
}
.arena-explainer-row strong { color: #e9e4ff; font-weight: 800; }
.arena-explainer-icon { font-size: 0.78rem; flex-shrink: 0; }
.arena-explainer-reward {
    color: rgba(253,230,138,0.85);
}
.arena-explainer-reward strong { color: #fbbf24; font-weight: 800; }

/* ─── Bouton "Créer une énigme" dans le podium ─── */
.btn-yellow {
    background: linear-gradient(180deg, #fbbf24, #d97706);
    color: #1a0800;
    box-shadow: 0 6px 0 #92400e;
    border: none;
}
.btn-yellow:hover { background: linear-gradient(180deg, #fcd34d, #f59e0b); }
.podium-btn-create { animation: shimmer-btn 2s ease-in-out infinite; }
@keyframes shimmer-btn {
    0%,100% { box-shadow: 0 6px 0 #92400e; }
    50%     { box-shadow: 0 6px 0 #92400e, 0 0 20px rgba(251,191,36,0.5); }
}

/* ─── Modal Création d'énigme ─── */
.create-enigma-box {
    max-width: 500px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 28px;
}
.ce-header { text-align: center; margin-bottom: 20px; }
.ce-trophy { font-size: 3.2rem; }
.ce-subtitle { font-size: 0.83rem; color: rgba(210,200,255,0.7); margin-top: 6px; line-height: 1.55; }
.ce-subtitle strong { color: #fbbf24; }

.ce-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ce-field { display: flex; flex-direction: column; gap: 5px; position: relative; }
.ce-label {
    font-size: 0.75rem; font-weight: 800;
    color: rgba(190,175,255,0.8);
    letter-spacing: 1px; text-transform: uppercase;
}
.ce-required { color: #f87171; }
.ce-optional { color: rgba(180,165,240,0.5); font-weight: 400; text-transform: none; letter-spacing: 0; }

.ce-input, .ce-textarea {
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(167,139,250,0.3);
    border-radius: 12px;
    padding: 11px 14px;
    color: #fff;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: none;
}
.ce-input:focus, .ce-textarea:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251,191,36,0.15);
}
.ce-counter {
    font-size: 0.7rem; color: rgba(180,165,240,0.45);
    text-align: right; margin-top: -2px;
}

.ce-row { display: flex; gap: 14px; }
.ce-half { flex: 1; min-width: 0; }

.ce-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ce-chip {
    flex: 1; min-width: 44px;
    padding: 7px 4px;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(167,139,250,0.2);
    border-radius: 8px;
    color: rgba(190,175,255,0.6);
    font-family: var(--font-title);
    font-size: 0.75rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    white-space: nowrap;
}
.ce-chip.active {
    background: rgba(124,58,237,0.3);
    border-color: var(--purple-light);
    color: #fff;
}
.ce-chip:hover { border-color: rgba(200,180,255,0.45); color: #fff; }

.ce-preview {
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(251,191,36,0.25);
    border-radius: 14px;
    padding: 14px;
    animation: fade-up 0.25s ease;
}
.ce-preview-label {
    font-size: 0.68rem; font-weight: 800;
    color: rgba(251,191,36,0.6);
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 8px;
}
.ce-preview-q {
    font-size: 0.9rem; font-weight: 700;
    color: #fff; line-height: 1.5;
    margin-bottom: 10px;
}
.ce-preview-tags { display: flex; align-items: center; gap: 10px; }
.ce-preview-time { font-size: 0.78rem; font-weight: 700; color: rgba(200,180,255,0.65); }

.ce-actions { display: flex; flex-direction: column; gap: 0; }

/* ─── Modal Hall ─── */
.hall-overlay { padding: 20px; align-items: flex-start; overflow-y: auto; }
.hall-box {
    background: var(--card);
    border: 3px solid rgba(200,136,10,0.45);
    border-radius: 24px;
    padding: 28px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 8px 0 rgba(0,0,0,0.3), 0 0 50px rgba(200,140,10,0.12);
    animation: resultPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
    margin: auto;
}
.hall-header { text-align: center; margin-bottom: 20px; }
.hall-icon { font-size: 3rem; display: block; margin-bottom: 4px; }
.hall-title {
    font-family: var(--font-title);
    font-size: 1.7rem; color: #f0b030;
    margin-bottom: 4px;
}
.hall-subtitle { font-size: 0.82rem; color: rgba(210,195,255,0.6); }

.hall-counters {
    display: flex; gap: 8px; margin-bottom: 20px;
}
.hall-counter {
    flex: 1; background: rgba(240,176,48,0.07);
    border: 1px solid rgba(240,176,48,0.2);
    border-radius: 12px; padding: 12px 8px;
    text-align: center;
    display: flex; flex-direction: column; gap: 3px;
}
.hall-counter span { font-family: var(--font-title); font-size: 1.6rem; color: #f0b030; line-height: 1; }
.hall-counter small { font-size: 0.65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(200,180,255,0.45); }

.hall-recent-title {
    font-size: 0.72rem; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(190,175,255,0.55);
    margin-bottom: 8px;
}
.hall-recent-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 180px; overflow-y: auto;
    margin-bottom: 16px;
}
.hall-q-item {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(167,139,250,0.12);
    border-radius: 10px; padding: 10px 12px;
}
.hall-q-avatar { font-size: 1.2rem; flex-shrink: 0; }
.hall-q-content { flex: 1; min-width: 0; }
.hall-q-text {
    font-size: 0.84rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hall-q-meta { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.hall-q-author { font-size: 0.7rem; color: rgba(200,180,255,0.45); }
.hall-empty { font-size: 0.85rem; color: rgba(200,180,255,0.35); text-align: center; padding: 20px; }

.hall-rules {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(167,139,250,0.12);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.hall-rules-title {
    font-size: 0.7rem; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(190,175,255,0.55);
    margin-bottom: 8px;
}
.hall-rules-body { font-size: 0.82rem; color: rgba(210,200,255,0.65); line-height: 1.6; }
.hall-rules-body strong { color: #fbbf24; }

.hall-actions { display: flex; flex-direction: column; gap: 0; }

/* ─── Badge Hall mode (header) ─── */
.hall-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(200,136,10,0.15);
    border: 1px solid rgba(200,136,10,0.35);
    border-radius: 8px; padding: 3px 10px;
    font-size: 0.7rem; font-weight: 800;
    color: #f0b030; letter-spacing: 1px; text-transform: uppercase;
}

@media (max-width: 600px) {
    .ce-row { flex-direction: column; }
    .arena-explainer { font-size: 0.65rem; gap: 4px 10px; }
    .hall-lobby-btn { max-width: 100%; }
    .create-enigma-box { padding: 20px 14px; }
    .hall-box { padding: 20px 14px; }
}

/* ─── Champ créateur dans le formulaire énigme ─── */
.ce-creator-input {
    border-color: rgba(240,176,48,0.25);
}
.ce-creator-input:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251,191,36,0.12);
}
.ce-hint-text {
    font-size: 0.7rem;
    color: rgba(180,165,240,0.45);
    margin-top: -2px;
    font-style: italic;
}

/* Indicateur statut réponse dans le scoreboard */
.lb-status {
    font-size: 0.85rem;
    margin-left: 2px;
    display: inline-block;
    animation: none;
}
.lb-status.thinking {
    animation: pulse 1.2s ease-in-out infinite;
    opacity: 0.8;
}
.lb-status.answered {
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes popIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* ══════════════════════════════════════════════
   MODALE RÈGLES ARÈNE
══════════════════════════════════════════════ */
.arena-rules-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 8px;
}
.arena-rules-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(124,58,237,0.12);
    border: 1px solid rgba(167,139,250,0.2);
    border-radius: 14px;
    padding: 12px 14px;
    transition: background 0.15s;
}
.arena-rules-block:hover {
    background: rgba(124,58,237,0.22);
}
.arena-rules-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}
.arena-rules-block strong {
    display: block;
    color: var(--yellow-light);
    font-family: var(--font-title);
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.arena-rules-block p {
    color: #c4b5fd;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}
.arena-rules-block em {
    color: #f0b030;
    font-style: normal;
    font-weight: bold;
}
@media (max-width: 480px) {
    .arena-rules-icon { font-size: 1.3rem; }
    .arena-rules-block { padding: 10px 11px; gap: 9px; }
    .arena-rules-block p { font-size: 0.8rem; }
}

/* ══════════════════════════════════════════════
   OVERLAY VICTOIRE — RÉCOMPENSES
══════════════════════════════════════════════ */

/* Oracle mort animé */
.vict-oracle-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
}
.vict-oracle-dead {
    font-size: 3.2rem;
    animation: victOracleDie 0.8s cubic-bezier(0.34,1.56,0.64,1) both;
    display: block;
}
.vict-burst {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    color: #fde047;
    opacity: 0;
    animation: victBurst 1.2s ease 0.3s forwards;
    pointer-events: none;
    z-index: -1;
}
@keyframes victOracleDie {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.3) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes victBurst {
    0%   { transform: translate(-50%,-50%) scale(0.2); opacity: 0.9; }
    60%  { transform: translate(-50%,-50%) scale(2.2); opacity: 0.4; }
    100% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
}

/* Titre lumineux */
.vict-title-glow {
    text-shadow: 0 0 30px rgba(251,191,36,.8), 0 0 60px rgba(251,191,36,.4) !important;
    animation: victTitlePulse 2s ease-in-out infinite;
}
@keyframes victTitlePulse {
    0%, 100% { text-shadow: 0 0 20px rgba(251,191,36,.6), 0 0 40px rgba(251,191,36,.3); }
    50%       { text-shadow: 0 0 40px rgba(251,191,36,1),  0 0 80px rgba(251,191,36,.6); }
}

/* Zone récompenses */
.vict-rewards {
    margin: 14px 0 16px;
    animation: victRewardIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;
}
@keyframes victRewardIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.vict-rewards-title {
    text-align: center;
    font-family: var(--font-title);
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #a5b4fc;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.vict-rewards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.vict-reward-card {
    background: rgba(124,58,237,0.15);
    border: 2px solid rgba(167,139,250,0.25);
    border-radius: 14px;
    padding: 10px 8px;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
    animation: victCardPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.vict-reward-card:nth-child(1) { animation-delay: 0.5s; }
.vict-reward-card:nth-child(2) { animation-delay: 0.65s; }
.vict-reward-card:nth-child(3) { animation-delay: 0.8s; }
@keyframes victCardPop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.vict-reward-card:hover { transform: translateY(-3px); border-color: rgba(167,139,250,0.6); }

.vict-reward-pot   { border-color: rgba(251,191,36,0.35);  background: rgba(251,191,36,0.08); }
.vict-reward-round { border-color: rgba(192,132,252,0.35); background: rgba(192,132,252,0.08); }
.vict-reward-hall  { border-color: rgba(74,222,128,0.35);  background: rgba(74,222,128,0.08); }

.vict-reward-icon  { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.vict-reward-label {
    font-size: 0.65rem;
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.vict-reward-val {
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 900;
    color: #fde047;
    line-height: 1.2;
}
.vict-reward-pot   .vict-reward-val { color: #fbbf24; }
.vict-reward-round .vict-reward-val { color: #c084fc; }
.vict-reward-hall  .vict-reward-val { color: #4ade80; }

@media (max-width: 480px) {
    .vict-rewards-grid { gap: 6px; }
    .vict-reward-card  { padding: 8px 5px; border-radius: 10px; }
    .vict-reward-icon  { font-size: 1.2rem; }
    .vict-reward-val   { font-size: 0.75rem; }
    .vict-reward-label { font-size: 0.6rem; }
    .vict-oracle-dead  { font-size: 2.4rem; }
}

/* ══════════════════════════════════════════════
   BOUTON LANGUE
══════════════════════════════════════════════ */
.splash-lang-btn {
    background: rgba(124,58,237,0.25);
    border: 2px solid rgba(167,139,250,0.35);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #e9d5ff;
    transition: all 0.15s;
    margin-top: 8px;
    display: inline-block;
    letter-spacing: 0.5px;
}
.splash-lang-btn:hover {
    background: rgba(124,58,237,0.5);
    border-color: var(--purple-light);
    transform: scale(1.05);
}

/* ══════════════════════════════════════════════
   MODE ORACLE MALÉFIQUE
══════════════════════════════════════════════ */

/* Bouton header */
.evil-mode-btn {
  color: #cc1100 !important;
  text-shadow: 0 0 8px rgba(255,40,0,0.8);
  animation: evil-btn-pulse 2s ease-in-out infinite;
}
@keyframes evil-btn-pulse {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 12px rgba(200,20,0,0.6); }
}

/* Overlay principal */
.evil-oracle-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.evil-oracle-panel {
  background: #06000e;
  border: 2px solid #8b0000;
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(140,0,0,0.5), 0 0 80px rgba(80,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Header */
.evil-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.evil-oracle-eye {
  font-size: 2rem;
  animation: evil-eye-spin 4s linear infinite;
}
@keyframes evil-eye-spin {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255,40,0,0.8)); }
  50%     { transform: scale(1.2); filter: drop-shadow(0 0 14px rgba(255,40,0,1)); }
}
.evil-oracle-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #cc1100;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(255,40,0,0.6);
  flex: 1;
}
.evil-quit-btn {
  background: rgba(80,0,0,0.5);
  border: 1px solid #8b0000;
  color: #cc4444;
  border-radius: 8px;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.15s;
}
.evil-quit-btn:hover { background: rgba(140,0,0,0.7); color: #ff4444; }

/* HP Bar */
.evil-hp-section { display: flex; flex-direction: column; gap: 4px; }
.evil-hp-label {
  font-size: 0.7rem;
  color: rgba(200,80,60,0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
}
.evil-hp-bar-wrap {
  background: rgba(80,0,0,0.3);
  border-radius: 6px;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(139,0,0,0.5);
}
.evil-hp-bar {
  height: 100%;
  background: #8b0000;
  border-radius: 6px;
  transition: width 0.4s ease, background 0.4s;
  width: 100%;
  box-shadow: 0 0 10px rgba(200,20,0,0.6);
}
.evil-hp-txt {
  font-size: 0.7rem;
  color: rgba(180,60,40,0.7);
  text-align: center;
  font-family: 'Cinzel', serif;
}

/* Vies */
.evil-lives-section { display: flex; align-items: center; gap: 10px; }
.evil-lives-label {
  font-size: 0.7rem;
  color: rgba(200,80,60,0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
}
.evil-lives-display { display: flex; gap: 6px; font-size: 1.4rem; }
.evil-heart { transition: all 0.3s; }
.evil-heart.dead { opacity: 0.3; filter: grayscale(1); }

/* Joueurs */
.evil-player-count {
  font-size: 0.75rem;
  color: rgba(180,60,40,0.7);
  text-align: center;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}

/* Zone question */
.evil-question-zone { display: flex; flex-direction: column; gap: 10px; }
.evil-question-text {
  font-size: 1.05rem;
  color: #d4c4a8;
  font-family: 'Cinzel', serif;
  line-height: 1.5;
  text-align: center;
  padding: 12px;
  background: rgba(20,0,0,0.5);
  border: 1px solid rgba(100,0,0,0.4);
  border-radius: 10px;
}
.evil-hint {
  font-size: 0.8rem;
  color: rgba(200,80,60,0.7);
  text-align: center;
  font-style: italic;
}
.evil-timer-bar-wrap {
  background: rgba(60,0,0,0.4);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.evil-timer-bar {
  height: 100%;
  background: #8b0000;
  border-radius: 4px;
  transition: width 0.1s linear, background 0.4s;
  width: 100%;
}
.evil-answer-row {
  display: flex;
  gap: 8px;
}
.evil-answer-input {
  flex: 1;
  background: rgba(20,0,0,0.7);
  border: 2px solid rgba(139,0,0,0.6);
  border-radius: 10px;
  padding: 10px 14px;
  color: #d4c4a8;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
.evil-answer-input:focus { border-color: #cc1100; box-shadow: 0 0 10px rgba(200,20,0,0.3); }
.evil-answer-input.wrong { border-color: #ff0000; animation: evil-wrong-shake 0.4s; }
@keyframes evil-wrong-shake {
  0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}
}
.evil-submit-btn {
  background: rgba(100,0,0,0.6);
  border: 2px solid #8b0000;
  color: #d4c4a8;
  border-radius: 10px;
  padding: 10px 16px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s;
}
.evil-submit-btn:hover { background: rgba(160,0,0,0.8); border-color: #cc1100; }

/* Zone résultat */
.evil-result-zone {
  padding: 12px;
  background: rgba(20,0,0,0.5);
  border: 1px solid rgba(100,0,0,0.4);
  border-radius: 10px;
  color: #d4c4a8;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  text-align: center;
}

/* Zone spectateur */
.evil-spectator-zone { display: flex; flex-direction: column; gap: 10px; }
.evil-spectator-title {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: rgba(200,80,60,0.9);
  text-align: center;
  letter-spacing: 2px;
}
.evil-spectator-question {
  font-size: 0.85rem;
  color: rgba(180,160,140,0.6);
  text-align: center;
  font-style: italic;
  font-family: 'Cinzel', serif;
}
.evil-vote-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.evil-vote-title {
  width: 100%;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #cc1100;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.evil-vote-btn {
  background: rgba(60,0,0,0.5);
  border: 2px solid rgba(139,0,0,0.5);
  color: #d4c4a8;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 1px;
}
.evil-vote-btn:hover, .evil-vote-btn.active {
  background: rgba(120,0,0,0.7);
  border-color: #cc1100;
  box-shadow: 0 0 10px rgba(200,20,0,0.4);
}

/* Message attente */
.evil-waiting-msg {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: rgba(180,80,60,0.6);
  font-style: italic;
  letter-spacing: 1px;
}

/* Cartes sorts */
.evil-cards-section { display: flex; flex-direction: column; gap: 8px; }
.evil-cards-label {
  font-size: 0.7rem;
  color: rgba(200,80,60,0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
}
.evil-cards-zone {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.evil-card-btn {
  background: rgba(60,0,0,0.6);
  border: 2px solid rgba(139,0,0,0.6);
  border-radius: 10px;
  padding: 8px 12px;
  color: #d4c4a8;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}
.evil-card-btn:hover:not(.used) { background: rgba(120,0,0,0.7); border-color: #cc1100; }
.evil-card-btn.used { opacity: 0.3; cursor: not-allowed; filter: grayscale(1); }
.evil-card-icon { font-size: 1.2rem; }
.evil-card-name { font-size: 0.65rem; letter-spacing: 1px; text-align: center; }

/* Victoire maléfique */
.evil-victory-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evil-victory-box {
  background: #06000e;
  border: 3px solid #cc1100;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 0 60px rgba(200,20,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.evil-victory-icon { font-size: 4rem; animation: evil-victory-pulse 1s ease-in-out infinite; }
@keyframes evil-victory-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.3); filter: drop-shadow(0 0 20px gold); }
}
.evil-victory-box h2 {
  font-family: 'Cinzel Decorative', serif;
  color: #cc1100;
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(255,40,0,0.6);
}
.evil-victory-box p {
  color: #d4c4a8;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Phase Oracle + Room badge */
.evil-oracle-phase {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: #cc1100;
  text-align: center;
  letter-spacing: 2px;
  animation: phase-pulse 2s ease-in-out infinite;
}
@keyframes phase-pulse {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; text-shadow: 0 0 8px rgba(255,40,0,0.8); }
}
.evil-room-badge {
  background: rgba(80,0,0,0.5);
  border: 1px solid rgba(139,0,0,0.6);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.65rem;
  color: rgba(200,80,60,0.8);
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   CARTE DÉVERROUILLAGE ORACLE MALÉFIQUE
══════════════════════════════════════════════ */

.evil-unlock-card {
  margin: 8px 0;
  flex-shrink: 0;
  width: 100%;
}

/* État verrouillé — compact pour le side panel */
.evil-unlock-card-inner {
  background: rgba(6,0,14,0.95);
  border: 2px solid rgba(139,0,0,0.7);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.evil-unlock-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.evil-unlock-icon-sm {
  font-size: 1rem;
  flex-shrink: 0;
}

.evil-unlock-title-sm {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  color: #cc1100;
  letter-spacing: 1px;
  flex: 1;
  text-transform: uppercase;
}

.evil-unlock-counter {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #d4c4a8;
  background: rgba(80,0,0,0.5);
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(139,0,0,0.5);
  flex-shrink: 0;
}

.evil-unlock-msg {
  font-size: 0.68rem;
  color: rgba(200,160,120,0.85);
  text-align: center;
  font-style: italic;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.evil-unlock-bar-wrap {
  background: rgba(60,0,0,0.4);
  border-radius: 4px;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(139,0,0,0.3);
}

.evil-unlock-bar-fill {
  height: 100%;
  background: #cc1100;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.evil-unlock-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: rgba(180,80,60,0.65);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
}

/* État débloqué */
.evil-unlock-unlocked {
  background: rgba(6,0,14,0.95);
  border: 2px solid #cc1100;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: evil-unlock-glow 2s ease-in-out infinite;
}

@keyframes evil-unlock-glow {
  0%,100% { border-color: #8b0000; }
  50%      { border-color: #ff2200; }
}

.evil-unlock-unlocked .evil-unlock-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.evil-unlock-text { flex: 1; min-width: 0; }

.evil-unlock-text .evil-unlock-title {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  color: #cc1100;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.evil-unlock-text .evil-unlock-sub {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  color: rgba(200,160,120,0.7);
  margin-top: 2px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evil-unlock-btn {
  background: rgba(100,0,0,0.7);
  border: 2px solid #cc1100;
  color: #d4c4a8;
  border-radius: 7px;
  padding: 6px 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.evil-unlock-btn:hover {
  background: rgba(160,0,0,0.8);
  border-color: #ff2200;
}

/* Animation flash déblocage Oracle Maléfique */
@keyframes evil-flash {
  0%   { opacity: 1; }
  40%  { opacity: 0.8; }
  100% { opacity: 0; }
}

/* ══════════════════════════════════════════════
   BOUTIQUE — ONGLET MALÉFIQUE
══════════════════════════════════════════════ */

/* Onglets */
#ss-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 2px solid rgba(139,0,0,0.3);
  margin-bottom: 12px;
}
.ss-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 8px 16px;
  font-family: var(--font-title, 'Cinzel', serif);
  font-size: 0.75rem;
  color: rgba(167,139,250,0.6);
  cursor: pointer;
  letter-spacing: 1px;
  margin-bottom: -2px;
  transition: all 0.15s;
}
.ss-tab:hover { color: #a78bfa; }
.ss-tab.ss-tab-active {
  color: #cc1100;
  border-bottom-color: #cc1100;
}
.ss-tab.ss-tab-evil-locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.ss-tab.ss-tab-evil-locked::after {
  content: ' 🔒';
  font-size: 0.6em;
}

/* Zone sélection maléfique */
.ss-evil-selection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 4px;
}
.ss-evil-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #cc1100;
  text-align: center;
  letter-spacing: 2px;
}
.ss-evil-subtitle {
  font-size: 0.7rem;
  color: rgba(200,160,120,0.7);
  text-align: center;
  font-family: 'Cinzel', serif;
}

/* Slots */
.ss-evil-slots {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.ss-evil-slot {
  width: 110px;
  height: 135px;
  border: 2px dashed rgba(139,0,0,0.4);
  border-radius: 10px;
  background: rgba(20,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  transition: all 0.15s;
}
.ss-evil-slot.filled {
  border-style: solid;
  border-color: #cc1100;
  background: rgba(60,0,0,0.5);
}
.ss-evil-slot-remove {
  position: absolute;
  top: 5px; right: 5px;
  width: 18px; height: 18px;
  background: rgba(139,0,0,0.7);
  border: none;
  border-radius: 50%;
  color: #d4c4a8;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-evil-slot-icon  { font-size: 20px; }
.ss-evil-slot-name  { font-size: 9px; color: rgba(200,160,120,0.9); text-align: center; padding: 0 4px; font-weight: 500; }
.ss-evil-slot-desc  { font-size: 8px; color: rgba(180,140,100,0.7); text-align: center; padding: 0 4px; line-height: 1.3; }
.ss-evil-slot-rarity{ font-size: 8px; padding: 1px 5px; border-radius: 3px; }
.ss-evil-slot-n     { font-size: 9px; color: rgba(180,60,40,0.5); letter-spacing: 1px; }
.ss-evil-slot-plus  { font-size: 20px; color: rgba(139,0,0,0.3); }
.ss-evil-r-common   { background: #D3D1C7; color: #444441; }
.ss-evil-r-uncommon { background: #9FE1CB; color: #085041; }
.ss-evil-r-rare     { background: #B5D4F4; color: #0C447C; }
.ss-evil-r-epic     { background: #CECBF6; color: #3C3489; }
.ss-evil-r-legendary{ background: #F5C4B3; color: #993C1D; }

/* Filtres */
.ss-evil-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.ss-evil-filter {
  background: rgba(30,0,0,0.5);
  border: 1px solid rgba(139,0,0,0.3);
  color: rgba(200,160,120,0.6);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Cinzel', serif;
}
.ss-evil-filter.active,
.ss-evil-filter:hover {
  background: rgba(100,0,0,0.6);
  border-color: #cc1100;
  color: #d4c4a8;
}

/* Catalogue */
/* Catalogue groupé par rareté */
.ss-evil-catalog {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 2px 8px;
}
.ss-evil-catalog::-webkit-scrollbar { width: 4px; }
.ss-evil-catalog::-webkit-scrollbar-thumb { background: rgba(139,0,0,0.5); border-radius: 2px; }

/* Section par rareté */
.ss-evil-rarity-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ss-evil-rarity-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-left: 3px solid;
  border-radius: 0 4px 4px 0;
  background: rgba(0,0,0,0.2);
}
.ss-evil-rarity-stars {
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.9;
}
.ss-evil-rarity-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex: 1;
}
.ss-evil-rarity-count {
  font-size: 9px;
  opacity: 0.6;
}
.ss-evil-rarity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
}

/* Carte individuelle */
.ss-evil-card {
  background: rgba(20,0,0,0.06);
  border: 1.5px solid rgba(139,0,0,0.2);
  border-radius: 10px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  width: 100%;
}
.ss-evil-card:hover:not(.locked):not(.selected) {
  filter: brightness(1.18);
  transform: translateY(-2px);
}
.ss-evil-card.selected {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.6);
}
.ss-evil-card.locked {
  opacity: 0.38;
  cursor: not-allowed;
}
.ss-evil-card-icon { font-size: 22px; line-height: 1; }
.ss-evil-card-name { font-size: 10px; color: rgba(230,190,140,1); text-align: center; line-height: 1.3; font-weight: 600; letter-spacing: 0.3px; }
.ss-evil-card-desc { font-size: 9px; color: rgba(190,155,115,0.9); text-align: center; line-height: 1.4; margin-top: 1px; }
.ss-evil-card-bar  { width: 100%; height: 2px; border-radius: 1px; margin-top: 3px; }
.ss-evil-lock-badge { position: absolute; top: 4px; left: 4px; font-size: 8px; background: rgba(0,0,0,0.75); color: #bbb; padding: 1px 4px; border-radius: 3px; }
.ss-evil-only-badge { position: absolute; top: 4px; right: 4px; font-size: 9px; }

/* Séparateurs blocs communautaire / solo */
.ss-evil-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  margin-bottom: 2px;
}
.ss-evil-block-community {
  background: rgba(29,158,117,0.12);
  border: 1px solid rgba(29,158,117,0.35);
}
.ss-evil-block-solo {
  background: rgba(83,74,183,0.10);
  border: 1px solid rgba(83,74,183,0.30);
  margin-top: 6px;
}
.ss-evil-block-icon { font-size: 16px; line-height: 1; }
.ss-evil-block-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex: 1;
}
.ss-evil-block-community .ss-evil-block-title { color: #1D9E75; }
.ss-evil-block-solo .ss-evil-block-title { color: #7F77DD; }
.ss-evil-block-sub {
  font-size: 9px;
  opacity: 0.65;
  font-style: italic;
}
.ss-evil-packs { display: flex; flex-direction: column; gap: 6px; }
.ss-evil-packs-title { font-size: 0.7rem; color: rgba(200,160,120,0.6); text-align: center; font-family: 'Cinzel', serif; letter-spacing: 1px; }
.ss-evil-pack {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10,0,5,0.8);
  border: 1px solid rgba(139,0,0,0.4);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.ss-evil-pack:hover { border-color: #cc1100; }
.ss-evil-pack-name  { font-size: 11px; color: #cc1100; font-weight: 500; font-family: 'Cinzel', serif; flex: 1; }
.ss-evil-pack-price { font-size: 14px; font-weight: 500; color: #d4c4a8; }
.ss-evil-pack-desc  { font-size: 9px; color: rgba(180,120,100,.7); min-width: 80px; text-align: right; }

/* Bouton entrer */
.ss-evil-enter-btn {
  background: rgba(60,0,0,0.5);
  border: 2px solid rgba(139,0,0,0.4);
  color: rgba(200,160,120,0.4);
  border-radius: 10px;
  padding: 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 2px;
  cursor: not-allowed;
  text-align: center;
  transition: all 0.2s;
  width: 100%;
}
.ss-evil-enter-btn.ready {
  background: rgba(100,0,0,0.7);
  border-color: #cc1100;
  color: #d4c4a8;
  cursor: pointer;
}
.ss-evil-enter-btn.ready:hover {
  background: rgba(150,0,0,0.8);
  transform: scale(1.01);
}