/* ============================================
   KhalGalerie v6 — Premium Design System
   ============================================ */

/* ---------- CSS Variables / Theme ---------- */
:root {
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --header-h: 7.5vh;
    --mobile-nav-h: 70px;
    --live-info-h: 32px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --transition: 0.15s ease;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.16);
    --rubis-1: #1e40af; --rubis-2: #3b82f6; --rubis-3: #93c5fd;
    --rubis-red: #e74c3c;
    --gradient-rubis: linear-gradient(135deg, var(--rubis-1), var(--rubis-2));
    --gradient-accent: linear-gradient(135deg, #1e40af, #3b82f6);
}

[data-theme="dark"] {
    --bg-primary: #050a18; --bg-secondary: #0a1128;
    --bg-card: rgba(10,20,48,0.7); --bg-card-hover: rgba(16,30,64,0.8);
    --bg-input: rgba(8,14,32,0.8); --bg-deep: rgba(6,10,24,0.6);
    --border: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.14);
    --text-primary: #f0f0f5; --text-secondary: #9898b4; --text-muted: #5e5e80;
    --accent: #3b82f6; --accent-hover: #60a5fa; --accent-glow: rgba(59,130,246,0.2);
    --success: #34d399; --success-bg: rgba(52,211,153,0.1);
    --error: #f87171; --error-bg: rgba(248,113,113,0.1);
    --warning: #fbbf24; --warning-bg: rgba(251,191,36,0.08);
    --header-bg: rgba(8,8,26,0.8); --overlay: rgba(0,0,0,0.65);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.5);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
    --glow-purple: 0 0 30px var(--accent-glow, rgba(59,130,246,0.15));
    --glow-red: 0 0 20px rgba(231,76,60,0.1);
}

[data-theme="light"] {
    --bg-primary: #f4f2f7; --bg-secondary: #eae6f0;
    --bg-card: rgba(255,255,255,0.85); --bg-card-hover: rgba(249,247,252,0.9);
    --bg-input: rgba(240,236,245,0.8); --bg-deep: rgba(235,230,242,0.6);
    --border: rgba(0,0,0,0.07); --border-hover: rgba(0,0,0,0.14);
    --text-primary: #1a1a2e; --text-secondary: #555570; --text-muted: #8888a0;
    --accent: #2563eb; --accent-hover: #1d4ed8; --accent-glow: rgba(37,99,235,0.15);
    --success: #10b981; --success-bg: rgba(16,185,129,0.1);
    --error: #ef4444; --error-bg: rgba(239,68,68,0.1);
    --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.08);
    --header-bg: rgba(244,242,247,0.85); --overlay: rgba(0,0,0,0.3);
    --glow-purple: 0 0 20px var(--accent-glow, rgba(37,99,235,0.1));
    --glow-red: 0 0 15px rgba(239,68,68,0.08);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased}
body{user-select:none;-webkit-user-select:none}
body::before{content:'';position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:
    radial-gradient(ellipse 80% 60% at 20% 10%, var(--accent-glow) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, var(--accent-glow) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, var(--accent-glow) 0%, transparent 60%);
    pointer-events:none}
iframe,.live-player,.chat-box,input,textarea,select{user-select:auto;-webkit-user-select:auto}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--accent-glow);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

.pack-row,.btn-primary,.btn-secondary,.btn-spin,.event-card,.events-tab,.preset-btn,.rubis-display,.btn-twitch-login{will-change:transform}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* ---------- Icons ---------- */
.icon{display:inline-flex;flex-shrink:0;vertical-align:middle}
.icon-xs{width:14px;height:14px}.icon-sm{width:18px;height:18px}.icon-nav{width:20px;height:20px}
.icon-md{width:24px;height:24px}.icon-lg{width:32px;height:32px}.icon-xl{width:48px;height:48px}
.icon-title{width:36px;height:36px;color:var(--accent);filter:drop-shadow(0 0 8px var(--accent-glow))}

.rubis-icon-xs,.rubis-icon-sm,.rubis-icon-md,.rubis-icon-lg,.rubis-icon-xl{object-fit:contain;flex-shrink:0}
.rubis-icon-xs{width:auto;height:30px}.rubis-icon-sm{width:auto;height:35px}.event-card-commun[data-event-currency="aura"] .contribute-input-group .rubis-icon-sm{height:50px}.event-card-commun[data-event-currency="aura"] .progress-current .rubis-inline,.event-card-commun[data-event-currency="aura"] .user-contrib .rubis-inline,.event-card-commun[data-event-currency="aura"] .top-amount .rubis-inline{height:28px;width:auto;vertical-align:-6px}
.rubis-icon-md{width:28px;height:44px}.rubis-icon-lg{width:40px;height:64px}.rubis-icon-xl{width:64px;height:100px}
.rubis-inline{width:10px;height:16px;vertical-align:-2px;display:inline-block;flex-shrink:0;object-fit:contain}

/* ---------- Buttons ---------- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:none;border-radius:var(--radius-md);background:var(--gradient-rubis);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.9rem;cursor:pointer;transition:transform .12s,box-shadow .12s;box-shadow:0 4px 16px var(--accent-glow);position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);opacity:0;transition:opacity .12s}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 28px var(--accent-glow)}
.btn-primary:hover::after{opacity:1}
.btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 10px var(--accent-glow)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-secondary);font-family:var(--font-display);font-weight:500;font-size:.9rem;cursor:pointer;transition:color .12s,border-color .12s,background .12s,box-shadow .12s}
.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}

/* ============================================
   LOGIN
   ============================================ */
.login-screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#050510;z-index:1000;overflow:hidden}
/* Clips wall — pure decoration, no interaction */
.login-clips-wall{position:absolute;inset:-60px;display:flex;gap:6px;padding:0 4px;opacity:.28;pointer-events:none;overflow:hidden;transform:rotate(-5deg) scale(1.15);transform-origin:center center}
.login-clips-wall::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,transparent 0%,#050510 75%);pointer-events:none;z-index:1}
.login-clips-col{flex:1;display:flex;flex-direction:column;gap:6px;animation:clipsScrollUp 50s linear infinite;will-change:transform}
@keyframes clipsScrollUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.login-clip-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:4px;flex-shrink:0}
.login-clip-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.3) brightness(.85)}
/* Particles */
.login-particles{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.login-particle{position:absolute;border-radius:50%;opacity:0;animation:loginParticle 8s ease-in-out infinite}
.login-particle.p1{width:4px;height:4px;background:#9b59b6;left:10%;top:80%;animation-delay:0s;animation-duration:7s}
.login-particle.p2{width:3px;height:3px;background:#3498db;left:25%;top:90%;animation-delay:1.5s;animation-duration:9s}
.login-particle.p3{width:5px;height:5px;background:#2ecc71;left:40%;top:85%;animation-delay:.8s;animation-duration:8s}
.login-particle.p4{width:3px;height:3px;background:#9b59b6;left:60%;top:92%;animation-delay:2.2s;animation-duration:10s}
.login-particle.p5{width:4px;height:4px;background:#3498db;left:75%;top:88%;animation-delay:.4s;animation-duration:7.5s}
.login-particle.p6{width:6px;height:6px;background:#2ecc71;left:85%;top:82%;animation-delay:3s;animation-duration:11s}
.login-particle.p7{width:3px;height:3px;background:#e74c3c;left:15%;top:70%;animation-delay:1s;animation-duration:8.5s}
.login-particle.p8{width:4px;height:4px;background:#f39c12;left:92%;top:76%;animation-delay:2s;animation-duration:9.5s}
@keyframes loginParticle{0%{transform:translateY(0) scale(0);opacity:0}15%{opacity:.7;transform:translateY(-30px) scale(1)}85%{opacity:.4;transform:translateY(-200px) scale(.8)}100%{opacity:0;transform:translateY(-280px) scale(0)}}
/* Card */
.login-card{position:relative;z-index:10;text-align:center;background:rgba(12,12,30,.85);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:52px 44px 40px;box-shadow:0 20px 80px rgba(0,0,0,.6),0 0 60px rgba(155,89,182,.08),0 0 120px rgba(52,152,219,.05);max-width:440px;width:90%;animation:loginCardIn .8s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
@keyframes loginCardIn{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.login-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(155,89,182,.3),transparent 40%,transparent 60%,rgba(52,152,219,.3));z-index:-1;pointer-events:none;opacity:.5}
.login-logo{margin-bottom:28px}
/* Rubis trio — all synced to 3s */
.login-rubis-trio{display:flex;align-items:flex-end;justify-content:center;gap:0;margin-bottom:18px;position:relative}
.login-rubis-main{display:block;animation:rubisMainFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(155,89,182,.5)) drop-shadow(0 0 50px rgba(155,89,182,.2));z-index:2;position:relative}
@keyframes rubisMainFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.login-rubis-side{display:block;z-index:1;opacity:.85;filter:drop-shadow(0 0 14px rgba(0,0,0,.4))}
.login-rubis-left{animation:rubisLeftFloat 3s ease-in-out infinite}
.login-rubis-right{animation:rubisRightFloat 3s ease-in-out infinite}
@keyframes rubisLeftFloat{0%,100%{transform:rotate(-18deg) translateX(10px) translateY(6px)}50%{transform:rotate(-14deg) translateX(8px) translateY(-4px)}}
@keyframes rubisRightFloat{0%,100%{transform:rotate(18deg) translateX(-10px) translateY(6px)}50%{transform:rotate(14deg) translateX(-8px) translateY(-4px)}}
.login-logo h1{font-family:var(--font-display);font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,#d7bde2,#fff,#aed6f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;animation:loginFadeUp .6s .3s both}
.login-subtitle{color:rgba(255,255,255,.45);margin-top:8px;font-size:.95rem;animation:loginFadeUp .6s .5s both}
.btn-twitch-login{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;background:linear-gradient(135deg,#6441a5,#9146ff);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-display);font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 24px rgba(100,65,165,.35);animation:loginFadeUp .6s .7s both;position:relative;overflow:hidden}
.btn-twitch-login:hover{transform:translateY(-3px);box-shadow:0 8px 36px rgba(145,70,255,.45)}
.btn-twitch-login:active{transform:translateY(0)}
.btn-twitch-login::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:left .5s}
.btn-twitch-login:hover::after{left:100%}
.login-note{color:rgba(255,255,255,.25);margin-top:20px;font-size:.82rem;animation:loginFadeUp .6s .9s both}
/* Credit — Aymen with social popup */
.login-credit-wrap{position:relative;display:inline-block}
.login-credit{color:rgba(155,89,182,.7);text-decoration:none;font-weight:700;transition:color .2s,text-shadow .2s;cursor:pointer}
.login-credit:hover{color:#bb6bd9;text-shadow:0 0 12px rgba(155,89,182,.4)}
.login-social-popup{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;background:rgba(12,12,30,.92);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:160px;box-shadow:0 12px 48px rgba(0,0,0,.6),0 0 20px rgba(155,89,182,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:opacity .25s,transform .25s}
.login-credit-wrap:hover .login-social-popup,.login-credit-wrap.show .login-social-popup{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.login-social-popup::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:rgba(255,255,255,.08)}
.login-social-link{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.5);text-decoration:none;font-size:.82rem;font-weight:600;padding:9px 14px;border-radius:8px;transition:color .15s,background .15s}
.login-social-link:hover{background:rgba(255,255,255,.06)}
.login-social-link svg{width:18px;height:18px;flex-shrink:0;transition:color .15s;color:rgba(255,255,255,.35)}
.login-social-link span{flex:1}
.login-social-link.social-twitch:hover{color:#9146ff}
.login-social-link.social-twitch:hover svg{color:#9146ff}
.login-social-link.social-discord:hover{color:#5865f2}
.login-social-link.social-discord:hover svg{color:#5865f2}
.login-social-link.social-github:hover{color:#e6edf3}
.login-social-link.social-github:hover svg{color:#e6edf3}
@keyframes loginFadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes rubisFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ============================================
   HEADER
   ============================================ */
.main-header{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 20px;background:var(--header-bg);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border-bottom:1px solid var(--border);transition:transform .2s ease}
.header-bg-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.header-bg-fx::before{content:'';position:absolute;top:0;left:-100%;width:200%;height:100%;background:linear-gradient(90deg,transparent 0%,var(--accent-glow) 25%,transparent 50%);opacity:.06;animation:headerShimmer 6s linear infinite}
.header-bg-fx::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--accent-glow),transparent 15%,transparent 85%,var(--accent-glow));opacity:.03}
@keyframes headerShimmer{0%{transform:translateX(0)}100%{transform:translateX(50%)}}
.header-left,.header-right,.main-nav{position:relative;z-index:1}
.header-right .notif-btn,.header-right .theme-toggle{background:rgba(255,255,255,.06)}
.header-right .notif-btn:hover,.header-right .theme-toggle:hover{background:rgba(255,255,255,.12)}
.header-right .rubis-display{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.header-left{display:flex;align-items:center}
.logo-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-primary)}
.logo-rubis{flex-shrink:0}
.logo-text{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.main-nav{display:flex;gap:4px}
.nav-link{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-md);color:var(--text-secondary);font-size:.88rem;font-weight:500;cursor:pointer;border:none;background:none;font-family:var(--font-body);transition:color .2s,background .2s,box-shadow .2s}
.nav-link:hover{color:var(--text-primary);background:var(--bg-card)}
.nav-link.active{color:var(--accent);background:var(--accent-glow);box-shadow:0 0 16px var(--accent-glow)}
.header-right{display:flex;align-items:center;gap:10px}
/* Notification system */
.notif-btn{position:relative;width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;background:var(--bg-card);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s,transform .2s,box-shadow .2s}
.notif-btn:hover{background:var(--bg-card-hover);color:var(--accent);transform:scale(1.12);box-shadow:0 0 12px var(--accent-glow)}
.notif-btn:hover svg{animation:bellShake .4s ease-in-out}
@keyframes bellShake{0%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.notif-badge{position:absolute;top:-2px;right:-2px;background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notif-panel{position:fixed;top:var(--header-h);right:12px;width:380px;max-height:calc(100vh - var(--header-h) - 20px);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:500;overflow-y:auto;padding:0}
.notif-panel.hidden{display:none}
.notif-header{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:space-between}
.notif-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.notif-section:last-child{border:none}
.notif-section-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px;font-weight:600}
.notif-ann{background:var(--bg-deep);padding:10px 12px;border-radius:var(--radius-sm);margin-bottom:6px;font-size:.88rem;line-height:1.4;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.notif-ann-text{flex:1;white-space:pre-wrap}
.notif-ann-dismiss{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1.1rem;padding:0 4px;flex-shrink:0}
.notif-poll{background:var(--bg-deep);padding:12px;border-radius:var(--radius-sm);margin-bottom:8px}
.notif-poll-q{font-weight:600;font-size:.9rem;margin-bottom:10px}
.notif-poll-opt{display:block;width:100%;padding:8px 12px;margin:4px 0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;text-align:left;color:var(--text-primary);font-family:inherit;transition:border-color .15s}
.notif-poll-opt:hover{border-color:var(--accent-primary)}
.notif-poll-opt.selected{border-color:var(--accent-primary);background:var(--accent-glow)}
.notif-poll-bar{display:flex;align-items:center;gap:6px;margin:3px 0;font-size:.8rem}
.notif-poll-bar-fill{height:18px;background:var(--accent-primary);border-radius:3px;min-width:2px;transition:width .3s}
.notif-poll-bar-bg{flex:1;height:18px;background:var(--bg-card);border-radius:3px;overflow:hidden}
.notif-poll-custom{width:100%;padding:8px;margin-top:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;font-family:inherit}
.notif-poll-submit{margin-top:8px;padding:6px 16px;background:var(--accent-primary,#3b82f6);color:#fff;border:none;border-radius:var(--radius-sm);font-weight:600;font-size:.82rem;cursor:pointer;font-family:inherit}
.notif-poll-meta{font-size:.75rem;color:var(--text-muted);margin-top:6px}
.notif-admin-msg{background:var(--bg-deep);padding:12px;border-radius:var(--radius-sm);border-left:3px solid var(--accent-primary)}
.notif-admin-msg p{margin-bottom:10px;font-size:.9rem;line-height:1.5;white-space:pre-wrap}
.notif-admin-msg button{padding:6px 20px;background:var(--accent-primary,#3b82f6);color:#fff;border:none;border-radius:var(--radius-sm);font-weight:600;cursor:pointer}
@media(max-width:500px){.notif-panel{left:8px;right:8px;width:auto}}
.theme-toggle{position:relative;width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;background:var(--bg-card);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s,transform .25s,box-shadow .25s}
.theme-toggle:hover{background:var(--bg-card-hover);color:var(--accent);transform:rotate(25deg) scale(1.12);box-shadow:0 0 14px var(--accent-glow)}
[data-theme="dark"] .theme-icon-moon{display:none}
[data-theme="light"] .theme-icon-sun{display:none}
[data-theme="light"] .header-right .notif-btn,[data-theme="light"] .header-right .theme-toggle{background:rgba(0,0,0,.05)}
[data-theme="light"] .header-right .notif-btn:hover,[data-theme="light"] .header-right .theme-toggle:hover{background:rgba(0,0,0,.1)}
[data-theme="light"] .header-right .rubis-display{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.rubis-display{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border);cursor:pointer;font-weight:600;font-size:.9rem;color:var(--text-primary);transition:border-color .12s,box-shadow .12s,transform .12s;font-family:var(--font-body)}
.rubis-display:hover{border-color:var(--rubis-red);box-shadow:0 0 16px rgba(231,76,60,.2);transform:translateY(-1px)}
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:var(--radius-md);border:none;background:none;cursor:pointer;color:var(--text-primary);transition:background .12s;font-family:var(--font-body)}
.user-btn:hover{background:var(--bg-card)}
.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid transparent;transition:border-color .12s}
.user-btn:hover .user-avatar{border-color:var(--accent)}
.user-name{font-weight:500;font-size:.88rem}
.user-chevron{transition:transform var(--transition)}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:220px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s;-webkit-backdrop-filter:blur(20px)}
.user-dropdown.show{opacity:1;backdrop-filter:blur(20px)}
.user-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-user-header{display:flex;align-items:center;gap:10px;padding:10px 12px 8px}
.dropdown-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.dropdown-user-info{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.dropdown-display-name{font-size:.88rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-username{font-size:.74rem;color:var(--text-muted)}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.dropdown-link{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);font-size:.88rem;color:var(--text-secondary);cursor:pointer;border:none;background:none;width:100%;font-family:var(--font-body);text-align:left;transition:color .1s,background .1s;text-decoration:none}
.dropdown-link:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.logout-link:hover{color:var(--error)}

/* ============================================
   MOBILE NAV
   ============================================ */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--header-bg);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border-top:1px solid var(--border);padding:6px 8px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;transition:transform .2s ease}
.mobile-nav-link{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:.7rem;font-weight:500;font-family:var(--font-body);border-radius:var(--radius-sm);transition:color .2s}
.mobile-nav-link.active{color:var(--accent)}
.mobile-nav-link .icon-nav{width:22px;height:22px}

/* ============================================
   MAIN CONTENT & PAGE SLIDER
   ============================================ */
.main-content{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
.page-slider{min-height:100%;height:100%;position:relative}
.page-panel{min-height:100%;padding:24px 24px 40px;max-width:1200px;margin:0 auto}
.no-animations *{transition-duration:0s !important;animation-duration:0s !important}

.page-loading{display:flex;justify-content:center;align-items:center;min-height:300px}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.page-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.page-title{font-family:var(--font-display);font-size:1.6rem;font-weight:700;line-height:1.2}
.page-desc{color:var(--text-secondary);font-size:.9rem;margin-top:4px}

/* ============================================
   LIVE PAGE
   ============================================ */
.page-panel[data-page="live"]{padding:0;max-width:none;min-height:0;height:calc(100vh - var(--header-h));overflow:hidden;box-sizing:border-box}
.live-page{height:100%}
.live-container{display:grid;grid-template-columns:1fr 340px;gap:0;height:100%;overflow:hidden}
.live-player-wrap{display:flex;flex-direction:column;min-height:0;background:#000;overflow:hidden}
.live-player{position:relative;width:100%;flex:1;min-height:0;background:#000;border-radius:0;overflow:hidden}
.live-info-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 16px;background:var(--bg-card);border:1px solid var(--border);border-top:none;flex-shrink:0}
.live-badge{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.85rem}
.live-badge.live-on{color:#ef4444}
.live-channel{color:var(--text-secondary);font-size:.82rem;font-weight:500}

.live-chat-wrap{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-left:none;overflow:hidden;border-radius:0;min-height:0}
.chat-header{display:flex;align-items:center;gap:8px;padding:8px 16px;font-weight:600;font-size:.9rem;border-bottom:1px solid var(--border);flex-shrink:0}
.chat-slot{flex:1;min-height:0;position:relative;overflow:hidden}

.chat-box{position:fixed;z-index:93;overflow:hidden}
.chat-box[data-mode="live"]{}
.chat-box[data-mode="hidden"]{position:fixed !important;bottom:0 !important;right:0 !important;left:auto !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden;pointer-events:none;opacity:0.01;z-index:-1}

.live-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex-shrink:0}
.live-dot-on{background:#ef4444;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}

/* ============================================
   PERSISTENT STREAM BOX
   ============================================ */
.stream-box{position:fixed;z-index:95;display:flex;flex-direction:column;overflow:hidden;border-radius:0;background:#000;transition:box-shadow .3s}

.stream-box[data-mode="live"]{border-radius:0;box-shadow:none;border:none}
.stream-box[data-mode="live"] .stream-bar{display:none}
.stream-box[data-mode="live"] .rh{display:none}
.stream-box[data-mode="live"] .stream-audio-overlay{display:none}

.stream-box[data-mode="mini"]{bottom:16px;right:16px;width:320px;height:220px;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-lg),var(--glow-purple)}
.stream-box[data-mode="mini"] .stream-bar{display:flex}
.stream-box[data-mode="mini"] .rh{display:block}
.stream-box[data-mode="mini"] .stream-audio-overlay{display:none}

.stream-box[data-mode="audio"]{bottom:16px;right:16px;width:220px;height:auto;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.stream-box[data-mode="audio"] .stream-bar{display:flex}
.stream-box[data-mode="audio"] .stream-frame{height:0;overflow:hidden;opacity:0;position:absolute}
.stream-box[data-mode="audio"] .rh{display:none}
.stream-box[data-mode="audio"] .stream-audio-overlay{display:flex;position:relative;padding:16px;gap:8px;color:var(--text-muted);font-size:.85rem;flex-direction:column;align-items:center}

.stream-box[data-mode="hidden"]{position:fixed !important;bottom:0 !important;right:0 !important;left:auto !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden;pointer-events:none;opacity:0.01;z-index:-1}
.stream-box[data-mode="hidden"] .stream-bar{display:none}
.stream-box[data-mode="hidden"] .rh{display:none}

.stream-bar{display:none;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);cursor:grab;flex-shrink:0;background:var(--bg-card)}
.stream-bar:active{cursor:grabbing}
.stream-bar-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem}
.stream-bar-channel{color:var(--text-secondary);font-weight:500}
.stream-bar-btns{display:flex;gap:4px}
.sbtn{width:28px;height:28px;border:none;border-radius:50%;background:var(--bg-input);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .1s,background .1s}
.sbtn:hover{background:var(--bg-card-hover);color:var(--text-primary)}

.stream-box:not(.muted) .mini-icon-mute{display:none}
.stream-box.muted .mini-icon-vol{display:none}
.stream-box[data-mode="audio"] #btnAudio{background:var(--accent-glow);color:var(--accent)}
.stream-frame{flex:1;background:#000;min-height:0;position:relative}
#twitchEmbedTarget{width:100%;height:100%}
#twitchEmbedTarget iframe{width:100%!important;height:100%!important}
.stream-frame iframe{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;border:none}

/* Offline overlay */
.offline-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:#000;display:flex;align-items:center;justify-content:center}
.offline-overlay.hidden{display:none}
.offline-img{width:100%;height:100%;object-fit:cover}

/* --- Custom Twitch Chat --- */
.custom-chat{display:flex;flex-direction:column;height:100%;background:var(--bg-card);position:relative}
.cc-messages{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.cc-msg{font-size:.82rem;line-height:1.5;word-wrap:break-word;padding:4px 8px;border-radius:4px;transition:background .1s;position:relative;-webkit-user-select:text;user-select:text}
.cc-msg:hover{background:var(--bg-input)}
.cc-msg-row{display:inline}
/* Mention highlight */
.cc-msg.cc-mention{background:rgba(230,126,34,0.12);border-left:3px solid #e67e22;padding-left:6px}
[data-theme="light"] .cc-msg.cc-mention{background:rgba(230,126,34,0.1)}
/* Reply context */
.cc-reply-ctx{font-size:.72rem;color:var(--text-muted);margin-bottom:2px;padding-left:4px;border-left:2px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:background .15s;border-radius:2px}
.cc-reply-ctx:hover{background:var(--bg-input);color:var(--text-secondary)}
.cc-reply-arrow{color:var(--text-muted);margin-right:2px}
/* Real badge images */
.cc-badge-img{width:18px;height:18px;vertical-align:middle;margin-right:2px;border-radius:2px}
/* Legacy emoji badges (fallback) */
.cc-badge{display:inline-flex;font-size:.65rem;margin-right:2px;vertical-align:middle}
.cc-name{font-weight:700;font-size:.82rem;margin-right:4px}
.cc-name::after{content:': '}
.cc-text{color:var(--text-primary);word-break:break-word}
.cc-emote{display:inline-block;height:1.8em;vertical-align:middle;margin:0 1px}
/* Reply button (appears on hover) */
.cc-reply-btn{display:none;position:absolute;right:6px;top:2px;width:20px;height:20px;border:none;border-radius:4px;background:var(--bg-card-hover);color:var(--text-muted);cursor:pointer;font-size:.75rem;line-height:1;transition:background .1s,color .1s;padding:0}
.cc-msg:hover .cc-reply-btn{display:flex;align-items:center;justify-content:center}
.cc-reply-btn:hover{background:var(--accent);color:#fff}
/* Reply bar */
.cc-reply-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg-input);border-top:1px solid var(--border);font-size:.78rem;color:var(--text-secondary);gap:8px}
.cc-reply-bar.hidden{display:none}
.cc-reply-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-reply-close{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1.1rem;padding:0 4px;line-height:1}
.cc-reply-close:hover{color:var(--text-primary)}
/* Load more */
.cc-load-more{text-align:center;padding:6px;border-bottom:1px solid var(--border);flex-shrink:0}
.cc-load-more.hidden{display:none}
.cc-load-btn{border:none;background:none;color:var(--accent);cursor:pointer;font-size:.78rem;font-weight:600;font-family:var(--font-body);padding:4px 12px;border-radius:var(--radius-sm);transition:background .1s}
.cc-load-btn:hover{background:var(--bg-input)}
/* Input */
.cc-input-wrap{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--border);flex-shrink:0}
.cc-input{flex:1;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;font-family:var(--font-body);outline:none;transition:border-color .15s;min-height:22px;max-height:80px;overflow-y:auto;word-break:break-word;-webkit-user-select:text;user-select:text;white-space:pre-wrap;line-height:1.4}
.cc-input:focus{border-color:var(--accent)}
.cc-input:empty::before{content:attr(data-placeholder);color:var(--text-muted);pointer-events:none}
.cc-input img.cc-emote{height:1.4em;vertical-align:middle;margin:0 1px;display:inline}
.cc-send{width:36px;height:36px;border:none;border-radius:var(--radius-sm);background:var(--gradient-rubis);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .12s}
.cc-send:hover{transform:scale(1.05)}

.cc-emote-btn{width:36px;height:36px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s;padding:0}
.cc-emote-btn:hover{color:var(--accent);background:var(--bg-input)}
/* Channel Points button */
.cc-cp-btn{width:36px;height:36px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s;padding:0}
.cc-cp-btn:hover{color:#a78bfa;background:var(--bg-input)}

.cc-emote-picker{position:fixed;height:280px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;flex-direction:column;z-index:200;box-shadow:var(--shadow-lg);animation:epSlideUp .15s ease}
.cc-emote-picker.hidden{display:none}
@keyframes epSlideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cc-ep-header{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--border)}
.cc-ep-search{flex:1;padding:5px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.8rem;font-family:var(--font-body);outline:none}
.cc-ep-search:focus{border-color:var(--accent)}
.cc-ep-close{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1.2rem;padding:0 4px;line-height:1}
.cc-ep-close:hover{color:var(--text-primary)}
.cc-ep-tabs{display:flex;gap:2px;padding:4px 8px;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none}
.cc-ep-tabs::-webkit-scrollbar{display:none}
.cc-ep-tab{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:.72rem;font-weight:600;font-family:var(--font-body);padding:3px 8px;border-radius:var(--radius-sm);transition:background .1s,color .1s;white-space:nowrap;flex-shrink:0}
.cc-ep-tab:hover{background:var(--bg-input);color:var(--text-primary)}
.cc-ep-tab.active{background:var(--accent);color:#fff}
.cc-ep-grid{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px;display:grid;grid-template-columns:repeat(auto-fill, minmax(36px, 1fr));gap:2px;align-content:start}
.cc-ep-emote{width:36px;height:36px;border:none;border-radius:4px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;transition:background .1s}
.cc-ep-emote:hover{background:var(--bg-input)}
.cc-ep-emote img{max-width:28px;max-height:28px;object-fit:contain}
.cc-ep-empty{grid-column:1/-1;text-align:center;color:var(--text-muted);font-size:.8rem;padding:20px 0}
.cc-ep-group-header{grid-column:1/-1;font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding:6px 2px 2px;border-bottom:1px solid var(--border);margin-bottom:2px;display:flex;align-items:center;justify-content:space-between}
.cc-ep-gm-link{font-size:.65rem;font-weight:600;color:var(--accent);text-decoration:none;text-transform:none;letter-spacing:0;padding:2px 8px;border:1px solid var(--accent);border-radius:var(--radius-sm);transition:background .15s,color .15s}
.cc-ep-gm-link:hover{background:var(--accent);color:#fff}

.cc-msg-highlight{animation:msgHighlight 1.5s ease}
@keyframes msgHighlight{0%{background:var(--accent-glow)}100%{background:transparent}}

.cc-system-msg{display:flex;align-items:flex-start;gap:6px;padding:6px 10px;font-size:.78rem;color:var(--text-muted);background:rgba(229,192,123,0.08);border-left:3px solid #e5c07b;border-radius:4px}
.cc-system-msg.cc-event-msg{background:var(--accent-glow);border-left-color:var(--accent);color:var(--text-secondary)}
.cc-system-icon{flex-shrink:0;font-size:.9rem;line-height:1.4}
.cc-system-text{line-height:1.4;word-break:break-word}
.cc-input-container{flex:1;position:relative;min-width:0}
.cc-input-container .cc-input{width:100%}
.cc-scroll-bottom{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);padding:4px 14px;border-radius:20px;background:var(--accent);color:#fff;border:none;font-size:.75rem;cursor:pointer;z-index:5;box-shadow:var(--shadow-md)}
.cc-scroll-bottom.hidden{display:none}
.cc-mention-list{position:absolute;bottom:100%;left:0;right:0;max-height:160px;overflow-y:auto;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:50}
.cc-mention-list.hidden{display:none}
.cc-mention-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:.82rem;transition:background .1s}
.cc-mention-item:hover,.cc-mention-item.active{background:var(--bg-card-hover)}
.spinner-sm{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto}
.cc-ep-error{color:var(--text-muted);font-size:.78rem;line-height:1.5;padding:20px 16px}
.theme-color-row{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0}
.theme-color-btn{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:transform .12s;padding:0;position:relative}
.theme-color-btn:hover{transform:scale(1.15)}
.theme-color-btn.active{border-color:#fff;box-shadow:0 0 10px currentColor}
.theme-color-btn.active::after{content:'\2713';position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.65rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,0.5)}

.stream-audio-overlay{display:none}
.rh{position:absolute;width:20px;height:20px;z-index:10;display:none;background:transparent;border:none;outline:none}
.rh-tl{top:0;left:0;cursor:nwse-resize}.rh-tr{top:0;right:0;cursor:nesw-resize}
.rh-bl{bottom:0;left:0;cursor:nesw-resize}.rh-br{bottom:0;right:0;cursor:nwse-resize}

.mini-restore-btn{position:fixed;z-index:89;bottom:80px;right:20px;display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);box-shadow:var(--shadow-md);color:var(--text-secondary);font-family:var(--font-display);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .25s;opacity:0;transform:translateY(10px)}
.mini-restore-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}
.mini-restore-btn.hidden{display:none}
.mini-restore-btn.show{opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}

/* ============================================
   EVENTS / CARDS GRID
   ============================================ */
.events-tabs{display:flex;gap:6px;margin-bottom:20px}
.events-tab{display:flex;align-items:center;gap:6px;padding:9px 20px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-weight:600;font-size:.9rem;cursor:pointer;transition:color .12s,border-color .12s,background .12s,box-shadow .12s}
.events-tab:hover{border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-1px)}
.events-tab.active{background:var(--gradient-rubis);border-color:transparent;color:#fff;box-shadow:0 4px 20px var(--accent-glow)}
.events-tab-content.hidden{display:none}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.event-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:14px;transition:transform .15s,border-color .15s,box-shadow .15s;overflow:hidden}
.event-banner{margin:-20px -20px 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;max-height:140px}
.event-banner img{width:100%;height:100%;object-fit:cover;display:block}
.event-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md),var(--glow-purple);transform:translateY(-3px)}
.event-icon-wrap{width:48px;height:48px;border-radius:var(--radius-md);background:var(--accent-glow);display:flex;align-items:center;justify-content:center;transition:background .15s,box-shadow .15s}
.event-card:hover .event-icon-wrap{background:var(--accent-glow);box-shadow:0 0 16px var(--accent-glow)}
.event-icon-svg{color:var(--accent)}
.event-info{flex:1}
.event-title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:4px}
.event-desc{font-size:.78rem;color:var(--text-muted);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.event-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.4}
.event-action{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--border)}
.event-cost{display:flex;align-items:center;gap:6px;font-weight:700;font-size:1.05rem;color:var(--rubis-red)}
.event-input{margin-top:8px}
.event-input label{display:block;font-size:.78rem;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.event-input input,.event-input textarea,.event-input select{width:100%;padding:8px 10px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius-sm);font-size:.84rem;font-family:inherit}
.event-input input:focus,.event-input textarea:focus,.event-input select:focus{outline:none;border-color:var(--accent)}
.event-input textarea{height:60px;resize:vertical}
.event-card-commun{position:relative}
.event-reached{border-color:var(--success);box-shadow:0 0 20px rgba(52,211,153,0.12)}
.reached-banner{display:flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(16,185,129,.15);color:var(--success);border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;width:fit-content;position:absolute;top:12px;left:12px;z-index:3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.event-commun-header{display:flex;gap:14px;align-items:flex-start}
.progress-section{margin-top:4px}
.progress-bar-wrap{height:10px;background:var(--bg-input);border-radius:5px;overflow:hidden}
.progress-bar{height:100%;background:var(--gradient-rubis);border-radius:5px;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px var(--accent-glow)}
.progress-complete{background:linear-gradient(135deg,var(--success),#10b981);box-shadow:0 0 12px rgba(52,211,153,.3)}
.progress-info{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem}
.progress-current{display:flex;align-items:center;gap:4px;font-weight:600}
.progress-goal{color:var(--text-muted)}
.progress-pct{margin-left:auto;font-weight:600;color:var(--accent)}
.progress-meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.8rem;color:var(--text-muted);flex-wrap:wrap}
.user-contrib{display:inline-flex;align-items:center;gap:3px;color:var(--accent)}
.top-contributors{background:var(--bg-input);border-radius:var(--radius-md);padding:12px;margin-top:4px}
.top-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.85rem;margin-bottom:8px}
.top-empty{color:var(--text-muted);font-size:.82rem}
.top-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.85rem}
.top-avatar{width:22px;height:22px;border-radius:50%}
.top-name{flex:1;font-weight:500}
.top-amount{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--rubis-red)}
.event-contribute{padding-top:12px;border-top:1px solid var(--border)}
.contribute-input-group{display:flex;align-items:center;gap:8px}
.contribute-input{flex:1;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.9rem;font-family:var(--font-body);outline:none;transition:border-color .15s,box-shadow .15s}
.contribute-input:focus{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.contribute-presets{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}.event-card-commun[data-event-currency="aura"] .contribute-presets{display:grid;grid-template-columns:repeat(3,1fr)}
.preset-btn{padding:5px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:.82rem;font-weight:500;cursor:pointer;transition:color .12s,border-color .12s,box-shadow .12s,transform .12s;font-family:var(--font-body)}
.preset-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px var(--accent-glow);transform:translateY(-1px)}
.preset-all{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}

/* ============================================
/* === Aura Exchange Card === */

/* ============================================
   HISTORY PANEL (shared boutique + wheel style)
   ============================================ */
.history-panel{position:fixed;top:var(--header-h);right:0;width:340px;height:calc(100vh - var(--header-h));background:var(--bg-card);border-left:1px solid var(--border);z-index:100;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slideInRight .25s ease}
.history-panel.hidden{display:none}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.hp-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}
.hp-header h3{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:.95rem;margin:0}
.hp-close{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1.2rem;padding:4px 8px;border-radius:var(--radius-sm);transition:color .1s,background .1s}
.hp-close:hover{color:var(--error);background:var(--error-bg)}
.hp-list{flex:1;overflow-y:auto;padding:8px}
.hp-empty{text-align:center;color:var(--text-muted);padding:24px;font-size:.85rem}
.hp-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);transition:background .1s}
.hp-item:hover{background:var(--bg-input)}
.hp-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hp-icon-solo{background:rgba(251,191,36,0.12);color:#fbbf24}
.hp-icon-commun{background:rgba(52,211,153,0.12);color:#34d399}
.hp-icon-roue{background:var(--accent-glow);color:var(--accent)}
.hp-info{display:flex;flex-direction:column;flex:1;min-width:0}
.hp-title{font-weight:600;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-type{color:var(--text-muted);font-size:.72rem}
.hp-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.hp-amount{display:flex;align-items:center;gap:3px;font-weight:600;font-size:.8rem;color:var(--error)}
.hp-time{color:var(--text-muted);font-size:.7rem}

/* WHEEL / ROUE — MOVED to pages/roue/style.css (sprint 1.15) */

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--text-muted)}
.empty-state .icon-xl{width:64px;height:64px;margin-bottom:16px;opacity:.4}

/* ============================================
   TOAST
   ============================================ */
.toast-container{position:fixed;top:72px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-md);font-size:.88rem;transform:translateX(120%);transition:all .3s ease;max-width:360px}
.toast-show{transform:translateX(0)}
.toast-hide{transform:translateX(120%);opacity:0}
.toast-success .toast-icon{color:var(--success)}
.toast-error .toast-icon{color:var(--error)}
.toast-warning .toast-icon{color:var(--warning)}
.toast-info .toast-icon{color:var(--accent)}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:var(--overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .2s}
.modal-overlay.hidden{opacity:0;pointer-events:none}
.modal-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px;max-width:440px;width:90%;box-shadow:var(--shadow-lg),var(--glow-purple)}
.modal-card:has(.planning-modal){max-width:fit-content;width:auto;max-height:90vh;overflow-y:auto}
.modal-card:has(.contrib-modal){max-width:520px;width:95%;max-height:85vh;overflow-y:auto}
.modal-card:has(#stripeCheckoutWrap){max-width:520px;max-height:90vh;overflow-y:auto}
/* Modal max-width = min(800, viewport-w-margin, viewport-h-réservé * 16/9) ←
   garantit que la stage 16:9 + le chrome modale tient sans scroll vertical. */
.modal-card:has(#mepStage){max-width:min(800px,calc(100vw - 32px),calc((100vh - 180px) * 16 / 9));width:100%;max-height:95vh;overflow-y:auto;padding:14px}
@media (max-width:600px){.modal-card:has(#mepStage){padding:10px;max-width:calc(100vw - 12px)}}
.mep-r:hover{background:rgba(59,130,246,.35) !important}
.mep-r-nw:hover,.mep-r-ne:hover,.mep-r-sw:hover,.mep-r-se:hover{transform:scale(1.2);background:#60a5fa !important}
/* Sprint event7 : backdrop-filter de la modal-overlay = laggy desktop (Chrome
   re-blur l'écran entier sur chaque mouvement). On le désactive pendant que
   le positionneur est affiché → drag fluide à 60fps. */
.modal-overlay:has(#mepStage){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,12,28,.85)}
#mepMedia{will-change:left,top,width,height;transform:translateZ(0)}
/* File upload box hover (zone "Clique pour choisir un fichier") */
.me-upload-box{border:1.5px dashed var(--border);border-radius:10px;padding:24px;text-align:center;cursor:pointer;background:rgba(255,255,255,.02);transition:border-color .15s,background .15s,transform .1s}
.me-upload-box:hover{border-color:#3b82f6;background:rgba(59,130,246,.08)}
.me-upload-box:active{transform:scale(.98)}
.modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;border-radius:50%;background:var(--bg-input);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .1s,background .1s}
.modal-close:hover{background:var(--error-bg);color:var(--error)}
.modal-body h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:12px}
.modal-body p{color:var(--text-secondary);margin-bottom:8px;line-height:1.5}
.modal-note{font-size:.82rem;color:var(--text-muted)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* ============================================
   EVENT 12 — DESSINER SUR LE STREAM (modale canvas)
   ============================================ */
/* Modale large : la stage 16:9 + toolbar + footer tiennent SANS scroll. Le 3e
   terme du min() borne la largeur pour que la hauteur totale (stage 16:9 + ~250px
   de chrome) tienne dans la fenêtre → pas de scrollbar. */
.modal-card:has(#dreStage){max-width:min(920px,calc(100vw - 24px),calc((100vh - 250px) * 16 / 9));width:100%;max-height:96vh;overflow:hidden;padding:18px}
/* Pas de croix : la modale se ferme via "Annuler" / clic backdrop / Échap.
   On masque le bouton de fermeture générique de .modal-card pour cet event. */
.modal-card:has(#dreStage) .modal-close{display:none}
/* backdrop-filter = laggy pendant le dessin (Chrome re-blur tout l'écran). */
.modal-overlay:has(#dreStage){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,12,28,.9)}

.dre-root{display:flex;flex-direction:column;gap:14px}
.dre-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dre-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary)}
.dre-close{width:34px;height:34px;flex-shrink:0;border:none;border-radius:50%;background:var(--bg-input);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .12s,background .12s}
.dre-close:hover{background:var(--error-bg);color:var(--error)}

.dre-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0a0a18;border:1px solid var(--border);touch-action:none;user-select:none;-webkit-user-select:none}
.dre-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;-webkit-user-drag:none;pointer-events:none}
.dre-bg-empty{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.85rem}
.dre-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:1}

.dre-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between}
.dre-colors{display:flex;flex-wrap:wrap;gap:7px}
.dre-swatch{width:27px;height:27px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:var(--sw);padding:0;cursor:pointer;position:relative;transition:transform .1s,border-color .1s,box-shadow .1s}
.dre-swatch:hover{transform:scale(1.14)}
.dre-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.dre-swatch-custom{background:conic-gradient(from 0deg,#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#0a84ff,#5e5ce6,#bf5af2,#ff3b30);overflow:hidden;display:flex;align-items:center;justify-content:center}
.dre-swatch-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}

.dre-tools{display:flex;align-items:center;gap:8px}
.dre-size{display:flex;align-items:center;gap:10px;min-width:170px}
.dre-size-slot{width:54px;height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dre-size-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.25);transition:width .08s,height .08s,background .08s}
.dre-tool-btn{width:38px;height:38px;flex-shrink:0;border-radius:10px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.dre-tool-btn:hover{color:var(--text-primary);border-color:var(--accent)}
.dre-tool-btn.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}
.dre-tool-btn:disabled{opacity:.4;cursor:not-allowed}
.dre-tool-danger:hover{color:var(--error);border-color:var(--error)}

.dre-range{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;background:var(--bg-input);outline:none;cursor:pointer}
.dre-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer}
.dre-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer}

.dre-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px}
.dre-duration{flex:1;min-width:200px;display:flex;flex-direction:column;gap:7px}
.dre-dur-label{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-muted)}
.dre-dur-label b{margin-left:auto;color:var(--text-primary);font-size:.92rem;font-weight:700}
.dre-cost{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;padding:9px 16px;border-radius:10px;background:var(--accent-glow);border:1px solid var(--accent);white-space:nowrap}
.dre-actions{display:flex;gap:8px}
.dre-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-family:var(--font-display);font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid transparent;transition:transform .1s,box-shadow .12s,color .12s}
.dre-btn-ghost{background:var(--bg-input);border-color:var(--border);color:var(--text-secondary)}
.dre-btn-ghost:hover{color:var(--text-primary)}
.dre-btn-primary{background:var(--gradient-rubis);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}
.dre-btn-primary:hover:not(:disabled){transform:translateY(-1px)}
.dre-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

@media(max-width:600px){
    .modal-card:has(#dreStage){padding:12px;max-width:calc(100vw - 10px)}
    .dre-swatch{width:24px;height:24px}
    .dre-tool-btn{width:34px;height:34px}
    .dre-toolbar{gap:10px}
    .dre-cost{width:100%;text-align:center}
    .dre-actions{flex:1}
    .dre-btn{flex:1;justify-content:center}
}

/* ============================================
   EVENT 8 — MESSAGE VOCAL (enregistreur micro)
   ============================================ */
.modal-card:has(.voe-root){max-width:min(520px,calc(100vw - 24px));width:100%;max-height:96vh;overflow:hidden;padding:22px}
.modal-card:has(.voe-root) .modal-close{display:none}

.voe-root{display:flex;flex-direction:column;gap:16px}
.voe-header{display:flex;align-items:center;justify-content:center}
.voe-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary)}
.voe-hint{font-size:.82rem;line-height:1.45;color:var(--text-muted);text-align:center}

.voe-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 12px;border-radius:14px;background:#0a0a18;border:1px solid var(--border)}
.voe-mic{width:84px;height:84px;border-radius:50%;border:1px solid var(--accent);background:var(--accent-glow);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,box-shadow .15s,background .15s,color .15s}
.voe-mic:hover{transform:scale(1.05)}
.voe-mic.rec{background:var(--error-bg);border-color:var(--error);color:var(--error);animation:voePulse 1.4s ease-out infinite}
@keyframes voePulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}70%{box-shadow:0 0 0 16px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.voe-timer{font-family:var(--font-display);font-weight:700;font-size:1.8rem;color:var(--text-primary);font-variant-numeric:tabular-nums}
.voe-state{font-size:.82rem;color:var(--text-muted);text-align:center}
.voe-preview{width:100%;margin-top:4px}

.voe-footer{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--border);padding-top:16px}
.voe-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.voe-dur{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--text-secondary)}
.voe-clock{display:inline-flex;color:var(--text-muted)}
.voe-cap{color:var(--text-muted)}
.voe-cost{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;padding:9px 16px;border-radius:10px;background:var(--accent-glow);border:1px solid var(--accent);white-space:nowrap}
.voe-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.voe-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-family:var(--font-display);font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid transparent;transition:transform .1s,box-shadow .12s,color .12s}
.voe-btn-ghost{background:var(--bg-input);border-color:var(--border);color:var(--text-secondary)}
.voe-btn-ghost:hover{color:var(--text-primary)}
.voe-btn-primary{background:var(--gradient-rubis);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}
.voe-btn-primary:hover:not(:disabled){transform:translateY(-1px)}
.voe-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

@media(max-width:600px){
    .modal-card:has(.voe-root){padding:14px}
    .voe-cost{flex:1;text-align:center}
    .voe-actions{width:100%}
    .voe-btn{flex:1;justify-content:center}
}

/* ============================================
   EVENT 6 — ZOOM CAMÉRA (positionneur 16:9)
   ============================================ */
.modal-card:has(#zoeStage){max-width:min(920px,calc(100vw - 24px),calc((100vh - 230px) * 16 / 9));width:100%;max-height:96vh;overflow:hidden;padding:18px}
.modal-card:has(#zoeStage) .modal-close{display:none}
.modal-overlay:has(#zoeStage){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,12,28,.9)}

.zoe-root{display:flex;flex-direction:column;gap:14px}
.zoe-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zoe-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary)}
.zoe-lvl{font-family:var(--font-display);font-weight:700;color:var(--accent);background:var(--accent-glow);border:1px solid var(--accent);border-radius:8px;padding:4px 10px;font-size:.9rem;white-space:nowrap}

.zoe-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0a0a18;border:1px solid var(--border);touch-action:none;user-select:none;-webkit-user-select:none}
.zoe-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;-webkit-user-drag:none;pointer-events:none}
.zoe-bg-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.85rem}

/* Le box-shadow géant assombrit tout le stage SAUF l'intérieur du rectangle. */
.zoe-rect{position:absolute;box-sizing:border-box;cursor:move;touch-action:none;border:2px solid #fff;border-radius:2px;box-shadow:0 0 0 9999px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6) inset;will-change:left,top,width,height}
.zoe-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;font-weight:700;font-size:.92rem;text-shadow:0 1px 4px rgba(0,0,0,.9);pointer-events:none}
.zoe-h{position:absolute;background:transparent;touch-action:none}
.zoe-h-n{top:-9px;left:18px;right:18px;height:18px;cursor:ns-resize}
.zoe-h-s{bottom:-9px;left:18px;right:18px;height:18px;cursor:ns-resize}
.zoe-h-e{right:-9px;top:18px;bottom:18px;width:18px;cursor:ew-resize}
.zoe-h-w{left:-9px;top:18px;bottom:18px;width:18px;cursor:ew-resize}
.zoe-h-nw,.zoe-h-ne,.zoe-h-sw,.zoe-h-se{width:24px;height:24px;border-radius:50%;background:var(--accent);border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .1s}
.zoe-h-nw:hover,.zoe-h-ne:hover,.zoe-h-sw:hover,.zoe-h-se:hover{transform:scale(1.18)}
.zoe-h-nw{top:-12px;left:-12px;cursor:nwse-resize}
.zoe-h-ne{top:-12px;right:-12px;cursor:nesw-resize}
.zoe-h-sw{bottom:-12px;left:-12px;cursor:nesw-resize}
.zoe-h-se{bottom:-12px;right:-12px;cursor:nwse-resize}

.zoe-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px}
.zoe-duration{flex:1;min-width:200px;display:flex;flex-direction:column;gap:7px}
.zoe-dur-label{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-muted)}
.zoe-dur-label b{margin-left:auto;color:var(--text-primary);font-size:.92rem;font-weight:700}
.zoe-cost{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;padding:9px 16px;border-radius:10px;background:var(--accent-glow);border:1px solid var(--accent);white-space:nowrap}
.zoe-actions{display:flex;gap:8px}

@media(max-width:600px){
    .modal-card:has(#zoeStage){padding:12px;max-width:calc(100vw - 10px)}
    .zoe-cost{width:100%;text-align:center}
    .zoe-actions{flex:1}
    .zoe-actions .dre-btn{flex:1;justify-content:center}
}

/* ============================================
   SETTINGS MODAL
   ============================================ */
.settings-card{max-width:480px}
.settings-body h3{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.2rem;margin-bottom:20px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.setting-row:last-child{border-bottom:none}
.setting-label{font-weight:500;font-size:.92rem}
.setting-desc{color:var(--text-muted);font-size:.78rem;margin-top:2px}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;border-radius:24px;background:var(--bg-input);border:1px solid var(--border);transition:all .25s}
.toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:2px;bottom:2px;border-radius:50%;background:var(--text-muted);transition:all .25s}
.toggle-switch input:checked+.toggle-slider{background:var(--accent-glow);border-color:var(--accent)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);background:var(--accent)}

/* ============================================
   COOKIE BANNER
   ============================================ */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--bg-card);border-top:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 -4px 24px rgba(0,0,0,.4)}
.cookie-text{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text-secondary);flex:1}
.btn-cookie-accept{padding:12px 28px;border:none;border-radius:var(--radius-md);background:var(--gradient-rubis);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap;min-width:120px;min-height:48px;transition:transform .12s,box-shadow .12s;box-shadow:0 4px 16px var(--accent-glow)}
.btn-cookie-accept:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--accent-glow)}

/* ============================================
   COMPACT MODE
   ============================================ */

body.compact .event-card{padding:14px;gap:10px}
body.compact .pack-row{padding:12px}
body.compact .page-header{margin-bottom:20px;padding-bottom:14px}
body.compact .page-panel{padding:20px 16px 30px}
body.compact .page-title{font-size:1.3rem}
body.compact .events-grid{gap:12px}
body.compact .event-banner{max-height:100px}
body.compact .top-row{padding:6px 0}
body.compact .setting-row{padding:12px 0}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
    .main-nav{display:none}
    :root{--header-h:56px}
    .mobile-nav{display:flex}
    .br-join-wrap{padding:6px 10px;gap:8px;margin-bottom:30px}
    .main-content{bottom:var(--mobile-nav-h)}
    .page-panel[data-page="live"]{height:100%;overflow:hidden;padding:0}
    .live-page{display:none}
    .stream-box[data-mode="live"]{top:var(--header-h);left:0;right:0;width:100%!important;height:56.25vw!important;z-index:95}
    .stream-box[data-mode="live"] .stream-frame{position:absolute;top:0;left:0;right:0;bottom:0}
    .stream-box[data-mode="live"] .stream-frame iframe{width:100%;height:100%}
    .chat-box[data-mode="live"]{top:calc(var(--header-h) + 56.25vw + var(--live-info-h));left:0;right:0;bottom:var(--mobile-nav-h);width:100%!important;z-index:93}
    .chat-box[data-mode="live"] .custom-chat{height:100%;display:flex;flex-direction:column}
    .chat-box[data-mode="live"] .cc-messages{flex:1;min-height:0}
    .chat-box[data-mode="live"] .cc-input-wrap{flex-shrink:0}
    .cc-msg:hover{background:transparent}
    .cc-msg:hover .cc-reply-btn{display:none}
    .cc-reply-btn{display:none!important}
    /* Cibles tactiles >=44px */
    .cc-send,.cc-emote-btn,.cc-cp-btn{width:44px;height:44px}
    .cc-scroll-bottom{bottom:64px}
    /* Swipe-droite pour repondre : fleche revelee + etat arme (couleurs du theme) */
    .cc-msg.cc-swiping{user-select:none;-webkit-user-select:none}
    .cc-msg.cc-swiping::before{content:'\21A9';position:absolute;left:-24px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--text-muted);opacity:.65}
    .cc-msg.cc-swipe-armed::before{color:var(--accent);opacity:1}
    .cc-msg.cc-swipe-armed{background:var(--accent-glow)}
    body.kb-open .mobile-nav{transform:translateY(100%)}
    body.kb-open #mobileLiveInfo{display:none!important}
    body.kb-open{overflow:hidden!important;position:fixed!important;width:100%;height:100%;top:0;left:0;margin:0}
    body.kb-open .main-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:300!important;transform:none!important}
    body.kb-open .stream-box[data-mode="live"]{position:fixed!important;top:var(--header-h)!important;left:0!important;right:0!important;width:100%!important;height:56.25vw!important;z-index:200!important;transform:none!important}
    body.kb-open .chat-box[data-mode="live"]{position:fixed!important;left:0!important;right:0!important;z-index:94;display:flex;flex-direction:column}
    body.kb-open .chat-box[data-mode="live"] .cc-messages{flex:1;min-height:0;overflow-y:auto}
    body.kb-open .chat-box[data-mode="live"] .cc-input-wrap{flex-shrink:0}
    .stream-box[data-mode="mini"]{bottom:calc(70px + env(safe-area-inset-bottom));right:10px;width:240px;height:175px}
    .stream-box[data-mode="audio"]{bottom:calc(70px + env(safe-area-inset-bottom));right:10px}
    .mini-restore-btn{bottom:calc(70px + env(safe-area-inset-bottom));right:10px}
    .events-grid{grid-template-columns:1fr}
    /* .wheels-dual — MOVED (sprint 1.15) */
    /* #wheelStd,#wheelPrem — MOVED (sprint 1.15) */
    .history-panel{width:100%}
    .cookie-banner{flex-direction:column;padding:20px;gap:14px}
    .cookie-text{font-size:.85rem}
    .btn-cookie-accept{width:100%;padding:16px;font-size:1rem;min-height:54px}
    .cc-emote-picker{left:0!important;right:0!important;width:100%!important;position:fixed!important;bottom:calc(56px + env(safe-area-inset-bottom))!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0;height:45vh!important}
    body.kb-open .cc-emote-picker{bottom:0!important}
}

@media(max-width:600px){
    .page-panel{padding:16px 14px 30px}
    .page-title{font-size:1.3rem}
    .header-left .logo-text{display:none}
    .pack-row{padding:12px}
    .pack-amount{font-size:1.2rem}
    .pack-price{font-size:1rem}
    /* #wheelStd,#wheelPrem — MOVED (sprint 1.15) */
    .stream-box[data-mode="mini"]{width:200px;height:153px;bottom:calc(64px + env(safe-area-inset-bottom))}
    .mini-restore-btn{bottom:calc(64px + env(safe-area-inset-bottom))}
    .pack-badge{font-size:.65rem;padding:2px 8px}
    .modal-card{padding:24px 20px}
    .login-card{padding:36px 24px 32px}
    .login-rubis-trio .rubis-icon-xl{width:48px;height:75px}
    .login-rubis-trio .rubis-icon-lg{width:30px;height:48px}
    .login-clips-wall{gap:4px;opacity:.08}
    .login-logo h1{font-size:1.7rem}
}

@media(max-width:400px){
    .cp-rate{padding:10px 14px;gap:8px}.cp-rate-points{font-size:.9rem}
}

.cc-context-menu{position:fixed;z-index:300;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden;min-width:150px;animation:ucPop .12s ease}
.cc-context-menu.hidden{display:none}
.cc-ctx-item{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:.88rem;color:var(--text-primary);cursor:pointer;border:none;background:none;width:100%;font-family:var(--font-body);text-align:left;-webkit-tap-highlight-color:transparent}
.cc-ctx-item:active{background:var(--bg-card-hover)}
.cc-ctx-item+.cc-ctx-item{border-top:1px solid var(--border)}
.cc-ctx-icon{font-size:1rem;flex-shrink:0}

.mobile-live-info{position:fixed;top:calc(var(--header-h) + 56.25vw);left:0;right:0;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);z-index:94;height:var(--live-info-h);box-sizing:border-box;font-size:.8rem}
.mobile-live-info .live-viewers{color:#ef4444;font-weight:600;display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.mobile-live-info .live-title{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}



/* ===== LOW PERFORMANCE MODE ===== */
body.low-perf,body.low-perf *{animation:none!important;transition:none!important}
body.low-perf .stream-box[data-mode="mini"],body.low-perf .stream-box[data-mode="audio"]{display:none!important}
body.low-perf .mini-restore-btn{display:none!important}
body.low-perf *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.low-perf .login-bg{background:var(--bg-primary)!important}
body.low-perf .login-bg::before,body.low-perf .login-bg::after{display:none!important}
body.low-perf .login-clips-wall,body.low-perf .login-particles{display:none!important}
body.low-perf .main-header .header-bg-fx{display:none!important}
body.low-perf .gartic-confetti,body.low-perf .gartic-sparkles,body.low-perf .gartic-stars{display:none!important}
body.low-perf .notif-btn:hover svg{animation:none!important}
body.low-perf .event-card:hover,body.low-perf .jeux-card:hover,body.low-perf .boutique-card:hover{transform:none!important}
body.low-perf .gartic-overlay{backdrop-filter:none!important;background:rgba(0,0,0,.85)!important}
/* body.low-perf .wheel-result-card — MOVED (sprint 1.15) */
body.low-perf *:hover{box-shadow:none!important}

/* ===== GAME MODE ===== */
body.game-mode .main-content{padding:0!important;max-width:100%!important}
body.game-mode .page-slider{padding:0!important}
body.game-mode .jeux-page{max-width:100%;padding:0}
body.game-mode #jeux-game{position:fixed;inset:0;z-index:9999;background:var(--bg-primary)}

/* ===== PIXEL ART BUTTONS ===== */
.gartic-opt{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:0;font-weight:600;font-size:.82rem;cursor:pointer;color:#d0d0e0;background:#2a2a3e;outline:2px solid rgba(0,0,0,.3);outline-offset:-2px;box-shadow:3px 3px 0 0 rgba(0,0,0,.4),inset -2px -2px 0 0 rgba(0,0,0,.2),inset 2px 2px 0 0 rgba(255,255,255,.06);transition:transform 60ms,box-shadow 60ms;font-family:inherit;white-space:nowrap;text-align:center;justify-content:center}
.gartic-opt:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 0 rgba(0,0,0,.4),inset -2px -2px 0 0 rgba(0,0,0,.2),inset 2px 2px 0 0 rgba(255,255,255,.06);color:#fff;background:#35355a}
.gartic-opt:active{transform:translate(3px,3px);box-shadow:0 0 0 0 transparent}
.gartic-opt.selected{background:var(--accent,#6c5ce7);color:#fff;outline-color:var(--accent,#6c5ce7)}
.gartic-opt.selected:hover{background:var(--accent);transform:none;box-shadow:3px 3px 0 0 rgba(0,0,0,.4)}

/* ===== JEUX HUB ===== */
.jeux-page{max-width:900px;margin:0 auto;padding:20px}
.jeux-page-header{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.jeux-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.jeux-card{background:var(--bg-card);border:2px solid var(--border);border-radius:0;padding:28px;text-align:center;cursor:pointer;transition:transform 60ms,box-shadow 60ms;box-shadow:4px 4px 0 0 rgba(0,0,0,.4);outline:2px solid rgba(0,0,0,.2);outline-offset:-2px}
.jeux-card:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 rgba(0,0,0,.4);border-color:var(--accent)}
.jeux-card:active{transform:translate(4px,4px);box-shadow:0 0 0 0 transparent}
.jeux-card-icon{margin-bottom:14px}
.jeux-card-svg{width:48px;height:48px;color:var(--accent)}
.jeux-card-name{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.jeux-card-desc{font-size:.82rem;color:var(--text-muted);line-height:1.4}
.jeux-card-soon{opacity:.45;cursor:default;pointer-events:none}

/* ===== SHARED HEADER ===== */
.gartic-game-header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:48px;background:rgba(0,0,0,.6);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;gap:10px}
.gartic-hbtn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);border-radius:0;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .08s;font-family:inherit;box-shadow:2px 2px 0 0 rgba(0,0,0,.3);white-space:nowrap}
.gartic-hbtn:hover{background:rgba(255,255,255,.1);color:#fff;transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.3)}
.gartic-hbtn-danger{background:rgba(255,68,97,.12);border-color:rgba(255,68,97,.35);color:#ff4461}
.gartic-hbtn-danger:hover{background:rgba(255,68,97,.22);color:#ff6b81}
.gartic-header-center{display:flex;align-items:center;gap:14px;flex:1;justify-content:center;min-width:0;overflow:hidden}
.gartic-header-round{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.4);flex-shrink:0;letter-spacing:.5px;text-transform:uppercase}
.gartic-header-timer{font-size:1.3rem;font-weight:800;min-width:36px;text-align:center;color:rgba(255,255,255,.2)}
.gt-ok{color:#4efe85}.gt-warn{color:#ffd700}.gt-danger{color:#ff4461;animation:timerPulse .5s infinite alternate}.gt-inf{color:#d951ff}
@keyframes timerPulse{from{opacity:1}to{opacity:.5}}
.gartic-header-title{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;color:rgba(255,255,255,.45);flex-shrink:0}
.gartic-header-title svg{color:var(--accent)}
.gartic-header-hint{font-size:.95rem;letter-spacing:4px;color:#d951ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== SHARED SIDEBAR ===== */
.gartic-sidebar{width:320px;flex-shrink:0;display:flex;flex-direction:column;background:rgba(0,0,0,.3);border-left:1px solid rgba(255,255,255,.06);overflow-y:auto}
.gartic-section-label{font-size:.65rem;font-weight:700;color:rgba(255,255,255,.25);padding:8px 10px 4px;display:flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.5px}
.gartic-section-label svg{color:var(--accent)}

/* Camera frame */
.gartic-cam-frame{width:100%;aspect-ratio:16/9;background:rgba(0,0,0,.45);border-bottom:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0}
.gartic-cam-label{font-size:.6rem;color:rgba(255,255,255,.12);letter-spacing:1px;text-transform:uppercase}

/* Word panel */
.gartic-word-panel{border-bottom:1px solid rgba(255,255,255,.06)}
#gartic-word-choices{display:flex;flex-direction:column;gap:5px;padding:4px 10px 10px}
.gartic-word-btn{padding:10px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:0;cursor:pointer;font-size:.82rem;font-weight:700;transition:all .08s;text-align:center;font-family:inherit;box-shadow:2px 2px 0 0 rgba(0,0,0,.3);text-transform:uppercase;letter-spacing:.5px}
.gartic-word-btn:hover{background:var(--accent);border-color:var(--accent);transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.3)}
.gartic-word-custom{display:flex;gap:4px}
.gartic-word-custom input{flex:1;padding:7px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:0;font-size:.78rem;font-family:inherit}
.gartic-word-custom input:focus{outline:none;border-color:var(--accent)}
.gartic-word-custom-ok{width:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:0;cursor:pointer;transition:all .08s;flex-shrink:0}
.gartic-word-custom-ok:hover{background:var(--accent);border-color:var(--accent)}

/* ===== GARTIC SETUP ===== */
.gartic-setup{display:flex;flex-direction:column;height:100%;min-height:100vh}
.gartic-setup-body{display:flex;flex:1;min-height:0}
.gartic-setup-left{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.gartic-setup-form{max-width:480px;width:100%}
.gartic-setup-section{background:var(--bg-card);border:1px solid var(--border);border-radius:0;padding:14px;margin-bottom:8px;box-shadow:3px 3px 0 0 rgba(0,0,0,.2)}
.gartic-setup-label{font-size:.8rem;font-weight:600;color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.gartic-setup-label svg{color:var(--accent);flex-shrink:0}
.gartic-setup-opts{display:flex;gap:6px;flex-wrap:wrap}
.gartic-setup-input{width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);border-radius:0;font-size:.82rem;margin-top:6px;font-family:inherit}
.gartic-setup-input:focus{outline:none;border-color:var(--accent)}
.gartic-launch-btn{width:100%;padding:14px;font-size:.95rem;font-weight:700;margin-top:16px;background:var(--accent,#6c5ce7)!important;color:#fff!important;outline-color:var(--accent)!important;box-shadow:4px 4px 0 0 rgba(0,0,0,.45)!important}
.gartic-launch-btn:hover{transform:translate(2px,2px)!important;box-shadow:2px 2px 0 0 rgba(0,0,0,.45)!important}

/* ===== GARTIC GAME ===== */
.gartic-game{display:none;flex-direction:column;position:fixed;inset:0;z-index:10000;background:#0d1117}
.gartic-game-body{flex:1;display:flex;overflow:hidden;min-height:0}

/* Canvas area */
.gartic-game-left{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.gartic-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:8px;min-height:0;transition:background .8s}
.gartic-canvas-wrap canvas{background:transparent;border:2px solid rgba(255,255,255,.05);cursor:crosshair;display:block;max-width:100%;max-height:100%}
.gartic-canvas-wrap.waiting canvas{opacity:.12;pointer-events:none}
.gartic-waiting{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;z-index:2;color:rgba(255,255,255,.25);font-size:.82rem;letter-spacing:2px;text-transform:uppercase}
.gartic-canvas-wrap.waiting .gartic-waiting{display:flex}

/* ===== SIDEBAR TOOLS ===== */
.gartic-sidebar-tools{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06);transition:background .8s}
.gartic-tools-row{display:flex;gap:3px;margin-bottom:3px;justify-content:center}
.gartic-tool{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:0;cursor:pointer;color:rgba(255,255,255,.4);transition:all .06s;box-shadow:2px 2px 0 0 rgba(0,0,0,.2)}
.gartic-tool:hover{background:rgba(255,255,255,.1);color:#fff;transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.2)}
.gartic-tool.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:2px 2px 0 0 rgba(0,0,0,.3)}
.gartic-tool svg{width:14px;height:14px}

/* Colors: same size as tools (38px), 6 per row, 2 rows = 12 */
.gartic-colors-grid{display:grid;grid-template-columns:repeat(6,38px);gap:3px;margin:6px 0;justify-content:center}
.gartic-color{width:38px;height:38px;border-radius:0;border:2px solid rgba(255,255,255,.06);cursor:pointer;transition:all .06s;position:relative;box-shadow:1px 1px 0 0 rgba(0,0,0,.2)}
.gartic-color:hover{border-color:rgba(255,255,255,.4)}
.gartic-color.active{border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.3)}

/* Size bar: dot-min | slider | dot-max */
.gartic-size-bar{display:flex;align-items:center;gap:8px;margin-top:6px;padding:4px 0}
.gartic-size-dot-hint{background:#fff;border-radius:50%;flex-shrink:0;opacity:.4}
.gartic-size-bar input[type=range]{flex:1;accent-color:var(--accent);height:4px}

/* ===== LEADERBOARD ===== */
.gartic-lb{flex:1;display:flex;flex-direction:column;min-height:0;transition:background .8s}
.gartic-lb-row{display:flex;align-items:center;gap:5px;padding:3px 10px;font-size:.78rem;color:rgba(255,255,255,.55)}
.gartic-lb-rank{font-weight:700;min-width:20px}
.gartic-lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gartic-lb-pts{font-weight:700;color:var(--accent)}
.gartic-lb-empty{font-size:.72rem;color:rgba(255,255,255,.15);padding:4px 10px;font-style:italic;text-transform:uppercase;letter-spacing:.3px}

/* ===== OVERLAYS ===== */
.gartic-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px;animation:gOverIn .35s ease-out}
@keyframes gOverIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.gartic-overlay-card{background:linear-gradient(170deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);border:2px solid rgba(255,255,255,.08);border-radius:0;padding:32px;text-align:center;max-width:400px;width:100%;box-shadow:8px 8px 0 0 rgba(0,0,0,.5),0 0 60px rgba(0,0,0,.4);position:relative;overflow:hidden;animation:gCardIn .4s ease-out}
@keyframes gCardIn{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.gartic-ov-btn{padding:12px 24px;border-radius:0!important;font-weight:700;cursor:pointer;font-size:.88rem;margin-top:18px;width:100%;background:var(--accent)!important;color:#fff!important;outline-color:var(--accent)!important;box-shadow:3px 3px 0 0 rgba(0,0,0,.4)!important;position:relative;z-index:2}
.gartic-ov-btn:hover{transform:translate(1px,1px)!important;box-shadow:2px 2px 0 0 rgba(0,0,0,.4)!important}
.gartic-ov-word{font-size:.92rem;color:rgba(255,255,255,.5);margin:14px 0;padding:10px 16px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);display:block;position:relative;z-index:2}
.gartic-ov-word strong{color:var(--accent);font-size:1.05rem;letter-spacing:1px}

/* === FOUND MODAL: sparkles + stars + glow === */
.gartic-ov-found{overflow:hidden}
.gartic-ov-found .gartic-overlay-card{border-color:rgba(255,215,0,.2)}
.gartic-ov-found-icon{margin-bottom:8px;position:relative;z-index:2;animation:gBounce .6s ease-out}
@keyframes gBounce{0%{transform:scale(0) rotate(-20deg)}50%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.gartic-ov-found-name{font-size:1.25rem;font-weight:800;color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.6),0 0 40px rgba(255,215,0,.3),0 2px 0 rgba(0,0,0,.3);margin-bottom:6px;animation:gGlow 1.5s infinite alternate;position:relative;z-index:2}
@keyframes gGlow{from{text-shadow:0 0 10px rgba(255,215,0,.3),0 2px 0 rgba(0,0,0,.3)}to{text-shadow:0 0 30px rgba(255,215,0,.7),0 0 60px rgba(255,215,0,.3),0 2px 0 rgba(0,0,0,.3)}}

/* Sparkle particles background */
.gartic-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.gartic-sparkles::before,.gartic-sparkles::after{content:'';position:absolute;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20% 30%,#ffd700,transparent),radial-gradient(2px 2px at 50% 20%,#fff,transparent),radial-gradient(2px 2px at 80% 60%,#ffd700,transparent),radial-gradient(1.5px 1.5px at 10% 80%,#4efe85,transparent),radial-gradient(1.5px 1.5px at 70% 90%,#d951ff,transparent),radial-gradient(2px 2px at 40% 70%,#3498db,transparent),radial-gradient(1px 1px at 90% 15%,#fff,transparent),radial-gradient(2px 2px at 60% 45%,#ff4461,transparent);animation:gSparkle 3s linear infinite}
.gartic-sparkles::after{animation-delay:1.5s;animation-duration:2.5s;opacity:.6}
@keyframes gSparkle{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-40px);opacity:0}}

/* Flying star particles */
.gartic-stars{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.gartic-star{position:absolute;color:#ffd700;font-size:1.2rem;animation:gStarFly 2s ease-out forwards;opacity:0}
.gartic-star.s1{left:10%;top:80%;animation-delay:.1s}
.gartic-star.s2{left:30%;top:90%;animation-delay:.3s;color:#ff4461;font-size:1rem}
.gartic-star.s3{left:50%;top:85%;animation-delay:.2s;color:#4efe85}
.gartic-star.s4{left:70%;top:88%;animation-delay:.4s;color:#d951ff;font-size:.9rem}
.gartic-star.s5{left:85%;top:82%;animation-delay:.15s;color:#3498db}
.gartic-star.s6{left:20%;top:92%;animation-delay:.5s;font-size:1.4rem}
@keyframes gStarFly{0%{transform:translateY(0) scale(0) rotate(0);opacity:0}20%{opacity:1;transform:translateY(-20px) scale(1.2) rotate(45deg)}100%{transform:translateY(-180px) scale(0) rotate(360deg);opacity:0}}

/* === TIMEOUT MODAL: shake + pulse === */
.gartic-ov-timeout .gartic-overlay-card{border-color:rgba(255,68,97,.2);background:linear-gradient(170deg,#2a0a0a 0%,#1a0520 50%,#1a1a2e 100%)}
.gartic-ov-timeout-shake{margin-bottom:10px;animation:gShake .5s ease-out,gPulseRed 2s infinite alternate;position:relative;z-index:2}
@keyframes gShake{0%{transform:rotate(0)}15%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@keyframes gPulseRed{from{filter:drop-shadow(0 0 8px rgba(255,68,97,.3))}to{filter:drop-shadow(0 0 20px rgba(255,68,97,.6))}}
.gartic-ov-timeout-title{font-size:1.3rem;font-weight:800;color:#ff4461;margin-bottom:4px;position:relative;z-index:2;text-shadow:0 0 20px rgba(255,68,97,.4),0 2px 0 rgba(0,0,0,.3);letter-spacing:1px}
/* Timeout red scan line effect */
.gartic-ov-timeout .gartic-overlay-card::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,68,97,.03) 3px,rgba(255,68,97,.03) 4px);animation:gScanDown 3s linear infinite;pointer-events:none}
@keyframes gScanDown{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* === END SCREEN === */
.gartic-ov-end-title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.2rem;font-weight:800;margin-bottom:14px;color:#ffd700;position:relative;z-index:2;text-shadow:0 0 15px rgba(255,215,0,.3)}
.gartic-end-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.05);position:relative;z-index:2}
.gartic-end-rank{font-weight:700;min-width:26px;text-align:center}
.gartic-end-name{flex:1;font-weight:600;text-align:left}
.gartic-end-pts{color:var(--accent);font-weight:700}

/* ===== CONFIRM MODAL ===== */
.gartic-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:10002;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s}
.gartic-confirm-box{background:var(--bg-card);border:2px solid var(--border);border-radius:0;padding:26px;text-align:center;max-width:340px;width:100%;box-shadow:5px 5px 0 0 rgba(0,0,0,.5)}
.gartic-confirm-icon{margin-bottom:10px}
.gartic-confirm-msg{font-size:.95rem;font-weight:600;margin-bottom:18px;color:var(--text-primary)}
.gartic-confirm-btns{display:flex;gap:8px}
.gartic-confirm-btns .btn-secondary,.gartic-confirm-btns .btn-primary{flex:1;padding:9px;border-radius:0;font-weight:600;cursor:pointer;font-size:.85rem;font-family:inherit;border:1px solid var(--border);box-shadow:2px 2px 0 0 rgba(0,0,0,.3)}
.gartic-confirm-btns .btn-secondary{background:var(--bg-input);color:var(--text-secondary)}
.gartic-confirm-btns .btn-secondary:hover{background:rgba(255,255,255,.08);transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.3)}
.gartic-confirm-yes{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.gartic-confirm-yes:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.3)!important}
.gartic-confirm-danger{background:#c0392b!important;border-color:#c0392b!important}

@media(max-width:900px){
    .gartic-setup-body{flex-direction:column}
    .gartic-sidebar{width:100%;max-width:320px;align-self:center}
    .gartic-header-hint{max-width:160px}
    .gartic-colors-grid{grid-template-columns:repeat(6,32px)}
    .gartic-color{width:32px;height:32px}
}

/* =====================================================
   UTILITAIRES PAGE
   ===================================================== */
.utils-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:20px}
.utils-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:28px 24px;cursor:pointer;transition:all .2s;text-align:center}
.utils-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.utils-card-icon{font-size:40px;margin-bottom:12px}
.utils-card-name{font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;color:var(--text-primary);margin-bottom:6px}
.utils-card-desc{font-size:.82rem;color:var(--text-muted);line-height:1.4}

/* =====================================================
   HUMEUR VIEWERS
   ===================================================== */

/* ====== AURA CURRENCY ====== */
.aura-display{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border);cursor:pointer;font-weight:600;font-size:.9rem;color:var(--text-primary);transition:border-color .12s,box-shadow .12s;font-family:var(--font-body)}
.header-right .aura-display{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
[data-theme="light"] .header-right .aura-display{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.aura-display:hover{border-color:rgba(255,120,30,.4);box-shadow:0 0 16px rgba(255,120,30,.2)}
.aura-icon-sm{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(255,120,30,.6))}
.aura-count{color:#ff8c1a}
.aura-count.negative,.rubis-count.negative{color:#ff4d4d}

/* Aura welcome toast only — no popup needed */

/* Aura watchtime bonus popup */
.aura-bonus-toast{position:fixed;bottom:80px;right:20px;background:var(--bg-card);border:1px solid rgba(255,120,30,.3);border-radius:14px;padding:12px 20px;display:flex;align-items:center;gap:10px;z-index:9998;animation:slideUp .3s,fadeOut .3s 2.5s forwards;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.aura-bonus-toast img{width:24px;height:24px}
.aura-bonus-toast span{font-family:'Outfit',sans-serif;font-weight:600;color:#ff8c1a;font-size:.9rem}

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

/* ========== Contact Modal ========== */
.ct-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:420px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);animation:fadeScale .2s ease}
@keyframes fadeScale{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.ct-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700;font-size:1rem}
.ct-close{border:none;background:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer}
.ct-body{padding:16px 20px;overflow-y:auto;flex:1}
.ct-choices{display:flex;flex-direction:column;gap:8px}
.ct-choice{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--bg-deep);cursor:pointer;color:var(--text-primary);font-size:.9rem;font-weight:500;font-family:inherit;text-align:left;transition:.15s}
.ct-choice:hover{border-color:var(--accent);background:var(--accent-glow)}
.ct-ch-icon{font-size:1.3rem;display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0}
.ct-ch-icon svg{width:22px;height:22px}
.ct-divider{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--border)}
.ct-thread{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-deep);cursor:pointer;color:var(--text-primary);font-family:inherit;margin-bottom:4px;transition:.12s;text-align:left}
.ct-thread:hover{border-color:var(--accent)}
.ct-th-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
.ct-th-icon svg{width:16px;height:16px}
.ct-th-info{display:flex;align-items:center;gap:6px;flex:1}
.ct-th-status{font-size:.78rem;font-weight:600}
.ct-unread{background:var(--accent);color:#fff;font-size:.65rem;padding:1px 6px;border-radius:10px;font-weight:700}
.ct-toggle-closed{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:none;background:none;color:var(--text-muted);font-size:.75rem;cursor:pointer;font-family:inherit;border-top:1px solid var(--border);margin-top:12px;transition:color .15s}
.ct-toggle-closed:hover{color:var(--text-primary)}
.ct-closed-notice{padding:10px 14px;text-align:center;font-size:.78rem;color:var(--text-muted);border-top:1px solid var(--border);margin-top:8px}
.ct-compose-title{font-weight:700;font-size:1rem;margin-bottom:12px}
.ct-textarea{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-family:inherit;font-size:.88rem;resize:vertical}
.ct-textarea:focus{border-color:var(--accent);outline:none}
.ct-compose-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.ct-btn-send{padding:9px 20px;border:none;border-radius:10px;background:var(--gradient-accent);color:#fff;font-weight:600;cursor:pointer;font-family:inherit;font-size:.85rem}
.ct-btn-cancel{padding:9px 16px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:.85rem}
.ct-btn-cancel:hover{border-color:var(--accent)}
.ct-back{margin-bottom:10px}
.ct-thread-view{display:flex;flex-direction:column;gap:10px}
.ct-thread-msgs{max-height:40vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px}
.ct-msg{display:flex;flex-direction:column}
.ct-msg-user{align-items:flex-end}.ct-msg-admin{align-items:flex-start}
.ct-msg-bubble{padding:10px 14px;border-radius:14px;font-size:.88rem;max-width:85%;line-height:1.5;word-break:break-word}
.ct-msg-user .ct-msg-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.ct-msg-admin .ct-msg-bubble{background:var(--bg-deep);border:1px solid var(--border);border-bottom-left-radius:4px}
.ct-msg-time{font-size:.65rem;color:var(--text-muted);margin-top:2px;padding:0 4px}
.ct-reply{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.ct-reply .ct-textarea{flex:1;resize:none}
.ct-reply .ct-btn-send{flex-shrink:0;align-self:flex-end}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* === Planning Modal === */
.planning-modal{min-width:680px;max-width:90vw}
.plan-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-right:36px}
.plan-header-left{display:flex;align-items:center;gap:10px}
.plan-header-left h3{margin:0;font-size:1.1rem}
.plan-reset-btn{font-size:.75rem;padding:5px 12px}
.plan-days-row{display:flex;gap:6px;padding-bottom:4px}
.plan-day-card{flex:1;min-width:0;background:var(--bg-deep);border:2px solid var(--border);border-radius:var(--radius-md);padding:8px 5px;text-align:center;transition:border-color .2s}
.plan-day-today{border-color:#22c55e;box-shadow:0 0 0 1px rgba(34,197,94,.3)}
.plan-day-name{font-weight:700;font-size:.82rem;font-family:var(--font-display);margin-bottom:6px}
.plan-slots{display:flex;flex-direction:column;gap:4px}
.plan-slot-btn{padding:5px 4px;font-size:.72rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all .15s;font-weight:600}
.plan-slot-btn:hover{border-color:var(--accent);background:rgba(59,130,246,.1)}
.plan-slot-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.plan-slot-btn.active:hover{background:#4f8ef7}
.plan-content-pick{display:flex;flex-direction:column;gap:3px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.plan-cat-btn{padding:4px 3px;font-size:.68rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all .15s}
.plan-cat-btn:hover{border-color:var(--accent2);background:rgba(168,85,247,.1)}
.plan-cat-btn.active{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.plan-cat-btn.active:hover{background:#9b6ad8}
.plan-cat-any.active{background:#22c55e;border-color:#22c55e}
.plan-cat-any.active:hover{background:#1da851}
@media(max-width:600px){.planning-modal{min-width:auto;width:92vw}.plan-days-row{overflow-x:auto;-webkit-overflow-scrolling:touch}.plan-day-card{min-width:75px}}

/* === Coming Soon Overlay === */
.coming-soon-wrap{position:relative;height:calc(100vh - 120px);overflow:hidden}
.coming-soon-content{filter:grayscale(1) brightness(.4);opacity:.3;pointer-events:none;user-select:none;position:absolute;inset:0;overflow:hidden}
.coming-soon-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;pointer-events:none}
.coming-soon-title{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:#facc15;text-align:center;letter-spacing:2px;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.coming-soon-char{width:400px;height:auto;margin:6px 0;filter:drop-shadow(0 4px 24px rgba(0,0,0,.6))}
.coming-soon-sub{font-family:var(--font-display);font-weight:600;font-size:1rem;color:#fff;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.coming-soon-extra{font-size:.9rem;color:rgba(255,255,255,.7);text-align:center;margin-top:8px;min-height:24px;transition:opacity .3s}
@media(max-width:600px){.coming-soon-char{width:120px}.coming-soon-title{font-size:1rem}.coming-soon-sub{font-size:.88rem}}

/* Objectifs info button */
.btn-info-commun{padding:8px 14px;font-size:.8rem;display:flex;align-items:center;gap:5px}
.btn-info-commun .icon{width:14px;height:14px}
.contribute-btns{display:flex;gap:8px;align-items:center}
.eim-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:440px;width:90vw;overflow:hidden;box-shadow:var(--shadow-lg);animation:fadeScale .2s ease}
.eim-banner{max-height:160px;overflow:hidden}.eim-banner img{width:100%;display:block;object-fit:cover}
.eim-body{padding:20px}
.eim-title{font-size:1.15rem;font-weight:700;margin-bottom:10px}
.eim-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.6;margin-bottom:18px;white-space:pre-wrap}
.eim-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.so-ep-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:6px}
.so-tiers-bar{margin-bottom:8px;position:relative}
.so-tiers-bar .progress-bar-wrap{height:22px;border-radius:var(--radius-sm);overflow:visible}
.so-tier-marker{position:absolute;top:0;bottom:0;width:2px;transform:translateX(-1px);z-index:2}
.so-tier-line{width:2px;height:100%;background:var(--bg-primary);opacity:.8}
.so-tier-costs{position:relative;height:18px;margin-bottom:4px}
.so-tier-cost{position:absolute;transform:translateX(-50%);font-size:.64rem;color:var(--text-muted);opacity:.7;white-space:nowrap;bottom:0}
.so-tier-cost.so-tier-reached{color:var(--accent);opacity:1}
.so-tier-labels{position:relative;height:48px;margin-top:4px}
.so-tier-text{position:absolute;transform:translateX(-50%) rotate(-35deg);transform-origin:top center;font-size:.68rem;font-weight:700;color:var(--text-muted);white-space:nowrap;top:0}
.so-tier-text.so-tier-reached{color:var(--accent)}
/* Chat links */
.cc-link{color:var(--accent);text-decoration:none;cursor:pointer;transition:opacity .15s}
.cc-link:hover{opacity:.8;text-decoration:underline}

/* QG header buttons */
.gm-header-btns{display:flex;gap:8px;margin-left:auto}
.gm-alert-btn,.gm-plus-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .15s}
.gm-alert-btn{background:#ef4444}
.gm-alert-btn:hover{transform:scale(1.1);opacity:.9}
.gm-plus-btn{background:#22c55e}
.gm-plus-btn:hover{transform:scale(1.1);opacity:.9}

/* Top contributors button */
.btn-top-all{font-size:.7rem;padding:2px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--accent);cursor:pointer;margin-left:auto;transition:all .15s}
.btn-top-all:hover{background:var(--accent);color:#fff}
.gm-btn-more{font-size:.78rem;padding:6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--accent);cursor:pointer;transition:all .15s}
.gm-btn-more:hover{background:var(--accent);color:#fff}
.contrib-modal{min-width:400px;max-width:95vw}
.contrib-tabs{display:flex;gap:4px;margin-bottom:12px}
.contrib-tab{flex:1;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-deep);color:var(--text-secondary);cursor:pointer;font-size:.82rem;font-weight:600;text-align:center;transition:all .15s}
.contrib-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.contrib-list{max-height:55vh;overflow-y:auto;padding-right:4px}
.contrib-row{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--border);font-size:.82rem}
.contrib-row img{width:28px;height:28px;border-radius:50%;flex-shrink:0}
.contrib-row .contrib-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contrib-row .contrib-val{color:var(--accent2);font-weight:700;flex-shrink:0;margin-left:auto}
.contrib-row .contrib-details{font-size:.7rem;color:var(--text-muted);flex-shrink:0}
.contrib-row .contrib-time{font-size:.7rem;color:var(--text-muted);flex-shrink:0;margin-left:8px}

/* QG Banner upload */
.gm-banner-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;border:2px dashed var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;background:var(--bg-deep);font-size:.82rem;color:var(--text-muted);text-align:center}
.gm-banner-upload:hover{border-color:var(--accent);background:rgba(59,130,246,.05);color:var(--accent)}

/* Pack shortcut grid */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pack-shortcut{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 8px;border:2px solid var(--border);border-radius:var(--radius-md);background:var(--bg-deep);cursor:pointer;transition:all .2s;text-align:center;gap:4px}
.pack-shortcut:hover{border-color:var(--accent);background:rgba(59,130,246,.08);transform:translateY(-2px)}
.pack-shortcut:active{transform:translateY(0)}
.pack-shortcut-amount{font-size:1.4rem;font-weight:800;font-family:var(--font-display);color:var(--text-primary);display:flex;align-items:center;gap:6px}
.pack-shortcut-amount .rubis-icon-pack{width:20px;height:32px}
.pack-shortcut-bonus{font-size:.72rem;color:var(--accent2);font-weight:600;background:rgba(168,85,247,.1);padding:1px 8px;border-radius:10px}
.pack-shortcut-price{font-size:.88rem;font-weight:700;color:var(--accent);margin-top:2px}
@media(max-width:500px){.packs-grid{grid-template-columns:repeat(2,1fr)}}



.mib-content{display:flex;align-items:center;gap:12px;padding:12px 20px;background:linear-gradient(135deg,rgba(59,130,246,.95),rgba(168,85,247,.95));border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.4);backdrop-filter:blur(10px)}
.mib-icon{font-size:1.4rem}
.mib-text{color:#fff;font-size:.9rem;white-space:nowrap}
.mib-btns{display:flex;gap:6px;margin-left:8px}
.mib-btn{padding:6px 16px;font-size:.8rem;border-radius:var(--radius-sm)}
@media(max-width:600px){.mib-content{flex-wrap:wrap;justify-content:center;gap:8px;padding:10px 14px}.mib-text{white-space:normal;text-align:center;font-size:.82rem}}

/* ============================================
   HEADER SCALING — all elements inside header use vh
   so proportions stay identical on 1080p, 1440p, 4K
   ============================================ */
.main-header{padding:0 1.85vh}
.main-header .logo-link{gap:1vh}
.main-header .main-nav{gap:0.5vh}
.main-header .nav-link{gap:0.8vh;padding:1vh 1.7vh;font-size:1.7vh}
.main-header .icon-nav{width:2.4vh;height:2.4vh}
.main-header .header-right{gap:1.2vh}
.main-header .notif-btn{width:4.2vh;height:4.2vh}
.main-header .notif-btn .icon-sm{width:2.1vh;height:2.1vh}
.main-header .notif-badge{font-size:0.8vh;min-width:1.9vh;height:1.9vh;padding:0 0.5vh;top:-0.25vh;right:-0.25vh}
.main-header .theme-toggle{width:4.2vh;height:4.2vh}
.main-header .theme-toggle .icon-sm{width:2.1vh;height:2.1vh}
.main-header .aura-display{gap:0.7vh;padding:1vh 1.7vh;font-size:1.7vh;height:5vh;box-sizing:border-box}
.main-header .aura-icon-sm{width:auto;height:4vh;object-fit:contain}
.main-header .rubis-display{gap:0.7vh;padding:1vh 1.7vh;font-size:1.7vh;height:5vh;box-sizing:border-box}
.main-header .rubis-icon-sm{width:auto;height:3vh;object-fit:contain}
.main-header .user-btn{gap:1vh;padding:0.5vh 1.2vh 0.5vh 0.5vh}
.main-header .user-avatar{width:3.8vh;height:3.8vh}
.main-header .user-name{font-size:1.7vh}
.main-header .user-chevron{width:1.5vh;height:1.5vh}
.main-header .logo-img{height:6vh;width:auto;object-fit:contain}
.main-header .logo-text-img{height:6vh;width:auto;object-fit:contain;margin-left:0.6vh}
.main-header .logo-rubis{width:5vh;height:5vh}
@media(max-width:1100px){
    .main-header .logo-text-img{display:none}
}
@media(max-width:900px){
    .main-header .logo-text-img{display:none}
    .main-header{padding:0 10px;height:56px}
    .main-header .header-right{gap:6px}
    .main-header .notif-btn{width:32px;height:32px}
    .main-header .notif-btn .icon-sm{width:16px;height:16px}
    .main-header .theme-toggle{width:32px;height:32px}
    .main-header .theme-toggle .icon-sm{width:16px;height:16px}
    .main-header .aura-display{gap:4px;padding:4px 8px;font-size:.75rem;height:5vh}
    .main-header .aura-icon-sm{width:auto;height:30px}
    .main-header .rubis-display{gap:4px;padding:4px 8px;font-size:.75rem;height:5vh}
    .main-header .rubis-icon-sm{width:auto;height:18px}
    .main-header .user-btn{gap:4px;padding:2px 4px 2px 2px}
    .main-header .user-avatar{width:28px;height:28px}
    .main-header .user-chevron{width:10px;height:10px}
    .main-header .logo-rubis{width:28px;height:28px}
    .main-header .logo-img{height:26px}
}

/* =============================================
   PLUS ULTRA — Objectifs react avec mode bonus
   Sprint 1.29 (11/05/2026)
   ============================================= */

/* ---- Toggle "Mode Plus Ultra" dans les modals GM ---- */
.gm-ultra-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: .88rem;
    font-weight: 700;
    font-family: var(--font-display, inherit);
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s ease;
    box-sizing: border-box;
}
.gm-ultra-toggle:hover {
    background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(245,158,11,.08));
    border-color: rgba(251,191,36,.5);
    color: #fbbf24;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251,191,36,.15);
}
.gm-ultra-toggle.on {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #fbbf24;
    color: #1a1a1a;
    box-shadow: 0 4px 20px rgba(251,191,36,.4), 0 0 0 2px rgba(251,191,36,.2);
    text-shadow: none;
}
.gm-ultra-toggle.on:hover {
    background: linear-gradient(135deg, #fcd34d, #fbbf24);
    transform: translateY(-1px);
}
.gm-ultra-toggle-star {
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(251,191,36,.6));
}
.gm-ultra-toggle.on .gm-ultra-toggle-star {
    filter: drop-shadow(0 0 6px rgba(255,255,255,.8));
    animation: _ultraStarSpin 3s ease-in-out infinite;
}
@keyframes _ultraStarSpin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.15); }
}

/* ---- Bouton "+ Palier Ultra" dans le modal ---- */
.gm-ultra-add-tier {
    padding: 6px 14px;
    border: 1px dashed rgba(251,191,36,.4);
    border-radius: 8px;
    background: rgba(251,191,36,.05);
    color: #fbbf24;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.gm-ultra-add-tier:hover {
    background: rgba(251,191,36,.15);
    border-color: #fbbf24;
    border-style: solid;
}

/* ---- Separateur chevron entre les 2 barres ---- */
.ultra-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 6px;
    animation: _ultraSepPulse 1.8s ease-in-out infinite;
}
.ultra-separator svg {
    filter: drop-shadow(0 0 6px rgba(251,191,36,.6));
}
@keyframes _ultraSepPulse {
    0%, 100% { transform: translateY(0); opacity: .7; }
    50% { transform: translateY(3px); opacity: 1; }
}

/* ---- Barre Ultra (doree avec shine) ---- */
.so-tiers-bar-ultra {
    position: relative;
    animation: _ultraBarReveal .6s cubic-bezier(.4, 0, .2, 1);
    z-index: 999;
}
@keyframes _ultraBarReveal {
    0% { opacity: 0; transform: translateY(-8px) scaleY(.6); }
    60% { opacity: 1; transform: translateY(2px) scaleY(1.05); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

.progress-bar-ultra {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 45%, #fde047 55%, #fbbf24 65%, #f59e0b 100%);
    background-size: 200% 100%;
    box-shadow:
        0 0 14px rgba(251,191,36,.5),
        0 0 30px rgba(251,191,36,.25),
        inset 0 1px 0 rgba(255,255,255,.3);
    animation: _ultraBarShine 2.5s linear infinite;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
@keyframes _ultraBarShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.progress-bar-ultra::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: _ultraBarSweep 3s ease-in-out infinite;
}
@keyframes _ultraBarSweep {
    0% { transform: translateX(-100%); }
    50%, 100% { transform: translateX(200%); }
}
.progress-bar-ultra.progress-ultra-complete {
    background: linear-gradient(90deg, #fbbf24, #fde047, #fbbf24);
    background-size: 200% 100%;
    animation: _ultraBarShine 1.5s linear infinite;
    box-shadow:
        0 0 20px rgba(251,191,36,.7),
        0 0 40px rgba(251,191,36,.4);
}

/* ---- Tiers Ultra (labels, costs, markers) ---- */
.so-tier-cost-ultra {
    color: rgba(251,191,36,.5) !important;
    font-weight: 600;
}
.so-tier-cost-ultra.so-tier-reached-ultra {
    color: #fbbf24 !important;
    opacity: 1 !important;
    text-shadow: 0 0 6px rgba(251,191,36,.4);
}
.so-tier-text-ultra {
    color: rgba(251,191,36,.55) !important;
    font-weight: 700;
}
.so-tier-text-ultra.so-tier-reached-ultra {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(251,191,36,.5);
}
.so-tier-marker-ultra .so-tier-line-ultra {
    background: var(--bg-primary);
    opacity: .8;
}
.so-tiers-bar-ultra.so-tier-reached .so-tier-line-ultra {
    background: #fbbf24;
    box-shadow: 0 0 6px #fbbf24;
}

.so-tiers-bar-normal-done .progress-bar {
    opacity: .85;
}

/* ---- Bandeau "Plus Ultra Debloque !" (dore opaque, texte noir) ---- */
.reached-banner-ultra-unlocked {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1a1a1a !important;
    border: 1px solid #fbbf24 !important;
    box-shadow:
        0 4px 20px rgba(251,191,36,.5),
        0 0 40px rgba(251,191,36,.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    animation: _ultraBannerUnlock .6s cubic-bezier(.4, 0, .2, 1), _ultraBannerPulse 2.4s ease-in-out infinite .6s;
}
.reached-banner-ultra-unlocked svg { stroke: #1a1a1a; }
@keyframes _ultraBannerUnlock {
    0% { opacity: 0; transform: translateY(-14px) scale(.9); }
    60% { opacity: 1; transform: translateY(2px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes _ultraBannerPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(251,191,36,.5), 0 0 40px rgba(251,191,36,.25); }
    50% { box-shadow: 0 4px 28px rgba(251,191,36,.7), 0 0 50px rgba(251,191,36,.4); }
}

/* ---- Bandeau "Plus Ultra Atteint !" (arc-en-ciel) ---- */
.reached-banner-ultra-done {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7, #ef4444) !important;
    background-size: 300% 100% !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    box-shadow:
        0 4px 20px rgba(255,255,255,.2),
        0 0 40px rgba(251,191,36,.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
    font-weight: 800 !important;
    animation: _rainbowBannerSlide 4s linear infinite, _ultraBannerUnlock .6s cubic-bezier(.4, 0, .2, 1);
}
.reached-banner-ultra-done svg { stroke: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
@keyframes _rainbowBannerSlide {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ---- Cercle obj-circle en mode Plus Ultra ---- */
.obj-circle-text-ultra {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(251,191,36,.6) !important;
}
.obj-circle-ultra-done .obj-circle-text {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: _rainbowBannerSlide 3s linear infinite;
}

/* ---- Card arc-en-ciel (OPTION A : bordure animee permanente) ---- */
.event-card-ultra-done {
    position: relative;
    border: 2px solid transparent !important;
    background-clip: padding-box;
    animation: _ultraCardGlow 6s ease-in-out infinite;
}
.event-card-ultra-done::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7, #ef4444);
    background-size: 300% 100%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: _rainbowBannerSlide 4s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes _ultraCardGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(251,191,36,.2), 0 0 40px rgba(168,85,247,.1); }
    25% { box-shadow: 0 0 24px rgba(239,68,68,.25), 0 0 50px rgba(245,158,11,.15); }
    50% { box-shadow: 0 0 28px rgba(34,197,94,.25), 0 0 60px rgba(59,130,246,.15); }
    75% { box-shadow: 0 0 24px rgba(168,85,247,.25), 0 0 50px rgba(251,191,36,.15); }
}

.event-card-ultra-done.event-reached {
    border-color: transparent !important;
    box-shadow: none;
}

/* =============================================
   PLUS ULTRA FIX V2 - gap + themes gold & rainbow
   ============================================= */
.ultra-separator { margin: -4px 0 -2px !important; padding: 0; }
.ultra-separator svg { width: 14px !important; height: 14px !important; }
.so-tiers-bar-ultra { margin-top: 0 !important; }

.event-card-ultra-unlocked {
    border: 2px solid #fbbf24 !important;
    background: linear-gradient(135deg, rgba(251,191,36,.06), rgba(245,158,11,.03));
    box-shadow: 0 0 24px rgba(251,191,36,.18) !important;
}
.event-card-ultra-unlocked .event-title {
    color: #fbbf24 !important;
    text-shadow: 0 0 10px rgba(251,191,36,.3);
}
.event-card-ultra-unlocked .obj-circle-text {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(251,191,36,.5) !important;
}
@keyframes _ultraPulseGlow {
    from { filter: drop-shadow(0 0 5px rgba(251,191,36,.5)); }
    to   { filter: drop-shadow(0 0 14px rgba(251,191,36,.95)); }
}
.event-card-ultra-unlocked .btn-contribute {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(251,191,36,.3) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
.event-card-ultra-unlocked .btn-contribute:hover {
    background: linear-gradient(135deg, #fcd34d, #fbbf24) !important;
    box-shadow: 0 6px 20px rgba(251,191,36,.5) !important;
    transform: translateY(-1px);
}

.event-card-ultra-done {
    background: linear-gradient(135deg, rgba(251,191,36,.05), rgba(168,85,247,.04), rgba(59,130,246,.04)) !important;
}
.event-card-ultra-done .event-title {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7, #ef4444);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: _rainbowBannerSlide 4s linear infinite;
}
.event-card-ultra-done .obj-circle-text {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
    color: transparent !important;
    animation: _rainbowBannerSlide 3s linear infinite;
}
@keyframes _circleRainbow {
    0%   { stroke: #ef4444; filter: drop-shadow(0 0 10px rgba(239,68,68,.8)); }
    16%  { stroke: #f59e0b; filter: drop-shadow(0 0 10px rgba(245,158,11,.8)); }
    33%  { stroke: #fbbf24; filter: drop-shadow(0 0 10px rgba(251,191,36,.8)); }
    50%  { stroke: #22c55e; filter: drop-shadow(0 0 10px rgba(34,197,94,.8)); }
    66%  { stroke: #3b82f6; filter: drop-shadow(0 0 10px rgba(59,130,246,.8)); }
    83%  { stroke: #a855f7; filter: drop-shadow(0 0 10px rgba(168,85,247,.8)); }
    100% { stroke: #ef4444; filter: drop-shadow(0 0 10px rgba(239,68,68,.8)); }
}
.event-card-ultra-done .btn-contribute {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7) !important;
    background-size: 300% 100% !important;
    color: #fff !important;
    border: none !important;
    animation: _rainbowBannerSlide 3s linear infinite !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 20px rgba(255,255,255,.12) !important;
}

/* =============================================
   PLUS ULTRA FIX V3 - cercle + preset + shake
   ============================================= */
.event-card-ultra-unlocked .obj-circle-done svg circle:nth-child(2) {
    stroke: #34d399 !important;
    filter: drop-shadow(0 0 6px rgba(52,211,153,.5)) !important;
    animation: none !important;
}
.event-card-ultra-unlocked .obj-circle svg circle:last-child {
    filter: drop-shadow(0 0 10px rgba(251,191,36,.7)) !important;
    animation: _ultraPulseGlow 2s infinite alternate !important;
}

.event-card-ultra-unlocked .obj-circle-text,
.event-card-ultra-unlocked .obj-circle-text-done,
.event-card-ultra-unlocked .obj-circle-done .obj-circle-text {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(251,191,36,.5) !important;
}

.event-card-ultra-unlocked .preset-btn:hover {
    background: rgba(251,191,36,.1) !important;
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
    box-shadow: 0 6px 15px rgba(251,191,36,.3) !important;
    transform: translateY(-3px) scale(1.05);
}

.event-card-ultra-done .obj-circle svg circle:nth-child(2),
.event-card-ultra-done .obj-circle svg circle:last-child {
    stroke: #fbbf24 !important;
    animation: _circleRainbow 3s linear infinite !important;
    filter: none !important;
}
.event-card-ultra-done .obj-circle svg circle:last-child {
    animation-delay: -1.5s !important;
}
.event-card-ultra-done .obj-circle-text,
.event-card-ultra-done .obj-circle-text-done {
    color: transparent !important;
    text-shadow: none !important;
}

.event-card-ultra-done .preset-btn:hover {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7) !important;
    background-size: 300% 100% !important;
    border-color: transparent !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
    animation: _rainbowBannerSlide 3s linear infinite !important;
    transform: translateY(-3px) scale(1.05);
}

/* ---- SHAKE PROGRESSIF ---- */
@keyframes _ultraShake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(calc(-1 * var(--shake-x, 0px)), var(--shake-y, 0px)) rotate(calc(-1 * var(--shake-r, 0deg))); }
    20% { transform: translate(var(--shake-x, 0px), calc(-1 * var(--shake-y, 0px))) rotate(var(--shake-r, 0deg)); }
    30% { transform: translate(calc(-1 * var(--shake-x, 0px)), calc(-1 * var(--shake-y, 0px))) rotate(0); }
    40% { transform: translate(var(--shake-x, 0px), var(--shake-y, 0px)) rotate(calc(-1 * var(--shake-r, 0deg))); }
    50% { transform: translate(calc(-0.5 * var(--shake-x, 0px)), 0) rotate(var(--shake-r, 0deg)); }
    60% { transform: translate(calc(0.5 * var(--shake-x, 0px)), var(--shake-y, 0px)) rotate(0); }
    70% { transform: translate(0, calc(-1 * var(--shake-y, 0px))) rotate(calc(-0.5 * var(--shake-r, 0deg))); }
    80% { transform: translate(calc(-1 * var(--shake-x, 0px)), 0) rotate(calc(0.5 * var(--shake-r, 0deg))); }
    90% { transform: translate(var(--shake-x, 0px), calc(0.5 * var(--shake-y, 0px))) rotate(0); }
}
.event-card-ultra-unlocked {
    animation: _ultraShake 0.4s linear infinite;
}
.event-card-ultra-done {
    animation: _ultraCardGlow 6s ease-in-out infinite, _ultraShake 0.32s linear infinite;
}

/* ========================================================================
   Sprint 1.35 watch-time — Modal recap au retour (AuraSystem.showWatchRecapModal)
   ======================================================================== */
.watch-recap-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    animation: wrmFadeIn 0.25s ease-out;
}
.watch-recap-overlay.wrm-closing {
    animation: wrmFadeOut 0.25s ease-in forwards;
}
.watch-recap-modal {
    background: linear-gradient(160deg, #1f1730 0%, #2a1a3d 100%);
    border: 2px solid #ff8c1a;
    border-radius: 18px;
    padding: 28px 32px;
    max-width: 460px;
    width: 92vw;
    box-shadow: 0 20px 60px rgba(255, 140, 26, 0.35), 0 0 0 1px rgba(255, 140, 26, 0.15);
    color: #f1ebe1;
    text-align: center;
    animation: wrmPop 0.35s cubic-bezier(.2, 1.4, .5, 1);
}
.wrm-header {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 8px;
}
.wrm-aura-icon {
    width: 48px; height: 48px;
    filter: drop-shadow(0 0 12px rgba(255, 140, 26, 0.7));
    animation: wrmIconPulse 2.2s ease-in-out infinite;
}
.wrm-header h2 {
    margin: 0;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #ffb35a, #ff5c00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1.35;
    text-align: left;
}
.wrm-header h2 strong {
    background: linear-gradient(135deg, #fff0c8, #ffd28a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}
.wrm-detail {
    display: flex; flex-direction: column; gap: 10px;
    margin: 12px 0 18px;
    text-align: left;
}
.wrm-line {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 140, 26, 0.08);
    border-left: 3px solid #ff8c1a;
    border-radius: 8px;
    padding: 10px 14px;
}
.wrm-icon { font-size: 1.25rem; }
.wrm-text { flex: 1; font-size: 0.95rem; color: #f1ebe1; font-weight: 600; }
.wrm-meta { font-size: 0.82rem; color: #a09487; }
.wrm-total {
    font-size: 2.1rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ffd28a, #ff5c00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 16px 0 20px;
    text-shadow: 0 0 24px rgba(255, 140, 26, 0.4);
    letter-spacing: 1px;
}
.wrm-close-btn {
    background: linear-gradient(135deg, #ff8c1a, #ff5500);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 14px rgba(255, 85, 0, 0.4);
}
.wrm-close-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 85, 0, 0.55);
}
.wrm-close-btn:active {
    transform: translateY(0) scale(0.98);
}
@keyframes wrmFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wrmFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes wrmPop {
    0%   { transform: scale(0.85) translateY(20px); opacity: 0; }
    60%  { transform: scale(1.03) translateY(-3px); opacity: 1; }
    100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
@keyframes wrmIconPulse {
    0%, 100% { transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 0 12px rgba(255, 140, 26, 0.7)); }
    50%      { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 20px rgba(255, 140, 26, 1)); }
}
@media (max-width: 520px) {
    .watch-recap-modal { padding: 22px 20px; }
    .wrm-header h2 { font-size: 1.2rem; }
    .wrm-total { font-size: 1.8rem; }
}