/* ============================================================
   STAR VOCAL — salon karaoke + score vocal
   Ce fichier ne s'active que lorsque body.starmaker-mode est actif.
   ============================================================ */

#starmaker-panel { display: none; }

body.starmaker-mode #camera-container,
body.starmaker-mode #other-cameras-container,
body.starmaker-mode #video-container,
body.starmaker-mode #quiz-gamebar,
body.starmaker-mode #quizzz-music-panel,
body.starmaker-mode #karaotube-panel {
  display: none !important;
}

body.starmaker-mode #main-chat {
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 52, 182, .13), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(115, 82, 255, .18), transparent 25%),
    linear-gradient(180deg, rgba(9, 8, 24, .96), rgba(5, 5, 17, .98)) !important;
}

body.starmaker-mode #starmaker-panel {
  order: 1 !important;
  position: relative;
  display: flex !important;
  flex: 0 1 64% !important;
  min-height: 390px;
  max-height: 66%;
  width: 100%;
  padding: 10px;
  gap: 9px;
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
  font-family: Inter, Poppins, Arial, sans-serif;
}

body.starmaker-mode #messages {
  order: 2 !important;
  flex: 1 1 36% !important;
  min-height: 145px !important;
  border-top: 1px solid rgba(255, 105, 206, .24) !important;
  background:
    linear-gradient(180deg, rgba(16, 12, 34, .78), rgba(6, 6, 17, .90)) !important;
  box-shadow: inset 0 10px 24px rgba(0,0,0,.22) !important;
}

body.starmaker-mode #messages::before {
  content: "💬 CHAT STAR VOCAL";
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  width: fit-content;
  margin: 0 0 7px 2px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 94, 198, .35);
  border-radius: 999px;
  background: rgba(20, 10, 36, .88);
  color: #ffb9e6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .9px;
  box-shadow: 0 0 14px rgba(255, 47, 174, .12);
}

body.starmaker-mode #message-input-container {
  border-top-color: rgba(255, 85, 194, .35) !important;
  background: linear-gradient(180deg, rgba(16, 10, 34, .98), rgba(5, 5, 16, .99)) !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.34) !important;
}

.stm-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -25%, rgba(255, 75, 203, .26), transparent 38%),
    linear-gradient(145deg, rgba(30, 15, 55, .97), rgba(11, 11, 29, .98) 56%, rgba(20, 10, 42, .98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 28px rgba(0,0,0,.40),
    0 0 28px rgba(153, 68, 255, .10);
  overflow: hidden;
  box-sizing: border-box;
}

.stm-shell::before,
.stm-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(1px);
  opacity: .72;
}
.stm-shell::before {
  width: 180px;
  height: 180px;
  left: -105px;
  top: -110px;
  background: radial-gradient(circle, rgba(255, 47, 174, .50), rgba(255,47,174,0) 70%);
}
.stm-shell::after {
  width: 210px;
  height: 210px;
  right: -120px;
  top: -120px;
  background: radial-gradient(circle, rgba(86, 86, 255, .46), rgba(86,86,255,0) 70%);
}

.stm-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
}

.stm-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 6px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}
.stm-brand-logo {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #ff3cae, #7a4cff 62%, #3ba9ff);
  box-shadow: 0 0 18px rgba(255, 54, 177, .35);
  font-size: 22px;
}
.stm-brand-copy strong {
  display: block;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 1.6px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,101,207,.5);
}
.stm-brand-copy small {
  display: block;
  margin-top: 4px;
  color: #b8acd3;
  font-size: 9px;
  letter-spacing: .45px;
}

.stm-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
#starmaker-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 13px 0 38px;
  border: 1px solid rgba(255, 111, 207, .38);
  border-radius: 13px;
  outline: none;
  background: rgba(8, 8, 22, .85);
  color: #fff;
  font-size: 13px;
  box-shadow: inset 0 0 18px rgba(0,0,0,.2);
}
#starmaker-search:focus {
  border-color: #ff54be;
  box-shadow: 0 0 0 3px rgba(255, 84, 190, .12), inset 0 0 18px rgba(0,0,0,.2);
}
.stm-search-icon {
  position: absolute;
  left: 13px;
  z-index: 1;
  color: #ff70cb;
  pointer-events: none;
}
.stm-btn {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 0 13px;
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .2px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(72,65,110,.96), rgba(33,28,60,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 13px rgba(0,0,0,.25);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.stm-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.stm-btn:disabled { opacity: .42; cursor: not-allowed; }
.stm-btn-primary {
  border-color: rgba(255, 129, 217, .62);
  background: linear-gradient(180deg, #ff4cba, #b32084);
  box-shadow: 0 0 16px rgba(255, 59, 177, .23), inset 0 1px 0 rgba(255,255,255,.25);
}
.stm-btn-cyan { background: linear-gradient(180deg, #25c7da, #116985); }
.stm-btn-danger { background: linear-gradient(180deg, #ff5757, #9f171f); }
.stm-btn-success { background: linear-gradient(180deg, #48d774, #178b42); }
.stm-btn-small { min-height: 31px; padding: 0 9px; font-size: 10px; border-radius: 10px; }

#starmaker-search-results {
  position: absolute;
  z-index: 500;
  top: 58px;
  left: 9px;
  right: 9px;
  display: none;
  max-height: min(56vh, 390px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(255, 103, 205, .45);
  border-radius: 14px;
  background: rgba(9, 7, 22, .985);
  box-shadow: 0 18px 44px rgba(0,0,0,.72), 0 0 28px rgba(255, 53, 181, .16);
}
#starmaker-search-results.open { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.stm-result {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(35,24,54,.98), rgba(15,14,32,.98));
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.stm-result:hover { border-color: #ff54be; background: rgba(62, 24, 67, .98); }
.stm-result img { width: 88px; height: 52px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.stm-result-copy { min-width: 0; }
.stm-result-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 11px; font-weight: 800; line-height: 1.2; }
.stm-result-meta { margin-top: 4px; color: #bdacd3; font-size: 9px; }

.stm-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(310px, 1.25fr) minmax(260px, .75fr);
  gap: 8px;
}

.stm-player-card,
.stm-score-card {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background: linear-gradient(160deg, rgba(15,14,34,.96), rgba(7,8,20,.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  overflow: hidden;
}

.stm-player-card { display: flex; flex-direction: column; }
.stm-now-playing {
  flex: 0 0 auto;
  min-height: 37px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(90deg, rgba(255,47,174,.12), transparent 52%, rgba(111,73,255,.11));
}
.stm-now-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #ff4fbd; box-shadow: 0 0 12px #ff4fbd;
}
.stm-now-copy { min-width:0; flex:1; }
#starmaker-song-title { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:900; }
#starmaker-song-by { display:block; margin-top:2px; color:#a99fc0; font-size:9px; }
.stm-mode-badge {
  flex:0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(66, 224, 229, .28);
  background: rgba(25, 123, 137, .22);
  color: #75f4ef;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.stm-player-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 205px;
  background: #030309;
  overflow: hidden;
}
#starmaker-player { position:absolute; inset:0; width:100%; height:100%; }
#starmaker-player iframe { width:100% !important; height:100% !important; }
.stm-player-placeholder {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  text-align:center; padding:20px; box-sizing:border-box;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,68,184,.22), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(94,69,255,.18), transparent 40%),
    linear-gradient(180deg,#0b0918,#04040b);
}
.stm-player-placeholder.hidden { display:none; }
.stm-stage-mic {
  width: 74px; height: 74px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(145deg,rgba(255,60,174,.28),rgba(103,78,255,.24));
  box-shadow:0 0 32px rgba(255,65,184,.22), inset 0 0 22px rgba(255,255,255,.06);
  font-size:35px;
}
.stm-player-placeholder strong { font-size:16px; letter-spacing:.4px; }
.stm-player-placeholder span { color:#a9a0bf; font-size:10px; max-width:420px; }

.stm-player-footer {
  flex:0 0 auto;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 7px;
  box-sizing:border-box;
  border-top:1px solid rgba(255,255,255,.08);
}
.stm-volume { display:flex; align-items:center; gap:5px; flex:0 1 170px; min-width:100px; color:#c8bbd7; font-size:10px; }
#starmaker-volume { min-width:60px; width:100%; accent-color:#ff4fbd; }
#starmaker-volume-value { min-width:34px; text-align:right; }
#starmaker-role-status { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; color:#d8cbea; font-size:10px; font-weight:800; }

.stm-score-card {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:8px;
  box-sizing:border-box;
}
.stm-score-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.stm-singer { min-width:0; }
.stm-singer small { display:block; color:#9c91b0; font-size:8px; text-transform:uppercase; letter-spacing:.8px; }
#starmaker-singer-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; font-size:14px; font-weight:900; }
.stm-live-pill {
  display:flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px;
  background:rgba(89,89,112,.25); border:1px solid rgba(255,255,255,.12); color:#a8a2b4;
  font-size:8px; font-weight:900; letter-spacing:.6px;
}
.stm-live-pill.active { color:#ff9ed9; border-color:rgba(255,83,190,.45); background:rgba(127,22,88,.28); }
.stm-live-pill.active::before { content:""; width:6px; height:6px; border-radius:50%; background:#ff4fbd; box-shadow:0 0 10px #ff4fbd; animation:stmPulse 1s infinite; }
@keyframes stmPulse { 50% { opacity:.35; transform:scale(.8); } }

.stm-score-main {
  display:grid;
  grid-template-columns: 1fr 92px;
  gap:7px;
  min-height:74px;
}
.stm-points {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 10px;
  border-radius:13px;
  border:1px solid rgba(255,92,196,.22);
  background:linear-gradient(145deg,rgba(255,48,170,.12),rgba(94,67,255,.10));
  overflow:hidden;
}
.stm-points small { color:#b6a8c9; font-size:8px; letter-spacing:1px; text-transform:uppercase; }
#starmaker-points { font-size:27px; line-height:1; font-weight:1000; letter-spacing:.4px; text-shadow:0 0 15px rgba(255,83,191,.4); }
#starmaker-judge { margin-top:4px; color:#ffb0df; font-size:10px; font-weight:900; }
.stm-grade {
  display:grid; place-items:center;
  border-radius:13px;
  border:1px solid rgba(107,231,255,.20);
  background:radial-gradient(circle,rgba(46,194,234,.13),rgba(16,17,35,.68));
  text-align:center;
}
#starmaker-grade { font-size:30px; line-height:1; font-weight:1000; color:#76f2ff; text-shadow:0 0 16px rgba(60,223,255,.4); }
.stm-grade small { display:block; margin-top:3px; color:#90a6b5; font-size:7px; text-transform:uppercase; }

.stm-pitch-zone {
  position:relative;
  flex:1 1 auto;
  min-height:105px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(7,8,21,.98), rgba(11,8,25,.98));
  background-size:100% 25%, 20% 100%, auto;
  overflow:hidden;
}
#starmaker-pitch-canvas { position:absolute; inset:0; width:100%; height:100%; }
.stm-pitch-overlay { position:absolute; inset:0; pointer-events:none; }
.stm-note-chip {
  position:absolute; left:8px; top:7px;
  min-width:45px; padding:4px 7px; text-align:center;
  border:1px solid rgba(255,255,255,.16); border-radius:10px;
  background:rgba(5,6,16,.78); color:#fff; font-size:12px; font-weight:1000;
}
#starmaker-cents { position:absolute; right:8px; top:8px; color:#9feaff; font-size:9px; font-weight:900; }
#starmaker-level { position:absolute; left:8px; right:8px; bottom:7px; height:5px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
#starmaker-level > span { display:block; width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6c5cff,#ff4fbd,#6ef3f0); transition:width .08s linear; }

.stm-meter-row { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.stm-meter {
  padding:5px 6px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
  background:rgba(255,255,255,.035);
}
.stm-meter span { display:block; color:#9c91ad; font-size:7px; text-transform:uppercase; letter-spacing:.65px; }
.stm-meter b { display:block; margin-top:2px; color:#fff; font-size:12px; }

.stm-bottom {
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(180px,.38fr);
  gap:7px;
  min-height:57px;
}
.stm-actions {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:6px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.028);
}
#starmaker-start { min-width:145px; font-size:12px; }
.stm-action-help { min-width:0; flex:1 1 auto; color:#9f94b2; font-size:8px; line-height:1.25; }
.stm-action-help strong { color:#e5d7f2; }

.stm-leaderboard {
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,178,54,.06),rgba(255,255,255,.02));
}
.stm-leaderboard-title {
  flex:0 0 auto;
  color:#ffc866;
  font-size:8px;
  font-weight:900;
  letter-spacing:.75px;
  text-transform:uppercase;
  width:100%;
  padding-bottom:3px;
  border-bottom:1px solid rgba(255,200,102,.34);
  box-sizing:border-box;
}
#starmaker-leaderboard {
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  margin-top:3px;
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  column-gap:0;
}
#starmaker-leaderboard::before,
#starmaker-leaderboard::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(255,200,102,.24);
  pointer-events:none;
}
#starmaker-leaderboard::before { left:33.333%; }
#starmaker-leaderboard::after { left:66.666%; }
.stm-rank {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  padding:0 7px;
  box-sizing:border-box;
  font-size:8px;
  line-height:1.5;
}
.stm-rank-position {
  flex:0 0 19px;
  text-align:right;
  color:#ffc866;
  font-weight:900;
}
.stm-rank-name {
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#e9dfef;
}
.stm-rank-score {
  flex:0 0 auto;
  color:#fff;
  white-space:nowrap;
}
.stm-rank-empty .stm-rank-name,
.stm-rank-empty .stm-rank-score { color:#6f687b; }
.stm-empty { color:#8d839a; font-size:8px; }

.stm-toast {
  position:absolute;
  z-index:800;
  left:50%;
  top:76px;
  transform:translate(-50%,-8px);
  max-width:min(520px,84%);
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(11,8,25,.96);
  color:#fff;
  font-size:10px;
  font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.stm-toast.show { opacity:1; transform:translate(-50%,0); }

/* PC étroit / tablette paysage */
@media (max-width: 1050px) {
  body.starmaker-mode #starmaker-panel { flex-basis: 62% !important; min-height:340px; padding:7px; }
  .stm-stage { grid-template-columns:minmax(280px,1.15fr) minmax(235px,.85fr); }
  .stm-player-wrap { min-height:175px; }
  .stm-brand-copy small { display:none; }
  .stm-brand { padding-right:7px; }
  .stm-bottom { grid-template-columns:1fr 180px; }
}

/* GSM / petite tablette : application en haut, chat visible dessous. */
@media (max-width: 760px) {
  body.starmaker-mode #starmaker-panel {
    order: 1 !important;
    flex: 0 0 54dvh !important;
    min-height: 360px !important;
    max-height: 54dvh !important;
    padding: 5px !important;
  }
  body.starmaker-mode #messages {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-height: 125px !important;
    padding-top: 6px !important;
  }
  .stm-shell { padding:6px; gap:5px; border-radius:12px; }
  .stm-topbar { min-height:39px; gap:5px; }
  .stm-brand { padding:3px 5px; border-radius:10px; }
  .stm-brand-logo { width:31px; height:31px; border-radius:9px; font-size:17px; }
  .stm-brand-copy strong { font-size:12px; letter-spacing:.9px; }
  .stm-brand-copy small { display:none; }
  #starmaker-search { height:34px; padding-left:31px; font-size:11px; }
  .stm-search-icon { left:10px; font-size:11px; }
  #starmaker-search-button { min-width:38px; width:38px; padding:0; font-size:0; }
  #starmaker-search-button i { font-size:15px; }
  #starmaker-search-results { top:46px; left:6px; right:6px; max-height:45dvh; }
  #starmaker-search-results.open { grid-template-columns:1fr; }
  .stm-result img { width:72px; height:43px; }

  .stm-stage { grid-template-columns:1.25fr .75fr; gap:5px; }
  .stm-now-playing { min-height:29px; padding:3px 6px; }
  #starmaker-song-title { font-size:9px; }
  #starmaker-song-by { font-size:7px; }
  .stm-mode-badge { display:none; }
  .stm-player-wrap { min-height:142px; }
  .stm-stage-mic { width:50px; height:50px; font-size:24px; }
  .stm-player-placeholder strong { font-size:11px; }
  .stm-player-placeholder span { font-size:8px; }
  .stm-player-footer { min-height:34px; padding:3px 4px; }
  .stm-volume { display:none; }
  #starmaker-role-status { font-size:8px; }
  .stm-btn-small { min-height:27px; padding:0 6px; font-size:8px; }

  .stm-score-card { gap:4px; padding:5px; border-radius:10px; }
  #starmaker-singer-name { font-size:10px; }
  .stm-score-main { grid-template-columns:1fr 58px; gap:4px; min-height:54px; }
  .stm-points { padding:5px 6px; border-radius:9px; }
  #starmaker-points { font-size:19px; }
  #starmaker-judge { font-size:8px; margin-top:2px; }
  #starmaker-grade { font-size:22px; }
  .stm-pitch-zone { min-height:72px; border-radius:9px; }
  .stm-note-chip { left:5px; top:5px; min-width:31px; padding:2px 4px; font-size:9px; }
  #starmaker-cents { top:5px; right:5px; font-size:7px; }
  #starmaker-level { left:5px; right:5px; bottom:4px; height:3px; }
  .stm-meter-row { gap:3px; }
  .stm-meter { padding:3px 4px; border-radius:7px; }
  .stm-meter span { font-size:5px; }
  .stm-meter b { font-size:8px; }
  .stm-bottom { grid-template-columns:1fr 118px; gap:4px; min-height:43px; }
  .stm-actions { gap:3px; padding:4px; border-radius:9px; }
  #starmaker-start { min-width:92px; min-height:31px; padding:0 6px; font-size:9px; }
  #starmaker-stop { min-height:31px; padding:0 6px; font-size:8px; }
  .stm-action-help { display:none; }
  .stm-leaderboard { padding:4px; border-radius:9px; }
  .stm-leaderboard-title { font-size:6px; }
  .stm-rank { font-size:6px; }
  .stm-empty { font-size:6px; }
}

/* Très petit portrait : on conserve les fonctions essentielles sans écraser le chat. */
@media (max-width: 480px) and (orientation: portrait) {
  body.starmaker-mode #starmaker-panel { flex-basis: 50dvh !important; max-height:50dvh !important; min-height:330px !important; }
  .stm-stage { grid-template-columns: 1.2fr .8fr; }
  .stm-player-wrap { min-height:126px; }
  .stm-live-pill { display:none; }
  .stm-score-head { min-height:20px; }
  .stm-pitch-zone { min-height:65px; }
  .stm-meter:nth-child(3) { display:none; }
  .stm-meter-row { grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   STAR VOCAL — lisibilité renforcée
   14/09/2026
   Agrandit uniquement les textes autour du lecteur.
   Le logo STAR VOCAL et le lecteur vidéo restent inchangés.
   ============================================================ */

/* Recherche + résultats */
#starmaker-search { font-size: 18px; }
.stm-search-icon { font-size: 16px; }
.stm-btn { font-size: 14px; }
.stm-btn-small { font-size: 13px; }
.stm-result-title { font-size: 16px; line-height: 1.28; }
.stm-result-meta { font-size: 13px; }

/* Titre du morceau, état karaoké et commandes sous le lecteur */
#starmaker-song-title { font-size: 16px; }
#starmaker-song-by { font-size: 13px; }
.stm-mode-badge { font-size: 11px; }
.stm-volume { font-size: 13px; }
#starmaker-volume-value { font-size: 13px; }
#starmaker-role-status { font-size: 14px; }

/* Partie score / chanteur */
.stm-singer small { font-size: 11px; }
#starmaker-singer-name { font-size: 19px; }
.stm-live-pill { font-size: 11px; }
.stm-points small { font-size: 11px; }
#starmaker-points { font-size: 36px; }
#starmaker-judge { font-size: 14px; }
#starmaker-grade { font-size: 36px; }
.stm-grade small { font-size: 10px; }
.stm-note-chip { font-size: 15px; }
#starmaker-cents { font-size: 12px; }

/* Justesse / stabilité / combo */
.stm-meter span { font-size: 10px; }
.stm-meter b { font-size: 16px; }

/* Boutons et explications */
#starmaker-start { font-size: 15px; }
#starmaker-stop { font-size: 13px; }
.stm-action-help { font-size: 11px; line-height: 1.35; }

/* Classement */
.stm-leaderboard-title { font-size: 11px; }
.stm-rank { font-size: 11px; line-height: 1.55; }
.stm-empty { font-size: 11px; }

/* Messages internes Star Vocal */
.stm-toast { font-size: 13px; }

/* Sur petits écrans, on augmente aussi la lisibilité sans casser la mise en page. */
@media (max-width: 720px) {
  #starmaker-search { font-size: 13px; }
  .stm-search-icon { font-size: 13px; }
  .stm-btn { font-size: 10px; }
  .stm-btn-small { font-size: 10px; }
  .stm-result-title { font-size: 13px; }
  .stm-result-meta { font-size: 10px; }
  #starmaker-song-title { font-size: 11px; }
  #starmaker-song-by { font-size: 9px; }
  .stm-mode-badge { font-size: 9px; }
  .stm-volume { font-size: 10px; }
  #starmaker-volume-value { font-size: 10px; }
  #starmaker-role-status { font-size: 10px; }
  .stm-singer small { font-size: 8px; }
  #starmaker-singer-name { font-size: 13px; }
  .stm-live-pill { font-size: 8px; }
  .stm-points small { font-size: 8px; }
  #starmaker-points { font-size: 24px; }
  #starmaker-judge { font-size: 10px; }
  #starmaker-grade { font-size: 26px; }
  .stm-grade small { font-size: 8px; }
  .stm-note-chip { font-size: 11px; }
  #starmaker-cents { font-size: 9px; }
  .stm-meter span { font-size: 7px; }
  .stm-meter b { font-size: 10px; }
  #starmaker-start { font-size: 11px; }
  #starmaker-stop { font-size: 10px; }
  .stm-action-help { font-size: 9px; }
  .stm-leaderboard-title { font-size: 8px; }
  .stm-rank, .stm-empty { font-size: 8px; }
  .stm-toast { font-size: 11px; }
}

/* ============================================================
   STAR VOCAL — réorganisation visuelle 14/09/2026
   Recherche raccourcie + score remonté + lecteur agrandi.
   Aucun ID ni comportement JS n'est modifié.
   ============================================================ */

/* Le bandeau supérieur devient une vraie ligne de contrôle compacte. */
body.starmaker-mode .stm-topbar {
  display: grid;
  grid-template-columns: auto minmax(300px, 36%) minmax(500px, 1fr);
  align-items: stretch;
  gap: 8px;
  min-height: 86px;
}

body.starmaker-mode .stm-brand {
  align-self: center;
}

/* Recherche volontairement plus courte pour libérer la partie droite. */
body.starmaker-mode .stm-search {
  align-self: center;
  width: 100%;
  max-width: 520px;
}
body.starmaker-mode #starmaker-search {
  width: 100%;
}

/* Le bloc score est maintenant dans la ligne du haut, sous forme de bandeau horizontal. */
body.starmaker-mode .stm-score-top {
  min-height: 0;
  height: 86px;
  display: grid;
  grid-template-columns: minmax(110px,.75fr) minmax(145px,1fr) minmax(170px,1.15fr) minmax(190px,1.2fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(24,15,45,.98), rgba(8,9,24,.98));
}
body.starmaker-mode .stm-score-top .stm-score-head,
body.starmaker-mode .stm-score-top .stm-score-main,
body.starmaker-mode .stm-score-top .stm-pitch-zone,
body.starmaker-mode .stm-score-top .stm-meter-row {
  min-width: 0;
  min-height: 0;
  margin: 0;
}
body.starmaker-mode .stm-score-top .stm-score-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 2px 5px;
}
body.starmaker-mode .stm-score-top .stm-live-pill {
  padding: 3px 7px;
}
body.starmaker-mode .stm-score-top .stm-score-main {
  grid-template-columns: minmax(0,1fr) 58px;
  gap: 5px;
}
body.starmaker-mode .stm-score-top .stm-points {
  padding: 6px 8px;
  border-radius: 10px;
}
body.starmaker-mode .stm-score-top #starmaker-points {
  font-size: 29px;
}
body.starmaker-mode .stm-score-top #starmaker-grade {
  font-size: 29px;
}
body.starmaker-mode .stm-score-top .stm-pitch-zone {
  height: auto;
  min-height: 72px;
  border-radius: 10px;
}
body.starmaker-mode .stm-score-top .stm-meter-row {
  grid-template-columns: repeat(3,1fr);
  align-content: stretch;
  gap: 4px;
}
body.starmaker-mode .stm-score-top .stm-meter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
}
body.starmaker-mode .stm-score-top .stm-meter span {
  font-size: 9px;
}
body.starmaker-mode .stm-score-top .stm-meter b {
  font-size: 15px;
}

/* Le stage n'a plus de colonne score : le lecteur prend toute la largeur disponible. */
body.starmaker-mode .stm-stage {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
body.starmaker-mode .stm-player-card {
  width: 100%;
}
body.starmaker-mode .stm-player-wrap {
  min-height: 320px;
}

/* On donne davantage de hauteur utile à Star Vocal sans étouffer le chat. */
body.starmaker-mode #starmaker-panel {
  flex-basis: 68% !important;
  max-height: 70% !important;
  min-height: 470px;
}
body.starmaker-mode #messages {
  flex-basis: 32% !important;
  min-height: 135px !important;
}

/* Écrans intermédiaires : le score reste en haut mais se compacte proprement. */
@media (max-width: 1250px) {
  body.starmaker-mode .stm-topbar {
    grid-template-columns: auto minmax(270px, 34%) minmax(430px, 1fr);
  }
  body.starmaker-mode .stm-score-top {
    grid-template-columns: minmax(95px,.7fr) minmax(125px,.9fr) minmax(145px,1fr) minmax(165px,1.1fr);
  }
  body.starmaker-mode .stm-score-top #starmaker-points,
  body.starmaker-mode .stm-score-top #starmaker-grade { font-size: 25px; }
}

/* Tablette / GSM paysage : recherche + score occupent deux lignes très compactes,
   ce qui laisse le maximum de hauteur au lecteur. */
@media (max-width: 900px) {
  body.starmaker-mode #starmaker-panel {
    flex: 0 0 64dvh !important;
    max-height: 64dvh !important;
    min-height: 410px !important;
  }
  body.starmaker-mode .stm-topbar {
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas:
      "brand search"
      "score score";
    min-height: 0;
    gap: 5px 7px;
  }
  body.starmaker-mode .stm-brand { grid-area: brand; }
  body.starmaker-mode .stm-search { grid-area: search; max-width: none; }
  body.starmaker-mode .stm-score-top {
    grid-area: score;
    height: 66px;
    grid-template-columns: minmax(95px,.75fr) minmax(125px,.95fr) minmax(130px,1fr) minmax(150px,1.15fr);
    gap: 4px;
    padding: 4px;
  }
  body.starmaker-mode .stm-score-top .stm-score-head { padding: 1px 4px; gap: 2px; }
  body.starmaker-mode .stm-score-top #starmaker-singer-name { font-size: 12px; }
  body.starmaker-mode .stm-score-top .stm-live-pill { font-size: 7px; padding: 2px 5px; }
  body.starmaker-mode .stm-score-top .stm-score-main { grid-template-columns:1fr 44px; gap:3px; }
  body.starmaker-mode .stm-score-top #starmaker-points,
  body.starmaker-mode .stm-score-top #starmaker-grade { font-size: 20px; }
  body.starmaker-mode .stm-score-top #starmaker-judge { font-size: 8px; }
  body.starmaker-mode .stm-score-top .stm-pitch-zone { min-height: 56px; }
  body.starmaker-mode .stm-score-top .stm-meter { padding: 3px; }
  body.starmaker-mode .stm-score-top .stm-meter span { font-size: 7px; }
  body.starmaker-mode .stm-score-top .stm-meter b { font-size: 10px; }
  body.starmaker-mode .stm-player-wrap { min-height: 235px; }
}

/* Téléphone portrait : priorité absolue à la vidéo. Le bandeau score reste compact
   juste sous la recherche, puis le lecteur prend pratiquement toute la largeur. */
@media (max-width: 600px) and (orientation: portrait) {
  body.starmaker-mode #starmaker-panel {
    flex: 0 0 66dvh !important;
    max-height: 66dvh !important;
    min-height: 430px !important;
    padding: 4px !important;
  }
  body.starmaker-mode #messages {
    flex: 1 1 34dvh !important;
    min-height: 120px !important;
  }
  body.starmaker-mode .stm-shell { gap: 4px; padding: 5px; }
  body.starmaker-mode .stm-topbar {
    grid-template-columns: 82px minmax(0,1fr);
    gap: 4px;
  }
  body.starmaker-mode .stm-brand-copy strong { font-size: 10px; }
  body.starmaker-mode .stm-brand-logo { width: 28px; height: 28px; font-size: 15px; }
  body.starmaker-mode #starmaker-search { height: 32px; font-size: 12px; }
  body.starmaker-mode #starmaker-search-button { min-width: 36px; width: 36px; }
  body.starmaker-mode .stm-score-top {
    height: 58px;
    grid-template-columns: minmax(72px,.75fr) minmax(92px,.95fr) minmax(105px,1.1fr) minmax(110px,1.1fr);
  }
  body.starmaker-mode .stm-score-top .stm-singer small,
  body.starmaker-mode .stm-score-top .stm-points small,
  body.starmaker-mode .stm-score-top .stm-grade small,
  body.starmaker-mode .stm-score-top .stm-meter span { font-size: 6px; }
  body.starmaker-mode .stm-score-top #starmaker-singer-name { font-size: 10px; }
  body.starmaker-mode .stm-score-top #starmaker-points,
  body.starmaker-mode .stm-score-top #starmaker-grade { font-size: 17px; }
  body.starmaker-mode .stm-score-top .stm-pitch-zone { min-height: 48px; }
  body.starmaker-mode .stm-score-top .stm-note-chip { font-size: 8px; min-width: 28px; padding:2px 3px; }
  body.starmaker-mode .stm-score-top #starmaker-cents { font-size: 6px; }
  body.starmaker-mode .stm-score-top .stm-meter b { font-size: 9px; }
  body.starmaker-mode .stm-player-wrap { min-height: 245px; }
  body.starmaker-mode .stm-now-playing { min-height: 30px; }
  body.starmaker-mode .stm-player-footer { min-height: 32px; }
}

/* ============================================================
   STAR VOCAL — mobile : chat toujours visible sous le lecteur
   14/09/2026
   Mise en page uniquement : le lecteur conserve sa taille utile,
   le moteur Star Vocal et ses commandes ne sont pas modifiés.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
  /* On récupère de la hauteur autour du lecteur, pas dans la vidéo. */
  body.starmaker-mode #starmaker-panel {
    flex: 0 0 57dvh !important;
    max-height: 57dvh !important;
    min-height: 420px !important;
    padding: 3px !important;
  }

  body.starmaker-mode .stm-shell {
    gap: 3px !important;
    padding: 4px !important;
  }

  /* Le bandeau recherche/score reste compact. */
  body.starmaker-mode .stm-topbar {
    gap: 3px !important;
  }
  body.starmaker-mode .stm-score-top {
    height: 54px !important;
    padding: 3px !important;
  }

  /* IMPORTANT : ne pas réduire le lecteur vidéo. */
  body.starmaker-mode .stm-player-wrap {
    min-height: 245px !important;
  }

  body.starmaker-mode .stm-now-playing {
    min-height: 27px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  body.starmaker-mode .stm-player-footer {
    min-height: 29px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  /* Les commandes sous la vidéo prennent moins de hauteur. */
  body.starmaker-mode .stm-bottom {
    min-height: 38px !important;
    gap: 3px !important;
  }
  body.starmaker-mode .stm-actions,
  body.starmaker-mode .stm-leaderboard {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  /* Réserve une vraie fenêtre de discussion visible en permanence. */
  body.starmaker-mode #messages {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-height: 155px !important;
    max-height: 22dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 5px !important;
    padding-bottom: 8px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.starmaker-mode #messages::before {
    margin-bottom: 5px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
  }
}

/* Téléphones peu hauts : priorité au même lecteur + au minimum 3 lignes de chat. */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 760px) {
  body.starmaker-mode #starmaker-panel {
    flex-basis: 55dvh !important;
    max-height: 55dvh !important;
    min-height: 405px !important;
  }
  body.starmaker-mode #messages {
    min-height: 135px !important;
    max-height: 20dvh !important;
  }
}

/* ============================================================
   STAR VOCAL — PC uniquement : textes de contrôle plus lisibles
   14/09/2026
   Ne s'applique pas aux téléphones/tablettes (<= 900px).
   Aucun fonctionnement ni dimension du lecteur n'est modifié.
   ============================================================ */
@media (min-width: 901px) {
  /* Bandeau score en haut */
  body.starmaker-mode .stm-score-top .stm-singer small {
    font-size: 14px !important;
  }
  body.starmaker-mode .stm-score-top #starmaker-singer-name {
    font-size: 20px !important;
  }
  body.starmaker-mode .stm-score-top .stm-live-pill {
    font-size: 13px !important;
  }
  body.starmaker-mode .stm-score-top .stm-points small {
    font-size: 14px !important;
  }
  body.starmaker-mode .stm-score-top #starmaker-points {
    font-size: 38px !important;
  }
  body.starmaker-mode .stm-score-top #starmaker-judge {
    font-size: 15px !important;
  }
  body.starmaker-mode .stm-score-top #starmaker-grade {
    font-size: 37px !important;
  }
  body.starmaker-mode .stm-score-top .stm-grade small {
    font-size: 13px !important;
  }
  body.starmaker-mode .stm-score-top .stm-note-chip {
    font-size: 17px !important;
  }
  body.starmaker-mode .stm-score-top #starmaker-cents {
    font-size: 13px !important;
  }
  body.starmaker-mode .stm-score-top .stm-meter span {
    font-size: 13px !important;
  }
  body.starmaker-mode .stm-score-top .stm-meter b {
    font-size: 18px !important;
  }

  /* Texte d'aide sous le lecteur */
  body.starmaker-mode .stm-action-help {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  /* Meilleurs scores du salon */
  body.starmaker-mode .stm-leaderboard-title {
    font-size: 15px !important;
  }
  body.starmaker-mode .stm-rank,
  body.starmaker-mode .stm-empty {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

/* ============================================================
   STAR VOCAL — téléphone portrait : TOP 12 visible sur 3 colonnes
   15/09/2026
   Correction strictement mobile : aucun impact PC/tablette paysage.
   Le bloc général reste à sa place ; seule la répartition horizontale
   sous la vidéo donne davantage de largeur au classement.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
  body.starmaker-mode .stm-bottom {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
  }

  body.starmaker-mode .stm-leaderboard {
    min-width: 0 !important;
  }

  body.starmaker-mode #starmaker-leaderboard {
    width: 100% !important;
  }

  body.starmaker-mode .stm-rank {
    gap: 2px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 7px !important;
    line-height: 1.35 !important;
  }

  body.starmaker-mode .stm-rank-position {
    flex-basis: 12px !important;
  }

  body.starmaker-mode .stm-rank-score {
    font-size: 7px !important;
  }
}