/* INDEX 2 — TsuLiPa TV + Top Idols, styled as part of the original kawaii hub.
   Visual-only layer: keep data loading, themes, games and original hubIdols independent. */
#hub .tw-rank-tv[hidden]{display:none!important}
#hub .tw-rank-tv{
  position:relative;isolation:isolate;
  width:min(100%,246px);margin:17px auto 18px;
  padding:10px 10px 11px;border:4px solid #fff;border-radius:25px;
  color:#fff;text-align:left;
  background:linear-gradient(145deg,#c14fd0 0%,#7b3ff0 48%,#4169e1 100%);
  box-shadow:0 0 0 3px rgba(123,63,240,.28),0 5px 0 #40208d,0 12px 24px rgba(60,20,120,.24);
}
#hub .tw-rank-tv:before{   /* antenas de alien: hastes curvas com bolinhas que brilham */
  content:"";position:absolute;z-index:-1;top:-31px;left:calc(50% - 36px);width:72px;height:34px;transform-origin:50% 100%;
  background:radial-gradient(circle at 8px 8px,#fff 0 2px,#b6ff3b 3px 6px,rgba(182,255,59,.35) 7px 9px,transparent 10px),
    radial-gradient(circle at calc(100% - 8px) 8px,#fff 0 2px,#ff6fb5 3px 6px,rgba(255,111,181,.35) 7px 9px,transparent 10px),
    radial-gradient(ellipse 30px 34px at 30px 40px,transparent 25px,#7b3ff0 26px 29px,transparent 30px),
    radial-gradient(ellipse 30px 34px at calc(100% - 30px) 40px,transparent 25px,#7b3ff0 26px 29px,transparent 30px);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.7));animation:twAntena 1.4s ease-in-out infinite alternate;
}
@keyframes twAntena{from{transform:rotate(-3deg)}to{transform:rotate(3deg) scaleY(1.05)}}
#hub .tw-tv-desliza{animation:twTvDesliza .45s cubic-bezier(.2,.8,.3,1)}
@keyframes twTvDesliza{from{opacity:0;transform:translateX(38%)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#hub .tw-rank-tv:before,#hub .tw-tv-desliza{animation:none}}
#hub .tw-rank-tv:after{
  content:"";position:absolute;right:-10px;top:35%;width:5px;height:42px;
  border-radius:0 5px 5px 0;background:linear-gradient(#ffe14d,#ff6fb5);
  box-shadow:2px 2px 0 rgba(44,26,143,.25);
}
#hub .tw-rank-tv-head{
  display:flex;align-items:center;justify-content:space-between;gap:5px;
  margin:0 2px 7px;min-height:20px;
}
#hub .tw-rank-tv-head b{
  font:400 12px/1.35 "Mochiy Pop One","Kosugi Maru",sans-serif;color:#fff;
  text-shadow:0 1px 3px rgba(37,10,80,.3);
}
#hub .tw-rank-tv-head small{
  color:#ffe7f4;font:800 9px/1.3 "M PLUS Rounded 1c",sans-serif;text-align:right;
  white-space:normal;overflow:hidden;padding-right:4px;max-width:52%;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
#hub .tw-rank-tv-screen{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:102px;padding:9px 7px;border:2px solid rgba(255,255,255,.85);
  border-radius:15px;color:#fff;text-align:center;
  background:radial-gradient(circle at 50% 0,rgba(255,111,181,.27),transparent 60%),
             repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),
             linear-gradient(145deg,#251047,#160b36);
  box-shadow:inset 0 0 0 3px rgba(92,199,255,.08),inset 0 0 22px rgba(92,199,255,.1);
}
#hub .tw-rank-tv-screen>b{
  color:#b6ff3b;font:800 10px/1.4 "M PLUS Rounded 1c",sans-serif;
  max-width:100%;overflow-wrap:anywhere;
}
#hub .tw-rank-tv-screen p{
  flex:none;max-width:100%;margin:0;color:#fff;font-size:11px;font-weight:900;
  line-height:1.45;overflow-wrap:anywhere;
}
#hub .tw-rank-tv-screen strong{
  max-width:100%;font:400 12px/1.4 "Mochiy Pop One","Kosugi Maru",sans-serif;
  color:#ffe14d;white-space:normal;overflow-wrap:anywhere;
}
#hub .tw-rank-tv-screen .tw-rank-wait{color:#ffe7f4;font-weight:700}
#hub .tw-rank-tv-buttons{display:flex;justify-content:center;gap:6px;margin-top:8px}
#hub .tw-rank-tv-buttons button{
  flex:1;min-width:0;min-height:28px;padding:5px 4px;
  border:2px solid rgba(255,255,255,.88);border-radius:10px;
  background:#fce7f3;color:#4a1b77;
  box-shadow:0 2px 0 rgba(44,26,143,.38);
  font:800 9px/1.2 "M PLUS Rounded 1c",sans-serif;cursor:pointer;
}
#hub .tw-rank-tv-buttons button[aria-pressed="true"]{
  color:#2c1a5e;background:#b6ff3b;border-color:#fff;
  box-shadow:0 2px 0 rgba(44,26,143,.35),0 0 0 1px rgba(255,255,255,.25);
}
#hub .tw-rank-tv-buttons button span{display:none}
#hub .tw-rank-tv button:focus-visible,#hub .tw-rank-hall button:focus-visible{
  outline:3px solid #ffe14d;outline-offset:2px;
}

/* Ranking panel: matches the hub's candy colors and avatar circles. */
#hub .tw-rank-hall{
  margin-top:13px;padding:14px 12px;
  border:2px solid rgba(255,111,181,.25);
  background:
    radial-gradient(circle at 100% 0,rgba(255,111,181,.12),transparent 42%),
    linear-gradient(155deg,var(--card),var(--chip));
  box-shadow:0 4px 0 rgba(123,63,240,.13),0 9px 22px rgba(60,20,120,.1);
}
#hub .tw-rank-hall h2{
  margin:0 0 4px;color:var(--b1);
  font:400 17px/1.4 "Mochiy Pop One","Kosugi Maru",sans-serif;text-align:center;cursor:default;
}
#hub .tw-rank-hall h2 small{
  display:block;margin-top:2px;color:var(--pink);
  font:800 10px/1.4 "M PLUS Rounded 1c",sans-serif;
}
#hub .tw-rank-week-note{margin:3px 0 11px;text-align:center;font-size:10px;line-height:1.45;color:var(--sub)}
#hub .tw-rank-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#hub .tw-rank-game{
  min-width:0;padding:9px 8px;border:1px solid rgba(155,48,217,.14);border-radius:16px;
  background:linear-gradient(145deg,var(--card),var(--chip));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.44),0 3px 0 rgba(123,63,240,.08);
}
#hub .tw-rank-game h3{
  margin:0 0 7px;color:var(--b1);
  font:400 11px/1.45 "Mochiy Pop One","Kosugi Maru",sans-serif;
  text-align:center;overflow-wrap:anywhere;
}
#hub .tw-rank-game>p{margin:8px 1px;font-size:10px;line-height:1.5;text-align:center;color:var(--sub)}
#hub .tw-rank-game ol{margin:0;padding:0;list-style:none}
#hub .tw-rank-game li{
  display:grid;grid-template-columns:17px 30px minmax(0,1fr);
  grid-template-rows:auto auto;align-items:center;gap:1px 5px;
  min-width:0;padding:6px 0;border-bottom:1px dashed rgba(155,48,217,.18);font-size:10px;
}
#hub .tw-rank-game li:last-child{border-bottom:0}
#hub .tw-rank-medal{grid-column:1;grid-row:1/3;font-size:14px;line-height:1.2}
#hub .tw-rank-avatar-wrap{
  position:relative;grid-column:2;grid-row:1/3;display:grid;place-items:center;
  width:29px;height:29px;overflow:hidden;border:2px solid #fff;border-radius:50%;
  background:linear-gradient(145deg,#ffb6df,#c4b5fd 55%,#93c5fd);
  box-shadow:0 0 0 1px rgba(123,63,240,.24),0 2px 4px rgba(60,20,120,.13);
}
#hub .tw-rank-avatar-fallback{font-size:16px;line-height:1}
#hub .tw-rank-avatar{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%}
#hub .tw-rank-nick{
  grid-column:3;grid-row:1;justify-self:stretch;min-width:0;max-width:100%;
  border:0;padding:0;background:none;color:var(--b1);
  font:800 10px/1.3 "M PLUS Rounded 1c",sans-serif;
  text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;cursor:pointer;
}
#hub .tw-rank-game strong{
  grid-column:3;grid-row:2;justify-self:start;margin:0;
  color:var(--sub);font-size:9px;line-height:1.35;white-space:nowrap;
}
#hub .tw-rank-game button:hover{text-decoration:underline}
.tw-rank-profile{
  margin:12px 0;padding:11px 13px;border-radius:16px;
  background:var(--chip);box-shadow:inset 0 0 0 1px rgba(155,48,217,.18);
}
.tw-rank-profile h3{margin:0 0 4px;font:400 15px/1.45 "Mochiy Pop One","Kosugi Maru",sans-serif;color:var(--b1)}
.tw-rank-profile h3::after{content:none!important}
.tw-rank-profile h3 small{display:block;font:800 10px/1.5 "M PLUS Rounded 1c",sans-serif;color:var(--pink)}
.tw-rank-profile p{margin:0;font-size:12px;color:var(--sub)}

/* On the real game hub, the podium becomes a side panel beside game cards.
   The original hubIdols showcase remains in its own location and lifecycle. */
@media(min-width:900px){
  /* Coluna única, como o site sempre foi: Top Idols entra abaixo da vitrine. */
  #hub .hubin:has(#hubMenu:not([hidden])){max-width:760px}
  #hub .tw-rank-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media(max-width:620px){
  #hub .tw-rank-tv{width:min(100%,238px)}
  #hub .tw-rank-tv-screen{min-height:96px}
  #hub .tw-rank-tv-buttons button{font-size:15px}
  #hub .tw-rank-columns{grid-template-columns:minmax(0,1fr);gap:7px}
  #hub .tw-rank-game{padding:8px 10px}
  #hub .tw-rank-game li{grid-template-columns:18px 32px minmax(0,1fr);gap:1px 7px}
  #hub .tw-rank-avatar-wrap{width:31px;height:31px}
  #hub .tw-rank-nick{font-size:11px}
  #hub .tw-rank-game strong{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  #hub .tw-rank-tv,#hub .tw-rank-hall{animation:none!important;transition:none!important}
}

/* 7b. KARAOKE⭐TIME!: microfone voando no outro canto do banner (abre quem acertou mais) */
#hub .tw-tv-float .tw-mic-launch{
  position:absolute;left:-10px;top:-16px;width:52px;height:52px;min-height:52px;padding:0;border-radius:50%;
  display:grid;place-items:center;border:3px solid #fff;cursor:pointer;touch-action:manipulation;
  background:radial-gradient(circle at 35% 30%,#ffe3f3,#ff8fc8 45%,#b04fe6);
  box-shadow:0 4px 0 #8a2fa8,0 8px 18px rgba(60,20,120,.3);animation:twTrofeuVoa 2.6s ease-in-out -1.3s infinite;
}
#hub .tw-tv-float .tw-mic-launch>span{font-size:26px;line-height:1}
#hub .tw-tv-float .tw-mic-launch::after{content:"♪";position:absolute;right:-9px;top:-7px;font-size:15px;font-weight:900;color:#fff;text-shadow:0 0 6px #ff6fb5;animation:twTvSparkle 1.1s ease-in-out infinite alternate}
#hub .tw-tv-float .tw-mic-launch:hover{transform:scale(1.08)}
#hub .tw-tv-float .tw-mic-launch:focus-visible{outline:3px solid #ffe14d;outline-offset:3px}
#hub .tw-mic-tv .tw-mic-lista{margin:6px 0 2px;padding:0;list-style:none;font-size:11px;line-height:1.6}
#hub .tw-mic-tv .tw-mic-sub{display:block;margin-top:5px;font-size:9px;opacity:.8}
@media(prefers-reduced-motion:reduce){#hub .tw-tv-float .tw-mic-launch,#hub .tw-tv-float .tw-mic-launch::after{animation:none}}
@media(max-width:620px){#hub .tw-tv-float .tw-mic-launch{left:-4px;top:-14px;width:44px;height:44px;min-height:44px}}

/* Lugares ainda vagos no Top Idols: mantêm a grade das três posições. */
#hub .tw-rank-game li.tw-rank-empty{opacity:.78}
#hub .tw-rank-game .tw-rank-empty-name{grid-column:3;grid-row:1;color:var(--sub);font-weight:800}