/* Compact sound control inside the official TsuLiPa header; only Sora shows it. */
.tw-preview-som[hidden]{display:none!important}
.tw-preview-header-slot .tw-preview-som{
  flex:none;display:inline-grid;place-items:center;
  min-width:38px;min-height:38px;padding:5px 9px;
  border:2px solid rgba(255,255,255,.9);border-radius:999px;
  background:linear-gradient(135deg,#fff8fd,#e9f6ff);
  color:#642b9b;box-shadow:0 3px 0 rgba(123,63,240,.18);
  font:800 17px/1 "M PLUS Rounded 1c",sans-serif;cursor:pointer;touch-action:manipulation;
}
.tw-preview-header-slot .tw-preview-som:disabled{opacity:.62;cursor:wait}
.tw-preview-header-slot .tw-preview-som:focus-visible{outline:3px solid var(--pink,#ff6fb5);outline-offset:3px}
@media(max-width:760px){
  .tw-preview-header-slot .tw-preview-som{min-width:34px;min-height:34px;padding:4px 7px;font-size:15px}
}

/* 1. TELA DE INÍCIO LIMPA: #hubMenu[hidden] nunca aparece antes do "Toque para começar" */
#hub #hubMenu[hidden],
#hub .tw-rank-tv-launch-row[hidden],
#hub .hubtoque[hidden]{
  display:none!important;
}

/* 2. CADEADOS NOS JOGOS (E nunca no Meu Perfil nem no Center Run) */
#hub .hubcard .tw-profile-lock{
  position:absolute;top:-5px;right:-4px;z-index:2;display:grid;place-items:center;
  width:22px;height:22px;border:1px solid rgba(245,180,0,.45);border-radius:50%;
  background:#fff7d8;color:#6c4890;box-shadow:0 0 0 3px var(--card);font:800 10px/1 sans-serif;
}
#hub .hubcard.hubperf .tw-profile-lock,
#hub .hubcard.hubrun .tw-profile-lock{
  display:none!important;
}
#hub .hubcard .tw-profile-hint{
  display:inline-block;margin-top:3px;padding:3px 7px;border:1px solid rgba(155,48,217,.14);
  border-radius:999px;background:rgba(255,111,181,.1);color:var(--b1)!important;
  font-size:10px!important;line-height:1.3;
}
#hub .hubtoque{margin:10px auto 4px}

/* Keep the banner at its welcome-screen size when the desktop hub widens. */
#hub .hubin:has(#hubMenu:not([hidden])) #hubCv{
  max-width:560px;margin-inline:auto;
}

/* 3. JANELA DO SORA JUMP = MESMA SUPERFÍCIE DA PÁGINA (Center⭐Run!)
   O palco e o iframe ficam transparentes para o gradiente abaixo aparecer;
   o fundo opaco é o do próprio hub, então nada da página vaza atrás. */
#twPreviewJogo .tw-preview-stage,
#twPreviewIframe{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}

/* 4. ÍCONE E MODAL DA TSULIPA TV */
#hub .tw-rank-tv-launch-row{
  display:flex;align-items:center;justify-content:flex-end;min-height:34px;margin:0 3px 5px;
}
#hub .tw-rank-tv-launch{
  display:grid;place-items:center;flex:none;width:38px;height:34px;min-height:34px;padding:0;
  border:2px solid #fff;border-radius:12px;color:#fff;
  background:linear-gradient(135deg,#7b3ff0,#c14fd0 58%,#4169e1);
  box-shadow:0 3px 0 #40208d,0 6px 13px rgba(60,20,120,.2);
  cursor:pointer;touch-action:manipulation;
}
#hub .tw-rank-tv-launch>span:first-child{font-size:20px;line-height:1}
#hub .tw-rank-tv-launch:focus-visible,#hub .tw-rank-tv-close:focus-visible{
  outline:3px solid #ffe14d;outline-offset:3px;
}
#hub .tw-rank-tv-modal[hidden]{display:none!important}
#hub .tw-rank-tv-modal{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  box-sizing:border-box;overflow:auto;overscroll-behavior:contain;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(35,15,70,.58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
#hub .tw-rank-tv-modal .tw-rank-tv{width:min(100%,266px);margin:0}
#hub .tw-rank-tv-head{gap:5px}
#hub .tw-rank-tv-head b{flex:none}
#hub .tw-rank-tv-head small{flex:1;min-width:0}
#hub .tw-rank-tv-close{
  display:grid;place-items:center;flex:none;width:25px;height:25px;min-width:25px;padding:0;
  border:2px solid rgba(255,255,255,.95);border-radius:50%;color:#fff;
  background:linear-gradient(135deg,#7b3ff0,#ff6fb5);
  box-shadow:0 2px 0 rgba(44,26,143,.3);
  font:900 15px/1 "M PLUS Rounded 1c",sans-serif;cursor:pointer;touch-action:manipulation;
}
#hub .tw-rank-visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}

/* 5. TOP 1 IDOL PULANDO FELIZ DENTRO DA TSULIPA TV */
#hub .tw-tv-idol-stage{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:3px auto 2px;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,225,77,.55);
}
#hub .tw-tv-idol-avatar{
  width:38px!important;height:38px!important;
  border:2px solid #ffe14d!important;
  box-shadow:0 0 10px rgba(255,225,77,.55)!important;
  animation:twTvIdolHop 1.1s ease-in-out infinite;
}
#hub .tw-tv-idol-sparkle{
  font-size:13px;line-height:1;
  animation:twTvSparkle 1.3s ease-in-out infinite alternate;
}
@keyframes twTvIdolHop{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.06)}
}
@keyframes twTvSparkle{
  from{opacity:.5;transform:scale(.85) rotate(-10deg)}
  to{opacity:1;transform:scale(1.18) rotate(12deg)}
}

@media(max-width:620px){
  #hub .tw-rank-tv-launch-row{margin:0 2px 4px;min-height:32px}
  #hub .tw-rank-tv-launch{width:36px;height:32px;min-height:32px;border-radius:11px}
  #hub .tw-rank-tv-modal .tw-rank-tv{width:min(100%,246px)}
}

/* 6. MENU EM COLUNA ÚNICA (celular e computador). A grade dos blocos
   Jogos / Meu mundo fica em index2-skin.css (grid-template-areas). */
#hub .hubcards .hubrun{order:0}
#hub .hubcards .hubpet{order:1}
#hub .hubcards .hubperf{order:2}
#hub .hubcards .hubgacha{order:3}
#hub .hubcards .tw-hubgame-sora{order:4}
#hub .hubcards .hubduo{order:5}   /* posição e formato agora vêm dos blocos em index2-skin.css */
#hub .hubcards .tw-hubgame-karaoke{order:6}
#hub #hubCards>.hubcard:not(.hubrun){min-height:150px}
#hub #hubMenu>.tw-rank-hall{margin-top:12px}

/* 7. TSULIPA TV: troféu voando no canto do banner (só no menu) */
#hub .tw-tv-float{position:relative;z-index:6;height:0;width:100%;max-width:560px;margin:0 auto}
#hub .hubin:not(:has(#hubMenu:not([hidden]))) .tw-tv-float{display:none}
#hub .tw-tv-float .tw-rank-tv-launch{
  position:absolute;right:-10px;top:-16px;width:52px;height:52px;min-height:52px;border-radius:50%;
  border:3px solid #fff;background:radial-gradient(circle at 35% 30%,#fff6b8,#ffd23f 45%,#ff9f1c);
  box-shadow:0 4px 0 #c9781a,0 8px 18px rgba(60,20,120,.3);animation:twTrofeuVoa 2.6s ease-in-out infinite;
}
#hub .tw-tv-float .tw-rank-tv-launch>span:first-child{font-size:26px}
#hub .tw-tv-float .tw-rank-tv-launch::after{content:"✨";position:absolute;left:-10px;top:-6px;font-size:14px;animation:twTvSparkle 1.3s ease-in-out infinite alternate}
#hub .tw-tv-float .tw-rank-tv-launch:hover{transform:scale(1.08)}
@keyframes twTrofeuVoa{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-7px) rotate(6deg)}}
@media(prefers-reduced-motion:reduce){#hub .tw-tv-float .tw-rank-tv-launch,#hub .tw-tv-float .tw-rank-tv-launch::after{animation:none}}
@media(max-width:620px){#hub .tw-tv-float .tw-rank-tv-launch{right:-4px;top:-14px;width:44px;height:44px;min-height:44px}}

/* 8. PERFIL: emoji, cor e time */
.perfid .perfemo{font-size:20px;margin-left:6px;vertical-align:middle}
.perfid .perftime{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;vertical-align:middle;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.perfbio .perfemolist{display:flex;flex-wrap:wrap;gap:5px;margin:-2px 0 8px}
.perfbio .perfemolist button{width:34px;height:34px;border-radius:12px;border:2px solid rgba(255,111,181,.35);background:var(--card);font-size:18px;cursor:pointer;line-height:1}
.perfbio .perfemolist button:hover{transform:scale(1.08)}
.perfbio input[type=color]{width:52px;height:34px;padding:0;border:2px solid #fff;border-radius:10px;box-shadow:0 0 0 2px rgba(155,48,217,.25);vertical-align:middle;cursor:pointer;background:none}

/* 9. Subtítulos em japonês nos títulos do menu */
#hub .tw-jpsub{display:block;font:700 10px/1.3 "M PLUS Rounded 1c","Kosugi Maru",sans-serif;color:var(--pink,#ff6fb5);letter-spacing:.045em;margin-top:2px}
#hub .tw-jpinline{display:inline;margin:0 0 0 4px;font-size:9px;color:#ffd6f0}
#hub .tw-rank-hall .tw-rank-sub{margin:2px 0 6px;font-size:11px;font-weight:800;color:var(--pink,#ff6fb5);text-align:center}
#hub .hubcards .hubrun .tw-hubgame-jp{color:#fff;opacity:.85}

/* Sora layout only; window chrome lives in tw-windows.css. */
.tw-preview-game[data-jogo="sora"] .tw-preview-panel{width:min(100%,470px);padding:14px 10px 10px}
.tw-preview-game[data-jogo="sora"] .tw-preview-header-slot{position:absolute;top:12px;left:12px;right:12px;min-height:0;padding:0;background:none;justify-content:space-between}
.tw-preview-game[data-jogo="sora"] .tw-preview-stage{flex:0 0 auto;display:block;padding:0;background:none}
.tw-preview-game[data-jogo="sora"] .hubpart{display:none}
.tw-preview-game[data-jogo="sora"] #twPreviewIframe{height:min(calc(100dvh - 72px),760px);max-width:none;border:0;box-shadow:none;background:transparent}


#hub #twRankHall h2{text-align:left}
#hub #twRankHall .tw-rank-week-note{text-align:left}
#hub #twRankHall .tw-rank-game h3{color:var(--pink);text-align:left}
#hub #twRankHall .tw-rank-game>p{text-align:left}
#hub #twRankHall .tw-rank-game li{display:flex;align-items:center;gap:6px;min-height:49px;padding:4px 0;border:0;border-top:1px solid rgba(170,140,210,.15)}
#hub #twRankHall .tw-rank-game li:first-child{padding-inline:6px;border-radius:10px;background:rgba(255,216,77,.10)}
#hub #twRankHall .tw-rank-medal{flex:0 0 18px;min-width:18px;text-align:center}
#hub #twRankHall .tw-rank-avatar-wrap{flex:0 0 34px;width:34px;height:34px}
#hub #twRankHall .tw-rank-nick{flex:1;min-width:0}
#hub #twRankHall .tw-rank-game li>strong{flex:none;margin-left:auto;color:#d08700;font-size:11px}
#hub #twRankHall .tw-rank-empty-name{flex:1;min-width:0}
@media(max-width:620px){
#hub #twRankHall .tw-rank-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#hub #twRankHall .tw-rank-game{padding:8px 5px}
#hub #twRankHall .tw-rank-game h3{min-height:2.8em;font-size:9px;line-height:1.35;text-align:center}
#hub #twRankHall .tw-rank-game>p{min-height:3em;font-size:8px;line-height:1.35;text-align:center}
#hub #twRankHall .tw-rank-game li{display:grid;grid-template-columns:15px minmax(0,1fr);grid-template-rows:27px auto auto;gap:2px 3px;justify-items:center;min-height:0;padding:6px 0}
#hub #twRankHall .tw-rank-medal{grid-column:1;grid-row:1;min-width:0;font-size:11px}
#hub #twRankHall .tw-rank-avatar-wrap{grid-column:2;grid-row:1;width:26px;height:26px}
#hub #twRankHall .tw-rank-nick{grid-column:1/3;grid-row:2;width:100%;font-size:8px;text-align:center}
#hub #twRankHall .tw-rank-game li>strong{grid-column:1/3;grid-row:3;justify-self:center;margin:0;font-size:9px}
#hub #twRankHall .tw-rank-empty-name{grid-column:1/3;grid-row:2/4;width:100%;font-size:8px;text-align:center;white-space:normal;overflow-wrap:anywhere}
}