/* ---------- Page des viewers (téléphone d'abord, tablette ensuite) ---------- */

body.viewer { background: rgb(var(--veil-rgb)); }

/* Le tableau de bord défile dans sa propre zone (plus fluide sur iPhone). */
.v-main {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  transition: opacity .6s ease, visibility .6s;
  zoom: var(--ts, 1);
}
.v-main > * { flex: none; }
body.viewer:not(.at-home) .v-main { opacity: 0; visibility: hidden; pointer-events: none; }

.v-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px 0 0;
}
.v-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 99px;
  background: rgba(var(--veil-rgb), .85);
  border: 1px solid rgba(var(--accent-rgb), .4);
  font: 600 14px/1 var(--font-title);
  letter-spacing: .08em;
  color: var(--gold-light);
}
.v-status .dot { width: 10px; height: 10px; border-radius: 50%; background: #8a8a8a; }
.v-status.live .dot { background: #ff4d6d; box-shadow: 0 0 10px #ff4d6d; animation: blink 1.4s ease-in-out infinite; }
.v-status.wait .dot { background: var(--gold); }
.v-sound { width: 44px; height: 44px; font-size: 20px; }

/* Panneaux à la taille d'un téléphone */
.v-main .panel { padding: 12px 14px; border-radius: 20px; }
.v-main .panel-head h2 { font-size: calc(19px * var(--fs-title, 1)); }
.v-main .panel-head h3 { font-size: calc(18px * var(--fs-title, 1)); }
.v-main .panel .count { font-size: 15px; min-width: 34px; }

.v-pinned { min-height: 64px; padding: 12px 16px; }
.v-pinned p { font-size: calc(clamp(20px, 5.6vw, 30px) * var(--fs-pinned, 1)); max-height: none; }
.v-pinned .pinned-icon { font-size: 22px; margin-top: 2px; }

.v-queue { display: flex; flex-direction: column; }
.v-queue .queue-current { padding: 10px 12px; gap: 12px; border-radius: 16px; }
.v-queue .queue-current .who strong { font-size: clamp(20px, 6vw, 28px); }
.v-queue .queue-current .who small { font-size: 15px; }
.v-queue .queue-current .gift-icon { width: 44px; height: 44px; font-size: 32px; }
.v-queue .queue-current.empty { min-height: 56px; font-size: 17px; }
.v-queue .queue-list { overflow: visible; flex: none; }
.v-queue .queue-list li { font-size: 18px; padding: 6px 0; }
.v-queue .queue-list .who small { font-size: 14px; }
.v-queue .queue-list .gift-icon { width: 30px; height: 30px; font-size: 22px; }
.v-queue .queue-list li.sep { padding-left: 34px; font-size: 11px; }

.v-board { height: 230px; display: flex; flex-direction: column; }
.v-board .board-item { font-size: calc(clamp(19px, 5.4vw, 26px) * var(--fs-board, 1)); padding: 12px 4px; }

.v-tops { display: grid; gap: 12px; }
.v-tops .panel { display: flex; flex-direction: column; }
.v-tops .side-list { overflow: visible; }
.v-tops .side-list li { font-size: 17px; padding: 5px 0; }
.v-tops .side-list .value { font-size: 15px; }

.v-foot {
  margin: 4px 0 0;
  text-align: center;
  font: 500 13px/1 var(--font-title);
  letter-spacing: .25em;
  color: rgba(var(--accent-rgb), .55);
}

/* En attente (pas de lien, ou live pas commencé) */
.v-wait {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 16, 60, .9), rgba(8, 4, 14, .96));
  transition: opacity .6s ease, visibility .6s;
}
.v-wait.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.v-wait-card { max-width: 440px; text-align: center; }
.v-wait-card .home-kicker { font-size: 13px; }
.v-wait-card h1 { margin: 14px 0 0; font: 700 clamp(26px, 7vw, 36px)/1.15 var(--font-title); color: var(--gold-light); }
.v-wait-card p { margin: 8px 0 0; font: italic 500 20px/1.35 var(--font-text); color: #f7ead0; }

/* ---------- Jeu des Portes sur téléphone ---------- */

body.viewer.at-home .stage-wrap,
body.viewer.at-home .v-game-info { visibility: hidden; }
body.viewer .stage-veil { z-index: 2; }
body.viewer.at-home .stage-veil { opacity: 1; background: rgb(var(--veil-rgb)); }

.v-game-info {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font: 600 13px/1.35 var(--font-title);
  color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  transition: opacity .4s ease;
}
.v-game-info:empty { display: none; }
body.viewer.focusing .v-game-info { opacity: 0; }

/* Téléphone en portrait : la scène occupe le haut de l'écran, le résultat s'affiche dessous. */
@media (orientation: portrait) {
  .v-game-info::after {
    content: 'Tournez votre téléphone pour agrandir les portes';
    display: block;
    margin-top: 6px;
    font: italic 500 14px/1.2 var(--font-text);
    color: rgba(243, 233, 210, .6);
  }
  body.viewer .focus { align-items: flex-start; padding-top: max(16px, env(safe-area-inset-top)); }
  body.viewer .focus-door.split { transform: translateY(-6vh) scale(.62); }
  body.viewer .result {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-height: 56vh;
    padding: 18px 16px;
    border-radius: 22px;
    transform: none;
    animation: v-result-in .8s cubic-bezier(.2, .9, .3, 1) both;
  }
}
@keyframes v-result-in { from { opacity: 0; transform: translateY(40px); } }

body.viewer .result-number { font-size: clamp(60px, 16vmin, 110px); }
body.viewer .result-title { font-size: clamp(22px, 5.5vmin, 36px); }
body.viewer .result-text { font-size: clamp(18px, 4.6vmin, 26px); }
body.viewer .result-stats { font-size: 15px; }
body.viewer .winners li { font-size: 18px; }
body.viewer .winners img,
body.viewer .winners .avatar { width: 34px; height: 34px; }

/* Animations des cadeaux un peu plus compactes sur petit écran */
@media (max-width: 520px) {
  .cel-name { font-size: calc(clamp(34px, 11vw, 60px) * var(--fs-anim, 1)); }
  .cel-text { font-size: calc(clamp(20px, 5.6vw, 30px) * var(--fs-anim, 1)); }
  .env-fly, .env-fly.custom { width: 86vw; }
}

/* ---------- Tablette : deux colonnes ---------- */

@media (min-width: 760px) {
  .v-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    gap: 14px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .v-head, .v-pinned, .v-foot { grid-column: 1 / -1; }
  .v-queue { grid-row: span 2; }
  .v-board { height: 300px; }
  .v-tops { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .v-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .v-tops { grid-template-columns: 1fr; }
}

/* Messages de l'univers : bouton enveloppe et liste des pseudos */
.v-head-tools { display: inline-flex; gap: 10px; align-items: center; }
.v-letters { position: relative; width: 48px; height: 48px; font-size: 22px; }
.v-letters .v-env { display: grid; place-items: center; width: 28px; height: 28px; }
.v-letters .v-env img { width: 100%; height: 100%; object-fit: contain; }
.v-letters .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: linear-gradient(180deg, #ffd98a, #d9a94a);
  color: #2a1606;
  font: 700 13px/22px var(--font-title);
  box-shadow: 0 0 10px rgba(255, 210, 120, .7);
}
.v-letters-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: end center;
  padding: 12px;
  background: rgba(6, 3, 12, .6);
  animation: fade-in .3s ease;
}
.vlp-card {
  width: min(560px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  border-radius: 24px;
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b));
  border: 1px solid rgba(var(--accent-rgb), .55);
  box-shadow: 0 -10px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 200, 120, .15);
  animation: v-result-in .45s cubic-bezier(.2, .9, .3, 1) both;
}
.vlp-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vlp-card h2 { margin: 0; font: 700 20px/1.2 var(--font-title); color: var(--gold-light); }
.vlp-hint { margin: 4px 0 10px; font-style: italic; color: rgba(243, 233, 210, .65); }
.vlp-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vlp-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 6px;
  border: 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), .15);
  background: none;
  color: var(--ink);
  font: 500 19px/1.2 var(--font-text);
  text-align: left;
  cursor: pointer;
}
.vlp-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlp-list .gift-icon { width: 30px; height: 30px; font-size: 22px; }
.vlp-list .mult { color: var(--gold); font: 700 14px/1 var(--font-title); }
.vlp-list .reread {
  flex: none;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(var(--accent-rgb), .45);
  font: 600 12px/1.2 var(--font-title);
  color: var(--gold-light);
}
.celebrate .letter-card { z-index: 2; }
.v-board .end-live { padding: 10px 12px; }
.v-board .end-live-title { font-size: calc(21px * var(--fs-end, 1)); }
.v-board .end-live .board-item { font-size: calc(clamp(20px, 5.6vw, 28px) * var(--fs-end, 1)); }
.v-race { width: 48px; height: 48px; font-size: 22px; }
.v-race-full { z-index: 75; padding: max(14px, env(safe-area-inset-top)) 10px max(40px, env(safe-area-inset-bottom)); }
.v-race-full .ss-hint { display: none; }
.v-race-tools { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; display: flex; gap: 8px; z-index: 3; }
.v-race-tools .icon-btn { width: 46px; height: 46px; font-size: 20px; background: rgba(var(--veil-rgb), .8); }
.v-race-picker {
  position: absolute;
  z-index: 4;
  left: 10px;
  right: 10px;
  top: calc(max(10px, env(safe-area-inset-top)) + 56px);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 20px;
  background: rgba(var(--veil-rgb), .97);
  border: 1px solid rgba(var(--accent-rgb), .55);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .7);
}
.v-race-picker ul { flex: 1; min-height: 0; }
.v-race-picker input[type=checkbox] { width: 24px; height: 24px; flex: none; accent-color: #d9a94a; min-height: 0; }
.v-race-hint { margin: 0 0 8px; font-style: italic; color: rgba(243, 233, 210, .8); }
.v-race-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.v-race-actions .btn { min-height: 46px; font-size: 15px; padding: 6px 10px; }