/* ====================================================================
* CSS REVISITÉ - EFFETS ÉPIQUES, NEONS & 3D
* ==================================================================== */
:root {
--bg: #0d0d0d;
--bg-grad: #1c1a16;
--bg-soft: #141414;
--bg-card: #1d1c1a;
--line: #36332d;
--text: #f4ebd8;
--muted: #a89b82;
--accent: #dfaf37;
--accent-rgb: 223, 175, 55;
--accent-2: #b8860b;
--accent-2-rgb: 184, 134, 11;
--danger: #ff4d4d;
--gold: #ffd700;
/* --- Tokens structurels « Editorial Trophy » (non thémables) --- */
--radius: 8px; /* coins nets mais adoucis */
--radius-sharp: 0px; /* cards/filets sans arrondi */
--radius-btn: 6px; /* boutons */
--radius-pill: 999px; /* réservé aux rares pilules (thumb volume) */
--shadow: 0 1px 0 var(--line); /* aplati : simple filet */
--shadow-float: 0 12px 40px rgba(0, 0, 0, .45); /* overlays / volume flottant */
--hair: 1px solid var(--line); /* filet hairline thémé */
--font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
--ls-eyebrow: .18em; /* tracking large des labels majuscules */
--ls-tight: -.03em; /* titres display serrés */
--glow-left: rgba(223, 175, 55, 0.4);
--glow-right: rgba(184, 134, 11, 0.4);
}
/* Label « eyebrow » : petite étiquette majuscule espacée (registre éditorial) */
.eyebrow {
font-family: var(--font-body, inherit);
font-size: .7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
color: var(--muted);
}
/* Paire label/valeur : texte à gauche, nombre à droite (motif « grand livre ») */
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.kv .label { color: var(--muted); }
.kv .val { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 700; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
background-color: var(--bg);
/* Un fond avec de multiples halos pour plus de profondeur */
background-image:
radial-gradient(circle at 15% 0%, var(--bg-grad) 0%, transparent 40%),
radial-gradient(circle at 85% 100%, rgba(var(--accent-rgb), 0.1), transparent 50%),
radial-gradient(circle at 50% 50%, var(--bg-soft) 0%, var(--bg) 100%);
background-attachment: fixed;
color: var(--text);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
overflow-x: hidden;
}
/* Animations globales d'apparition */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.view {
animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* Topbar -------------------------------------------------------------- */
.topbar {
display: flex;
align-items: center;
gap: 1rem;
padding: .75rem 2rem;
border-bottom: var(--hair);
background: var(--bg-soft);
position: sticky;
top: 0;
z-index: 50;
}
/* Slot gauche : bouton Accueil (toujours) + accès rapide Streamer */
.topbar-left { display: flex; align-items: center; gap: .5rem; }
/* Logo cliquable (retour à l'accueil) en haut à gauche */
.brand-logo { display: inline-flex; align-items: center; padding: 0; background: transparent; border: none; cursor: pointer; border-radius: 8px; }
.brand-logo img { height: 34px; width: auto; display: block; }
.brand-logo:hover { opacity: .85; }
.brand-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quick-access { display: flex; align-items: center; gap: .5rem; padding-left: .5rem; border-left: var(--hair); }
.quick-access[hidden] { display: none; }
.home-btn { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--ls-tight); }
.home-btn svg, .quick-access .btn svg { width: 16px; height: 16px; vertical-align: -2px; }
.topnav { margin-left: auto; color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
/* Menu engrenage (dropdown regroupant toutes les actions) --------------- */
.gear-wrap { position: relative; }
.gear-menu {
position: fixed; z-index: 300;
min-width: 240px; padding: .5rem;
background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
box-shadow: var(--shadow-float);
display: flex; flex-direction: column; gap: .1rem;
animation: fadeInUp .18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gear-menu[hidden] { display: none; }
.gear-menu-section { margin: .7rem .6rem .25rem; padding: 0; }
.gear-menu-section:first-child { margin-top: .2rem; }
.gear-menu .btn {
justify-content: flex-start; text-align: left; width: 100%;
display: flex; align-items: center; gap: .6rem;
border: none; background: transparent; padding: .55rem .6rem;
border-radius: var(--radius-btn);
}
.gear-menu .btn:hover { background: var(--bg-soft); box-shadow: none; }
.gear-menu .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.gear-btn { display: inline-flex; align-items: center; justify-content: center; padding: .55rem .7rem; }
.gear-btn svg { width: 20px; height: 20px; }
/* Icônes SVG dans divers conteneurs (remplacement des emojis) */
.dash-locked-icon svg { width: 26px; height: 26px; color: var(--muted); }
.thumb-icon svg { width: 40px; height: 40px; color: var(--muted); opacity: .55; }
.dlc-emoji svg { width: 30px; height: 30px; color: var(--accent); }
.premium-icon svg { width: 42px; height: 42px; color: var(--accent); }
.ws-preview-fallback svg { width: 40px; height: 40px; color: var(--muted); }
.ob-trophy svg { width: 46px; height: 46px; color: var(--gold); }
.ob-lock svg, .ob-star svg { width: 30px; height: 30px; }
.ob-star svg { color: var(--gold); }
[data-fs] svg { width: 16px; height: 16px; vertical-align: -3px; }
/* Pas de balayage « shine » sur les lignes de menu (réservé aux vrais boutons CTA) */
.gear-menu .btn::after, .action-menu .action-item::after { content: none; }
/* Layout -------------------------------------------------------------- */
#app {
max-width: 1800px; /* Avant c'était 1200px, 1800px permet d'exploiter les grands écrans */
width: 96%; /* Utilise 96% de l'écran dispo pour garder une fine marge esthétique */
margin: 0 auto;
padding: 2.5rem 1.5rem 5rem;
} .view-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
h1 { font-family: var(--font-display); font-size: 2.1rem; margin: 0; font-weight: 700; letter-spacing: var(--ls-tight); }
/* Buttons - registre éditorial (bords nets, filets) - on GARDE le shine --- */
.btn {
position: relative;
overflow: hidden;
font: inherit;
font-weight: 600;
letter-spacing: .01em;
border: var(--hair);
background: var(--bg-card);
color: var(--text);
padding: .7rem 1.35rem;
border-radius: var(--radius-btn);
cursor: pointer;
transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Reflet qui passe sur le bouton au hover */
.btn::after {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
transform: rotate(45deg) translateY(-100%);
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn:hover::after { transform: rotate(45deg) translateY(100%); }
.btn:hover {
border-color: var(--accent);
box-shadow: inset 0 -2px 0 var(--accent);
}
.btn:active { box-shadow: inset 0 -2px 0 var(--accent-2); }
.btn-primary {
background: var(--accent); /* couleur pleine (pas de dégradé qui dénote) */
border: 1px solid transparent;
color: #fff;
}
.btn-primary:hover {
border-color: transparent;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22);
filter: brightness(1.06);
}
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); box-shadow: inset 0 -2px 0 var(--danger); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line); box-shadow: none; }
.btn:disabled::after { content: none; }
.head-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
/* Barre d'outils : groupe d'actions + bouton overflow « ⋯ » */
.toolbar { display: flex; align-items: center; gap: .6rem; }
.toolbar-more { padding: .55rem .8rem; font-size: 1.1rem; line-height: 1; }
/* Home list & Cards --------------------------------------------------- */
.tournament-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.t-card {
position: relative;
background: var(--bg-card);
border: var(--hair);
border-radius: var(--radius);
padding: 1.4rem;
display: flex;
flex-direction: column;
gap: .7rem;
box-shadow: var(--shadow);
transition: border-color .2s ease, box-shadow .2s ease;
overflow: hidden;
}
/* Filet d'accent en haut de la carte (apparaît au survol) */
.t-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--accent);
opacity: 0; transition: opacity 0.2s ease;
}
.t-card:hover::before { opacity: 1; }
.t-card:hover {
border-color: var(--accent);
box-shadow: 0 1px 0 var(--accent);
}
.t-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: var(--ls-tight); color: var(--text); }
.t-card .meta { color: var(--muted); font-size: .9rem; font-weight: 500; }
.t-card .row { display: flex; gap: .5rem; margin-top: auto; flex-wrap: wrap; }
.t-card .row .btn { flex: 1; padding: .6rem; font-size: .95rem; }
.t-card .row:last-child .btn { flex: 0 1 auto; padding: .45rem .7rem; font-size: .8rem; }
.empty { color: var(--muted); text-align: center; padding: 4rem; font-size: 1.1rem; }
/* L'ÉCRAN DE DUEL - LE CŒUR DU JEU ------------------------------------ */
.play-head { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.round-info { display: flex; flex-direction: column; }
.round-label { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--text); text-transform: uppercase; letter-spacing: .06em; }
.match-label { color: var(--accent); font-size: .9rem; font-weight: 600; }
/* Barre de progression (aplatie, filet éditorial) */
.progress { flex: 1; height: 6px; background: var(--bg-soft); border-radius: var(--radius-sharp); overflow: hidden; border: var(--hair); }
.progress-bar {
height: 100%; width: 0;
background: var(--accent);
transition: width .5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Grille du duel - proportions conservées (pleine largeur 94vw) */
.duel {
display: grid;
/* minmax(0,1fr) : colonnes STRICTEMENT égales même avec un titre long
(sinon un track 1fr grossit jusqu'au min-content du texte en nowrap). */
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: start;
gap: 3rem;
width: 94vw;
margin-left: calc(-47vw + 50%);
}
/* Chaque adversaire = 3 cards séparées empilées (titre / média / bouton) */
.side {
position: relative;
font: inherit;
color: var(--text);
background: transparent;
border: none;
padding: 0;
border-radius: var(--radius); /* hérité par le cadre cosmétique ::after */
display: flex;
flex-direction: column;
gap: .8rem;
transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.side.fade-out { opacity: 0; transform: scale(0.95) translateY(20px); pointer-events: none; }
.side.fade-in { animation: sideFadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes sideFadeIn {
from { opacity: 0; transform: translateY(30px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.duel.transitioning { pointer-events: none; }
/* Card MÉDIA (séparée) */
.media {
aspect-ratio: 16 / 10;
width: 100%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: default;
border: var(--hair);
border-radius: var(--radius);
transition: border-color .2s ease;
}
.side-left .media:hover { border-color: var(--accent-2); }
.side-right .media:hover { border-color: var(--accent); }
.media img, .media video, .media iframe {
width: 100%; height: 100%; object-fit: contain; border: 0; display: block;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.media:hover img, .media:hover video, .media:hover iframe { transform: scale(1.02); }
/* Lecteur média personnalisé (audio & vidéo) : play/pause centré + barre en bas. */
.mplayer { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.mplayer-audio { background: radial-gradient(circle at 50% 38%, #2a2140, #0d0b16); }
.mplayer-video { background: #000; }
.mplayer-video .mplayer-el { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.mplayer-audio .mplayer-el { display: none; }
.mplayer-btn {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 84px; height: 84px; border-radius: 50%; border: none; cursor: pointer;
background: rgba(0, 0, 0, .45); color: #fff; font-size: 2rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: background .15s ease, transform .15s ease, opacity .2s ease;
}
.mplayer-btn:hover { background: rgba(0, 0, 0, .65); transform: translate(-50%, -50%) scale(1.06); }
.mplayer-audio .mplayer-btn { background: rgba(255, 255, 255, .12); }
.mplayer-audio .mplayer-btn:hover { background: rgba(255, 255, 255, .22); }
/* Vidéo : le gros bouton s'efface pendant la lecture (revient au survol). */
.mplayer-video.playing .mplayer-btn { opacity: 0; }
.mplayer-video:hover .mplayer-btn { opacity: 1; }
.mplayer-bar {
position: absolute; left: 16px; right: 16px; bottom: 30px; height: 8px; z-index: 2;
background: rgba(255, 255, 255, .18); border-radius: 4px; cursor: pointer;
}
.mplayer-fill { height: 100%; width: 0; background: var(--accent, #f0a020); border-radius: 4px; }
.mplayer-time {
position: absolute; bottom: 8px; right: 16px; font-size: .8rem; z-index: 2;
color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums;
}
/* Card TITRE (séparée, au-dessus du média) - garde la classe .caption (hook nameplate) */
.caption {
display: block;
background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
padding: .9rem 1rem;
font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: var(--ls-tight);
text-align: center; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: color 0.2s ease, border-color .2s ease;
}
.side-left:hover .caption { border-color: var(--accent-2); }
.side-right:hover .caption { border-color: var(--accent); }
/* Bouton « Choisir » (séparé, sous le média) */
.choose-row { display: flex; }
.choose-row .choose-btn {
flex: 1; padding: .9rem 1rem;
font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
}
/* Macaron VS - losange doré marquant (texte droit) */
.vs {
position: relative;
align-self: center; justify-self: center;
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
z-index: 20; margin: 0 -40px;
user-select: none; flex-shrink: 0;
}
.vs::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
transform: rotate(45deg); border-radius: 10px;
box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px rgba(var(--accent-rgb), .55), 0 10px 26px rgba(0,0,0,.5);
}
.vs span {
position: relative; z-index: 1;
font-family: var(--font-display); font-style: italic; font-weight: 700;
font-size: 1.5rem; letter-spacing: 0; color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.45);
/* Compense le léger décalage optique de l'italique pour un centrage parfait */
padding-left: .12em;
}
/* Winner / Champion (Écran de fin) ------------------------------------ */
.view-winner { position: relative; text-align: center; animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
/* Pluie de confetti - pièces générées en JS (spawnConfetti), couleurs du thème */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 30; }
.confetti-piece {
position: absolute;
top: -12vh;
border-radius: 2px;
opacity: 0;
will-change: transform, opacity;
animation-name: confettiFall;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes confettiFall {
0% { transform: translate3d(0, -12vh, 0) rotateZ(0); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translate3d(var(--drift, 0), 112vh, 0) rotateZ(var(--spin, 540deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.confetti { display: none; }
}
.view-winner h1 {
font-size: 3.5rem; margin: .5rem 0 2rem;
background: linear-gradient(90deg, var(--gold), #ffdf80, var(--gold));
background-size: 200% auto;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
animation: shineText 3s linear infinite;
filter: drop-shadow(0 10px 30px rgba(255, 210, 74, 0.3));
}
@keyframes shineText { to { background-position: 200% center; } }
/* Aura dorée incroyable autour du champion */
@keyframes winnerAura {
0% { box-shadow: 0 0 30px rgba(255, 210, 74, 0.4), inset 0 0 20px rgba(255, 210, 74, 0.2); }
100% { box-shadow: 0 0 80px rgba(255, 210, 74, 0.8), inset 0 0 40px rgba(255, 210, 74, 0.5); }
}
.champion-media {
max-width: 800px; margin: 0 auto;
aspect-ratio: 16 / 9;
border: 4px solid var(--gold);
border-radius: var(--radius);
overflow: hidden; background: #000;
animation: winnerAura 1.5s infinite alternate ease-in-out;
transform: scale(1.02);
}
.champion-media img, .champion-media iframe, .champion-media video { width: 100%; height: 100%; object-fit: contain; }
.champion-name { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; margin: 1.5rem auto 0; color: var(--text); max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champion-link { display: inline-block; margin: .5rem 0 2rem; color: var(--accent-2); font-weight: 500; }
/* Leaderboard final amélioré */
.ranking-title { margin: 3.5rem 0 1.5rem; font-size: 1.6rem; font-weight: 800; }
.ranking { list-style: none; padding: 0; margin: 0 auto; max-width: 800px; text-align: left; display: flex; flex-direction: column; gap: 0.8rem; }
.rank-row {
display: grid; grid-template-columns: 3rem 72px 1fr auto; align-items: center; gap: 1rem;
padding: .8rem; border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; background: rgba(255,255,255,0.02);
transition: transform 0.2s ease;
}
.rank-row:hover { transform: scale(1.01); background: rgba(255,255,255,0.05); }
.rank-row.is-gold { border-color: var(--gold); background: linear-gradient(90deg, rgba(255, 210, 74, 0.1), transparent); box-shadow: 0 0 20px rgba(255, 210, 74, 0.2); }
.rank-row.is-silver { border-color: #c0c0c0; background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), transparent); }
.rank-row.is-bronze { border-color: #cd7f32; background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent); }
.rank-pos { font-size: 1.5rem; font-weight: 900; text-align: center; color: var(--muted); }
.rank-media { width: 72px; height: 44px; border-radius: 6px; overflow: hidden; background: #000; }
/* Stats & Dashboards -------------------------------------------------- */
.global-dashboard {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;
background: var(--bg-card);
border: var(--hair); border-radius: var(--radius); padding: 1.5rem;
}
.dash-card {
background: var(--bg-soft); border: var(--hair); border-radius: var(--radius); padding: 1rem 1.2rem;
transition: border-color .2s ease;
}
.dash-card:hover { border-color: var(--accent); }
.dash-card .lbl, .dash-card .label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-weight: 700; }
.dash-card .val { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
/* Palmarès global des médias */
.gstat-leader { margin-top: 1.5rem; background: var(--bg-card); border: var(--hair); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.gstat-leader-title { margin: 0 0 .8rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: var(--ls-tight); }
.gstat-row { display: grid; grid-template-columns: 2rem 64px 1fr auto; align-items: center; gap: 1rem; padding: .6rem 0; border-top: var(--hair); }
.gstat-row:first-of-type { border-top: none; }
.gstat-rank { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.gstat-row:nth-of-type(1) .gstat-rank { color: var(--gold); }
.gstat-thumb { width: 64px; height: 40px; border-radius: var(--radius-btn); overflow: hidden; background: #000; }
.gstat-thumb img, .gstat-thumb video { width: 100%; height: 100%; object-fit: cover; }
.gstat-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gstat-metrics { color: var(--muted); font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gstat-metrics b { color: var(--accent); font-family: var(--font-display); }
.gstat-mostplayed { margin-top: 1.2rem; background: var(--bg-card); border: var(--hair); border-radius: var(--radius); padding: .9rem 1.2rem; }
.gstat-mostplayed .label { color: var(--muted); }
.gstat-mostplayed .val { font-family: var(--font-display); font-weight: 700; }
.stats-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stats-chart-card { background: var(--bg-card); border: var(--hair); border-radius: var(--radius); padding: 1.5rem; }
.stats-chart-card h3 { margin-top: 0; font-family: var(--font-display); font-size: 1.2rem; border-bottom: var(--hair); padding-bottom: 1rem; color: var(--text); }
/* Tables & Forms ------------------------------------------------------ */
.stats-table th, .stats-table td { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.stats-table th { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; }
.st-bar-container { width: 100%; height: 8px; background: rgba(0,0,0,0.5); border-radius: 99px; margin-top: .5rem; }
.st-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 99px; box-shadow: 0 0 10px var(--accent); }
/* Barre des champions : teinte dorée pour la distinguer */
.st-bar-fill.champs { background: linear-gradient(90deg, var(--accent), var(--gold)); box-shadow: 0 0 12px var(--gold); }
/* Cellule de rang (#1/#2/#3) */
.st-rank { font-weight: 800; color: var(--muted); white-space: nowrap; text-align: center; }
.stats-table tr.top .st-rank { color: var(--gold); }
.field input, .field textarea, .field-inline select, .add-one input {
width: 100%; font: inherit; background: var(--bg-soft); border: var(--hair);
color: var(--text); border-radius: var(--radius); padding: .8rem 1rem; transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus, .add-one input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
/* Arbre / Bracket ----------------------------------------------------- */
.bmatch { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; transition: transform 0.2s; }
.bmatch:hover { transform: scale(1.02); border-color: rgba(255,255,255,0.2); }
.bmatch.current { border-color: var(--accent); box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3); }
.bcomp { padding: .5rem; }
.bcomp + .bcomp { border-top: 1px solid rgba(255,255,255,0.05); }
/* Thème overlay & Divers ---------------------------------------------- */
.theme-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 2000;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.theme-panel {
background: var(--bg-card);
border: var(--hair);
border-radius: var(--radius);
width: 100%;
max-width: 500px;
padding: 2rem;
box-shadow: var(--shadow-float);
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-head {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: var(--hair);
padding-bottom: 1rem;
}
.theme-head h2 {
margin: 0;
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 700;
color: var(--text);
}
.theme-presets {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0,..) : les colonnes peuvent rétrécir -> le nom s'ellipse au lieu de déborder */
gap: 0.75rem;
}
.theme-swatch {
min-width: 0; /* autorise le rétrécissement (sinon min-width:auto déborde) */
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
color: var(--text);
padding: 0.75rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.75rem;
transition: all 0.2s ease;
text-align: left;
}
.theme-swatch:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--accent);
transform: translateY(-2px);
}
.theme-swatch.selected {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(var(--accent-rgb), 0.35);
background: rgba(var(--accent-rgb), 0.08);
}
.theme-swatch-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.theme-del {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.25);
color: var(--muted);
font-size: 0.75rem;
line-height: 1;
cursor: pointer;
transition: all 0.15s ease;
}
.theme-del:hover:not(:disabled) {
background: var(--danger);
border-color: var(--danger);
color: #fff;
}
.theme-del:disabled {
opacity: 0.25;
cursor: not-allowed;
}
.theme-add {
align-self: stretch;
overflow: visible; /* .btn clippe (overflow:hidden) et coupe le texte */
line-height: 1.3;
/* Liseré en DEGRADE principale -> secondaire (comme le bouton primaire) : le fond (padding-box) reste
la couleur du panneau, seul le contour (border-box) porte le dégradé. Coins arrondis préservés. */
background:
linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
border: 1px solid transparent;
color: var(--accent);
font-weight: 700;
padding: 0.75rem;
border-radius: 12px;
}
/* Pas de reflet .btn::after ici : avec overflow:visible il déborderait sur la modal. */
.theme-add::after { content: none; }
.theme-add:hover {
box-shadow: inset 0 0 0 999px rgba(var(--accent-rgb), 0.10); /* léger voile accent au survol */
}
.theme-name-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.theme-name-row span {
font-size: 0.9rem;
color: var(--muted);
flex-shrink: 0;
}
.theme-name-row input {
flex: 1;
min-width: 0;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--text);
padding: 0.5rem 0.7rem;
font-size: 0.9rem;
}
.theme-name-row input:focus {
outline: none;
border-color: var(--accent);
}
.theme-hint {
margin: -0.75rem 0 0;
font-size: 0.8rem;
color: var(--muted);
}
.theme-swatch .dots {
display: flex;
gap: 3px;
background: rgba(0, 0, 0, 0.3);
padding: 4px;
border-radius: 99px;
flex-shrink: 0;
}
.theme-swatch .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: block;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.theme-panel h3 {
margin: 0.5rem 0 0;
font-size: 1.1rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.theme-custom {
display: grid;
grid-template-columns: 1fr;
gap: 0.6rem;
}
.theme-color {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0,0,0,0.2);
padding: 0.5rem 0.8rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.03);
}
.theme-color span {
font-size: 0.9rem;
color: var(--text);
}
.theme-color input[type="color"] {
-webkit-appearance: none;
border: none;
width: 42px;
height: 26px;
border-radius: 6px;
cursor: pointer;
background: none;
padding: 0;
}
.theme-color input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
.theme-color input[type="color"]::-webkit-color-swatch {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
}
.theme-actions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
margin-top: 0.5rem;
border-top: 1px solid var(--line);
padding-top: 1rem;
}
/* Partage / import groupés à gauche, reset / terminé à droite (alignement propre au retour à la ligne). */
.theme-actions-group { display: flex; gap: 0.6rem; flex-wrap: wrap; }
@keyframes modalFadeIn {
from { opacity: 0; transform: scale(0.95) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 480px) {
.theme-presets { grid-template-columns: 1fr; }
.theme-panel { padding: 1.5rem; }
}
#flash {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(120px);
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
font-weight: 600;
padding: .8rem 1.5rem;
border-radius: 99px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
z-index: 5000;
pointer-events: none;
opacity: 0;
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
white-space: nowrap;
max-width: 90vw;
text-align: center;
}
#flash.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.drop-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 3000;
background: rgba(8, 9, 15, 0.9);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
pointer-events: none;
}
.drop-message { border: 3px dashed var(--accent); background: rgba(0,0,0,0.5); box-shadow: 0 0 50px rgba(var(--accent-rgb), 0.2); border-radius: 20px; padding: 2rem; text-align: center; }
[hidden] {
display: none !important;
}
@media (max-width: 768px) {
.duel { grid-template-columns: 1fr; gap: 1rem; perspective: none; }
.side:hover { transform: translateY(-5px); }
.vs { margin: -20px auto; z-index: 30; }
}
/* Restored structural classes deleted during manual edits */
.dash-stats-left {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.dash-card.champion-card {
display: flex;
align-items: center;
gap: 1.5rem;
}
.dash-champ-thumb {
width: 120px;
height: 75px;
border-radius: 8px;
overflow: hidden;
background: #000;
flex-shrink: 0;
border: 1.5px solid var(--line);
transition: all 0.3s ease;
}
.dash-card.champion-card:hover .dash-champ-thumb {
border-color: var(--accent);
box-shadow: 0 0 15px var(--accent);
}
.dash-champ-thumb img, .dash-champ-thumb video {
width: 100%; height: 100%; object-fit: cover;
}
.dash-champ-thumb .thumb-icon { font-size: 2rem; }
.dash-champ-info { display: flex; flex-direction: column; min-width: 0; }
.dash-champ-name {
font-weight: 700; font-size: .95rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-top1-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
padding: 0.5rem;
align-content: center;
}
.top1-card {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 0.75rem;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
position: relative;
text-align: center;
}
.top1-card:hover {
transform: translateY(-3px);
border-color: var(--gold);
box-shadow: 0 4px 15px rgba(255, 174, 66, 0.25);
}
.top1-thumb-wrap {
width: 75px;
height: 50px;
border-radius: 6px;
overflow: hidden;
border: 2px solid var(--line);
background: #000;
transition: border-color 0.2s ease;
}
.top1-card:hover .top1-thumb-wrap { border-color: var(--gold); }
.top1-thumb-wrap img, .top1-thumb-wrap video, .top1-thumb-wrap .thumb-icon {
width: 100%; height: 100%; object-fit: cover;
}
.top1-name {
font-size: 0.8rem; font-weight: 700; color: var(--text);
margin-top: 0.5rem; max-width: 110px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top1-count { font-size: 0.75rem; color: var(--gold); font-weight: 800; margin-top: 0.15rem; }
.top1-badge {
position: absolute; top: -6px; right: -6px;
background: var(--gold); color: #000;
font-size: 0.65rem; font-weight: 900;
padding: 2px 6px; border-radius: 99px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.top1-empty-state {
grid-column: 1 / -1; text-align: center;
color: var(--muted); font-size: 0.9rem;
font-style: italic; padding: 2rem 0;
}
.media-text {
font-size: 1.8rem; font-weight: 700; text-align: center;
padding: 2rem; display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
background: linear-gradient(135deg, var(--bg-soft), var(--bg-card));
color: var(--text); word-break: break-word;
box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
min-height: 200px;
}
.media .broken { color: var(--muted); font-size: .85rem; padding: 1rem; text-align: center; }
.items-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
.item-row { display: flex; align-items: center; gap: .8rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; }
.item-thumb { width: 48px; height: 30px; border-radius: 5px; overflow: hidden; background: #000; flex: 0 0 auto; }
.item-thumb img, .item-thumb video { width: 100%; height: 100%; object-fit: cover; }
.item-info { flex: 1; min-width: 0; }
.item-name { font-weight: 600; }
.item-url { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-del { padding: .35rem .6rem; }
.st-media { display: flex; align-items: center; gap: 1rem; }
.st-link { color: var(--accent-2); text-decoration: none; word-break: break-word; font-weight: 600; }
.st-link:hover { text-decoration: underline; }
.st-thumb { width: 48px; height: 30px; border-radius: 5px; overflow: hidden; background: #000; flex: 0 0 auto; display: block; }
.st-thumb img, .st-thumb video { width: 100%; height: 100%; object-fit: cover; }
.st-num { text-align: center; font-variant-numeric: tabular-nums; }
.st-meta-stats { font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.st-stats-cell { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.drop-message h2 { margin: 0 0 0.5rem; font-size: 1.8rem; color: #fff; }
.drop-message p { margin: 0; color: var(--muted); font-size: 1rem; }
.drop-icon { font-size: 4rem; display: block; margin-bottom: 1.5rem; animation: dropBounce 1.5s infinite ease-in-out; }
@keyframes dropBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
@media (max-width: 720px) {
.global-dashboard { grid-template-columns: 1fr; }
.rank-row { grid-template-columns: 1.8rem 64px 1fr; }
.dash-stats-left { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.dash-stats-left { grid-template-columns: 1fr; }
}
/* ====================================================================
* STYLES MANQUANTS - Formulaires, Bracket, Utilitaires
* ==================================================================== */
/* --- Banner (warning file://) --------------------------------------- */
.banner {
background: linear-gradient(90deg, rgba(255, 210, 74, 0.15), rgba(255, 42, 95, 0.1));
border: 1px solid rgba(255, 210, 74, 0.3);
color: var(--gold);
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
text-align: center;
border-radius: 0;
}
.banner code {
background: rgba(0,0,0,0.3);
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.85em;
}
/* --- Fields & Forms ------------------------------------------------- */
.field {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.2rem;
}
.field > span, .field-inline > span {
font-size: 0.9rem;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.3px;
}
.field code {
background: rgba(0,0,0,0.3);
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.85em;
color: var(--accent);
}
.add-one {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 0.6rem;
align-items: center;
}
.size-row {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
}
.field-inline {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.field-inline select {
font: inherit;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text);
border-radius: 10px;
padding: 0.5rem 0.8rem;
cursor: pointer;
transition: border-color 0.3s ease;
}
.field-inline select:focus { outline: none; border-color: var(--accent); }
/* Select stylé pour le panneau Paramètres (langue) */
.field select {
font: inherit;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background: rgba(0,0,0,0.3);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.9rem center;
border: 1px solid rgba(255,255,255,0.1);
color: var(--text);
border-radius: 10px;
padding: 0.65rem 2.2rem 0.65rem 0.9rem;
width: 100%;
cursor: pointer;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.field select:hover { border-color: rgba(255,255,255,0.25); }
.field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.2); }
.field select option { background: var(--bg-card); color: var(--text); }
.count {
font-size: 0.9rem;
color: var(--accent);
font-weight: 700;
margin-left: auto;
white-space: nowrap;
}
/* --- Edit / Import actions ------------------------------------------ */
.edit-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
align-items: center;
margin-top: 0.5rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(255,255,255,0.05);
}
.edit-actions .spacer {
flex: 1;
min-width: 1rem;
}
.import-actions {
display: flex;
gap: 0.8rem;
align-items: center;
margin-top: 0.5rem;
flex-wrap: wrap;
}
/* --- Preview grid --------------------------------------------------- */
.preview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.8rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.05);
}
.preview-cell {
position: relative;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease;
cursor: default;
}
.preview-cell:hover {
transform: translateY(-3px);
border-color: rgba(255,255,255,0.15);
}
.preview-cell img, .preview-cell video {
width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}
.preview-cell .badge {
position: absolute;
top: 5px; left: 5px;
background: rgba(0,0,0,0.7);
color: var(--accent);
font-size: 0.65rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 99px;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(4px);
}
.preview-cell .cap {
display: block;
padding: 0.4rem 0.5rem;
font-size: 0.75rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-cell .thumb-icon {
width: 100%; aspect-ratio: 16/9;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
background: rgba(0,0,0,0.2);
}
/* --- Stats extras --------------------------------------------------- */
.stats-summary {
font-size: 1.1rem;
color: var(--muted);
margin-bottom: 1.5rem;
}
.stats-summary strong {
color: var(--accent);
font-size: 1.3rem;
}
.stats-topctrl {
display: flex; align-items: center; justify-content: flex-end; gap: .7rem;
margin: 0 0 .8rem;
}
.stats-topctrl .label { color: var(--muted); font-size: .9rem; }
.stats-topsel {
font: inherit; background: var(--bg-soft); border: var(--hair);
color: var(--text); border-radius: var(--radius-btn); padding: .4rem .6rem; cursor: pointer;
}
.stats-table-wrap {
overflow-x: auto;
border-radius: var(--radius);
border: var(--hair);
background: var(--bg-card);
}
.stats-table {
width: 100%;
border-collapse: collapse;
}
.stats-table tr.top {
background: linear-gradient(90deg, rgba(255, 210, 74, 0.08), transparent);
}
/* --- Bracket / Arbre ------------------------------------------------ */
.bracket-scroll {
overflow-x: auto;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
}
.bracket {
display: flex;
gap: 2.5rem;
min-width: max-content;
padding: 1rem 0;
}
.bracket-round {
display: flex;
flex-direction: column;
gap: 0;
min-width: 180px;
}
.bracket-round-title {
text-align: center;
font-size: 0.8rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.5rem 0 1rem;
border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 1rem;
}
.bracket-matches {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: space-around;
flex: 1;
}
.bcomp {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 2rem;
}
.bthumb {
width: 36px;
height: 24px;
border-radius: 4px;
overflow: hidden;
background: #000;
flex-shrink: 0;
display: block;
}
.bthumb img, .bthumb video {
width: 100%; height: 100%; object-fit: cover;
}
.bthumb .thumb-icon {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 0.7rem;
background: rgba(0,0,0,0.3);
}
.thumb-empty {
width: 36px;
height: 24px;
border-radius: 4px;
background: rgba(255,255,255,0.03);
flex-shrink: 0;
}
.bname {
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
}
.bcomp.win {
background: rgba(var(--accent-rgb), 0.08);
border-radius: 6px;
padding-left: 0.3rem;
padding-right: 0.3rem;
}
.bcomp.win .bname { color: var(--accent); }
.bcomp.lose {
opacity: 0.4;
}
/* --- Ranking extras ------------------------------------------------- */
.rank-media img, .rank-media video {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.rank-media .thumb-icon {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
background: rgba(0,0,0,0.3);
}
.rank-label { min-width: 0; }
.rank-label a {
color: var(--text);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
}
.rank-label a:hover { color: var(--accent); text-decoration: underline; }
.rank-stat {
color: var(--muted);
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
}
/* --- Utility classes ------------------------------------------------ */
.muted { color: var(--muted); }
.hint {
text-align: center;
color: var(--muted);
font-size: 0.85rem;
margin-top: 1.5rem;
opacity: 0.7;
}
.thumb-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
}
.winner-actions {
display: flex;
gap: 0.8rem;
justify-content: center;
flex-wrap: wrap;
margin: 1.5rem 0;
}
/* --- Custom scrollbar ----------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
/* --- Play-head responsive ------------------------------------------- */
.play-head {
flex-wrap: wrap;
}
@media (max-width: 600px) {
.add-one { grid-template-columns: 1fr; }
.size-row { flex-direction: column; align-items: flex-start; }
.edit-actions { justify-content: stretch; }
.edit-actions .btn { flex: 1; min-width: 0; text-align: center; }
.edit-actions .spacer { display: none; }
.play-head { gap: 0.5rem; }
.play-head .btn-ghost { padding: 0.4rem 0.6rem; font-size: 0.8rem; }
h1 { font-size: 1.5rem; }
.view-winner h1 { font-size: 2.2rem; }
/* Topbar compacte : on masque le libellé « Accueil », l'icône ◆ suffit */
.topbar { padding: .6rem 1rem; gap: .5rem; }
.home-btn span { display: none; }
.quick-access .btn span { display: none; }
.view-head { flex-wrap: wrap; gap: .8rem; }
.back-to-top { right: .6rem; bottom: .6rem; }
}
/* --- Import Playlist YouTube --- */
.playlist-import {
display: flex;
gap: 1rem;
align-items: center;
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 1.2rem;
border-radius: 16px;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.local-import {
display: flex;
gap: 1rem;
align-items: center;
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 1.2rem;
border-radius: 16px;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.local-import-note { flex: 1; min-width: 160px; font-size: .85rem; }
.playlist-import input {
flex: 1;
min-width: 250px;
font: inherit;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text);
border-radius: 12px;
padding: 0.9rem 1.2rem;
transition: all 0.3s ease;
}
.playlist-import input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.25);
background: rgba(0, 0, 0, 0.6);
}
@media (max-width: 600px) {
.playlist-import {
flex-direction: column;
align-items: stretch;
padding: 1rem;
}
}
/* --- Tier list ---------------------------------------------------- */
.tier-hint { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
.tier-rows { display: flex; flex-direction: column; gap: 6px; }
.tier-row {
display: flex;
align-items: stretch;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
min-height: 76px;
}
.tier-head {
flex: 0 0 96px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 6px;
color: #111;
}
.tier-label {
width: 100%;
border: none;
background: transparent;
color: #111;
font: 700 1.3rem/1 inherit;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.tier-label:focus { outline: 2px solid rgba(0,0,0,.35); border-radius: 6px; }
.tier-color { position: relative; width: 20px; height: 20px; cursor: pointer; }
.tier-color input[type="color"] {
position: absolute; inset: 0; width: 100%; height: 100%;
padding: 0; border: 2px solid rgba(0,0,0,.4); border-radius: 50%;
background: none; cursor: pointer;
}
.tier-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tier-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.tier-move { display: flex; gap: 3px; }
.tier-mini {
width: 22px; height: 20px; padding: 0; line-height: 1;
border: 1px solid rgba(0,0,0,.35); border-radius: 5px;
background: rgba(255,255,255,.55); color: #111; cursor: pointer; font-size: .7rem;
}
.tier-mini:hover { background: rgba(255,255,255,.85); }
.tier-mini:disabled { opacity: .35; cursor: default; }
.tier-mini.tier-del:hover { background: var(--danger); color: #fff; }
.tier-items, .tier-pool {
flex: 1;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 6px;
padding: 8px;
transition: background .15s ease;
}
.tier-items.drop-hover, .tier-pool.drop-hover {
background: rgba(var(--accent-rgb), 0.18);
box-shadow: inset 0 0 0 2px var(--accent);
}
/* Chips = vignette « carte » (média en gros, nom dessous) - comme l'export image */
.tier-chip {
display: flex;
flex-direction: column;
gap: 4px;
width: 104px;
padding: 5px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius-btn);
cursor: grab;
user-select: none;
}
.tier-chip:active { cursor: grabbing; }
.tier-chip.dragging { opacity: .4; }
.tier-chip-thumb {
width: 100%; height: 58px; flex: 0 0 auto;
border-radius: var(--radius-btn); overflow: hidden; background: #000;
}
.tier-chip-thumb img, .tier-chip-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tier-chip-thumb .thumb-icon { display: flex; align-items: center; justify-content: center; height: 100%; }
.tier-chip-thumb .thumb-icon svg { width: 22px; height: 22px; color: var(--muted); opacity: .6; }
.tier-chip-name {
font-size: .78rem; color: var(--text); text-align: center; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Bouton « + Rangée » sous la dernière rangée */
.tier-add-row { display: block; width: 100%; margin-top: .8rem; padding: .7rem; font-weight: 600; }
.tier-add-row:disabled { opacity: .4; cursor: not-allowed; }
.tier-add-row:disabled:hover { border-color: var(--line); box-shadow: none; }
.tier-pool-wrap { margin-top: 1.5rem; }
.tier-pool-title { font-size: 1rem; color: var(--muted); margin: 0 0 .6rem; font-weight: 600; }
.tier-pool {
background: var(--bg-card);
border: 1px dashed var(--line);
border-radius: 10px;
min-height: 76px;
}
/* Overlay de lecture / agrandissement (clic sur une vignette) */
.media-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 3vmin;
background: rgba(0, 0, 0, .82);
backdrop-filter: blur(4px);
}
.media-modal-box {
display: flex;
flex-direction: column;
gap: .6rem;
width: min(1100px, 96vw);
max-height: 92vh;
}
.media-modal-box:fullscreen {
width: 100vw;
max-height: 100vh;
justify-content: center;
padding: 2vmin;
background: #000;
}
.media-modal-actions {
display: flex;
justify-content: flex-end;
gap: .5rem;
}
.media-modal-stage {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
background: #000;
border-radius: 10px;
overflow: hidden;
}
.media-modal-stage iframe,
.media-modal-stage video,
.media-modal-stage img {
max-width: 100%;
max-height: 88vh;
width: auto;
height: auto;
display: block;
border: none;
}
.media-modal-stage iframe { width: 100%; aspect-ratio: 16 / 9; }
.media-modal-stage .media-text {
color: var(--text);
font-size: 2rem;
padding: 2rem;
text-align: center;
}
.media-modal-stage .broken { color: var(--muted); padding: 2rem; }
/* ====================================================================
* Fonctionnalités bureau / Twitch / Premium / Onboarding
* ==================================================================== */
/* Retour en haut : flèche flottante bas-droite */
.back-to-top {
position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 121;
width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; line-height: 1; cursor: pointer;
background: var(--bg-card); color: var(--text); border: var(--hair);
box-shadow: var(--shadow-float);
transition: opacity .2s ease, transform .15s ease, background .2s ease, color .2s ease;
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.back-to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Contrôle du volume intégré à la topbar (à gauche de l'engrenage), slider révélé au survol.
* L'icône est un bouton .btn.btn-ghost identique aux autres (même padding/svg que .gear-btn). */
.vol-control { display: inline-flex; align-items: center; gap: 0; }
.vol-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: .55rem .7rem; }
.vol-icon-btn svg { width: 20px; height: 20px; }
/* Slider masqué au repos, révélé au survol / focus clavier (à gauche de l'icône).
* Bicolore : partie GAUCHE (volume utilisé) = couleur du thème ; partie DROITE (inutilisée) = noir.
* Le pourcentage est piloté par --vol-pct (mis à jour en JS, voir js/desktop.js). */
.vol-control input[type=range] {
--vol-pct: 100%;
-webkit-appearance: none; appearance: none;
width: 0; opacity: 0; height: 5px; border-radius: var(--radius-pill);
background: linear-gradient(to right, var(--accent) 0 var(--vol-pct), #000 var(--vol-pct) 100%);
border: 1px solid var(--line);
cursor: pointer;
transition: width .2s ease, opacity .2s ease, margin .2s ease;
pointer-events: none;
}
.vol-control:hover input[type=range],
.vol-control:focus-within input[type=range] {
width: 100px; opacity: 1; margin: 0 .35rem; pointer-events: auto;
}
.vol-control input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 13px; height: 13px; border-radius: var(--radius-pill);
background: var(--text); border: 2px solid var(--accent);
}
.vol-control input[type=range]::-moz-range-thumb {
width: 13px; height: 13px; border-radius: var(--radius-pill);
background: var(--text); border: 2px solid var(--accent);
}
.tab-disabled {
opacity: .4; cursor: not-allowed !important;
position: relative;
}
.tab-disabled::before {
content: "bientôt"; position: absolute; top: -6px; right: -6px;
font-size: .55rem; background: var(--accent-2); color: #fff;
padding: 1px 5px; border-radius: 6px; letter-spacing: .3px; text-transform: uppercase;
}
#twitchBtn.twitch-on, .qa-btn.twitch-on {
border-color: #9146ff; color: #fff;
box-shadow: 0 0 14px rgba(145, 70, 255, 0.6);
background: rgba(145, 70, 255, 0.18);
}
.qa-btn.discord-on {
border-color: #5865F2; color: #fff;
box-shadow: 0 0 14px rgba(88, 101, 242, 0.6);
background: rgba(88, 101, 242, 0.18);
}
/* Icône SVG des accès rapides */
.qa-btn { display: inline-flex; align-items: center; gap: .45rem; }
.qa-btn svg { width: 16px; height: 16px; }
/* --- Panneau de votes Twitch (duel) --------------------------------- */
.twitch-panel, .vote-panel {
max-width: 900px; margin: 1.2rem auto 0;
background: var(--bg-card); border: 1px solid var(--line);
border-radius: var(--radius); padding: 1rem 1.2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.tw-title {
font-weight: 700; font-size: .95rem; margin-bottom: .7rem;
display: flex; align-items: center; gap: .5rem; color: var(--text);
}
.tw-live { color: #ff2a5f; font-size: .7rem; font-weight: 800; letter-spacing: .5px; animation: twPulse 1.4s ease-in-out infinite; }
@keyframes twPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.tw-names { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; gap: 1rem; }
.tw-name { max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-name-a { color: var(--accent-2); }
.tw-name-b { color: var(--accent); text-align: right; }
.tw-bars { display: flex; gap: 4px; height: 22px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.tw-bar { position: relative; overflow: hidden; border-radius: 6px; }
.tw-bar-a { flex: 1 1 auto; }
.tw-bar-b { flex: 1 1 auto; }
.tw-fill { height: 100%; width: 50%; transition: width .35s cubic-bezier(0.2,0.8,0.2,1); }
.tw-bar-a .tw-fill { background: linear-gradient(90deg, var(--accent-2), rgba(var(--accent-2-rgb,255,0,127),0.5)); margin-left: auto; }
.tw-bar-b .tw-fill { background: linear-gradient(270deg, var(--accent), rgba(var(--accent-rgb),0.5)); }
.tw-meta { display: flex; justify-content: space-between; align-items: center; margin-top: .55rem; font-size: .8rem; color: var(--muted); gap: 1rem; }
.tw-side b { color: var(--text); }
.tw-last { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-last-user { color: var(--gold); font-weight: 700; }
/* --- Fenêtres modales génériques (Twitch / Premium / Onboarding) ---- */
.twitch-modal, .premium-modal, .onboard-modal {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.twitch-box, .premium-box, .onboard-box {
width: min(460px, 92vw); background: var(--bg-card);
border: var(--hair); border-radius: var(--radius);
padding: 1.6rem 1.8rem; box-shadow: var(--shadow-float);
animation: fadeInUp .35s cubic-bezier(0.2,0.8,0.2,1);
}
.twitch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.twitch-head h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.tw-glyph { filter: drop-shadow(0 0 6px #9146ff); }
.twitch-warn { color: var(--gold); font-size: .85rem; margin: 0 0 1rem; }
.twitch-hint { color: var(--muted); font-size: .85rem; margin: .8rem 0; line-height: 1.5; }
.twitch-status { font-size: .9rem; min-height: 1.2rem; margin: .4rem 0 1rem; font-weight: 600; }
.twitch-status.ok { color: #33d17a; }
.twitch-status.off { color: var(--danger); }
.twitch-actions, .premium-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .6rem; }
/* --- Confirmation -------------------------------------------------- */
.confirm-modal .premium-box { width: min(440px, 92vw); text-align: center; }
.confirm-box .confirm-text { margin: .4rem 0 1.4rem; line-height: 1.5; color: var(--text); text-align: center; text-wrap: balance; }
/* Boutons pleine largeur, côte à côte (Confirmer à gauche, Annuler à droite) */
.confirm-box .confirm-actions { display: flex; gap: .7rem; }
.confirm-box .confirm-actions .btn { flex: 1; padding: .75rem; }
/* Croix de fermeture : petite, rouge au survol comme une action destructive */
.confirm-x { padding: .35rem .6rem; line-height: 1; }
/* --- Premium ------------------------------------------------------- */
.premium-box { text-align: center; }
.premium-icon { font-size: 3rem; margin-bottom: .5rem; }
.premium-box h2 { margin: 0 0 .6rem; }
.premium-box p { margin: .4rem 0; line-height: 1.5; }
.premium-actions { justify-content: center; }
/* --- Onboarding ---------------------------------------------------- */
.onboard-box { text-align: center; }
.onboard-icon { font-size: 3.4rem; margin-bottom: .6rem; animation: fadeInUp .4s ease; }
.onboard-box h2 { margin: 0 0 .7rem; font-size: 1.5rem; }
.onboard-box p { color: var(--muted); line-height: 1.6; min-height: 4.5rem; }
.onboard-dots { display: flex; justify-content: center; gap: .5rem; margin: 1rem 0 1.4rem; }
.onboard-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: all .3s ease; }
.onboard-dot.active { background: var(--accent); width: 24px; border-radius: 5px; }
.onboard-actions { display: flex; justify-content: space-between; gap: .6rem; }
/* --- Verrou Premium sur boutons ------------------------------------ */
.playlist-import .btn { white-space: nowrap; }
/* --- Tableau de bord stats verrouillé (Premium) -------------------- */
.dash-locked {
display: flex; align-items: center; gap: 1rem;
background: linear-gradient(145deg, rgba(29,33,45,0.7), rgba(18,20,34,0.9));
border: 1px dashed var(--line); border-radius: var(--radius);
padding: 1.2rem 1.5rem; margin-bottom: 1.5rem;
}
.dash-locked-icon { font-size: 2rem; }
.dash-locked-text { display: flex; flex-direction: column; flex: 1; }
.dash-locked-text strong { font-size: 1.1rem; }
.dash-locked-text span { color: var(--muted); font-size: .9rem; }
/* ====================================================================
* Carte de tournoi - refonte (cover média + actions compactes)
* ==================================================================== */
.t-card { padding: 0; overflow: hidden; }
.t-card-cover {
position: relative;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--bg-soft), var(--bg-card));
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.t-card-cover img, .t-card-cover video {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s cubic-bezier(0.2,0.8,0.2,1);
}
.t-card:hover .t-card-cover img, .t-card:hover .t-card-cover video { transform: scale(1.06); }
.t-card-cover .thumb-icon { font-size: 2.5rem; opacity: .5; }
/* Dégradé bas pour lier la cover au corps */
.t-card-cover::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.55));
pointer-events: none;
}
.t-card-crown {
position: absolute; top: .6rem; left: .6rem; z-index: 2;
font-size: 1.1rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.t-card-badge {
position: absolute; top: .6rem; right: .6rem; z-index: 2;
background: var(--accent); color: #111; font-weight: 700;
font-size: .68rem; padding: .2rem .55rem; border-radius: var(--radius-sharp);
text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
}
.t-card-body { padding: 1rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.t-card-body h3 { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: var(--ls-tight); color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-card-play { display: flex; gap: .4rem; margin-top: .4rem; align-items: stretch; }
.t-card-play .btn { flex: 1 1 0; min-width: 0; padding: .6rem .3rem; font-size: .85rem; white-space: nowrap; text-overflow: ellipsis; }
.t-card-play .t-card-more { flex: 0 0 auto; padding: .6rem .7rem; display: inline-flex; align-items: center; }
.t-card-more svg, .toolbar-more svg { width: 18px; height: 18px; display: block; }
/* Menu d'actions (popover) - cartes + barres d'outils */
.action-menu {
position: fixed; z-index: 300; min-width: 190px; padding: .35rem;
background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
box-shadow: var(--shadow-float);
display: flex; flex-direction: column; gap: .1rem;
animation: fadeInUp .16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.action-menu .action-item {
justify-content: flex-start; text-align: left; width: 100%;
display: flex; align-items: center; gap: .6rem;
border: none; background: transparent; padding: .5rem .6rem; border-radius: var(--radius-btn);
}
.action-menu .action-item:hover { background: var(--bg-soft); box-shadow: none; }
.action-menu .action-item.action-danger { color: var(--danger); }
.action-menu .action-ico { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.action-menu .action-ico svg { width: 18px; height: 18px; }
.t-card-icons {
display: flex; gap: .35rem; margin-top: .3rem;
padding-top: .7rem; border-top: 1px solid rgba(255,255,255,0.06);
flex-wrap: wrap;
}
.icon-btn {
flex: 1; min-width: 34px;
font: inherit; font-size: 1rem; line-height: 1;
padding: .45rem 0; border-radius: 9px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text); cursor: pointer;
transition: all .2s ease;
}
.icon-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.12); transform: translateY(-2px); }
.icon-btn.icon-danger:hover { border-color: var(--danger); background: rgba(255,42,95,0.12); }
/* --- Chrono de vote Twitch ----------------------------------------- */
.tw-timer { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.tw-timer-setup { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.tw-dur-field { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9rem; font-weight: 600; }
.tw-dur-field input {
width: 68px; font: inherit; text-align: center;
padding: .35rem .4rem; border-radius: 8px;
background: var(--bg-soft); border: 1px solid var(--line); color: var(--text);
}
.tw-timer-running { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tw-countdown { font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1; min-width: 3ch; text-align: center; }
.tw-countdown small { font-size: .8rem; color: var(--muted); font-weight: 600; }
.tw-count-bar { flex: 1; height: 8px; background: var(--bg-soft); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.tw-count-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent-2); transition: width 1s linear; }
.tw-tie { text-align: center; font-weight: 700; color: var(--gold); padding: .3rem; animation: twPulse 1s ease-in-out infinite; }
/* Options de vote (auto-chrono / validation streamer) + pause */
/* Toggles de vote (auto-chrono / validation streamer) - visibles en permanence */
.vote-opts { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.field-checkbox {
display: inline-flex; align-items: center; gap: .45rem; user-select: none;
background: var(--bg-soft); border: 1px solid var(--line); border-radius: 99px;
padding: .35rem .85rem; font-size: .82rem; font-weight: 600; color: var(--muted);
cursor: pointer; transition: border-color .25s ease, color .25s ease, background .25s ease;
}
/* Champ dédié « cacher les X dernières s » (visible si le suspense est activé) */
.vote-hide-field[hidden] { display: none; }
.vote-hide-field { flex-basis: 100%; justify-content: center; }
.vote-hide-secs {
width: 5rem; font: inherit; font-size: 1rem; font-weight: 700; text-align: center;
background: var(--bg-soft); border: 1px solid var(--line); color: var(--text);
border-radius: var(--radius-btn); padding: .45rem .5rem;
/* Pas de flèches de spinner : toute la largeur sert à écrire */
-moz-appearance: textfield; appearance: textfield;
}
.vote-hide-secs::-webkit-outer-spin-button,
.vote-hide-secs::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vote-opts .dc-mode { display: inline-flex; align-items: center; gap: .55rem; }
.vote-opts .dc-mode-label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.vote-opts .seg {
display: inline-flex; gap: 2px; padding: 2px;
background: var(--bg-soft); border: 1px solid var(--line); border-radius: 99px;
}
.vote-opts .seg-btn {
border: none; background: transparent; color: var(--muted);
font: inherit; font-size: .8rem; font-weight: 600;
padding: .3rem .8rem; border-radius: 99px; cursor: pointer;
transition: color .2s ease, background .2s ease;
}
.vote-opts .seg-btn:hover { color: var(--text); }
.vote-opts .seg-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.field-checkbox:hover { border-color: var(--accent); color: var(--text); }
.field-checkbox:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb),0.12); color: var(--text); }
.field-checkbox input {
-webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 auto;
width: 15px; height: 15px; border-radius: 4px;
border: 1px solid var(--line); background: rgba(0,0,0,0.3);
cursor: pointer; position: relative; transition: background .2s ease, border-color .2s ease;
}
.field-checkbox input:checked { background: var(--accent); border-color: var(--accent); }
.field-checkbox input:checked::after {
content: ''; position: absolute; left: 4px; top: 1px;
width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Sélecteur « mode de résultat » : puces rondes (radios), un seul choix à la fois. */
.vote-result-mode { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; flex-basis: 100%; }
.vote-result-mode[hidden] { display: none; }
.field-radio input { border-radius: 50%; }
.field-radio input:checked::after {
content: ''; position: absolute; left: 4px; top: 4px;
width: 5px; height: 5px; border: none; border-radius: 50%; background: #fff; transform: none;
}
/* Astuces repliables */
.hint-box { text-align: center; margin-top: 1.5rem; }
.hint-toggle {
background: none; border: 1px solid var(--line); color: var(--muted);
border-radius: 99px; padding: .4rem 1rem; cursor: pointer; font: inherit;
font-weight: 600; font-size: .88rem; transition: border-color .25s ease, color .25s ease;
}
.hint-toggle:hover { border-color: var(--accent); color: var(--text); }
.hint-caret { display: inline-block; transition: transform .25s ease; }
.hint-toggle.open .hint-caret { transform: rotate(180deg); }
.hint-content { margin: .9rem auto 0; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--muted); font-size: .9rem; line-height: 1.6; animation: fadeInUp .3s ease; }
.hint-line { display: block; text-align: left; background: rgba(0,0,0,0.2); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .9rem; }
.hint-line b { color: var(--text); font-weight: 700; }
.tw-timer-running.paused .tw-countdown { color: var(--muted); animation: twPulse 1.2s ease-in-out infinite; }
.tw-timer-running.paused .tw-count-fill { filter: grayscale(1) brightness(.7); }
/* ====================================================================
* Vote du chat pour la tier list (overlay séquentiel N options)
* ==================================================================== */
.tier-vote-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(5, 6, 12, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center; padding: 2rem;
animation: fadeInUp .3s ease;
}
.tv-box {
width: min(680px, 96vw); max-height: 92vh; overflow-y: auto;
background: linear-gradient(145deg, rgba(29, 33, 45, 0.95), rgba(18, 20, 34, 0.98));
border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 1.5rem;
}
.tv-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tv-head h2 { margin: 0; font-size: 1.2rem; }
.tv-media { width: min(460px, 92vw); max-width: 100%; aspect-ratio: 16/9; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #000; }
.tv-media img, .tv-media video, .tv-media iframe { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-name { text-align: center; font-weight: 700; margin: .6rem 0 1rem; font-size: 1.05rem; }
.tv-options { display: flex; flex-direction: column; gap: .5rem; }
.tv-opt {
display: flex; align-items: center; gap: .7rem; width: 100%;
background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
padding: .45rem .6rem; color: var(--text); font: inherit; text-align: left; cursor: default;
transition: border-color .25s ease, transform .15s ease;
}
.tv-opt-rank { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #111; }
.tv-opt-label { flex: 0 0 120px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-opt .tw-bar { flex: 1; height: 14px; background: var(--bg); border: 1px solid var(--line); }
.tv-opt .tw-fill { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.tv-opt-num { flex: 0 0 auto; min-width: 74px; text-align: right; font-size: .85rem; color: var(--muted); }
.tv-opt.leader { border-color: var(--accent); }
.tv-opt.chosen { border-color: var(--gold); box-shadow: 0 0 16px rgba(var(--accent-rgb),0.4); transform: scale(1.02); }
.tv-options.pickable .tv-opt { cursor: pointer; }
.tv-options.pickable .tv-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
.tv-timer { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.tv-setup { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; }
/* Panneau « vote en cours » réorganisé en lignes nettes pour éviter que la barre de
* progression (flex:1) n'écrase les boutons : ligne 1 = chrono + barre, ligne 2 = texte
* live (le cas échéant), puis les boutons d'action centrés sur leur propre ligne.
* Le ::after (item flex à base 100%) force le retour à la ligne avant les boutons. */
.tv-running { display: flex; align-items: center; justify-content: center; gap: .55rem .8rem; flex-wrap: wrap; }
.tv-running .tw-countdown { order: 0; flex: 0 0 auto; }
.tv-running .tw-count-bar { order: 0; flex: 1 1 160px; min-width: 120px; }
.tv-running .sc-vote-live { order: 1; flex: 1 1 100%; text-align: center; margin: 0; }
.tv-running::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
.tv-running .btn { order: 3; flex: 0 0 auto; }
.tv-running.paused .tw-countdown { color: var(--muted); animation: twPulse 1.2s ease-in-out infinite; }
.tv-msg { text-align: center; font-weight: 700; color: var(--gold); padding: .4rem; animation: twPulse 1s ease-in-out infinite; }
.tv-result { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: .5rem; }
.tv-result[hidden] { display: none; }
.tv-result-msg { font-weight: 700; color: var(--accent); }
/* Animation de victoire auto (fin du chrono) */
@keyframes twWinPulse {
0% { transform: scale(1); box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
40% { transform: scale(1.04); box-shadow: 0 0 40px 6px rgba(var(--accent-rgb),0.7); }
100% { transform: scale(1); box-shadow: 0 0 24px 2px rgba(var(--accent-rgb),0.5); }
}
.side.tw-auto-win {
animation: twWinPulse .85s cubic-bezier(0.2,0.8,0.2,1) forwards;
border-color: var(--accent) !important;
z-index: 3;
}
/* ====================================================================
* Icônes SVG, bouton Steam, anti-blur cartes, animation de victoire
* ==================================================================== */
/* Retire le flou d'arrière-plan + le scale au survol (le texte restait net) */
.t-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.t-card:hover { transform: translateY(-6px); }
/* Icônes SVG dans les boutons de carte */
.icon-btn svg { width: 18px; height: 18px; display: block; margin: 0 auto; }
.icon-btn { position: relative; }
/* Badge cadenas sur une action Premium verrouillée */
/* Cadenas SVG réutilisable (masque monochrome, hérite de la couleur) */
:root {
--lock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm3 8H9V7a3 3 0 0 1 6 0z' fill='black'/%3E%3C/svg%3E");
}
.icon-locked { position: relative; }
.action-menu .action-item.icon-locked { padding-right: 1.6rem; }
.icon-locked::after {
content: ""; position: absolute; top: 50%; right: .5rem; transform: translateY(-50%);
width: 13px; height: 13px; background-color: var(--muted);
-webkit-mask: var(--lock-svg) center/contain no-repeat; mask: var(--lock-svg) center/contain no-repeat;
}
/* Bouton Steam (éditeur) */
.btn-steam { display: inline-flex; align-items: center; gap: .5rem; }
.btn-steam svg { width: 18px; height: 18px; }
/* Logo Steam dans la rangée d'icônes des cartes */
.icon-btn[data-workshop]:hover { color: #66c0f4; border-color: #66c0f4; background: rgba(102,192,244,0.12); }
/* --- Animation de victoire (nom + WIN + confettis) ------------------ */
.winner-reveal {
position: fixed; inset: 0; z-index: 300;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb),0.22), rgba(0,0,0,0.85));
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
animation: fadeIn .25s ease;
overflow: hidden;
}
.wr-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wr-card {
position: relative; z-index: 2; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: .4rem;
animation: wrPop .5s cubic-bezier(0.2,1.4,0.4,1) both;
}
.wr-thumb {
width: 220px; max-width: 60vw; aspect-ratio: 16/9;
border-radius: var(--radius); overflow: hidden; margin-bottom: .6rem;
border: 2px solid var(--accent);
box-shadow: 0 0 40px 4px rgba(var(--accent-rgb),0.6);
}
.wr-thumb img, .wr-thumb video { width: 100%; height: 100%; object-fit: cover; }
.wr-thumb .thumb-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: var(--bg-soft); }
.wr-name {
font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 800; color: #fff;
text-shadow: 0 2px 20px rgba(var(--accent-rgb),0.8); letter-spacing: -0.5px;
max-width: 90vw;
}
.wr-win {
font-size: clamp(2.4rem, 9vw, 6rem); font-weight: 900; line-height: .9;
background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--gold));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 24px rgba(var(--accent-rgb),0.7));
animation: wrWin 1.5s ease-in-out;
}
/* Scores du vote (pourcentages de chaque côté) + bouton « Duel suivant » */
.wr-scores {
display: flex; gap: .8rem; margin: 1rem 0 .3rem; width: min(460px, 86vw);
}
.wr-score {
flex: 1; display: flex; flex-direction: column; gap: .2rem; align-items: center;
padding: .7rem .9rem; background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
}
.wr-score-win { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.4), 0 0 22px rgba(var(--accent-rgb),.3); }
.wr-score-name { font-size: .9rem; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-score-win .wr-score-name { color: var(--text); }
.wr-score-pct { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.wr-next { margin-top: 1rem; padding: .8rem 2rem; font-family: var(--font-display); font-size: 1.05rem; }
@keyframes wrPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes wrWin { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 45% { transform: scale(1.15) rotate(2deg); opacity: 1; } 65% { transform: scale(.96); } 100% { transform: scale(1) rotate(0); } }
/* ====================================================================
* Icônes topbar SVG + onboarding dynamique
* ==================================================================== */
#twitchBtn { display: inline-flex; align-items: center; gap: .4rem; }
#twitchBtn svg { width: 16px; height: 16px; }
#volIcon { display: flex; align-items: center; }
#volIcon svg { width: 16px; height: 16px; display: block; }
/* Onboarding : fond plus léger pour laisser voir les boutons mis en avant */
/* Transparent par défaut : c'est le « trou » du halo qui assombrit le reste,
sans flou, pour que le bouton cité reste NET. .dim = étape sans bouton. */
.onboard-modal { z-index: 320; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.onboard-modal.dim { background: rgba(0,0,0,0.62); }
.onboard-box { width: min(500px, 94vw); }
.onboard-visual {
min-height: 128px; margin-bottom: 1rem;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
}
.ob-vis { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; width: 100%; }
.ob-btn-demo { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; padding: .42rem .85rem; pointer-events: none; }
.ob-btn-demo svg { width: 15px; height: 15px; }
/* Étape 1 - bracket + trophée */
.ob-bracket { display: flex; align-items: center; gap: .5rem; }
.ob-seed { width: 40px; height: 20px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: .45; }
.ob-seed:nth-child(2) { opacity: .8; }
.ob-join { width: 18px; height: 2px; background: var(--line); }
.ob-trophy { font-size: 2.6rem; animation: obFloat 2s ease-in-out infinite; }
@keyframes obFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* Étape 2 - liste d'exemple */
.ob-list { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: .35rem; }
.ob-line { display: flex; gap: .5rem; align-items: center; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: .35rem .6rem; font-size: .8rem; text-align: left; }
.ob-line b { color: var(--accent); }
.ob-line span { color: var(--muted); overflow: hidden; white-space: nowrap; }
.ob-line-type { animation: obAppear .5s ease both; }
.ob-caret { animation: obBlink 1s step-end infinite; }
.ob-demo-row { text-align: center; margin-top: .3rem; }
@keyframes obAppear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes obBlink { 50% { opacity: 0; } }
/* Étape 3 - mini duel */
/* Média côte à côte avec le « VS » au milieu (surcharge le flex-direction:column de .ob-vis). */
.ob-duel { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; }
.ob-card { width: 74px; height: 46px; border-radius: 8px; background: var(--bg-soft); border: 2px solid var(--line); }
.ob-card-a { animation: obBlinkA 2.4s ease-in-out infinite; }
.ob-card-b { animation: obBlinkB 2.4s ease-in-out infinite; }
@keyframes obBlinkA { 0%,35% { border-color: var(--accent-2); box-shadow: 0 0 16px rgba(var(--accent-2-rgb),.6); } 45%,100% { border-color: var(--line); box-shadow: none; } }
@keyframes obBlinkB { 0%,50% { border-color: var(--line); box-shadow: none; } 60%,95% { border-color: var(--accent); box-shadow: 0 0 16px rgba(var(--accent-rgb),.6); } 100% { border-color: var(--line); } }
.ob-vs { font-weight: 800; color: var(--muted); }
.ob-keys { display: flex; gap: .5rem; align-items: center; justify-content: center; color: var(--muted); font-size: .85rem; }
.ob-keys kbd { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; padding: .1rem .5rem; font-weight: 700; }
/* Étape 4 - Twitch */
.ob-twitch { gap: .6rem; }
.ob-btn-twitch { color: #fff; border-color: #9146ff; background: rgba(145,70,255,.2); }
.ob-btn-discord { color: #fff; border-color: #5865f2; background: rgba(88,101,242,.2); }
.ob-vote { display: flex; width: 230px; max-width: 72vw; height: 16px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); }
.ob-vote-a { background: linear-gradient(90deg, var(--accent-2), rgba(var(--accent-2-rgb),.5)); animation: obVote 3s ease-in-out infinite; }
.ob-vote-b { flex: 1; background: linear-gradient(270deg, var(--accent), rgba(var(--accent-rgb),.5)); }
@keyframes obVote { 0%,100% { width: 52%; } 35% { width: 70%; } 70% { width: 38%; } }
.ob-chip { font-size: .78rem; color: var(--muted); }
/* Étape 5 - Premium / Workshop */
.ob-premium { flex-direction: row; flex-wrap: wrap; gap: .6rem; }
.ob-lock, .ob-star { font-size: 1.8rem; }
.ob-star { animation: obFloat 1.8s ease-in-out infinite; }
.ob-to { color: var(--muted); font-size: 1.4rem; }
.ob-btn-steam { background: rgba(102,192,244,.15); border: 1px solid #66c0f4; color: #66c0f4; }
/* Halo de surbrillance sur un vrai bouton (coach-mark) */
/* z-index sous la carte du tuto (200) mais au-dessus de la topbar (50) :
le box-shadow géant assombrit tout SAUF l'intérieur du halo → bouton net. */
/* z-index 310 : AU-DESSUS du menu engrenage (300) pour que le halo entoure bien
les boutons Twitch/Discord/Workshop/DLC qui y sont logés. La carte du tuto
(.onboard-modal, 320) reste au-dessus du halo pour ne pas être assombrie. */
#onboardSpot {
position: fixed; z-index: 310; pointer-events: none;
border: 3px solid var(--accent); border-radius: 12px;
animation: obSpot 1.2s ease-in-out infinite;
}
@keyframes obSpot {
0%,100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.66), 0 0 0 3px rgba(var(--accent-rgb),.4), 0 0 18px 4px rgba(var(--accent-rgb),.55); }
50% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.66), 0 0 0 5px rgba(var(--accent-rgb),.55), 0 0 30px 10px rgba(var(--accent-rgb),.9); }
}
.ob-workshop { gap: .6rem; }
/* ====================================================================
* Panneau de vote multi-sources (Twitch + Discord) + DLC + Discord modal
* ==================================================================== */
/* Sources séparées dans le panneau de duel */
.vote-source { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; }
.vote-src-icon { flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.vote-src-icon svg { width: 20px; height: 20px; }
.vote-src-twitch .vote-src-icon { color: #9146ff; }
.vote-src-discord .vote-src-icon { color: #5865F2; }
.vote-src-mobile .vote-src-icon { color: var(--accent); }
.vote-src-body { flex: 1; min-width: 0; }
.vote-source .tw-bars { height: 16px; }
.vote-source .tw-meta { margin-top: .3rem; font-size: .72rem; }
.vote-source .tw-last { font-size: .72rem; }
/* Total combiné (barre de décision) */
.vote-combined { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.vote-combined-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: .35rem; text-align: center; }
.vote-combined .tw-bars { height: 26px; }
/* Suspense : compteur brouillé pendant les dernières secondes (le chrono reste net) */
.vote-blurred .vote-source .tw-bars,
.vote-blurred .vote-source .tw-meta,
.vote-blurred .vote-combined .tw-bars,
.vote-blurred .vote-combined .tw-meta {
filter: blur(11px);
pointer-events: none; user-select: none;
transition: filter .25s ease;
}
/* Leurre : les barres oscillent autour du milieu → impossible de deviner le vainqueur.
L'animation prend le pas sur la largeur inline (mise à jour à chaque vote). */
.vote-blurred .tw-fill { animation: voteDecoy 2.8s ease-in-out infinite; }
.vote-blurred .tw-bar-b .tw-fill { animation-delay: -1.4s; } /* phase opposée → balancement gauche/droite */
@keyframes voteDecoy {
0% { width: 50%; } 18% { width: 39%; } 42% { width: 61%; }
63% { width: 45%; } 82% { width: 56%; } 100% { width: 50%; }
}
@media (prefers-reduced-motion: reduce) {
.vote-blurred .tw-fill { animation: none; width: 50% !important; } /* au moins recentré */
}
.vote-blurred .vote-combined { position: relative; }
.vote-blurred .vote-combined::after {
content: "?"; position: absolute; inset: 0; top: 1.1rem;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--accent);
pointer-events: none;
}
/* --- Cartes DLC (modal Extensions) --------------------------------- */
.dlc-box { text-align: left; }
/* Choix de partage (état actuel / repartir de zéro) */
.share-text { color: var(--muted); margin: 0 0 1rem; }
.share-choices { display: flex; flex-direction: column; gap: .7rem; }
.share-choices .btn { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; padding: .9rem 1.1rem; }
.share-choices .btn strong { font-size: 1.02rem; }
.share-choices .btn span { font-size: .85rem; color: var(--muted); font-weight: 500; }
.share-choices .btn-primary span { color: rgba(255,255,255,0.85); }
.dlc-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-top: 1rem; background: var(--bg-soft); }
.dlc-card.dlc-on { border-color: var(--accent); box-shadow: 0 0 16px rgba(var(--accent-rgb),0.2); }
.dlc-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.dlc-emoji { font-size: 1.8rem; }
.dlc-head h3 { margin: 0; font-size: 1.1rem; }
.dlc-status { font-size: .8rem; color: var(--muted); font-weight: 600; }
.dlc-card.dlc-on .dlc-status { color: #33d17a; }
.dlc-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
/* --- Modal Discord (assistant) ------------------------------------- */
.dc-glyph { filter: drop-shadow(0 0 6px #5865F2); }
.dc-step1-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.dc-steps { margin: .4rem 0 .8rem; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.dc-steps li { line-height: 1.5; }
.dc-steps li::marker { color: var(--accent); font-weight: 800; }
.dc-steps .btn { margin-top: 0; }
.dc-step-action { margin-top: .55rem; }
.dc-code-row { display: flex; align-items: center; gap: .6rem; margin: .6rem 0; flex-wrap: wrap; }
.dc-code {
display: inline-block; background: var(--bg-soft); border: 1px solid var(--line);
border-radius: 8px; padding: .4rem .9rem; font-weight: 800; color: var(--gold);
letter-spacing: 3px; font-size: 1.1rem; user-select: all;
}
.dc-note { font-size: .82rem; color: var(--muted); margin: .5rem 0 0; line-height: 1.45; }
.dc-note code, .dc-step2 code, .dc-steps code { background: rgba(0,0,0,0.3); border-radius: 4px; padding: .05rem .35rem; color: var(--accent); font-weight: 700; }
.dc-chan-row { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.dc-chan select { padding: .4rem .5rem; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); max-width: 60%; }
/* --- Indicateurs topbar & cadenas ---------------------------------- */
#discordBtn { display: inline-flex; align-items: center; gap: .4rem; }
#discordBtn svg { width: 16px; height: 16px; }
#discordBtn.discord-on {
border-color: #5865F2; color: #fff;
box-shadow: 0 0 14px rgba(88, 101, 242, 0.6);
background: rgba(88, 101, 242, 0.18);
}
/* Petit cadenas sur un bouton topbar dont le DLC n'est pas possédé */
.btn-locked { position: relative; }
/* Cadenas SVG (::before car ::after est réservé au reflet « shine » de .btn). */
.btn-locked::before {
content: ""; position: absolute; top: 50%; right: .55rem; transform: translateY(-50%);
z-index: 2; width: 13px; height: 13px; background-color: var(--muted);
-webkit-mask: var(--lock-svg) center/contain no-repeat; mask: var(--lock-svg) center/contain no-repeat;
pointer-events: none;
}
.gear-menu .btn-locked { padding-right: 1.8rem; }
/* ===================================================================
* Vue Steam Workshop (parcourir / s'abonner / importer)
* =================================================================== */
.view-workshop { max-width: 1100px; margin: 0 auto; }
.ws-head {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin-bottom: 18px;
}
.ws-head h1 { margin: 0; font-size: 1.6rem; color: var(--text); }
.ws-tabs { margin-left: auto; display: flex; gap: 8px; }
.ws-tab.is-active {
background: rgba(var(--accent-rgb), .18);
border-color: var(--accent);
color: var(--accent);
}
.ws-status {
color: var(--muted); text-align: center; padding: 32px 12px;
font-size: .98rem;
}
.ws-status[hidden] { display: none; }
.ws-grid {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ws-card {
display: flex; flex-direction: column;
background: var(--bg-card); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
transition: transform .15s ease, border-color .15s ease;
}
.ws-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.ws-preview {
width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
background: var(--bg-soft); display: block;
}
.ws-preview-fallback {
display: flex; align-items: center; justify-content: center;
font-size: 2.4rem;
}
.ws-card-body { padding: 12px 14px 8px; flex: 1; }
.ws-card-title {
font-weight: 600; color: var(--text); margin-bottom: 6px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ws-tag {
font-size: .72rem; color: var(--muted);
background: var(--bg-soft); border: 1px solid var(--line);
border-radius: 999px; padding: 1px 8px;
}
.ws-card-actions {
display: flex; gap: 8px; padding: 10px 14px 14px;
}
.ws-card-actions .btn { flex: 1; }
/* ===================================================================
* COSMÉTIQUES - couche de fond, bordures, VFX, nameplates, curseurs
* =================================================================== */
/* Couche de fond animée : derrière le contenu, non interactive. */
/* Couche de fond animée : isolée (contain + isolation) pour que ses
re-peintures n'invalident pas #app ni les iframes vidéo au-dessus. */
#bgFX { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: layout paint style; isolation: isolate; }
.topbar, #app, #banner { position: relative; z-index: 1; }
/* Espace étoilé : deux couches de points défilant + scintillement. */
/* Étoiles : défilement via transform (composité GPU, pas de repaint plein écran). */
.cos-bg.bg-starfield { background: #04060f; }
.cos-bg.bg-starfield::before {
content: ""; position: absolute; inset: -60% 0;
background:
radial-gradient(1px 1px at 20% 30%, #fff, transparent),
radial-gradient(1px 1px at 70% 60%, #cfe3ff, transparent),
radial-gradient(2px 2px at 40% 80%, #fff, transparent),
radial-gradient(1px 1px at 85% 20%, #fff, transparent),
radial-gradient(1px 1px at 55% 10%, #bcd, transparent);
background-size: 200px 200px, 260px 260px, 320px 320px, 180px 180px, 240px 240px;
animation: cosStars 40s linear infinite; will-change: transform;
}
@keyframes cosStars { from { transform: translateY(0); } to { transform: translateY(30%); } }
/* Arcade 80s : grille en perspective + soleil synthwave. */
.cos-bg.bg-arcade {
background:
radial-gradient(circle at 50% 78%, rgba(255, 90, 180, .35), transparent 45%),
linear-gradient(180deg, #150033 0%, #2a0a4a 55%, #08010f 100%);
}
/* Grille : défilement via transform translateY (composité) au lieu de
background-position (repaint). Boîte agrandie de 48px (un pas de grille) en
haut/bas pour que la translation boucle sans coupure visible. */
.cos-bg.bg-arcade::after {
content: ""; position: absolute; left: -50%; right: -50%; bottom: -48px; height: calc(55% + 96px);
background-image: linear-gradient(rgba(255, 60, 200, .5) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 60, 200, .5) 2px, transparent 2px);
background-size: 48px 48px;
transform-origin: bottom center;
animation: cosGrid 3s linear infinite; will-change: transform;
}
@keyframes cosGrid {
from { transform: perspective(320px) rotateX(62deg) translateY(0); }
to { transform: perspective(320px) rotateX(62deg) translateY(48px); }
}
/* Pluie de confettis (fond) : nœuds injectés par le moteur. */
.cos-bg.bg-confetti { background: #0a0a12; }
.bgfx-confetti {
position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px;
background: hsl(calc(360 * 0.5), 80%, 60%);
background: repeating-linear-gradient(45deg, #ff5ea8, #ffd166, #5ec8ff, #7cff9b);
animation: cosFall linear infinite;
}
@keyframes cosFall { to { transform: translateY(110vh) rotate(540deg); } }
/* Crépuscule (common) : dégradé animé lent. Dérive en transform (composité GPU)
au lieu d'animer background-position (repeindrait tout le viewport à chaque frame). */
.cos-bg.bg-dusk { background: #1a1030; }
.cos-bg.bg-dusk::before {
content: ""; position: absolute; inset: -50%;
background: linear-gradient(135deg, #1a1030, #3a1e52, #102030, #1a1030);
animation: cosDusk 18s ease-in-out infinite alternate; will-change: transform;
}
@keyframes cosDusk { from { transform: translate3d(-12%, -8%, 0); } to { transform: translate3d(12%, 8%, 0); } }
/* Aurore (legendary) : voiles colorés ondulants (transform, léger). */
.cos-bg.bg-aurora { background: #050810; }
.cos-bg.bg-aurora::before, .cos-bg.bg-aurora::after {
content: ""; position: absolute; inset: -30% -10%;
background: radial-gradient(60% 40% at 50% 40%, rgba(69, 196, 106, .35), transparent 70%),
radial-gradient(50% 40% at 30% 60%, rgba(74, 144, 226, .3), transparent 70%),
radial-gradient(50% 40% at 70% 55%, rgba(176, 108, 255, .3), transparent 70%);
filter: blur(20px); will-change: transform;
animation: cosAurora 12s ease-in-out infinite alternate;
}
.cos-bg.bg-aurora::after { animation-duration: 9s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes cosAurora { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
/* Galaxie (mythic) : nébuleuse tournoyante. */
.cos-bg.bg-galaxy { background: radial-gradient(circle at 50% 50%, #241040, #0a0518 70%); overflow: hidden; }
.cos-bg.bg-galaxy::before {
content: ""; position: absolute; inset: -50%;
background: conic-gradient(from 0deg, transparent, rgba(176, 108, 255, .35), transparent 30%, rgba(255, 59, 107, .3), transparent 55%, rgba(74, 144, 226, .35), transparent 85%);
will-change: transform; animation: cosGalaxy 24s linear infinite;
}
.cos-bg.bg-galaxy::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(1px 1px at 30% 40%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1px 1px at 50% 20%, #cfe3ff, transparent);
background-size: 220px 220px, 300px 300px, 260px 260px;
}
@keyframes cosGalaxy { to { transform: rotate(360deg); } }
/* Bordures = CADRE animé complet (gradient conique qui tourne autour de la carte).
Appliqué sur .side (duel), .cos-demo-side (aperçu) et .cos-prev (vignette) via
la classe d'id du cosmétique. Rendu léger : seul un anneau fin est repeint. */
@property --cosang { syntax: ''; inherits: false; initial-value: 0deg; }
@keyframes cosBorderSpin { to { --cosang: 360deg; } }
.border-steel, .border-emerald, .border-holo, .border-neon,
.border-serpent, .border-aurora, .border-champion,
.border-hw, .border-ea, .border-xm { position: relative; }
.border-steel::after, .border-emerald::after, .border-holo::after, .border-neon::after,
.border-serpent::after, .border-aurora::after, .border-champion::after,
.border-hw::after, .border-ea::after, .border-xm::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
padding: 3px; pointer-events: none; z-index: 3;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
/* Vitesse réglable : plus --cos-border-speed est grand, plus la rotation est rapide. */
animation: cosBorderSpin calc(4s / var(--cos-border-speed, 1)) linear infinite;
will-change: --cosang;
}
/* Cadres « pleins » : tout le pourtour coloré tourne. */
.border-steel::after { background: conic-gradient(from var(--cosang), #6b7280, #e5e9f0, #6b7280); animation-duration: calc(6s / var(--cos-border-speed, 1)); }
.border-emerald::after { background: conic-gradient(from var(--cosang), #0f9d58, #7bffd0, #0f9d58); animation-duration: calc(5s / var(--cos-border-speed, 1)); }
.border-holo::after { background: conic-gradient(from var(--cosang), #78dcff, #b478ff, #fff, #78dcff); }
.border-neon::after { background: conic-gradient(from var(--cosang), #16f2ff, #ff2fd0, #16f2ff, #ff2fd0); }
.border-aurora::after { background: conic-gradient(from var(--cosang), #ff3b6b, #ffd700, #45c46a, #4a90e2, #b06cff, #ff3b6b); animation-duration: calc(3s / var(--cos-border-speed, 1)); }
.border-champion::after { background: conic-gradient(from var(--cosang), #ffd700, #fff, #ff3b6b, #fff, #ffd700); animation-duration: calc(3s / var(--cos-border-speed, 1)); }
/* Mouvement réduit : fige fonds animés, bordures et orbites cosmétiques. */
@media (prefers-reduced-motion: reduce) {
#bgFX, #bgFX *, #bgFX::before, #bgFX::after,
[class*="border-"]::before, [class*="border-"]::after,
.bgfx-confetti, .plate-rainbow { animation: none !important; }
}
/* SERPENTIN : court segment doré/blanc qui court autour (le reste transparent). */
.border-serpent::after {
background: conic-gradient(from var(--cosang),
#ffd700 0deg, #fff 22deg, #ffd700 44deg, transparent 60deg, transparent 360deg);
animation-duration: calc(2s / var(--cos-border-speed, 1));
filter: drop-shadow(0 0 calc(5px * var(--cos-glow, 1)) #ffd700);
}
/* Épaisseur + halo renforcés au survol de la carte de duel (halo réglable via --cos-glow). */
.view-play .side:hover[class*="border-"]::after { padding: 5px; filter: drop-shadow(0 0 calc(8px * var(--cos-glow, 1)) currentColor); }
/* Nameplates : classes réutilisables (légende de duel, nom du champion, aperçu). */
.plate-simple, .plate-gold, .plate-neon, .plate-fire, .plate-holo, .plate-rainbow { border-radius: 8px; padding: 2px 12px; }
/* En duel, la plaque de nom ne doit pas réduire la card titre : on garde sa boîte. */
.view-play .caption[class*="plate-"] { padding: .9rem 1rem; border-radius: var(--radius); }
.plate-simple { background: rgba(255, 255, 255, .06); }
.plate-gold { color: #fff; text-shadow: 0 0 8px rgba(240, 180, 40, .9); background: linear-gradient(90deg, transparent, rgba(240, 180, 40, .22), transparent); }
.plate-neon { color: #eafcff; text-shadow: 0 0 10px #16f2ff, 0 0 4px #ff2fd0; }
.plate-fire { color: #fff3d0; text-shadow: 0 0 8px #ff5a00, 0 0 16px #ff2200; background: linear-gradient(90deg, transparent, rgba(255, 90, 0, .25), transparent); }
.plate-holo { color: #fff; background: linear-gradient(90deg, #78dcff, #b478ff, #78dcff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.plate-rainbow { color: #fff; background: linear-gradient(90deg, #ff3b6b, #ffd700, #45c46a, #4a90e2, #b06cff, #ff3b6b); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cosRainbow 5s linear infinite; }
@keyframes cosRainbow { to { background-position: 300% 0; } }
/* Curseurs (SVG data-URI, hotspot centré). */
body.cursor-star, body.cursor-star * { cursor: url('data:image/svg+xml;utf8,') 6 6, auto !important; }
body.cursor-sword, body.cursor-sword * { cursor: url('data:image/svg+xml;utf8,') 20 3, auto !important; }
body.cursor-classic, body.cursor-classic * { cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important; }
body.cursor-wand, body.cursor-wand * { cursor: url('data:image/svg+xml;utf8,') 17 3, auto !important; }
body.cursor-crown, body.cursor-crown * { cursor: url('data:image/svg+xml;utf8,') 12 4, auto !important; }
body.cursor-galaxy, body.cursor-galaxy * { cursor: url('data:image/svg+xml;utf8,') 12 12, auto !important; }
/* Curseur animé personnalisé (galaxie) : élément qui suit le pointeur. */
body.cursor-anim, body.cursor-anim * { cursor: none !important; }
#cosCursor {
position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
margin: -20px 0 0 -20px; /* centre le SVG 40×40 sur le pointeur (recalculé en JS si taille custom) */
filter: drop-shadow(0 0 calc(6px * var(--cos-glow, 1)) rgba(0, 229, 255, .7));
will-change: transform;
}
/* Rotation autour du centre du viewBox (20,20), pas du bbox de l'ellipse inclinée. */
.cos-cursor-spin { transform-box: view-box; transform-origin: 20px 20px; animation: cosCursorSpin 4s linear infinite; }
@keyframes cosCursorSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cos-cursor-spin { animation: none; } }
/* VFX de victoire. */
.cos-vfx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.cos-vfx-glitch { animation: cosGlitch .18s steps(2) 8; }
@keyframes cosGlitch {
0% { filter: none; transform: none; }
25% { filter: hue-rotate(90deg) saturate(3); transform: translate(-3px, 1px); }
50% { filter: invert(1); transform: translate(3px, -2px); }
75% { filter: hue-rotate(-90deg); transform: translate(-2px, 2px); }
100% { filter: none; transform: none; }
}
.champion-media { position: relative; }
/* Confettis mythiques : léger scintillement. */
.confetti-piece.confetti-shimmer { animation-name: confettiFall, cosShimmer; }
@keyframes cosShimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(2.2) drop-shadow(0 0 6px #fff); } }
/* ===================================================================
* CASIER (cosmétiques)
* =================================================================== */
/* ===================================================================
* NOUVEAUX TYPES + PACKS SAISONNIERS
* =================================================================== */
/* Bordures saisonnières : réutilisent l'anneau conique tournant (::after). */
.border-hw::after { background: conic-gradient(from var(--cosang), #ff7a00, #8a2be2, #111111, #39ff14, #ff7a00); animation-duration: 5s; }
.border-ea::after { background: conic-gradient(from var(--cosang), #ffd1e8, #b6e3ff, #c8ffd4, #fff3b0, #ffd1e8); animation-duration: 6s; }
.border-xm::after { background: conic-gradient(from var(--cosang), #e63946, #ffffff, #2a9d8f, #ffd700, #e63946); animation-duration: 5s; }
/* Fonds saisonniers (mêmes techniques compositées que les autres fonds). */
.cos-bg.bg-hw { background: radial-gradient(circle at 50% 115%, #3a1a00, #0a0510 70%); }
.cos-bg.bg-hw::before {
content: ""; position: absolute; inset: -60% 0;
background: radial-gradient(2px 2px at 30% 40%, #ff7a00, transparent), radial-gradient(2px 2px at 70% 60%, #8a2be2, transparent), radial-gradient(1px 1px at 50% 20%, #39ff14, transparent);
background-size: 180px 180px, 240px 240px, 200px 200px; animation: cosStars 45s linear infinite; will-change: transform;
}
.cos-bg.bg-ea { background: #10131a; }
.cos-bg.bg-ea::before {
content: ""; position: absolute; inset: -50%;
background: linear-gradient(135deg, #f7c8dd, #cfe8ff, #d6f5df, #fff3c4); opacity: .5;
animation: cosDusk 20s ease-in-out infinite alternate; will-change: transform;
}
.cos-bg.bg-xm { background: radial-gradient(circle at 50% 0%, #0b2a3a, #05121a 70%); }
.cos-bg.bg-xm::before {
content: ""; position: absolute; inset: -60% 0;
background: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(3px 3px at 60% 50%, #fff, transparent), radial-gradient(2px 2px at 80% 70%, #cfe3ff, transparent);
background-size: 160px 160px, 220px 220px, 200px 200px; animation: cosStars 30s linear infinite; will-change: transform;
}
/* Plaques de nom saisonnières. */
.plate-hw, .plate-ea, .plate-xm { border-radius: 8px; padding: 2px 12px; }
.plate-hw { color: #ffd7a0; text-shadow: 0 0 8px #ff7a00, 0 0 14px #8a2be2; }
.plate-ea { color: #fff; text-shadow: 0 0 8px #ff9ccf, 0 0 12px #9bd4ff; }
.plate-xm { color: #fff; text-shadow: 0 0 8px #e63946, 0 0 12px #2a9d8f; }
/* Skins d'arbre (bracket) : habillage titres de rounds + connecteurs SVG. */
.view-bracket.bracket-clean .bracket-round-title { letter-spacing: .12em; text-transform: uppercase; }
.view-bracket.bracket-neon .bracket-round-title { color: #16f2ff; text-shadow: 0 0 8px #16f2ff; }
.view-bracket.bracket-neon .bracket-svg path { stroke: #16f2ff; }
.view-bracket.bracket-gold .bracket-round-title { color: #ffd700; text-shadow: 0 0 8px #ffd700; }
.view-bracket.bracket-gold .bracket-svg path { stroke: #e6b800; }
.view-bracket.bracket-xm .bracket-round-title { color: #e63946; text-shadow: 0 0 8px #2a9d8f; }
.view-bracket.bracket-xm .bracket-svg path { stroke: #2a9d8f; }
.view-bracket.bracket-ea .bracket-round-title { color: #ff9ccf; text-shadow: 0 0 8px #9bd4ff; }
.view-bracket.bracket-ea .bracket-svg path { stroke: #9bd4ff; }
/* Traînées de curseur : points qui s'estompent (spawn JS). */
#cosTrail { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
.cos-trail-dot {
position: fixed; border-radius: 50%;
/* Taille (intensité) et durée réglables par l'utilisateur - voir js/cosmetics.js (--cos-*). */
width: calc(10px * var(--cos-trail-scale, 1)); height: calc(10px * var(--cos-trail-scale, 1));
margin: calc(-5px * var(--cos-trail-scale, 1)) 0 0 calc(-5px * var(--cos-trail-scale, 1));
pointer-events: none; animation: cosTrailFade var(--cos-trail-life, .65s) ease-out forwards; will-change: transform, opacity;
}
@keyframes cosTrailFade { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(.2); } }
.cos-trail-dot.trail-spark { background: radial-gradient(circle, #fff, #9fe3ff); box-shadow: 0 0 6px #7cc7ff; }
.cos-trail-dot.trail-fire { background: radial-gradient(circle, #fff3b0, #ff5a00); box-shadow: 0 0 8px #ff5a00; }
.cos-trail-dot.trail-rainbow { background: radial-gradient(circle, #fff, #ff3b6b); box-shadow: 0 0 8px #b06cff; } /* teinte réelle posée en JS */
.cos-trail-dot.trail-xm { background: radial-gradient(circle, #fff, #bfe9ff); box-shadow: 0 0 6px #bfe9ff; }
/* Panneau « Réglages des effets » (Casier) */
.cos-settings { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); padding: 14px 16px; margin-bottom: 18px; }
.cos-settings h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.cos-settings-hint { margin: 0 0 .8rem; font-size: .85rem; }
.cos-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem 1.4rem; margin-bottom: .9rem; }
.cos-setting { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .6rem; }
.cos-setting-label { font-size: .88rem; font-weight: 600; color: var(--muted); }
.cos-setting-val { font-size: .82rem; font-weight: 700; color: var(--accent); text-align: right; min-width: 4.5ch; }
.cos-setting input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); cursor: pointer; }
/* Section « Packs saisonniers » (cartes dépliables). */
.pack-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); margin-bottom: 14px; padding: 0 14px; }
.pack-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.pack-card > summary::-webkit-details-marker { display: none; }
.pack-name { font-size: 1.05rem; font-weight: 700; }
.pack-count { font-size: .8rem; color: var(--muted); }
.pack-status { margin-left: auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pack-status.is-open { color: #45c46a; border-color: #45c46a; }
.pack-row { padding-bottom: 14px; }
.pack-foot { display: flex; align-items: center; gap: 14px; padding: 0 0 14px; flex-wrap: wrap; }
.pack-window { font-size: .85rem; }
/* Vignettes (aperçu Boutique) des nouveaux types. */
.cos-prev-bracket { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cos-prev-bracket i { width: 3px; height: 26px; background: var(--muted); border-radius: 2px; }
.cos-prev-bracket.bracket-neon i { background: #16f2ff; box-shadow: 0 0 6px #16f2ff; }
.cos-prev-bracket.bracket-gold i, .cos-prev-bracket.bracket-xm i { background: #ffd700; }
.cos-prev-bracket.bracket-ea i { background: #ff9ccf; }
.cos-prev-trail { display: flex; align-items: center; justify-content: center; gap: 5px; }
.cos-prev-trail i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.cos-prev-trail.trail-spark i { background: #9fe3ff; box-shadow: 0 0 5px #7cc7ff; }
.cos-prev-trail.trail-fire i { background: #ff5a00; box-shadow: 0 0 5px #ff5a00; }
.cos-prev-trail.trail-xm i { background: #bfe9ff; }
.cos-prev-trail.trail-rainbow i:nth-child(1) { background: #ff3b6b; }
.cos-prev-trail.trail-rainbow i:nth-child(2) { background: #ffd700; }
.cos-prev-trail.trail-rainbow i:nth-child(3) { background: #45c46a; }
.cos-prev-trail.trail-rainbow i:nth-child(4) { background: #4a90e2; }
/* Maquette d'aperçu (clic droit) du skin d'arbre. */
.cos-demo-bracket { display: flex; gap: 28px; padding: 20px 8px; }
.view-locker { max-width: 1100px; margin: 0 auto; }
.locker-dev { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.locker-intro { color: var(--muted); margin: 4px 0 20px; }
.locker-group { margin-bottom: 26px; }
.locker-group h2 { font-size: 1.1rem; color: var(--text); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.locker-count { font-size: .8rem; color: var(--muted); font-weight: 500; }
.locker-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.cos-card {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 12px 10px; background: var(--bg-card); border: 1px solid var(--line);
border-radius: var(--radius); color: var(--text);
transition: transform .12s ease, border-color .12s ease;
}
.cos-card:hover { transform: translateY(-3px); }
.cos-card.is-equipped { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35); }
.cos-card.is-locked .cos-prev, .cos-card.is-locked .cos-card-name { opacity: .72; }
.cos-card-name { font-size: .85rem; font-weight: 600; text-align: center; }
.cos-rarity { font-size: .72rem; font-weight: 700; color: var(--rar, var(--muted)); text-transform: uppercase; letter-spacing: .04em; }
.cos-action { width: 100%; margin-top: auto; padding: 6px 8px; font-size: .82rem; }
.cos-action:disabled { opacity: .8; cursor: default; }
.cos-token-action { margin-top: 6px; border-color: var(--accent); color: var(--accent); }
/* Bandeau « jetons » du Supporter Pack (visible seulement si un solde existe). */
.locker-tokens {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 10px 14px; margin-bottom: 20px;
background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
font-size: .9rem; color: var(--text);
}
.cos-token-pill {
font-weight: 700; font-size: .8rem; padding: 2px 10px; border-radius: 999px;
border: 1px solid var(--line);
}
.cos-token-mythic { color: #ff3b6b; border-color: #ff3b6b; }
.cos-token-joker { color: var(--accent); border-color: var(--accent); }
/* Aperçus (ce que l'on achète) */
.cos-prev {
width: 100%; height: 62px; border-radius: 12px; overflow: hidden; position: relative;
display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
background: var(--bg-soft); border: 2px solid var(--rar, var(--line));
}
.cos-prev-none { color: var(--muted); }
/* Bordures : le cadre conique animé (règles génériques .border-*::after) s'applique
aussi à la vignette .cos-prev.border-* - rien à ajouter ici. */
.cos-prev-audio, .cos-prev-vfx { color: var(--accent); }
.cos-prev-audio svg, .cos-prev-vfx svg { width: 26px; height: 26px; }
.dc-glyph svg, .tw-glyph svg { width: 20px; height: 20px; vertical-align: -4px; }
/* Nameplates : sizing d'aperçu (le style vient des classes .plate-* génériques). */
.cos-prev [class^="plate-"] { font-weight: 800; font-size: 1.2rem; }
/* Confettis : échantillon des couleurs. */
.cos-prev-confetti.confetti-classic { background: repeating-linear-gradient(45deg, #ff5e5e 0 7px, #ffd166 7px 14px, #5ec8ff 14px 21px, #7cff9b 21px 28px, #c78bff 28px 35px); }
.cos-prev-confetti.confetti-gold { background: repeating-linear-gradient(45deg, #f0a020 0 8px, #ffd700 8px 16px, #fff2c0 16px 24px); }
.cos-prev-confetti.confetti-neon { background: repeating-linear-gradient(45deg, #00e5ff 0 8px, #ff2fd0 8px 16px, #7cff00 16px 24px, #ffe600 24px 32px); }
.cos-prev-confetti.confetti-fire { background: repeating-linear-gradient(45deg, #ff2200 0 8px, #ff8a00 8px 16px, #ffd000 16px 24px); }
.cos-prev-confetti.confetti-ice { background: repeating-linear-gradient(45deg, #bfefff 0 8px, #8fd7ff 8px 16px, #fff 16px 24px, #5bb0e0 24px 32px); }
.cos-prev-confetti.confetti-mythic { background: repeating-linear-gradient(45deg, #ff3b6b 0 8px, #ffd700 8px 16px, #b06cff 16px 24px, #fff 24px 32px); }
/* Curseurs : l'aperçu montre l'image du curseur. */
.cos-prev-cursor { background-repeat: no-repeat; background-position: center; background-size: 30px; }
.cos-prev-galaxy { background: none !important; filter: drop-shadow(0 0 5px rgba(0,229,255,.6)); }
.cos-prev-galaxy svg { display: block; }
.cos-prev-cursor.cursor-star { background-image: url('data:image/svg+xml;utf8,'); }
.cos-prev-cursor.cursor-sword { background-image: url('data:image/svg+xml;utf8,'); }
.cos-prev-cursor.cursor-classic { background-image: url('data:image/svg+xml;utf8,'); }
.cos-prev-cursor.cursor-wand { background-image: url('data:image/svg+xml;utf8,'); }
.cos-prev-cursor.cursor-crown { background-image: url('data:image/svg+xml;utf8,'); }
.cos-prev-cursor.cursor-galaxy { background-image: url('data:image/svg+xml;utf8,'); }
/* VFX / audio : vignette. */
.cos-prev-vfx, .cos-prev-audio { font-size: 1.3rem; }
/* ===================================================================
* APERÇU cosmétique (clic droit) : maquette + barre fond/curseur
* =================================================================== */
.cos-preview-modal {
position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 16px;
background: rgba(6, 8, 14, .82); backdrop-filter: blur(4px);
}
.cos-demo-title { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.cos-demo-close {
position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
font-size: 1.1rem; padding: 0;
}
.cos-demo-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cos-demo-duel { display: flex; gap: 28px; }
.cos-demo-side {
position: relative; width: 210px; height: 190px; border-radius: var(--radius); overflow: hidden;
background: linear-gradient(180deg, rgba(29, 33, 45, .6), rgba(18, 20, 34, .9));
border: 2px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column;
}
.cos-demo-side .media { flex: 1; background: repeating-linear-gradient(45deg, #1a1d29 0 12px, #14161f 12px 24px); }
.cos-demo-side .caption { padding: 10px; text-align: center; font-weight: 800; color: var(--text); }
.cos-demo-media { width: 320px; height: 200px; border-radius: var(--radius); background: repeating-linear-gradient(45deg, #1a1d29 0 14px, #12141e 14px 28px); position: relative; overflow: hidden; }
.cos-demo-name { font-size: 2rem; }
.cos-demo-hint { color: var(--muted); font-size: .9rem; }
.cos-preview-bar {
position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60;
display: flex; align-items: center; gap: 14px; padding: 10px 14px;
background: var(--bg-card); border: 1px solid var(--accent); border-radius: 999px;
box-shadow: var(--shadow); color: var(--text); font-size: .9rem;
}
/* Respect de « animations réduites » : on fige les effets cosmétiques animés. */
@media (prefers-reduced-motion: reduce) {
.cos-bg.bg-starfield::before, .cos-bg.bg-arcade::after, .bgfx-confetti,
.border-holo::after, .border-neon::after, .border-serpent::after,
.border-flames::after, .border-champion::after { animation: none; }
}
/* ==================================================================
* Modes « Notation » (Scorecard) & « Classement à l'aveugle » (Blind)
* ================================================================== */
/* --- Scorecard (grille de notes) --- */
.sc-cats { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 1rem; }
.sc-cat { display: inline-flex; align-items: center; gap: .3rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; padding: .2rem .4rem; }
.sc-cat-name { width: 8.5rem; max-width: 40vw; background: transparent; border: none; color: var(--text); font: inherit; padding: .1rem .2rem; }
.sc-cat-name:focus { outline: 1px solid var(--accent); border-radius: 4px; }
.sc-cat-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9rem; line-height: 1; padding: 0 .2rem; }
.sc-cat-del:hover { color: var(--danger, #e0555e); }
.sc-cat-add { padding: .3rem .6rem; }
.sc-grid-wrap { overflow-x: auto; }
.sc-grid { border-collapse: collapse; width: 100%; min-width: 420px; }
.sc-grid th, .sc-grid td { border: 1px solid var(--line); padding: .35rem .5rem; text-align: center; vertical-align: middle; }
.sc-grid th { background: var(--bg-soft); font-weight: 700; white-space: nowrap; }
.sc-grid .sc-item { text-align: left; display: flex; align-items: center; gap: .5rem; min-width: 150px; }
.sc-thumb { width: 44px; height: 28px; flex: 0 0 auto; border-radius: 4px; overflow: hidden; background: var(--bg-soft); display: inline-flex; align-items: center; justify-content: center; }
.sc-thumb img, .sc-thumb video { width: 100%; height: 100%; object-fit: cover; }
.sc-thumb-click { cursor: pointer; transition: box-shadow .2s ease, transform .1s ease; }
.sc-thumb-click:hover { box-shadow: 0 0 0 2px var(--accent); }
.sc-thumb .thumb-icon { font-size: .7rem; }
.sc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.sc-score { width: 3.2rem; text-align: center; background: var(--bg-card); border: 1px solid var(--line); border-radius: 5px; color: var(--text); font: inherit; padding: .2rem; }
.sc-avg { font-weight: 800; color: var(--accent); font-size: 1.05rem; }
/* --- Vote streamer du Scorecard --- */
.sc-vote-cat { text-align: center; font-weight: 700; color: var(--accent); margin: .3rem 0 .6rem; }
.sc-vote-live { color: var(--muted); font-size: .9rem; }
.sc-reveal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; }
.sc-reveal-res { display: flex; gap: 1.2rem; font-size: 1.1rem; }
.sc-reveal-comm b, .sc-reveal-you b, .sc-reveal-final b { color: var(--accent); font-size: 1.25rem; }
.sc-reveal-final b { color: var(--accent-2, var(--accent)); }
/* Contrôle segmenté générique (mêmes valeurs que .vote-opts .seg, mais hors de ce
conteneur : toggles de mode, tailles Top 5/10…). */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 99px; }
.seg-btn { border: none; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; padding: .3rem .8rem; border-radius: 99px; cursor: pointer; transition: color .2s ease, background .2s ease; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
/* Masquage « suspense » des résultats live dans les modales de vote (tier/blind/notation),
réutilise le réglage global voteHide/voteHideSecs - même comportement que le duel. */
.tv-blur { filter: blur(12px); opacity: .9; pointer-events: none; transition: filter .3s ease; }
.tv-blur .tw-fill { animation: voteDecoy 2.8s ease-in-out infinite; }
.tv-blur .tv-opt:nth-child(2n) .tw-fill { animation-delay: -0.7s; }
.tv-blur .tv-opt:nth-child(3n) .tw-fill { animation-delay: -1.4s; }
.tv-blur .tv-opt:nth-child(4n) .tw-fill { animation-delay: -2.1s; }
.sc-vote-mean { font-weight: 800; color: var(--accent); font-size: 1.15rem; }
/* Compteur de participants visible même en mode suspense (jamais blurred) */
.vote-participant-count {
font-size: .85rem; font-weight: 700; color: var(--accent);
text-align: center; padding: .35rem 0; letter-spacing: .3px;
display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.vote-participant-count svg { width: 16px; height: 16px; }
/* Ligne d'arrondi (page Notation) */
.sc-round { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; color: var(--muted); }
.sc-round-input { width: 3.2rem; text-align: center; background: var(--bg-card); border: 1px solid var(--line); border-radius: 5px; color: var(--text); font: inherit; padding: .2rem; }
.sc-hint { color: var(--muted); font-size: .9rem; margin: 0 0 .8rem; }
/* --- Blind Ranking --- */
.bl-setup { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: .5rem 0 1rem; }
.bl-stage { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.bl-media { width: min(460px, 92vw); aspect-ratio: 16/9; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bl-media img, .bl-media video, .bl-media iframe { width: 100%; height: 100%; object-fit: cover; border: none; }
.bl-name { font-weight: 700; font-size: 1.15rem; text-align: center; }
.bl-slots { display: flex; flex-direction: column; gap: .35rem; width: min(520px, 96vw); margin: 0 auto; }
.bl-slot { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: 8px; padding: .35rem .5rem; background: var(--bg-card); }
.bl-slot-rank { width: 2rem; height: 2rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--bg-soft); border-radius: 6px; }
.bl-slot-free { cursor: pointer; border-style: dashed; color: var(--muted); }
.bl-slot-free:hover { border-color: var(--accent); color: var(--text); }
.bl-slot-thumb { width: 52px; height: 32px; flex: 0 0 auto; border-radius: 4px; overflow: hidden; background: var(--bg-soft); display: inline-flex; align-items: center; justify-content: center; }
.bl-slot-thumb img, .bl-slot-thumb video { width: 100%; height: 100%; object-fit: cover; }
.bl-slot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-elu { text-align: center; font-weight: 700; color: var(--accent-2, var(--accent)); margin: .4rem 0; }
/* Pseudo de l'Élu tiré au sort : icône plateforme (sizée) devant le nom, dans tous les votes. */
.vote-elu-name { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.vote-elu-icon { display: inline-flex; }
.vote-elu-icon svg { width: 18px; height: 18px; display: block; }
.bl-done-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }
/* Layout côte à côte pour Classement à l'aveugle avec vote du chat */
.bl-layout {
display: flex;
gap: 2rem;
justify-content: center;
align-items: flex-start;
margin-top: 1rem;
}
.bl-main {
flex: 1;
max-width: 520px;
}
.bl-vote-side {
flex: 1;
max-width: 520px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
}
.tv-box-inline {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tv-box-inline .tv-head-inline h2 {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
text-align: center;
color: var(--accent);
}
@media (max-width: 1000px) {
.bl-layout {
flex-direction: column;
align-items: center;
}
.bl-main, .bl-vote-side {
width: 100%;
max-width: 520px;
}
}
/* Coin toss animation classes */
.tv-opt.coin-toss-highlight {
transform: scale(1.03);
border-color: var(--accent) !important;
box-shadow: 0 0 15px var(--accent);
background: rgba(223, 175, 55, 0.25) !important;
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.tv-opt.coin-toss-winner {
transform: scale(1.06);
border-color: #ffca28 !important;
box-shadow: 0 0 25px #ffca28, inset 0 0 10px rgba(255, 202, 40, 0.4);
background: rgba(255, 202, 40, 0.3) !important;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tv-opt.coin-toss-winner-flash {
background: #fff !important;
box-shadow: 0 0 35px #fff;
border-color: #fff !important;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.6; }
100% { opacity: 1; }
}
/* ==================================================================== *
* Modes devinette (guess) : Blind test (av) + « Retrouve ce que c'est » (img).
* Chaque element a sa classe ; seul le flou image passe par la variable --gs-blur.
* ==================================================================== */
.gs-layout { display: flex; gap: 2rem; justify-content: center; align-items: flex-start; margin-top: 1rem; }
.gs-main { flex: 1; max-width: 620px; }
.gs-vote-side { flex: 1; max-width: 520px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.gs-need { text-align: center; margin: 2rem 0; }
/* Ecran de configuration */
.gs-setup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 1rem 0; }
.gs-setup-field { display: flex; flex-direction: column; gap: .35rem; }
.gs-setup-field > span { color: var(--muted); font-size: .9rem; }
.gs-rounds, .gs-attempts, .gs-optcount { width: 5rem; text-align: center; background: var(--bg-card); border: 1px solid var(--line); border-radius: 5px; color: var(--text); font: inherit; padding: .35rem; }
.gs-setup-hint { flex-basis: 100%; margin: .2rem 0 0; font-size: .9rem; }
.gs-start { align-self: flex-end; }
/* Ecran de jeu */
.gs-stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.gs-score { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: center; font-weight: 700; }
.gs-score-round { font-size: 1.15rem; }
.gs-score-pts { color: var(--accent-2, var(--accent)); }
.gs-score-tries { color: var(--muted); font-weight: 600; }
.gs-media { width: min(560px, 92vw); aspect-ratio: 16/9; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.gs-media img, .gs-media video, .gs-media iframe { width: 100%; height: 100%; object-fit: contain; border: none; }
/* Voile video : flou + assombrissement (--gs-vblur/--gs-vbright) sur le lecteur (sauf mode image .gs-blur). */
.gs-media > img, .gs-media > video, .gs-media > iframe { filter: blur(var(--gs-vblur, 0px)) brightness(var(--gs-vbright, 1)); transition: filter .2s ease; }
/* Flou progressif (image) : pilote par --gs-blur (px), pose en JS selon les essais restants. */
.gs-blur img, .gs-blur video { filter: blur(var(--gs-blur, 0px)); transition: filter .5s ease; transform: scale(1.06); }
/* Masquage de la partie video (blind test) : hachures « barrées » (--gs-vhatch) + voile noir
(--gs-vblack). pointer-events:none -> les clics passent au lecteur (lancer/pause) meme voile a fond. */
.gs-media-hatch { position: absolute; inset: 0; pointer-events: none; opacity: var(--gs-vhatch, 0); transition: opacity .2s ease; background: repeating-linear-gradient(45deg, rgba(0,0,0,.35) 0 12px, rgba(0,0,0,.5) 12px 24px); }
.gs-media-veil { position: absolute; inset: 0; background: #000; opacity: var(--gs-vblack, 0); pointer-events: none; transition: opacity .2s ease; }
.gs-media-wrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.gs-media-hint { margin: 0; font-size: .8rem; color: var(--muted); text-align: center; }
.gs-veil-ctl { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: min(560px, 92vw); }
.gs-veil-row { display: flex; align-items: center; gap: .6rem; width: 100%; font-size: .85rem; color: var(--muted); }
.gs-veil-slider { flex: 1; }
.gs-veil-val { min-width: 2.6ch; text-align: right; font-variant-numeric: tabular-nums; }
.gs-controls { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.gs-modeswitch { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center; }
.gs-play-optcount span { color: var(--muted); }
.gs-feedback { font-weight: 700; text-align: center; min-height: 1.2em; }
.gs-feedback.ok { color: var(--accent-2, var(--accent)); }
.gs-feedback.ko { color: var(--danger); }
.gs-feedback.hint { color: var(--muted); font-weight: 600; }
/* Sous-mode « nom exact » */
.gs-answer { display: flex; gap: .6rem; width: min(560px, 92vw); }
.gs-input { flex: 1; background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; padding: .6rem .8rem; }
.gs-input:focus { outline: none; border-color: var(--accent); }
/* Sous-mode « propositions » : cartes de noms repliables + bouton Choisir */
.gs-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; width: min(680px, 96vw); }
.gs-opt { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; background: var(--bg-card); }
.gs-opt-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-weight: 600; }
.gs-opt.expanded .gs-opt-name { white-space: normal; overflow: visible; }
.gs-opt-choose { flex: 0 0 auto; }
.gs-opt.gone { display: none; }
/* Revelation / recap */
.gs-reveal { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.gs-reveal-verdict { font-weight: 800; font-size: 1.2rem; }
.gs-reveal-verdict.ok { color: var(--accent-2, var(--accent)); }
.gs-reveal-verdict.ko { color: var(--danger); }
.gs-reveal-answer { color: var(--muted); }
.gs-recap { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 2rem 0; }
.gs-recap-score { font-size: 1.6rem; font-weight: 800; }
.gs-head-reveal { margin-right: .4rem; }
/* Panneau de vote (chat) */
.gs-vote-box { display: flex; flex-direction: column; gap: 1rem; }
.gs-vote-opts { display: flex; flex-direction: column; gap: .4rem; }
.gs-vote-opt { display: flex; align-items: center; gap: .6rem; }
.gs-vote-empty { color: var(--muted); text-align: center; margin: .4rem 0; }
.gs-vote-pickable .gs-vote-opt { cursor: pointer; border-radius: 6px; padding: .2rem .3rem; }
.gs-vote-pickable .gs-vote-opt:hover { background: var(--bg-soft); }
/* Stats des modes devinette (vue Statistiques) */
.gs-stats { margin-top: 2rem; }
.gs-stats-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 .6rem; }
.gs-stats-plays { color: var(--muted); font-size: .9rem; font-weight: 500; }
.gs-stats-wrap { overflow-x: auto; }
.gs-stats-table { width: 100%; border-collapse: collapse; }
.gs-stats-table th, .gs-stats-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: center; }
.gs-stats-th-media { text-align: left; }
.gs-stats-media { display: flex; align-items: center; gap: .6rem; text-align: left; }
.gs-stats-thumb { width: 52px; height: 32px; flex: 0 0 auto; border-radius: 4px; overflow: hidden; background: var(--bg-soft); display: inline-flex; align-items: center; justify-content: center; }
.gs-stats-thumb img, .gs-stats-thumb video { width: 100%; height: 100%; object-fit: cover; }
.gs-stats-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
@media (max-width: 900px) {
.gs-layout { flex-direction: column; align-items: stretch; }
.gs-main, .gs-vote-side { max-width: none; }
}
/* Onglets de modes sur l'accueil + stats par mode + prompt d'egalite */
/* La barre s'arrete a son contenu (pas toute la largeur) et scrolle si trop etroite. */
.home-tabs, .stats-tabs { display: inline-flex; flex-wrap: nowrap; gap: 0; margin: 0 0 .6rem; width: fit-content; max-width: 100%; overflow-x: auto; }
.home-tabs .seg-btn, .stats-tabs .seg-btn { white-space: nowrap; }
/* Separateur leger entre onglets pour qu'ils se lisent comme des onglets. */
.home-tabs .seg-btn:not(:first-child), .stats-tabs .seg-btn:not(:first-child) { border-left: 1px solid var(--line); }
.home-tabs .seg-btn.active, .stats-tabs .seg-btn.active { border-left-color: transparent; }
.mode-intro { color: var(--muted); font-size: .9rem; margin: 0 0 1.4rem; }
.t-card-incompat { pointer-events: none; }
.stats-mode-section { margin-top: 1rem; }
.stats-tier-total { margin: .4rem 0 1rem; }
.gstat-tierboard { margin-top: 1.6rem; }
/* Prompt d'egalite : deux boutons cote a cote (reutilise les classes confirm-modal). */
.tie-actions { display: flex; gap: .6rem; justify-content: center; }
.tie-actions .btn { flex: 1; margin: 0; }
/* Fond d'application image/gif d'un theme + editeur "depuis une image" */
#themeBg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat; }
#themeBg::after { content: ""; position: absolute; inset: 0; background: var(--theme-scrim-color, transparent); }
#themeBg[hidden] { display: none; }
body.theme-bg-over #bgFX { display: none; } /* l'image du theme prime sur le fond anime cosmetique */
.theme-add-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.theme-add-row .theme-add { flex: 1; }
.theme-bg-box { display: flex; flex-direction: column; gap: .6rem; margin: .4rem 0 .2rem; padding: .6rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius, 10px); }
.theme-bg-preview { height: 90px; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid var(--line); }
.theme-scrim-row, .theme-switch-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; font-size: .85rem; color: var(--muted); }
.theme-scrim-row input[type=range] { flex: 1; }
.theme-bg-remove { align-self: flex-start; }
.theme-img-preview { height: 140px; border-radius: 10px; background: var(--bg-soft); background-size: cover; background-position: center; border: 1px solid var(--line); margin-bottom: .6rem; }
.theme-img-panel { max-width: 460px; }
/* Mode versus (choisi au lancement) : case + catégorie « Scores » (rangs de points dynamiques, centrés). */
.gs-versus-toggle { align-self: center; }
.gs-versus-box { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 100%; padding: .6rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; }
.gs-versus-hint { margin: 0; font-size: .78rem; color: var(--muted); text-align: center; }
.gs-versus-scores-label { font-size: .85rem; font-weight: 600; color: var(--text); }
.gs-versus-scores { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; }
.gs-score-row { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.gs-score-row .gs-score-lbl { min-width: 7.5ch; text-align: right; font-size: .85rem; font-weight: 500; color: var(--muted); }
.gs-score-row input[type=number] { width: 5.5rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-weight: 600; padding: .35rem .5rem; text-align: center; transition: border-color .15s ease, box-shadow .15s ease; }
.gs-score-row input[type=number]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.15); }
.gs-score-del { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: .2rem .4rem; border-radius: 6px; transition: color .15s, background .15s, border-color .15s; }
.gs-score-del:hover { color: var(--danger); background: var(--bg-card); border-color: var(--line); }
.gs-score-del-spacer { width: 1.8rem; }
.gs-score-add { align-self: center; margin-top: .2rem; padding: .3rem .9rem; font-size: .82rem; }
/* ============================================================
Mode Party (vue hote) - appli mobile compagnon
============================================================ */
.view-party { max-width: 980px; margin: 0 auto; }
.party-nodesktop { color: var(--muted); border: var(--hair) solid var(--line); padding: 16px; border-radius: var(--radius); }
.party-setup { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 12px; }
.party-intro { color: var(--muted); margin: 0; max-width: 60ch; }
.party-modes { display: flex; gap: 12px; flex-wrap: wrap; }
.party-modes .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: .9rem 1.35rem; }
.party-modes .btn small { font-weight: 500; opacity: .8; font-size: .8rem; }
.party-status { color: var(--muted); min-height: 1.2em; margin: 0; }
.party-lobby { margin-top: 8px; }
.party-join { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; padding: 20px; border: var(--hair) solid var(--line); border-radius: var(--radius); background: var(--bg-card); }
.party-qr { width: 220px; height: 220px; background: #fff; padding: 10px; border-radius: var(--radius); }
.party-qr-svg { width: 100%; height: 100%; display: block; }
.party-join-info { display: flex; flex-direction: column; gap: 8px; }
.party-join-label, .party-url-label { color: var(--muted); margin: 0; font-size: .95rem; }
.party-code-row, .party-url-row { display: flex; align-items: center; gap: 8px; }
.party-code { font-family: var(--font-display); font-size: 2.6rem; letter-spacing: .18em; font-weight: 800; }
.party-copy { flex: 0 0 auto; padding: .4rem .8rem; font-size: .85rem; }
.party-url-row .party-url { flex: 1; min-width: 0; }
.party-url { font-size: .9rem; color: var(--text); word-break: break-all; background: var(--bg-soft); padding: 6px 10px; border-radius: var(--radius-btn); }
.party-players-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 10px; }
.party-players-head h2 { margin: 0; }
.party-empty { color: var(--muted); }
.party-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.party-player { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border: var(--hair) solid var(--line); border-radius: var(--radius-btn); background: var(--bg-card); }
.party-player.is-host { border-color: var(--accent); }
.party-player-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
@media (max-width: 640px) { .party-join { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.view-party [hidden] { display: none !important; } /* .party-setup a display:flex : ne pas ecraser hidden */