/* ---------- Tableau de bord du live ---------- */

:root {
  --dash-bottom-h: calc(92px + env(safe-area-inset-bottom));
  --dash-gap: clamp(10px, 1.5vmin, 16px);
}

.dash {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--dash-ticker-space, 0px) var(--dash-bottom-h);
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dash-gap);
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  zoom: var(--ts, 1);
  transition: opacity .6s ease, visibility .6s;
}
body:not(.at-home) .dash { opacity: 0; visibility: hidden; pointer-events: none; }
body.ticker-on .dash { --dash-ticker-space: calc(40px * max(1, var(--fs-ticker, 1))); }

/* Les modules désactivés dans les Réglages disparaissent */
[data-feature].feature-off { display: none !important; }

/* Grille principale : colonnes et zones calculées selon les Réglages (dashboard.js) */
.dash-main {
  grid-row: 1;
  display: grid;
  gap: var(--dash-gap);
  min-height: 0;
  grid-template-rows: var(--pinned-h, 150px) minmax(0, 1fr);
}
.pinned { grid-area: pin; }
.donuts { grid-area: univ; }
.dash-tops { grid-area: tops; }
.board { grid-area: board; }
.queue-col { grid-area: list; }

/* Cadres « verre magique » */
.panel {
  position: relative;
  min-height: 0;
  min-width: 0;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--panel-a), var(--panel-b));
  border: 1px solid rgba(var(--accent-rgb), .45);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 0 24px rgba(var(--accent-rgb), .06);
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.panel-head h2,
.panel-head h3 {
  margin: 0;
  min-width: 0;
  font: 600 calc(22px * var(--fs-title, 1))/1.15 var(--font-title);
  color: var(--c-title, var(--gold-light));
}
.panel-head h2 { font-size: calc(23px * var(--fs-title, 1)); flex: 1; }
.panel .count {
  flex: none;
  min-width: 40px;
  margin-left: auto;
  padding: 3px 11px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .18);
  color: var(--gold-light);
  font: 700 18px/1.2 var(--font-title);
  text-align: center;
}

/* Message épinglé : grande case, texte ajusté à sa longueur */
.pinned {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  overflow: hidden;
}
.pinned-icon { flex: none; font-size: 30px; align-self: flex-start; margin-top: 6px; }
.pinned p {
  flex: 1;
  margin: 0;
  max-height: 100%;
  overflow: hidden;
  font: 600 40px/1.18 var(--font-pinned);
  color: var(--c-pinned, #fff8e6);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  overflow-wrap: anywhere;
}
.pinned p.empty { color: rgba(243, 233, 210, .35); font-style: italic; font-weight: 500; }
.pinned.flash { animation: pin-flash 1.2s ease; }
@keyframes pin-flash { 30% { box-shadow: 0 0 40px rgba(255, 210, 120, .8); } }

/* Colonne Top Likes / Top Gifters */
.dash-tops {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--dash-gap);
  min-height: 0;
  min-width: 0;
}
.dash-tops.single { grid-template-rows: minmax(0, 1fr); }

.donuts,
.likers,
.gifters {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  min-height: 0;
}
.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  scrollbar-width: none;
  zoom: var(--fs-tops, 1);
}
.side-list::-webkit-scrollbar { display: none; }
.side-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .14);
  font-size: 21px;
  color: var(--c-tops, inherit);
}
.side-list li.new { animation: feed-in .45s ease; }
.side-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-list .empty { color: rgba(243, 233, 210, .45); font-style: italic; border: 0; font-size: 18px; }
.side-list .mult { flex: none; font: 700 16px/1 var(--font-title); color: var(--gold); }
.side-list .medal { flex: none; width: 28px; text-align: center; font: 700 17px/1 var(--font-title); color: rgba(var(--accent-light-rgb), .6); }
.side-list .value { flex: none; font: 700 17px/1 var(--font-title); }
.likers .value { color: #ffb3c4; }
.likers .count { background: rgba(255, 140, 170, .18); color: #ffd0da; }
.gifters .value { color: #ffd76a; }
.gifters .count { background: rgba(244, 197, 66, .18); color: #ffe9a8; }
.side-list .value,
.gifters .count { display: inline-flex; align-items: center; gap: 5px; }
.coin { flex: none; width: 1.3em; height: 1.3em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.env-mini { font-size: .9em; }
.env-mini.gift-icon { width: 1.5em; height: 1.5em; font-size: 1em; display: inline-grid; vertical-align: middle; }
h3 .env-mini.gift-icon { width: 1.3em; height: 1.3em; }

/* Case centrale : les messages défilent de bas en haut */
.board {
  display: flex;
  flex-direction: column;
  padding: 14px 20px;
  overflow: hidden;
}
.board-title {
  margin: 0 0 8px;
  text-align: center;
  font: 600 calc(24px * var(--fs-title, 1))/1.15 var(--font-title);
  color: var(--c-title, var(--gold-light));
}
.board-title:empty { display: none; }
.board-window {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.board-window::before,
.board-window::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  z-index: 1;
  pointer-events: none;
}
.board-window::before { top: 0; background: linear-gradient(var(--panel-solid-a), transparent); }
.board-window::after { bottom: 0; background: linear-gradient(transparent, var(--panel-solid-b)); }
.board-track {
  will-change: transform;
  animation: board-up var(--board-dur, 40s) linear infinite;
}
.board-track.still { animation: none; }
@keyframes board-up { to { transform: translateY(-50%); } }
.board-item {
  margin: 0;
  padding: 18px 6px;
  text-align: center;
  font: italic 600 calc(30px * var(--fs-board, 1))/1.3 var(--font-board);
  color: var(--c-board, #f7ead0);
  text-shadow: 0 0 14px rgba(255, 200, 110, .3), 0 1px 2px rgba(0, 0, 0, .9);
}
.board-sep { display: block; text-align: center; color: var(--gold); font-size: 18px; opacity: .8; }

/* Liste à traiter (environ 1/3 de l'écran) + ses boutons */
.queue-col {
  display: flex;
  flex-direction: column;
  gap: var(--dash-gap);
  min-height: 0;
  min-width: 0;
}
.queue {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  min-height: 0;
}
.milestone-chip {
  flex: none;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 140, 170, .2);
  border: 1px solid #ffb3c4;
  color: #ffd6df;
  font: 600 14px/1.2 var(--font-title);
  animation: blink 1.2s ease-in-out infinite;
}

.queue-current {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 214, 130, .22), rgba(255, 180, 90, .06));
  border: 1.5px solid rgba(255, 220, 150, .75);
  box-shadow: 0 0 26px rgba(255, 200, 110, .25);
}
.queue-current.empty {
  justify-content: center;
  border-style: dashed;
  border-color: rgba(var(--accent-rgb), .35);
  background: none;
  box-shadow: none;
  color: rgba(243, 233, 210, .55);
  font-style: italic;
  font-size: 21px;
  min-height: 78px;
  text-align: center;
}
.queue-current, .queue-list { zoom: var(--fs-list, 1); }
.queue-current .who { flex: 1; min-width: 0; }
.queue-current .who strong {
  display: block;
  font: 700 clamp(24px, 3.4vmin, 38px)/1.1 var(--font-title);
  color: var(--c-list, #fff4d0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-current .who small { font-size: 19px; color: rgba(var(--accent-light-rgb), .8); }
.queue-current .kicker { font: 600 13px/1 var(--font-title); letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.queue-current .gift-icon { width: 56px; height: 56px; font-size: 40px; }
.queue-current.pop { animation: current-pop .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes current-pop { from { transform: scale(.94); opacity: .3; } }

.queue-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  scrollbar-width: none;
}
.queue-list::-webkit-scrollbar { display: none; }
.queue-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .14);
  font-size: 22px;
  color: var(--c-list, inherit);
}
.queue-list li.new { animation: feed-in .45s ease; }
.queue-list .rank { flex: none; width: 26px; font: 700 16px/1 var(--font-title); color: rgba(var(--accent-light-rgb), .6); text-align: right; }
.queue-list .who { flex: 1; min-width: 0; }
.queue-list .who .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-list .who small { display: block; font-size: 16px; color: rgba(var(--accent-light-rgb), .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-list li.sep {
  border: 0;
  padding: 10px 0 2px 36px;
  font: 600 13px/1 var(--font-title);
  letter-spacing: .15em;
  color: var(--gold);
  text-transform: uppercase;
}

.gift-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 1;
}
.gift-icon img { width: 100%; height: 100%; object-fit: contain; }

.x-btn {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .35);
  background: rgba(0, 0, 0, .25);
  color: rgba(var(--accent-light-rgb), .8);
  font-size: 18px;
  line-height: 1;
}
.x-btn:active { transform: scale(.94); }

.queue-buttons { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; }
.queue-buttons .btn { min-width: 0; min-height: 66px; font-size: 17px; line-height: 1.15; padding: 8px 12px; white-space: normal; }
.queue-buttons .btn-next { font-size: 21px; }

/* Barre du bas : outils à gauche, jeu au milieu, radio à droite */
.dash-bottom {
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.dash-tools { display: flex; gap: 10px; align-items: center; min-width: 0; }
/* L'indicateur de connexion TikTok se range à côté des outils */
body.at-home .live-status {
  top: auto;
  right: auto;
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  left: calc(max(16px, env(safe-area-inset-left)) + 5 * 68px);
  max-width: calc(50vw - 5 * 68px - 200px);
  zoom: var(--ts, 1);
}
.corner-game {
  min-height: 72px;
  border-radius: 24px;
  font-size: 23px;
  white-space: nowrap;
}
.keyhole svg { width: 26px; height: 26px; fill: #2a1646; }
.keyhole {
  background: radial-gradient(circle at 35% 30%, #fff1c0, #d9a94a 60%, #9a6618);
  border-color: rgba(255, 240, 200, .8);
}

/* Radio */
.radio {
  position: relative;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--panel-a), var(--panel-b));
  border: 1px solid rgba(var(--accent-rgb), .45);
}
.radio-open {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.radio-disc {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #e8c77a 0 5px, #2a1646 6px 9px, transparent 10px),
    repeating-radial-gradient(circle, #1a1024 0 2px, #2a1a38 3px 4px);
  border: 1.5px solid rgba(var(--accent-rgb), .6);
}
.radio.playing .radio-disc { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.radio-info { min-width: 0; max-width: min(220px, 16vw); }
.radio-info small { display: block; font: 600 12px/1 var(--font-title); letter-spacing: .15em; color: var(--gold); }
.radio-info strong {
  display: block;
  font: 600 19px/1.3 var(--font-text);
  color: #fff4d0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.radio:not(.playing) .radio-info strong { color: rgba(var(--accent-light-rgb), .55); font-style: italic; }
.radio-buttons { display: flex; gap: 6px; align-items: center; }
.radio-buttons .icon-btn.small { width: 44px; height: 44px; font-size: 17px; }

/* Mini-menu de la radio : volume et playlist */
.radio-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 70;
  width: min(380px, 80vw);
  max-height: min(60vh, 520px);
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 22px;
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b));
  border: 1px solid rgba(var(--accent-rgb), .6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .65);
  animation: drawer-in .25s ease;
}
.radio-menu header { display: flex; align-items: center; gap: 10px; }
.radio-menu header h3 { margin: 0; font: 600 20px/1 var(--font-title); color: var(--gold-light); }
.radio-volume { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; font-size: 20px; }
.radio-volume input { flex: 1; accent-color: #e2b451; min-height: 36px; }
.radio-playlist { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.radio-playlist button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), .14);
  background: none;
  color: var(--ink);
  font: 500 20px/1.2 var(--font-text);
  text-align: left;
}
.radio-playlist button.current { color: #fff4d0; font-weight: 700; }
.radio-playlist button.current::before { content: '♪'; color: var(--gold); }
.radio-playlist .num { width: 26px; color: rgba(var(--accent-light-rgb), .5); font: 600 14px/1 var(--font-title); }

/* ---------- Jeu des Portes : départ, compte à rebours, session ---------- */

.game-start {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 50%, rgba(20, 8, 32, .55), rgba(4, 2, 8, .8));
  animation: fade-in .5s ease;
}
.game-start-card {
  width: min(680px, 100%);
  padding: 30px 34px 34px;
  border-radius: 30px;
  text-align: center;
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b));
  border: 1px solid rgba(var(--accent-rgb), .6);
  box-shadow: 0 0 60px rgba(255, 200, 120, .2), 0 30px 80px rgba(0, 0, 0, .6);
}
.game-start-card h2 { margin: 12px 0 0; font: 700 38px/1.15 var(--font-title); color: var(--gold-light); }
.game-start-card .hint { font-size: 22px; line-height: 1.4; }
.game-start-actions { display: grid; gap: 12px; margin-top: 22px; }

.countdown {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(30, 10, 50, .5), rgba(0, 0, 0, .65));
}
.countdown span {
  font: 700 clamp(120px, 34vmin, 320px)/1 var(--font-title);
  color: #fff3c4;
  text-align: center;
  text-shadow: 0 0 40px rgba(255, 200, 100, .95), 0 0 100px rgba(255, 150, 60, .6);
}
.countdown span.go { font-size: clamp(54px, 11vmin, 120px); padding: 0 20px; }
.countdown span.tick { animation: count-tick .95s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes count-tick {
  from { transform: scale(2.2); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  80% { opacity: 1; }
  to { transform: scale(.8); opacity: 0; }
}

.session-bar {
  position: fixed;
  z-index: 55;
  left: calc(max(16px, env(safe-area-inset-left)) + 72px);
  top: calc(var(--ticker-space, 0px) + 14px);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 460px);
  padding: 6px 8px 6px 20px;
  border-radius: 99px;
  background: rgba(20, 10, 30, .82);
  border: 1.5px solid rgba(var(--accent-rgb), .5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  font: 600 17px/1.2 var(--font-title);
  color: var(--gold-light);
}
.session-bar .btn { flex: none; white-space: nowrap; }
.session-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.small-btn { min-height: 44px !important; padding: 6px 18px !important; font-size: 17px !important; }
body.focusing .session-bar { opacity: 0; pointer-events: none; }

@media (max-width: 1100px) {
  .radio-info { max-width: 110px; }
  .queue-buttons .btn { font-size: 16px; }
  body.at-home .live-status .label { display: none; }
  body.at-home .live-status { padding: 8px 14px; }
}
@media (max-width: 900px), (max-height: 640px) {
  .radio-info { display: none; }
  .corner-game span:not(.btn-icon) { display: none; }
}

/* Diffusion vers la page des viewers : petit voyant */
/* Voyant de diffusion aux viewers : petite pastille sur le bouton Réglages */
.settings-btn { position: relative; }
.cast-status {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e0a84a;
  border: 2px solid rgb(var(--veil-rgb));
  box-shadow: 0 0 6px rgba(224, 168, 74, .8);
  pointer-events: none;
}
.cast-status.on { background: #5fe08a; box-shadow: 0 0 8px rgba(95, 224, 138, .9); }

/* Messages de l'univers : chaque pseudo rouvre sa lettre */
.donuts .side-list li { padding: 0; }
.letter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}
.letter-btn:active { background: rgba(var(--accent-rgb), .12); }
.letter-btn .reread {
  flex: none;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid rgba(var(--accent-rgb), .45);
  font: 600 12px/1.2 var(--font-title);
  letter-spacing: .06em;
  color: var(--gold-light);
}

/* Case centrale : bouton plein écran (en bas à gauche) */
.board { position: relative; }
.box-foot { flex: none; display: flex; justify-content: flex-end; gap: 6px; padding-top: 6px; }
.box-foot .icon-btn { width: 34px; height: 34px; font-size: 15px; opacity: .75; }
.box-foot .icon-btn:hover { opacity: 1; }
.board-full-btn {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  font-size: 18px;
  opacity: .75;
}
.board-full-btn:hover { opacity: 1; }
.board-full {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 4vh 6vw;
  background:
    radial-gradient(ellipse at 50% 50%, var(--panel-a), transparent 70%),
    radial-gradient(circle at 18% 22%, rgba(255, 220, 150, .12), transparent 30%),
    rgb(var(--veil-deep-rgb));
  cursor: pointer;
  animation: fade-in .6s ease;
}
.board-full-window {
  position: relative;
  width: min(1100px, 100%);
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.board-full .board-item { font-size: calc(clamp(34px, 6.4vmin, 76px) * var(--fs-board, 1)); padding: 4vh 2vw; }
.board-full .board-sep { font-size: clamp(22px, 3.4vmin, 40px); }
.board-full .board-track.still { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }

.donuts .side-list li { display: flex; align-items: center; gap: 6px; }
.letter-btn:disabled { cursor: default; opacity: .85; }
.edit-letter { width: 34px; height: 34px; font-size: 15px; opacity: .7; }
.donuts .letter-btn { flex: 1; min-width: 0; }
#letter-edit {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(var(--accent-rgb), .45);
  background: rgba(0, 0, 0, .35);
  color: var(--ink);
  font: 500 20px/1.4 var(--font-text);
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
}

/* ---------- Écran de veille « présentation » : l'étoile présente les cases ---------- */
.tour {
  position: fixed;
  inset: 0;
  z-index: 92;
  cursor: pointer;
  opacity: 0;
  transition: opacity .6s ease;
}
.tour.in { opacity: 1; }
.tour-spot {
  position: fixed;
  border-radius: 26px;
  box-shadow: 0 0 0 200vmax rgba(6, 3, 12, .8), 0 0 0 3px rgba(255, 220, 140, .9), 0 0 40px 8px rgba(255, 210, 120, .55);
  transition: left .8s cubic-bezier(.5, 0, .2, 1), top .8s cubic-bezier(.5, 0, .2, 1), width .8s cubic-bezier(.5, 0, .2, 1), height .8s cubic-bezier(.5, 0, .2, 1);
  pointer-events: none;
  animation: tour-glow 2.4s ease-in-out infinite;
}
@keyframes tour-glow { 50% { box-shadow: 0 0 0 200vmax rgba(6, 3, 12, .8), 0 0 0 3px rgba(255, 235, 170, 1), 0 0 60px 14px rgba(255, 210, 120, .7); } }
.tour-star {
  position: fixed;
  transition: left .8s cubic-bezier(.5, 0, .2, 1), top .8s cubic-bezier(.5, 0, .2, 1);
  filter: drop-shadow(0 0 18px rgba(255, 210, 110, .8));
}
.tour-star-body { position: absolute; inset: 0; animation: tour-float 2.6s ease-in-out infinite; }
.tour-star-body svg,
.tour-star-body img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes tour-float { 50% { transform: translateY(-6%) rotate(4deg); } }
.tour-arm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a, 0deg));
}
.tour-arm svg {
  position: absolute;
  left: calc(var(--s) * .36);
  top: calc(var(--s) * -.11);
  width: calc(var(--s) * .44);
  height: calc(var(--s) * .22);
  animation: tour-point 1.2s ease-in-out infinite;
}
@keyframes tour-point { 50% { transform: translateX(18%); } }
.tour-star.flying .tour-arm,
.tour-star.hidden-arm .tour-arm { display: none; }
.tour-star.flying .tour-star-body { animation: none; }
.tour-bubble {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vmin, 34px) clamp(20px, 3.4vmin, 40px);
  border-radius: 30px;
  background: linear-gradient(170deg, #fffaf0, #f4e6c8);
  border: 3px solid #c99a3c;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 210, 130, .3);
  color: #2e1c0c;
  overflow: hidden;
}
.tour-bubble.pop { animation: tour-pop .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tour-pop { from { transform: scale(.85); opacity: 0; } }
.tour-title { margin: 0 0 .4em; font-family: var(--font-star); font-weight: 700; font-size: calc(var(--tour-fs, 30px) * 1.15); line-height: 1.15; color: var(--c-star, #6b3d0e); }
.tour-text { margin: 0; font-family: var(--font-star); font-weight: 500; font-size: var(--tour-fs, 30px); line-height: 1.4; white-space: pre-line; color: var(--c-star, inherit); }
.tour-tail {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #fbf2de;
  border: 3px solid #c99a3c;
  transform: rotate(45deg);
}
.tour-bubble { overflow: visible; }
.tail-left .tour-tail { left: -14px; border-top: 0; border-right: 0; }
.tail-right .tour-tail { right: -14px; border-bottom: 0; border-left: 0; }
.tail-top .tour-tail { top: -14px; border-right: 0; border-bottom: 0; }
.tail-bottom .tour-tail { bottom: -14px; border-left: 0; border-top: 0; }
.tour-dots { position: fixed; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.tour-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--accent-light-rgb), .3); }
.tour-dots span.on { background: var(--gold-light); box-shadow: 0 0 8px var(--gold); }

/* Case centrale : un message à la fois, qui glisse vers le suivant (board.js) */
.board-track.slides { position: absolute; inset: 0; animation: none; overflow: hidden; }
.board-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4%;
  opacity: 0;
  transform: translateX(70%);
  transition: transform .9s cubic-bezier(.65, 0, .3, 1), opacity .9s ease;
}
.board-slide.on { opacity: 1; transform: none; }
.board-slide.off { opacity: 0; transform: translateX(-70%); }
.board-slide.reset { transition: none; }
.board-slide .board-item { padding: 0; max-width: 100%; overflow-wrap: anywhere; }
.board-full .board-track.slides { position: absolute; }

/* Fin du live : message spécial par-dessus la case centrale */
.end-live {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 14px 20px;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), .22), transparent 60%),
    linear-gradient(160deg, var(--panel-solid-a), var(--panel-solid-b));
  box-shadow: inset 0 0 40px rgba(var(--accent-rgb), .25);
  animation: end-in .9s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes end-in { from { opacity: 0; transform: scale(.96); } }
.end-live-title {
  margin: 4px 0 10px;
  text-align: center;
  font: 700 calc(28px * var(--fs-end, 1))/1.15 var(--font-title);
  color: var(--c-end, var(--gold-light));
  text-shadow: 0 0 18px rgba(var(--accent-rgb), .6);
}
.end-live-title:empty { display: none; }
.end-live .board-item { font-size: calc(32px * var(--fs-end, 1)); color: var(--c-end, #fff4d8); font-family: var(--font-board); }
.end-live .board-window::before { background: linear-gradient(var(--panel-solid-a), transparent); }
.board-full.end .board-item { font-size: calc(clamp(34px, 6.4vmin, 76px) * var(--fs-end, 1)); color: var(--c-end, #fff4d8); }
.end-btn.on { background: rgba(var(--accent-rgb), .35); box-shadow: 0 0 18px rgba(var(--accent-rgb), .7); }

/* Top Likes en plein écran */
.rank-full {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 4vh 6vw;
  background:
    radial-gradient(ellipse at 50% 30%, var(--panel-a), transparent 70%),
    rgb(var(--veil-deep-rgb));
  cursor: pointer;
  animation: fade-in .6s ease;
}
.rank-full-card { width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column; }
.rank-full h2 {
  margin: 0;
  text-align: center;
  font: 700 calc(clamp(34px, 6vmin, 72px) * var(--fs-title, 1))/1.1 var(--font-title);
  color: var(--c-title, var(--gold-light));
  text-shadow: 0 0 24px rgba(var(--accent-rgb), .6);
}
.rank-full-total { margin: 1vh 0 3vh; text-align: center; font: 600 clamp(20px, 3.2vmin, 38px)/1.2 var(--font-title); color: #ffd0da; }
.rank-full-list { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; color: var(--c-tops, var(--ink)); }
.rank-full-list li {
  display: flex;
  align-items: center;
  gap: 2vmin;
  padding: 1.1vmin 1vmin;
  border-bottom: 1px solid rgba(var(--accent-rgb), .18);
  font: 600 calc(min(clamp(22px, 4.2vmin, 54px), 52vh / var(--n, 10)) * var(--fs-tops, 1))/1.2 var(--font-text);
  animation: feed-in .45s ease both;
}
.rank-full-list li:nth-child(-n+3) { font-size: calc(min(clamp(26px, 5vmin, 64px), 60vh / var(--n, 10)) * var(--fs-tops, 1)); }
.rank-full-list .medal { flex: none; width: 2em; text-align: center; font-family: var(--font-title); color: rgba(var(--accent-light-rgb), .7); }
.rank-full-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-full-list .value { flex: none; font-family: var(--font-title); color: #ffb3c4; }
.rank-full-list .empty { justify-content: center; font-style: italic; opacity: .6; border: 0; }

/* Liste : toucher un nom fait apparaître ↑ (prendre cette personne tout de suite) */
.queue-list li[data-id] { cursor: pointer; }
.queue-list li.picked { background: rgba(var(--accent-rgb), .12); border-radius: 12px; }
.up-btn {
  flex: none;
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 220, 150, .85);
  background: linear-gradient(180deg, #f3d687, #c9963c);
  color: #2a1606;
  font: 700 24px/1 var(--font-title);
  box-shadow: 0 0 14px rgba(255, 210, 120, .6);
  animation: current-pop .35s cubic-bezier(.2, 1.4, .4, 1);
}
.queue-list li.picked .up-btn { display: grid; place-items: center; }
.up-btn:active { transform: scale(.93); }