HTML
superposé en CSS. Il n'y a donc plus deux éléments distincts à
synchroniser : le SVG centre lui-même son texte, en interne, de façon
déterministe — plus aucun calcul de layout externe (flex, position:
absolute, top/left en %) ne peut le faire dériver. C'est ça qui rend le
bug de décalage structurellement impossible, plutôt que "couvert par
plein de recentrages JS" comme avant.
Note technique : le SVG a un viewBox de 120x120 mais un rendu réel de
90px (desktop) ou 60px (mobile) — tout ce qui est DANS le SVG (y compris
ce texte) est automatiquement mis à l'échelle par ce ratio, exactement
comme stroke-width="7" des cercles l'est déjà. Un font-size unique ici
(34, en unités internes du SVG) donne donc AUTOMATIQUEMENT ~25px de texte
réel sur desktop (90/120 = 0.75 × 34 ≈ 25.5px) et ~17px sur mobile
(60/120 = 0.5 × 34 = 17px) — ce qui correspond à peu de chose près aux
anciennes valeurs 1.6em/1.1em. Plus besoin de règle @media séparée juste
pour la taille du chiffre : elle suit automatiquement la taille du SVG. */
#timer {
font-family: 'Orbitron', system-ui, sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: 1px;
fill: #ffeb3b;
animation: heartbeat 1s ease-in-out infinite;
/* Sans ça, scale() dans l'animation se centrerait sur l'origine du SVG
(0,0) au lieu du centre du texte lui-même, et le ferait dériver pendant
le heartbeat. transform-box:fill-box calque l'origine sur la propre
boîte de l'élément, comme pour un élément HTML classique. */
transform-box: fill-box;
transform-origin: center;
user-select: none;
pointer-events: none;
}
@keyframes heartbeat {
0%,
100% {
transform: scale(1);
}
14% {
transform: scale(1.1);
}
28% {
transform: scale(1);
}
42% {
transform: scale(1.05);
}
70% {
transform: scale(1);
}
}
@media (max-width: 768px) {
#timer-svg {
width: 60px;
height: 60px;
}
.timer-svg-wrap {
margin-top: 25px !important;
width: 60px;
height: 60px;
}
}
/* ── iPad : la plupart des iPads (largeur CSS 810–834px en portrait) ne
déclenchent PAS le @media (max-width:768px) ci-dessus, mais reçoivent
bien la classe .is-mobile (posée en JS via matchMedia(max-width:1024px)
+ détection tactile). Sans cette règle, le timer utilisait la taille
desktop (90px) dans une mise en page par ailleurs "mobile", ce qui
provoquait le décalage chiffre/rond signalé sur iPad. ── */
html.is-mobile #timer-svg {
width: 60px;
height: 60px;
}
html.is-mobile .timer-svg-wrap {
margin-top: 25px !important;
width: 60px;
height: 60px;
}
/* #timer est maintenant un
SVG natif dont la taille suit
automatiquement celle du SVG (cf commentaire plus haut) — plus besoin de
forcer un font-size ici. */
/* ========================= */
/* 🔴 Nouveau style marqueur */
/* ========================= */
/* === Marqueur précision sous la barre (desktop) === */
.response-time-marker {
position: absolute;
bottom: -26px;
left: 0;
transform: translateX(-50%);
background: #2a1f6e;
border: 1px solid rgba(160, 130, 255, 0.8);
box-shadow: 0 0 8px rgba(160, 130, 255, 0.4);
border-radius: 4px;
padding: 3px 8px;
z-index: 10;
animation: rt-pop 0.18s ease-out;
white-space: nowrap;
}
.response-time-marker::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 5px solid #2a1f6e;
}
.response-time-marker span {
position: static;
transform: none;
background: none;
border: none;
color: #fff;
padding: 0;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
pointer-events: none;
text-shadow: none;
}
/* petite anim’ d’apparition */
@keyframes rt-pop {
0% {
transform: translateX(-50%) scale(0.6);
opacity: 0;
}
100% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
}
.record-alert {
position: absolute;
top: calc(100% + 50px);
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
color: #fff;
font-weight: bold;
font-size: 0.85rem;
padding: 8px 14px;
border-radius: 12px;
text-align: center;
width: auto;
max-width: 350px;
min-width: 220px;
border: 1px solid rgba(255, 235, 59, 0.3);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.5),
0 0 12px rgba(255, 235, 59, 0.08);
z-index: 9999;
pointer-events: none;
animation-name: fadeInOut;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
word-wrap: break-word;
line-height: 1.4;
}
@keyframes fadeInOut {
from {
opacity: 0;
transform: translateY(-10px);
}
10% {
opacity: 1;
transform: translateY(0);
}
90% {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(-10px);
}
}
#global-result {
font-size: 18px;
color: #ffeb3b;
font-weight: bold;
min-height: 10px;
line-height: 1.4;
text-align: center;
width: 100%;
max-width: 700px;
margin: 0 auto 10px;
padding: 0 20px;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
}
#result {
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
margin-top: 0px !important;
margin-bottom: 0px !important;
text-align: center;
transition: opacity 0.3s ease;
}
#result p {
font-size: 15px;
font-weight: 600;
color: #fff;
letter-spacing: 0.5px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 8px 22px;
white-space: nowrap;
}
/* Animation pour afficher et masquer progressivement le message */
@keyframes fadeInOut {
0% {
opacity: 0;
transform: translate(-50%, -50%);
}
10% {
opacity: 1;
transform: translate(-50%, -50%);
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-50%, -50%);
}
}
#result img {
display: block;
margin: 10px auto;
border-radius: 8px;
}
/* ═══════════════════════════════════════════════════════════════════════════
NOUVEAU PODIUM STYLE WTT
═══════════════════════════════════════════════════════════════════════════ */
#podium {
display: none;
position: fixed;
inset: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(6px);
align-items: center;
justify-content: center;
}
#podium.is-visible {
display: flex !important;
align-items: center;
justify-content: center;
}
/* ─── Podium laisse la place au chat ─────────────────────────────────────── */
html.podium-active #podium {
right: clamp(220px, calc((100vw - 1100px) * 0.28 + 220px), 380px) !important;
justify-content: center;
padding-right: 0;
}
@media (min-width: 769px) {
html.podium-active .podium-screen {
margin-left: 0;
}
}
html.podium-active.chat-hidden #podium {
right: 0 !important;
}
.podium-screen {
display: flex;
flex-direction: row;
width: min(92%, 1000px);
height: min(95vh, 650px);
background: linear-gradient(135deg, #1a1040, #0d0820);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* ── Colonne gauche ─────────────────────────────────────────────────────── */
.podium-left {
width: 55%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 30px 20px 10px;
background: linear-gradient(160deg, #2a1060, #150830);
position: relative;
overflow: visible;
}
.podium-left::before {
content: '';
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
background: radial-gradient(
circle,
rgba(150, 100, 255, 0.15) 0%,
transparent 70%
);
pointer-events: none;
}
/* Bravo */
.podium-bravo {
text-align: center;
color: #fff;
z-index: 1;
}
.podium-bravo-sub {
font-size: 16px;
opacity: 0.7;
margin: 0;
}
.podium-bravo-rank {
font-size: 28px;
font-weight: 800;
color: #ffeb3b;
margin: 2px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.podium-bravo-winner {
font-size: 32px;
font-weight: 900;
color: #fff;
margin: 4px 0;
text-shadow: 0 0 20px rgba(255, 235, 59, 0.5);
}
.podium-bravo-score {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
/* Podium visuel barres */
.podium-visual {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 8px;
width: 100%;
height: 180px;
z-index: 1;
margin-top: auto;
}
.podium-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1;
max-width: 130px;
}
.podium-bar-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
overflow: hidden;
flex-shrink: 0;
}
.podium-bar-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.podium-bar-name {
font-size: 13px;
font-weight: 700;
color: #fff;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
}
.podium-bar-score {
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
}
.podium-bar-block {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 900;
color: rgba(255, 255, 255, 0.3);
border-radius: 8px 8px 0 0;
}
.bar-1 .podium-bar-block {
height: 100px;
background: linear-gradient(180deg, #ffd700, #b8860b);
color: rgba(255, 255, 255, 0.5);
box-shadow: 0 -4px 20px rgba(255, 215, 0, 0.3);
}
.bar-2 .podium-bar-block {
height: 70px;
background: linear-gradient(180deg, #c0c0c0, #808080);
box-shadow: 0 -4px 15px rgba(192, 192, 192, 0.2);
}
.bar-3 .podium-bar-block {
height: 50px;
background: linear-gradient(180deg, #cd7f32, #8b4513);
box-shadow: 0 -4px 10px rgba(205, 127, 50, 0.2);
}
.bar-1 .podium-bar-avatar {
border-color: #ffd700;
box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}
.bar-2 .podium-bar-avatar {
border-color: #c0c0c0;
}
.bar-3 .podium-bar-avatar {
border-color: #cd7f32;
}
/* ── Podium : état initial masqué — animation gérée par JS (animatePodiumBlocks) ── */
.podium-bar-block {
transform: translateY(-280px);
opacity: 0;
}
.podium-bar-avatar,
.podium-bar-name,
.podium-bar-score {
opacity: 0;
transform: translateY(8px);
}
/* ── Slot vide : masquer avatar + label, bloc estompé ───────────────────── */
.podium-bar.is-empty .podium-bar-avatar,
.podium-bar.is-empty .podium-bar-name,
.podium-bar.is-empty .podium-bar-score {
visibility: hidden;
opacity: 0;
}
.podium-bar.is-empty .podium-bar-block { opacity: 0.22; }
/* ── Badges colorés top 3 ───────────────────────────────────────────────── */
.podium-rank-num {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
border-radius: 6px;
flex-shrink: 0;
color: rgba(255,255,255,0.4);
}
.podium-rank-num.gold { background: #ffd166; color: #111; }
.podium-rank-num.silver { background: #b0b8cc; color: #111; }
.podium-rank-num.bronze { background: #cd7f32; color: #fff; }
/* ── Responsive tablette ────────────────────────────────────────────────── */
@media (max-width: 768px) {
.podium-screen {
width: min(90%, 720px);
height: min(88vh, 520px);
}
.podium-left { width: 50%; padding: 16px 10px 0; }
.podium-right { width: 50%; }
.podium-bar { max-width: 90px; }
.podium-bravo-rank { font-size: 20px; }
.podium-bravo-winner { font-size: 22px; }
/* animation barDrop héritée — pas de keyframes de hauteur en responsive */
}
/* ── Responsive mobile ──────────────────────────────────────────────────── */
@media (max-width: 540px) {
.podium-screen {
flex-direction: column;
height: auto;
max-height: 94vh;
overflow-y: auto;
width: 92%;
}
.podium-left { width: 100%; padding: 20px 16px 16px; min-height: 300px; }
.podium-right { width: 100%; height: 240px; border-left: none; border-top: 1px solid rgba(255,255,255,0.06); }
.podium-visual { height: 150px; }
.podium-bar { max-width: 80px; }
.podium-bar-avatar { width: 36px; height: 36px; }
.podium-bar-name { font-size: 11px; max-width: 70px; }
.podium-bravo-rank { font-size: 22px; }
.podium-bravo-winner { font-size: 24px; }
.podium-tab { font-size: 10px; padding: 12px 4px; }
/* animation barDrop héritée — pas de keyframes de hauteur en responsive */
}
.podium-restart {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
text-align: center;
padding: 6px 16px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
z-index: 1;
margin-top: 8px;
white-space: nowrap;
flex-shrink: 0;
}
/* ── Colonne droite ─────────────────────────────────────────────────────── */
.podium-right {
width: 45%;
display: flex;
flex-direction: column;
background: #0f0a20;
border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.podium-tabs {
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.podium-tab {
flex: 1;
padding: 16px;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
width: auto;
height: auto;
}
.podium-tab:hover {
background: rgba(255, 255, 255, 0.04);
color: #fff;
}
.podium-tab.active {
color: #fff;
border-bottom-color: #7c3aed;
background: rgba(124, 58, 237, 0.1);
}
.podium-tab-content {
flex: 1;
overflow-y: auto;
padding: 12px;
scrollbar-width: thin;
scrollbar-color: rgba(124, 58, 237, 0.4) transparent;
}
.podium-tab-content::-webkit-scrollbar {
width: 4px;
}
.podium-tab-content::-webkit-scrollbar-thumb {
background: rgba(124, 58, 237, 0.4);
border-radius: 4px;
}
.podium-tab-content.hidden {
display: none;
}
/* Classement rows */
.podium-rank-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
border-radius: 8px;
margin-bottom: 4px;
transition: background 0.2s;
}
.podium-rank-row:hover {
background: rgba(255, 255, 255, 0.04);
}
.podium-rank-row.is-me {
background: rgba(124, 58, 237, 0.15);
border: 1px solid rgba(124, 58, 237, 0.3);
}
.podium-rank-num {
width: 28px;
text-align: center;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
.podium-rank-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
overflow: hidden;
}
.podium-rank-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.podium-rank-name {
flex: 1;
font-size: 14px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.podium-rank-score {
font-size: 13px;
font-weight: 700;
color: #ffeb3b;
flex-shrink: 0;
}
.podium-rank-avg {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
/* Historique rows */
.podium-song-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 8px;
margin-bottom: 4px;
}
.podium-song-row:hover {
background: rgba(255, 255, 255, 0.04);
}
.podium-song-cover {
width: 36px;
height: 36px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.05);
}
.podium-song-info {
flex: 1;
min-width: 0;
}
.podium-song-title {
font-size: 13px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.podium-song-artist {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#restart-timer {
display: none;
position: static;
font-size: 17px;
font-weight: 600;
color: #ffffff;
text-align: center;
padding: 6px 16px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
margin-top: 8px;
white-space: nowrap;
}
#first-place,
#second-place,
#third-place {
position: absolute;
display: none !important;
flex-direction: column;
align-items: center;
gap: 2px;
}
#first-place {
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
}
#second-place {
top: 55%;
left: 23%;
transform: translate(-50%, -50%);
}
#third-place {
top: 55%;
left: 78%;
transform: translate(-50%, -50%);
}
.correct {
border: 2px solid green;
background-color: #d4ffd4;
}
.incorrect {
border: 2px solid red;
background-color: #ffd4d4;
}
.game-content {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.description {
display: flex;
justify-content: space-around;
padding: 15px;
border: 1px solid rgb(158, 155, 155);
border-radius: 8px;
background: linear-gradient(135deg, #2c2c2c, #1a1a1a);
color: #fff;
text-align: center;
}
/* ─── Podium amélioré ──────────────────────────────────────────────────────── */
.podium-slot {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
color: #fff;
max-width: 80px;
max-height: 80px;
background: rgba(0, 0, 0, 0.6);
border-radius: 8px;
padding: 3px 5px;
overflow: hidden;
}
.podium-avatar {
width: 28px;
height: 28px;
max-width: 28px;
max-height: 28px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ffeb3b;
flex-shrink: 0;
}
.podium-avatar-placeholder {
width: 32px;
height: 32px;
border-radius: 50%;
background: #444;
border: 2px solid #555;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #888;
}
.podium-medal {
font-size: 14px;
line-height: 1;
}
.podium-name {
font-size: 12px;
font-weight: 700;
color: #ffeb3b;
text-align: center;
max-width: 75px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.podium-score {
font-size: 11px;
color: #fff;
font-weight: 600;
}
.podium-avg {
font-size: 10px;
color: #ddd;
}
/* Joueurs 4e et + */
.podium-others {
margin-top: 16px;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
color: #fff;
}
.podium-others h3 {
color: #ffeb3b;
font-size: 14px;
margin-bottom: 8px;
text-align: center;
}
.podium-other-row {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0;
border-bottom: 1px solid #333;
font-size: 14px;
}
.podium-other-rank {
color: #aaa;
width: 20px;
}
.podium-other-name {
flex: 1;
font-weight: 600;
color: #fff;
}
.podium-other-score {
color: #ffeb3b;
font-weight: 700;
}
.podium-other-avg {
color: #aaa;
font-size: 12px;
}
@keyframes shadowPulse {
0% {
box-shadow: 0 0 5px #000;
}
50% {
box-shadow: 0 0 20px #000;
}
100% {
box-shadow: 0 0 5px #000;
}
}
@keyframes fadeIn {
from {
opacity: 0.7;
}
to {
opacity: 1;
}
}
/* Bouton chat mobile : apparence (position/display gérés plus bas, gardés
par .is-mobile pour ne jamais s'activer sur desktop) */
.chat-bubble-btn {
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(139, 92, 246, 0.85);
border: 2px solid rgba(255, 255, 255, 0.55);
color: #fff;
font-size: 15px;
cursor: pointer;
padding: 0;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.45),
0 0 0 2px rgba(139, 92, 246, 0.35);
opacity: 1;
transition:
opacity 0.2s,
background 0.2s;
}
.chat-bubble-btn:hover,
.chat-bubble-btn:active,
html.mobile-chat-open .chat-bubble-btn {
background: rgba(124, 58, 237, 0.95);
}
/* ✅ Ajustement de la largeur pour mobile */
@media all and (max-width: 600px) {
html.is-mobile .chat-container {
display: none !important;
}
html.is-mobile #toggle-chat-container {
display: flex !important;
}
/* (anciennes règles .mobile-chat-open .chat-container supprimées —
plusieurs définitions concurrentes du panneau causaient des conflits
de spécificité CSS. Une seule règle fait foi désormais, plus bas dans
le fichier : html.is-mobile.mobile-chat-open body .chat-container) */
#playlist-select,
.like-button,
.dislike-button,
.like-count,
.dislike-count {
display: none !important;
}
a.home-button {
display: none;
}
button#toggle-chat-container.chat-toggle-btn {
display: none !important;
}
html,
body {
display: flex;
font-family: Arial, sans-serif;
background-position: center;
background-repeat: repeat;
flex-direction: column;
min-height: 100vh;
height: 100%;
margin: 0;
padding: 0;
}
/* Centrage du conteneur de jeu */
#game {
position: relative;
/* plus de position fixe */
top: auto;
left: auto;
transform: none;
width: 100%;
height: auto;
max-height: 90vh;
/* limite en hauteur à l'écran */
overflow-y: auto;
/* défilement si dépasse */
-webkit-overflow-scrolling: touch;
/* scroll fluide iOS */
margin-top: 0;
/* supprime la marge existante */
transform: translateY(-10px);
/* déplace de 10px vers le haut */
/* petit espace autour */
border-radius: 10px;
}
/* Compteur de chanson */
html body #song-counter {
position: relative !important;
top: auto !important;
left: auto !important;
width: auto;
}
#game-info {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
font-size: 0.85em !important;
text-align: center;
padding: 0;
margin: 0 0 8px;
}
.response-time-marker span {
position: absolute;
top: 25px;
left: -35px;
padding: 2px 5px;
font-size: 11px;
z-index: 15;
}
/* ====== Desktop : textes sous les covers ====== */
#album-covers-container .album-cover-container .song-title,
#album-covers-container .album-cover-container .record-link,
#album-covers-container .album-cover-container .best-time {
font-size: 10px !important;
line-height: 1.2;
text-underline-offset: 2px;
max-width: 180px;
margin-left: 8px;
padding: 2px 4px;
/* un peu plus compact */
}
/* ====== Mobile overlay ====== */
.is-mobile #album-cover .song-title,
.is-mobile #album-cover .record-link,
.is-mobile #album-cover .best-time {
font-size: 10px !important;
line-height: 1.2 !important;
padding: 2px 4px !important;
margin-left: 0 !important;
max-width: 72vw !important;
}
.navbar {
top: 0 !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
height: 50px !important;
padding: 0 10px !important;
gap: 5px;
font-size: 12px;
flex-wrap: nowrap !important;
justify-content: flex-end !important;
box-sizing: border-box !important;
}
.navbar .username {
font-size: 12px;
}
.navbar a {
padding: 3px 6px;
font-size: 12px;
}
.profile-img {
width: 24px;
height: 24px;
}
/* ✅ Cacher emojis via font-size 0 + réinjecter texte seul */
a.logout-button,
a.stats-button,
a.profile-link,
a.records-button,
a.likes-button {
font-size: 0;
position: relative;
}
a.logout-button::after {
content: 'Déconnexion';
font-size: 13px;
}
a.stats-button::after {
content: 'Stats';
font-size: 13px;
}
a.profile-link::after {
content: 'Profil';
font-size: 13px;
}
a.records-button::after {
content: 'Records';
font-size: 13px;
}
a.likes-button::after {
content: 'Likes';
font-size: 13px;
}
.info-icon {
position: absolute;
font-size: 24px;
font-weight: bold;
cursor: pointer;
border-radius: 50%;
padding: 5px 10px;
display: inline-block;
transition:
background 0.3s ease,
color 0.3s ease;
margin-left: -30px;
margin-top: -5px;
text-align: center;
line-height: 1;
}
/* on cache le panneau historique sur mobile */
#album-covers-container {
display: none !important;
}
/* overlay pour la cover actuelle pendant la révélation */
#album-cover {
position: fixed !important;
top: 40% !important;
/* place plus haut qu’au centre */
left: 50% !important;
transform: translateX(-50%) scale(0.98) !important;
/* on ne translate plus verticalement */
max-width: 70vw;
max-height: 30vh;
width: auto;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
/* 🔽 réduit l’espacement entre éléments */
padding: 4px;
/* 🔽 padding plus compact */
border-radius: 10px;
background: rgba(0, 0, 0, 0.85);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
z-index: 1100;
overflow-y: auto;
/* caché par défaut, montré avec .is-visible */
opacity: 0 !important;
pointer-events: none !important;
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
#album-cover.is-visible {
opacity: 1 !important;
pointer-events: auto !important;
/* garder le même axe Y qu'au repos → pas de translateY */
transform: translateX(-50%) scale(1) !important;
}
/* vignettes plus petites en mobile */
#album-cover .album-cover {
width: min(30vw, 80px);
/* prend 35% de la largeur écran, max 140px */
aspect-ratio: 1 / 1;
height: auto;
max-height: 80px;
/* limite stricte */
object-fit: cover;
border-radius: 6px;
/* un peu moins arrondi pour un petit format */
}
.volume-container {
position: absolute;
top: 55px;
left: 72%;
gap: 10px;
width: 45%;
max-width: 250px;
height: 30px;
}
/* #timer (texte SVG natif) n'a plus besoin de position/transform/color ici
— son centrage et sa couleur (fill) sont déjà gérés par la règle de
base, et sa taille suit automatiquement celle du SVG à cette largeur
d'écran. */
#timer-progress-container {
margin-top: -10px;
/* ou top: 100px; selon ton cas */
}
#global-result {
display: block !important;
font-size: 13px !important;
margin-top: 10px !important;
text-align: center;
width: 100%;
max-width: 700px;
color: #ffeb3b;
font-weight: bold;
line-height: 1.4;
}
#result {
position: absolute !important;
font-size: 12px !important;
margin-top: 250px !important;
margin-left: 30px !important;
width: 85%;
/* occupe presque toute la largeur dispo */
max-width: 85%;
/* limite pour éviter de dépasser */
color: #fff;
text-align: center;
/* ✅ Autorise les retours à la ligne */
white-space: normal;
word-break: break-word;
text-align: center;
}
h2.players-title {
color: #ffeb3b !important;
font-size: 18px;
margin-bottom: 10px;
margin-left: 20px;
}
.players-header {
position: relative;
text-align: center;
margin-bottom: 10px;
}
.players-header .my-place {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
}
input#answer {
position: relative;
top: 35%;
/* tailles + confortables */
font-size: clamp(14px, 4.2vw, 18px) !important;
height: 46px !important;
padding: 8px 12px !important;
line-height: 1.25 !important;
/* tronquer proprement si trop long */
width: 85vw !important;
max-width: 85vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Conteneur joueurs : occupe tout l’espace dispo */
div#players.players-container {
position: absolute;
top: 65%;
/* garde ton top actuel si tu veux */
left: 10px;
right: 10px;
/* 💡 On force la hauteur dynamique : de top jusqu’au bas de l’écran */
bottom: 10px;
/* retire max-height, sinon ça coupe trop tôt */
max-height: none !important;
margin-top: 0 !important;
padding: 4px 8px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* La liste prend tout l’espace restant et scrolle jusqu’au bas */
ul.player-list {
flex: 1 1 auto;
min-height: 0;
/* 🔑 évite le shrink bizarre */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Titre + header */
h2.players-title {
font-size: 14px !important;
margin-left: 0;
text-align: center;
}
.players-header .my-place {
font-size: 14px;
right: 12px;
}
li.player-card,
.player-card {
display: flex !important;
flex-direction: column;
padding: 4px 6px;
margin-bottom: 6px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.08);
box-sizing: border-box;
gap: 2px;
}
/* Aplatir les wrappers hérités du desktop */
.player-info-container,
.player-info {
display: flex;
flex-direction: row;
align-items: center;
min-height: 0;
gap: 6px;
flex-wrap: wrap;
}
/* Rang / avatar */
.player-rank {
grid-column: 1;
grid-row: 1;
font-size: 15px;
margin: 0;
color: #ffeb3b;
font-weight: 700;
}
.player-avatar {
grid-column: 2;
grid-row: 1;
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
}
/* 🏆 coupe — colonne dédiée (3) */
img.trophy {
grid-column: 3;
grid-row: 1;
position: static !important;
width: 25px;
height: auto;
margin: 0;
justify-self: start;
align-self: center;
}
/* (ancienne règle #trophy supprimée — collision d'id avec le #trophy du
chat-container, qui se retrouvait forcé visible via !important) */
/* Nom (colonne 4) */
.player-name {
grid-column: 4;
grid-row: 1;
margin: 0 !important;
min-width: 0;
flex: 1 1 0; /* ← AJOUT */
font-size: 15px;
font-weight: 700;
color: #ffeb3b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Points (col 5) — on neutralise l’absolu desktop */
span.points,
.player-points {
grid-column: 5;
grid-row: 1;
position: static !important;
left: auto !important;
width: auto !important;
justify-self: end;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
line-height: 1;
align-self: center;
}
/* Temps (col 6) */
.response-time {
grid-column: 6;
grid-row: 1;
justify-self: end;
font-size: 14px;
white-space: nowrap;
line-height: 1;
align-self: center;
margin: 0;
padding: 0;
width: auto;
}
/* Badges sous le NOM (ligne 2), centrés et non débordants
⚠️ on écrase le position:absolute du desktop */
.badge-container {
grid-column: 4 / -1 !important;
/* du nom jusqu’à droite */
grid-row: 2 !important;
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 4px !important;
height: 15px !important;
width: 100% !important;
overflow: hidden !important;
white-space: nowrap !important;
pointer-events: none;
}
.badge,
.badge.badge-artist,
.badge.badge-title,
.badge-record,
.badge-generic {
font-size: 11px !important;
line-height: 1 !important;
padding: 2px 5px !important;
border-radius: 6px !important;
gap: 2px !important;
margin: 0 !important;
white-space: nowrap !important;
}
.badge-films {
padding: 5px 8px !important;
/* moins de padding latéral */
line-height: 20px !important;
min-width: auto;
/* laisse la largeur s'ajuster au texte */
font-size: 13px !important;
/* légèrement plus petit si besoin */
border-radius: 4px !important;
margin: 0 !important;
}
/* Optionnel : si pas de badges, on garde la hauteur uniforme mais on masque visuellement */
.badge-container:empty {
visibility: hidden;
}
h1 {
font-size: 30px;
text-align: center;
margin-bottom: 40px;
}
.record-alert {
position: fixed;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.75rem;
padding: 6px 10px;
min-width: 140px;
max-width: 70%;
border-radius: 8px;
line-height: 1.3;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
word-wrap: break-word;
z-index: 9999;
}
.players-container {
max-height: 50vh;
/* Limite la hauteur pour les joueurs */
overflow-y: auto;
/* Active le défilement si nécessaire */
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.player-card {
animation: fadeIn 0.5s ease-in-out;
}
.best-player {
box-shadow: 0px 0px 15px 5px gold;
}
.player-card {
padding: 5px;
font-size: 0.9em;
}
.player-info-container {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 100%;
gap: 6px;
}
}
#chat-window {
position: absolute;
margin-left: 500px;
}
#chat-input {
display: none !important;
/* Masquer la zone de saisie du chat si elle existe */
}
.chat-container {
position: absolute;
/* Masque complètement le chat sur les petits écrans */
left: -1000px;
/* Déplace le chat hors de l'écran */
}
/* Noms sur le podium uniquement (was: .player-info global) */
#podium .player-info,
.is-mobile #first-place .player-info,
.is-mobile #second-place .player-info,
.is-mobile #third-place .player-info {
position: absolute;
color: #ffeb3b;
font-size: 1.3em;
font-weight: bold;
text-shadow:
1px 1px 2px #000,
-1px -1px 2px #000,
1px -1px 2px #000,
-1px 1px 2px #000;
background: linear-gradient(
to right,
rgba(59, 56, 56, 0.8),
rgba(0, 0, 0, 0.8)
);
padding: 5px;
border-radius: 30px;
}
/* ===== Forcer l'affichage des noms sur mobile (classe .is-mobile) ===== */
.is-mobile #podium {
z-index: 3000;
}
.is-mobile #restart-timer {
position: absolute !important;
display: block !important;
/* force l’affichage */
z-index: 10 !important;
/* > noms (5) et > image (0) */
top: auto !important;
/* annule la règle desktop */
bottom: 6% !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: clamp(13px, 3.8vw, 18px) !important;
padding: 6px 10px !important;
background-color: rgba(0, 0, 0, 0.65) !important;
border-radius: 8px !important;
}
/* Si le texte est directement dans #first/second/third-place */
.is-mobile #first-place,
.is-mobile #second-place,
.is-mobile #third-place {
position: absolute !important;
z-index: 5 !important;
/* le timer passe au-dessus */
color: #fff !important;
display: none !important;
text-shadow:
1px 1px 2px #000,
-1px -1px 2px #000,
1px -1px 2px #000,
-1px 1px 2px #000 !important;
background: rgba(0, 0, 0, 0.55);
padding: 4px 8px;
border-radius: 999px;
font-size: clamp(12px, 3.6vw, 16px);
font-weight: 700;
pointer-events: none;
}
/* Si le texte est dans un enfant .player-info (ex: …
) */
.is-mobile #first-place .player-info,
.is-mobile #second-place .player-info,
.is-mobile #third-place .player-info {
position: absolute !important;
/* 👈 force l'affichage même si caché ailleurs */
z-index: 6 !important;
/* au-dessus de l'image ET du conteneur */
color: #fff !important;
display: none !important;
text-shadow:
1px 1px 2px #000,
-1px -1px 2px #000,
1px -1px 2px #000,
-1px 1px 2px #000 !important;
background: rgba(0, 0, 0, 0.55);
padding: 4px 8px;
border-radius: 999px;
font-size: clamp(12px, 3.6vw, 16px);
font-weight: 700;
pointer-events: none;
}
/* Positions (ajuste si besoin) */
.is-mobile #first-place {
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.is-mobile #second-place {
top: 40%;
left: 25%;
transform: translate(-50%, -50%);
}
.is-mobile #third-place {
top: 40%;
left: 80%;
transform: translate(-50%, -50%);
}
/* Si tu utilises .player-info internes, positionne-les aussi */
.is-mobile #first-place .player-info {
top: 0;
left: 0;
transform: none;
}
.is-mobile #second-place .player-info {
top: 0;
left: 0;
transform: none;
}
.is-mobile #third-place .player-info {
top: 0;
left: 0;
transform: none;
}
/* Vars mobiles pour le bouton ✓ */
.is-mobile :root {
--msubmit-size: 1.9em;
/* taille du bouton, liée à la font-size de l’input */
--msubmit-gap: 8px;
/* espace entre l’input et le bouton */
}
/* Le parent de l'input sert d'ancre */
.is-mobile .answer-submit-wrap {
position: relative;
display: flex;
z-index: 9999;
}
/* Input : on réserve la place du bouton à droite */
.is-mobile input#answer {
position: relative;
/* tu l’as déjà, on garde */
z-index: 10000;
/* au-dessus du bouton et des overlays */
pointer-events: auto;
/* force l’interaction tactile */
-webkit-user-select: text;
/* iOS: autorise la saisie/selection */
user-select: text;
caret-color: auto;
/* curseur bien visible */
flex: 1;
padding-right: 44px !important;
border-radius: 999px;
position: relative;
top: 17%;
/* ✅ décale seulement l’input vers le bas */
right: 10px;
}
/* 3) Si tu as un user-select global qui bloque, neutralise-le au moins ici */
.is-mobile body,
.is-mobile #game,
.is-mobile .answer-submit-wrap {
-webkit-user-select: auto;
user-select: auto;
}
.is-mobile #mobile-submit:disabled {
opacity: 0.45;
box-shadow: none;
cursor: default;
}
@media only screen and (min-width: 769px) and (max-width: 1100px) {
a.home-button {
display: none;
}
#mobile-submit {
display: none !important;
}
/* Chat caché par défaut, toggle visible */
html:not(.mobile-chat-open) .chat-container.chat-container {
display: none !important;
}
#toggle-chat-container {
display: flex !important;
}
/* (règle .mobile-chat-open .chat-container legacy supprimée ici aussi —
voir la règle unique plus bas dans le fichier) */
/* Pas de padding-right si chat caché (is-mobile) */
html:not(.is-mobile) #game-layout {
padding-right: clamp(
220px,
calc((100vw - 1100px) * 0.28 + 220px),
380px
) !important;
}
html.is-mobile #game-layout {
padding-right: 0 !important;
}
html.chat-hidden:not(.is-mobile) #game-layout {
padding-right: 0 !important;
}
.timer-labels {
gap: 6px !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
}
#skip-wrapper {
flex-shrink: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
gap: 4px !important;
}
#skip-btn,
#auto-skip-toggle {
height: 24px !important;
font-size: 9px !important;
padding: 0 7px !important;
letter-spacing: 0.03em !important;
min-width: 0 !important;
flex-shrink: 1 !important;
max-width: 100px !important;
}
#song-counter {
flex-shrink: 0 !important;
font-size: 10px !important;
padding: 4px 10px !important;
white-space: nowrap !important;
}
.volume-container {
position: static !important;
top: auto !important;
left: auto !important;
width: auto !important;
max-width: 160px;
}
/* Joueurs moins larges */
.col-players {
width: 220px !important;
min-width: 220px !important;
flex-shrink: 0 !important;
}
/* Centre respire */
.col-center {
padding: 10px 20px !important;
}
/* Covers moins larges */
.album-cover {
width: 80px !important;
height: 80px !important;
}
.navbar {
padding: 5px 10px;
gap: 5px;
font-size: 12px;
flex-wrap: wrap;
}
.navbar .username {
font-size: 12px;
}
.navbar a {
padding: 3px 6px;
font-size: 12px;
}
.profile-img {
width: 24px;
height: 24px;
}
#restart-timer.podium-restart {
font-size: 12px !important;
padding: 4px 10px !important;
white-space: normal !important;
text-align: center !important;
}
/* Badges Titre/Artiste réduits pour ne pas déborder */
.col-players .badge-container {
margin-left: 0 !important;
flex-wrap: wrap !important;
overflow: visible !important;
max-width: 100% !important;
gap: 2px !important;
}
.col-players .badge {
font-size: 9px !important;
line-height: 12px !important;
padding: 2px 4px !important;
gap: 2px !important;
}
}
/* ── Chat responsive : rétrécit entre 1450px et 1101px ── */
@media (min-width: 1251px) and (max-width: 1450px) {
html:not(.is-mobile):not(.chat-hidden) .chat-container {
width: 300px !important;
}
html:not(.chat-hidden) #game-layout {
padding-right: 300px !important;
}
/* Zone de saisie : padding légèrement réduit */
.chat-input-area {
padding: 6px 10px 40px 10px !important;
gap: 4px !important;
}
}
@media (min-width: 1101px) and (max-width: 1250px) {
html:not(.is-mobile):not(.chat-hidden) .chat-container {
width: 240px !important;
}
html:not(.chat-hidden) #game-layout {
padding-right: 240px !important;
}
/* Zone de saisie : moins de padding pour gagner de l'espace */
.chat-input-area {
padding: 6px 8px 40px 8px !important;
gap: 4px !important;
}
/* Color picker plus compact */
.chat-input-tools input[type="color"] {
width: 24px !important;
height: 24px !important;
padding: 0 !important;
}
/* Badges Titre/Artiste réduits pour ne pas déborder */
.badge-container {
margin-left: 0 !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
max-width: 100% !important;
gap: 2px !important;
}
.badge {
font-size: 9px !important;
line-height: 14px !important;
padding: 1px 3px !important;
gap: 2px !important;
}
}
/* Styles for screens with a resolution of 1440x900 or smaller */
@media screen and (min-width: 769px) and (max-width: 1440px) and (max-height: 900px) {
#mobile-submit {
display: none !important;
}
a.home-button {
display: none !important;
font-size: 0px !important;
}
.chat-container {
display: none !important;
width: 0px !important;
}
.volume-control input[type='range'] {
width: 80px;
}
}
/* Media queries pour rendre le chat responsive */
@media only screen and (max-width: 1024px) and (max-height: 768px) {
#mobile-submit {
display: none !important;
}
html:not(.mobile-chat-open) body .chat-container {
display: none !important;
/* 🔒 cache vraiment */
}
/* bouton d’ouverture visible */
#toggle-chat-container {
display: flex !important;
}
a.home-button {
display: none;
}
}
@media screen and (max-width: 1371px) {
html:not(.mobile-chat-open) body .chat-container.chat-container {
#mobile-submit {
display: none !important;
}
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* Panneau chat mobile (occupe 3/4 de l'écran, ancré à droite).
Gardé par .is-mobile en plus de .mobile-chat-open : même si le JS se
trompait et posait mobile-chat-open sur desktop, cette règle ne peut
jamais s'y déclencher. */
html.is-mobile.mobile-chat-open body .chat-container {
display: flex !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: min(75vw, 340px) !important;
height: 100vh !important;
height: 100dvh !important; /* évite que la barre du navigateur mobile coupe le bas */
max-width: none !important;
border: 0 !important;
border-left: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: -6px 0 20px rgba(0, 0, 0, 0.5);
background: linear-gradient(180deg, #0d1020 0%, #111827 100%);
z-index: 999999 !important; /* au-dessus de tous les z-index du fichier (le plus haut trouvé : 10001) */
}
html.is-mobile.mobile-chat-open body {
overflow: hidden;
}
/* (ancienne règle qui masquait toute .col-center supprimée — elle faisait
disparaître le jeu entier dès que le panneau ne couvrait plus 100% de la
largeur, ex. résolutions intermédiaires ~940px. Le z-index très élevé
ci-dessus suffit à couvrir les quelques éléments à z-index 9999/10000
qui posaient problème, sans toucher au reste du jeu resté visible à
côté du panneau.) */
/* Bouton bulle : vit hors de .col-center exprès (voir game.pug), donc pas
affecté par un éventuel masquage. Position fixe dans les deux états. */
.chat-bubble-btn {
display: none;
}
html.is-mobile .chat-bubble-btn {
display: flex;
position: fixed;
top: 150px;
right: 12px;
left: auto;
z-index: 3002;
}
html.is-mobile.mobile-chat-open .chat-bubble-btn {
top: 60px !important;
right: auto !important;
left: calc(100vw - min(75vw, 340px) - 17px) !important;
z-index: 1000000 !important; /* au-dessus du panneau (999999) */
}
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
a.home-button {
display: none;
}
#mobile-submit {
display: none !important;
}
html.is-mobile .chat-container {
display: none !important;
}
html.is-mobile #toggle-chat-container {
display: flex !important;
}
/* (règle .mobile-chat-open .chat-container legacy supprimée ici aussi —
voir la règle unique plus bas dans le fichier) */
.classement-link {
padding: 12px 25px;
font-size: 20px;
margin-top: -25px;
margin-left: -550px;
}
.volume-container {
display: none !important;
}
#game {
position: fixed;
width: 100%;
background: #1d1c1c;
height: 80vh !important;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 950px;
border-radius: 15px;
text-align: center;
z-index: 1;
color: white;
}
.volume-container {
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 250px;
height: 30px;
/* 🔥 Diminue la hauteur */
padding: 5px 10px;
/* 🔥 Réduction du padding pour une taille plus compacte */
background: linear-gradient(135deg, #363638, #202020);
border-radius: 20px;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.6),
0 6px 12px rgba(0, 0, 0, 0.3);
}
.volume-icon {
font-size: 18px;
/* 🔥 Réduit légèrement la taille de l'icône */
color: #fff;
}
input#volume {
width: 100%;
max-width: 200px;
}
#song-counter {
position: relative !important;
top: auto !important;
right: auto !important;
width: auto;
font-size: 11px !important;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
a.home-button {
display: none;
}
.classement-link {
padding: 12px 25px;
font-size: 20px;
margin-top: -25px;
margin-left: -380px;
}
#game {
position: fixed;
width: 100%;
background: #1d1c1c;
height: 75vh !important;
top: 1%;
left: 50%;
/* Centrer horizontalement */
transform: translateX(-50%);
/* Centrer horizontalement */
width: 100%;
max-width: 950px;
}
html.is-mobile .chat-container {
display: none !important;
}
html.is-mobile #toggle-chat-container {
display: flex !important;
}
}
/* Styles for screens with a resolution of 1680x1050 or smaller */
@media screen and (max-width: 1680px) and (max-height: 1050px) {
a.home-button {
display: none;
}
html:not(.mobile-chat-open) .chat-container {
display: none !important;
}
#toggle-chat-container {
display: flex !important;
}
#game {
position: fixed;
width: 100%;
height: 95vh !important;
top: 1%;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 900px;
}
}
/* Fix chat: remettre la zone messages dans le flux */
.chat-container #chat-window {
position: static !important;
margin: 0 !important;
flex: 1 1 auto !important;
}
/* (optionnel) assurer l'ordre: messages puis input */
.chat-container #chat-window {
order: 1;
}
.chat-container .chat-input-area {
order: 2;
}
/* 2) Vague plus propre : descend un peu et adoucit le bord */
.home-button {
line-height: 1;
position: absolute;
}
/* isole la zone joueurs des repaints globaux */
#players,
.players-list {
contain: layout paint;
isolation: isolate;
backface-visibility: hidden;
transform: translateZ(0);
}
/* === Audio Unlock Overlay === */
#audio-gate {
position: fixed;
inset: 0;
display: none;
/* sera activé en JS */
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
z-index: 9999;
}
#audio-gate.is-visible {
display: flex;
}
#audio-gate .gate-card {
width: min(92vw, 520px);
border-radius: 20px;
padding: 22px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.08)
);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
color: #fff;
text-align: center;
}
#audio-gate .gate-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 8px;
}
#audio-gate .gate-sub {
font-size: 14px;
opacity: 0.9;
margin: 0 0 18px;
}
#audio-gate .gate-btn {
display: inline-flex;
gap: 8px;
align-items: center;
justify-content: center;
padding: 12px 16px;
border-radius: 12px;
border: 0;
font-weight: 700;
cursor: pointer;
background: #00d084;
/* vert doux */
color: #0b1114;
transition:
transform 0.06s ease,
filter 0.2s ease;
}
#audio-gate .gate-btn:active {
transform: translateY(1px) scale(0.99);
}
#audio-gate .gate-hint {
margin-top: 10px;
font-size: 12px;
opacity: 0.8;
}
/* Lien de record toujours cliquable, même pendant les transitions/playing */
.best-time,
.best-time * {
pointer-events: auto !important;
}
.best-time {
position: relative;
z-index: 9999;
/* au-dessus d’un éventuel overlay transparent */
}
/* Si tu as un "shield" qui capte les clics, on le neutralise pour la zone covers */
#album-cover .overlay,
#album-covers-container .overlay,
#album-cover .click-shield,
#album-covers-container .click-shield {
pointer-events: none !important;
}
/* Respecte l’accessibilité */
@media (prefers-reduced-motion: reduce) {
.response-time-marker {
animation: none;
}
}
@media (max-width: 900px) {
#skip-btn,
#auto-skip-toggle {
height: 26px !important;
font-size: 10px !important;
padding: 0 10px !important;
letter-spacing: 0.05em !important;
}
}
/* === Mobile (≤ 768px) : layout 3-colonnes en colonne ===================== */
@media (max-width: 768px) {
/* ─── Layout principal : scrollable en interne ──────────────────── */
#game-layout {
position: fixed !important;
flex-direction: column !important;
top: 55px !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding-right: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important; /* ← AJOUT */
overscroll-behavior: contain; /* ← AJOUT (évite que le scroll "fuite" vers la page derrière) */
height: calc(100vh - 55px) !important;
height: calc(100dvh - 55px) !important;
overflow-anchor: none !important; /* ← AJOUT : empêche Chrome de décaler le scroll tout seul quand le contenu change (covers qui s'ajoutent) */
}
/* ─── Skip buttons ──────────────────────────────────────────────────────── */
#skip-wrapper {
gap: 4px !important;
}
#skip-btn,
#auto-skip-toggle {
height: 22px !important;
font-size: 9px !important;
padding: 0 8px !important;
letter-spacing: 0.04em !important;
}
#auto-skip-toggle {
max-width: 100px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.timer-labels {
flex-wrap: wrap;
gap: 4px;
}
#skip-wrapper {
order: 3;
width: auto !important; /* ← était 100% */
justify-content: flex-end;
}
/* ─── Colonne centre ────────────────────────────────────────────────────── */
.col-center {
flex: unset !important;
width: 100% !important;
padding: 8px 12px !important;
overflow: visible !important;
align-items: stretch !important;
min-height: unset !important;
}
/* ─── Cache les scrollbars overlay Android ─────────────────────────────── */
#game-layout,
.col-players,
#album-covers-container,
div#players.players-container {
scrollbar-width: none !important;
}
#game-layout::-webkit-scrollbar,
.col-players::-webkit-scrollbar,
#album-covers-container::-webkit-scrollbar,
div#players.players-container::-webkit-scrollbar {
display: none !important;
width: 0 !important;
}
/* ─── Réactive les covers défilantes comme desktop ──────────────────────── */
#album-covers-container {
display: flex !important;
flex: none !important;
height: auto !important;
overflow: visible !important;
overflow-anchor: none !important; /* ← AJOUT */
}
/* ─── Cache l'overlay provisoire ────────────────────────────────────────── */
#album-cover {
display: none !important;
}
/* ─── Covers défilantes compactes sur mobile ────────────────────── */
#album-covers-container .album-cover-container {
padding: 6px 8px !important;
gap: 8px !important;
}
#album-covers-container .album-cover {
width: 60px !important;
height: 60px !important;
}
#album-covers-container .cover-info .song-artist {
font-size: 12px !important;
}
#album-covers-container .cover-info .song-title {
font-size: 11px !important;
}
#album-covers-container .best-time,
#album-covers-container .record-link {
font-size: 10px !important;
}
#album-covers-container .cover-bottom-row {
gap: 4px !important;
}
/* ─── Colonne joueurs pleine largeur en bas ─────────────────────────────── */
.col-players {
position: relative !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-width: unset !important;
height: auto !important;
max-height: 150px !important;
flex-shrink: 0 !important; /* ← AJOUT : empêche flexbox de l'écraser quand .col-center grandit */
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
border-right: none !important;
border-top: 1px solid #2e2e2e !important;
padding: 8px !important;
box-sizing: border-box !important;
overflow-anchor: none !important;
}
div#players.players-container,
.col-players div#players.players-container {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
flex: 1;
width: 100% !important;
overflow: visible !important;
}
.col-players .players-header {
display: flex !important;
width: 100% !important;
margin-bottom: 6px;
}
.col-players .players-list {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
width: 100% !important;
}
.col-players .player-card,
.col-players li.player-card {
position: relative !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
padding: 6px 8px;
margin-bottom: 0;
gap: 6px;
flex-shrink: 0;
}
.col-players .player-card .player-right-col {
flex-direction: column !important;
align-items: flex-end !important;
margin-left: auto !important;
width: auto !important;
gap: 2px !important;
}
.col-players .player-card .points {
font-size: 12px !important;
white-space: nowrap;
}
.col-players .player-card .response-time {
font-size: 12px !important;
display: block;
white-space: nowrap;
width: auto !important;
}
.col-players .badge-container {
gap: 2px !important;
}
.col-players .badge {
font-size: 10px !important;
padding: 2px 4px !important;
gap: 2px !important;
}
.col-players .player-info-container,
.col-players .player-info {
position: static !important;
color: inherit !important;
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
font-size: inherit !important;
}
/* ─── Game-info pill ────────────────────────────────────────────────────── */
#game-info {
position: static !important;
transform: none !important;
font-size: 12px !important;
text-align: center;
margin: 0 0 4px !important;
}
/* ─── Song counter + volume ─────────────────────────────────────────────── */
#song-counter {
font-size: 11px !important;
padding: 4px 12px !important;
}
.volume-container {
position: static !important;
top: auto !important;
left: auto !important;
width: auto !important;
max-width: 130px !important;
padding: 3px 8px !important;
height: 28px !important;
}
.volume-control input[type='range'] {
width: 75px !important;
}
/* ─── Timer : dans le flux, pas de top: 100px ───────────────────────────── */
#timer-progress-container {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
height: 12px !important;
margin-top: 0 !important;
}
/* #timer (texte SVG natif) n'a plus besoin de position/transform/color/
margin/padding ici — cf règle de base. */
.response-time-marker {
bottom: -22px;
padding: 2px 6px;
font-size: 10px;
background: #2a1f6e;
border: 1px solid rgba(160, 130, 255, 0.8);
box-shadow: 0 0 8px rgba(160, 130, 255, 0.4);
}
.response-time-marker::before {
top: -4px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 4px solid #2a1f6e;
}
.response-time-marker span {
position: static;
transform: none;
background: none;
border: none;
padding: 0;
font-size: 10px;
color: #fff;
}
.rt-lane-0 .response-time-marker {
bottom: -26px;
}
.rt-lane-1 .response-time-marker {
bottom: -42px;
}
.rt-lane-2 .response-time-marker {
bottom: -58px;
}
/* ─── Résultats dans le flux ────────────────────────────────────────────── */
#global-result {
position: static !important;
display: block !important;
font-size: 13px !important;
margin-top: 6px !important;
text-align: center;
width: 100%;
color: #ffeb3b;
font-weight: bold;
}
#result {
position: static !important;
top: auto !important;
margin-top: 10px !important;
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
font-size: 13px !important;
color: #fff;
text-align: center;
white-space: normal;
word-break: break-word;
}
#result p {
font-size: 10px !important;
padding: 5px 12px !important;
white-space: normal !important;
}
/* ─── #album-cover inutilisé sur mobile (overlay supprimé) ─────── */
#album-cover {
display: none !important;
}
/* ─── Champ réponse + bouton ✓ ──────────────────────────────────────────── */
.answer-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 12px !important;
padding: 0 !important;
width: 100% !important;
position: static !important;
}
input#answer {
position: static !important;
top: auto !important;
right: auto !important;
flex: 1 !important;
width: auto !important;
max-width: none !important;
font-size: clamp(14px, 4vw, 17px) !important;
height: 44px !important;
padding: 8px 12px !important;
border-radius: 999px !important;
}
#mobile-submit {
display: flex !important;
position: static !important;
top: auto !important;
right: auto !important;
flex-shrink: 0;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: #19c37d !important;
color: #fff !important;
border: none !important;
font-size: 18px !important;
font-weight: 800 !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28) !important;
cursor: pointer !important;
z-index: 10 !important;
pointer-events: auto !important;
-webkit-tap-highlight-color: transparent;
}
.is-mobile .answer-submit-wrap,
.answer-submit-wrap {
position: static !important;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
/* ─── Points container ──────────────────────────────────────────────────── */
#points.points-container {
width: 100%;
text-align: center;
}
}
.dialog-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.dialog-box {
background: #111726;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 28px 32px;
border-radius: 14px;
text-align: center;
color: #e8eefc;
font-size: 16px;
font-weight: 600;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
min-width: 280px;
}
@media (max-width: 768px) {
/* Affiche les onglets classement/historique en mobile, style pilule */
.podium-tabs {
display: flex !important;
gap: 8px;
margin: 10px 16px 0;
background: rgba(255, 255, 255, 0.06);
border-radius: 999px;
padding: 4px;
}
.podium-tab {
flex: 1;
padding: 10px 12px;
border: none !important;
border-radius: 999px;
background: transparent;
color: rgba(255, 255, 255, 0.5);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
margin: 0 !important;
}
.podium-tab.active {
background: #6366f1;
color: #fff;
}
.podium-right {
display: block !important;
width: 100% !important;
border-left: none !important;
border-top: none !important;
max-height: 300px !important;
overflow-y: auto !important;
}
/* Cache le badge de classement joueur (my-place) sur mobile */
.my-place {
display: none !important;
}
.podium-bravo-score {
display: none !important;
}
/* Podium en colonne verticale sur mobile */
.podium-screen {
flex-direction: column !important;
width: 100vw !important;
height: auto !important;
max-height: 100vh !important;
overflow-y: auto !important;
border-radius: 0 !important;
}
.podium-left {
width: 100% !important;
padding: 20px 16px 10px !important;
}
/* Restart timer bien calé */
#restart-timer.podium-restart {
position: relative !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
width: 100% !important;
text-align: center !important;
margin-top: 10px !important;
font-size: 11px !important;
padding: 4px 8px !important;
white-space: normal !important;
word-break: break-word !important;
}
}
@media (max-width: 420px) {
.volume-container {
max-width: 110px !important;
}
.volume-control input[type='range'] {
width: 70px !important;
}
}
.dialog-buttons {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
.dialog-btn {
padding: 9px 24px;
border-radius: 9px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
box-shadow: none;
}
.dialog-btn.confirm {
background: rgba(255, 77, 77, 0.15);
color: #ffffff;
border-color: rgba(255, 77, 77, 0.35);
}
.dialog-btn.confirm:hover {
background: rgba(255, 77, 77, 0.28);
}
.dialog-btn.cancel {
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.1);
}
.dialog-btn.cancel:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
/* ── Lang switcher ── */
.lang-switcher {
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
margin-left: 8px !important;
flex-shrink: 0 !important;
order: -1 !important;
}
.lang-btn {
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.35) !important;
font-size: 12px !important;
font-weight: 700 !important;
cursor: pointer !important;
padding: 0 5px !important;
height: auto !important;
line-height: 1 !important;
width: auto !important;
min-width: unset !important;
border-radius: 0 !important;
letter-spacing: 0.5px !important;
text-shadow: none !important;
-webkit-font-smoothing: antialiased !important;
margin-top: 0 !important;
vertical-align: middle !important;
transition: color 0.2s;
}
.lang-btn:focus,
.lang-btn:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.lang-btn.active {
color: #fff !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.lang-sep {
color: rgba(255, 255, 255, 0.2);
font-size: 11px;
line-height: 1;
display: inline-flex;
align-items: center;
pointer-events: none;
}
@media (max-width: 768px) {
.lang-switcher {
display: none !important;
}
}
@media (max-width: 768px) {
html.podium-active #podium {
right: 0 !important;
}
}
/* fin du fichier */
@media (min-width: 1101px) and (max-width: 1800px) {
.timer-labels {
gap: 4px !important;
overflow: hidden !important;
justify-content: flex-start !important;
}
#skip-wrapper {
flex-shrink: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
gap: 3px !important;
margin-left: auto !important;
}
#skip-btn,
#auto-skip-toggle {
height: 22px !important;
font-size: 9px !important;
padding: 0 7px !important;
min-width: 0 !important;
flex-shrink: 1 !important;
width: auto !important;
max-width: 90px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
letter-spacing: 0.03em !important;
}
.volume-container {
flex-shrink: 0 !important;
max-width: 120px !important;
}
}
/* ── Réactions chat ── */
.chat-msg {
position: relative;
padding: 3px 8px;
margin-bottom: 20px !important;
background: rgba(255, 255, 255, 0.04);
border-radius: 6px;
border: none;
word-break: break-word;
font-size: 15px;
line-height: 1.4;
transition: background 0.15s;
}
.chat-msg:hover {
background: rgba(255, 255, 255, 0.08);
border-radius: 6px;
}
.chat-msg-body {
display: flex;
align-items: center;
flex-wrap: nowrap !important;
gap: 6px;
width: 100%;
}
.chat-msg-content {
flex: 1;
min-width: 0;
word-break: break-word;
white-space: normal;
overflow: visible;
text-overflow: unset;
}
.chat-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
align-self: center;
}
.reaction-trigger {
opacity: 1;
background: none !important;
border: none !important;
box-shadow: none !important;
cursor: pointer;
font-size: 13px;
padding: 0 2px;
margin-left: auto;
transition: opacity 0.15s;
flex-shrink: 0;
line-height: 1;
}
.chat-msg:hover .reaction-trigger {
opacity: 1;
}
.reaction-picker {
position: absolute;
right: 8px;
top: calc(100% - 4px);
z-index: 999;
display: flex;
flex-direction: row;
gap: 2px;
background: #1a1f2e;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 4px 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.reaction-picker.hidden {
display: none;
}
.reaction-emoji {
background: none !important;
border: none !important;
box-shadow: none !important;
font-size: 15px !important;
cursor: pointer;
border-radius: 4px;
padding: 1px 2px !important;
transition: transform 0.1s;
line-height: 1;
}
.reaction-emoji:hover {
background: rgba(255, 255, 255, 0.12) !important;
transform: scale(1.15);
}
.reaction-bar {
position: absolute;
bottom: -18px;
left: 8px;
display: flex;
flex-wrap: wrap;
gap: 3px;
z-index: 10;
}
.reaction-pill {
background: #1a1f2e;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 1px 5px;
font-size: 11px;
cursor: default;
color: #fff;
display: inline-flex !important;
align-items: center;
gap: 2px;
line-height: 1.4;
height: auto !important;
width: auto !important;
}
.reaction-count {
font-size: 10px;
color: rgba(255, 255, 255, 0.7);
}
.reaction-trigger,
.reaction-emoji,
.reaction-pill {
width: auto !important;
height: auto !important;
min-width: unset !important;
min-height: unset !important;
background-color: transparent !important;
font-size: inherit !important;
font-weight: normal !important;
display: inline-flex !important;
padding: 0 !important;
}
.reaction-picker .reaction-emoji {
padding: 1px 3px !important;
margin: 0 !important;
height: auto !important;
width: auto !important;
min-height: unset !important;
min-width: unset !important;
font-size: 16px !important;
line-height: 1 !important;
background-color: transparent !important;
}
.chat-msg:nth-child(odd) {
background: rgba(255, 255, 255, 0.02);
border-radius: 6px;
}
.chat-msg:has(.reaction-bar:not(:empty)) {
margin-bottom: 24px !important;
}
/* ─── SFX toggle */
.sfx-toggle-btn {
display: flex;
align-items: center;
gap: 6px;
height: 30px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 4px 12px;
cursor: pointer;
color: #fff;
font-size: 14px;
transition:
background 0.2s,
color 0.2s;
flex-shrink: 0;
width: fit-content;
}
.sfx-toggle-btn.muted {
background: rgba(255, 80, 80, 0.2);
border-color: rgba(255, 80, 80, 0.4);
color: #ff5555;
}
.sfx-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
white-space: nowrap;
}
.volume-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
/* ─── SFX toggle responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
.sfx-toggle-btn {
height: 28px;
padding: 3px 8px;
font-size: 12px;
}
.sfx-label {
font-size: 10px;
}
.volume-wrapper {
gap: 4px;
}
}
@media (max-width: 420px) {
.sfx-toggle-btn {
height: 26px;
padding: 2px 7px;
font-size: 11px;
}
.sfx-label {
font-size: 9px;
letter-spacing: 0;
}
}
@media (max-width: 768px) {
#global-result:empty {
display: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
#timer-container {
margin-bottom: 0px !important;
}
#result {
min-height: 32px !important;
margin-top: 2px !important;
margin-bottom: 2px !important;
}
#result:empty {
visibility: hidden !important;
min-height: 32px !important;
}
}
@media (max-width: 768px) {
#podium-winner-name {
display: none !important;
}
.podium-bravo-rank {
margin-bottom: 20px;
}
}
.quest-nav-icon {
position: relative;
display: flex;
align-items: center;
font-size: 18px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.quest-nav-icon:hover {
transform: scale(1.2);
}
.player-elo-badge-wrap {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 4px;
cursor: pointer;
}
.player-elo-badge {
width: 38px;
height: 38px;
object-fit: contain;
cursor: pointer;
}
.elo-hover-card-fixed {
position: fixed;
background: #0d1117;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
padding: 8px 12px;
white-space: nowrap;
z-index: 9999;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
pointer-events: none;
}
.elo-hover-tier {
color: #e8eefc;
font-weight: 700;
font-size: 13px;
}
.elo-hover-score {
color: #9aa3b2;
font-size: 12px;
margin-top: 2px;
}
.elo-hover-rank {
color: #a78bfa;
font-size: 11px;
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (orientation: landscape) and (max-height: 820px) {
#game-layout {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
height: calc(100dvh - 55px) !important;
}
.col-center {
overflow-y: auto !important;
overflow-x: hidden !important; /* jamais juste overflow:auto sur les 2 axes — sinon même bug qu'on a eu sur mobile (overflow-x hidden + overflow-y visible qui calcule en auto) */
}
}
/* ─── Score breakdown card ─────────────────────────────────────────────────── */
#auto-focus-row {
position: relative;
}
#score-breakdown-card {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
width: 180px;
background: #131729;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 14px;
padding: 14px 12px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
#score-breakdown-card .sbc-total {
font-size: 40px;
font-weight: 800;
color: #4ade80;
line-height: 1;
text-align: center;
margin-bottom: 3px;
}
#score-breakdown-card .sbc-label {
font-size: 10px;
color: #4a5580;
text-transform: uppercase;
letter-spacing: 0.08em;
text-align: center;
margin-bottom: 10px;
}
#score-breakdown-card .sbc-rows {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
#score-breakdown-card .sbc-row {
display: flex;
justify-content: space-between;
align-items: center;
}
#score-breakdown-card .sbc-row-label {
font-size: 12px;
color: #fff;
display: flex;
align-items: center;
gap: 5px;
}
#score-breakdown-card .sbc-row-pts {
font-size: 12px;
color: #4ade80;
font-weight: 600;
}
#score-breakdown-card .sbc-row {
opacity: 0;
transition: opacity 0.25s ease;
}
#score-breakdown-card .sbc-row.visible {
opacity: 1;
}
/* Responsive — masqué en dessous de 900px */
@media (max-width: 900px) {
#score-breakdown-card {
display: none !important;
}
}
/* Taille réduite entre 900px et 1100px */
@media (min-width: 900px) and (max-width: 1100px) {
#score-breakdown-card {
width: 155px;
padding: 12px 10px;
}
#score-breakdown-card .sbc-total {
font-size: 34px;
}
}
#__cursed-portal {
position: fixed !important;
top: 0 !important;
left: 50px !important;
width: calc(100vw - 50px) !important;
height: 100vh !important;
display: grid !important;
place-items: center !important;
pointer-events: none !important;
z-index: 9999 !important;
margin: 0 !important;
transform: none !important;
}
#__cursed-toast {
max-width: 90vw;
box-sizing: border-box;
}
@media (max-width: 600px) {
#__cursed-portal {
left: 0 !important;
width: 100vw !important;
}
#__cursed-toast {
padding: 10px 14px !important;
min-width: unset !important;
width: 65vw !important;
max-width: 260px !important;
font-size: 12px !important;
}
#__cursed-toast #__cursed-skull { font-size: 24px !important; }
#__cursed-toast #__cursed-xp { font-size: 18px !important; }
}