/* TsuLiPa⭐World · INDEX 2 visual shell (Stage 2A)
   Scoped to explicit tw-* classes in the canonical homepage.
   Keep each game's own art, theme colors, mechanics and interactions. */
.tw-modal.tw-modal-gacha{--tw-modal-width:540px}
.tw-modal.tw-modal-duo{--tw-modal-width:800px}
/* Header labels in the integrated hub share the same Mochiy type hierarchy.
   Original card backgrounds, grid placements and mechanics are unchanged. */
#hub .hubcards .hubcard b {
  font-family:var(--tw-modal-font)!important;
  font-weight:400!important;
  line-height:1.35;
  overflow-wrap:anywhere;
}
/* INDEX 2 · reuse the OFFICIAL Center Run header instead of another bar.
   The existing DOM header is moved here while a special game is open.
   No duplicate logo, #best element or independent scoreboard. */
.tw-preview-game{background:var(--bg1,#c9ecfc)}
.tw-preview-header-slot{
  position:relative;z-index:3;
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:72px;
  padding:12px max(12px,env(safe-area-inset-right))
          6px max(12px,env(safe-area-inset-left));
  background:radial-gradient(circle at 0 0,rgba(255,111,181,.22),transparent 42%),
             radial-gradient(circle at 100% 30%,rgba(123,63,240,.2),transparent 45%),
             radial-gradient(circle at 20% 100%,rgba(92,199,44,.16),transparent 40%),
             linear-gradient(160deg,var(--bg1),var(--bg2));
}
.tw-preview-header-slot>header{
  margin:0;max-width:760px;min-width:0;flex:1 1 760px;
  /* Every other visual rule remains the official body > header rule. */
}
.tw-preview-header-slot .tw-preview-voltar{
  flex:none;position:static;
  font:800 12px "M PLUS Rounded 1c",sans-serif;
  padding:7px 12px;
  color:var(--b1);background:var(--chip);
  border:0;border-radius:99px;box-shadow:0 2px 0 rgba(44,26,143,.2);
}
.tw-preview-stage{
  position:relative;isolation:isolate;flex:1 1 0;min-height:0;
  width:100%;display:flex;align-items:stretch;justify-content:center;
  padding:0 clamp(0px,1.6vw,24px);overflow:hidden;
  /* Identical to the original .hub background, not per-theme sky colors. */
  background:radial-gradient(circle at 0 0,rgba(255,111,181,.22),transparent 42%),
             radial-gradient(circle at 100% 30%,rgba(123,63,240,.2),transparent 45%),
             radial-gradient(circle at 20% 100%,rgba(92,199,44,.16),transparent 40%),
             linear-gradient(160deg,var(--bg1),var(--bg2));
}
/* Karaoke⭐Time! grows to its real iframe content; the official footer follows it.
   tw-kt-altura supplies the iframe's measured height. Never impose a viewport-height
   minimum here: it creates an artificial blank area before/after the audience. */
#twPreviewJogo[data-karaoke-tela]{
  position:relative!important;inset:auto!important;z-index:auto!important;
  display:flex!important;flex-direction:column;width:100%;min-height:0;
  height:auto!important;overflow:visible!important;
}
#twPreviewJogo[data-karaoke-tela] .tw-preview-stage{
  flex:0 0 auto!important;min-height:0!important;height:auto!important;
  overflow:visible!important;padding:0;align-items:stretch;
}
#twPreviewJogo[data-karaoke-tela] #twPreviewIframe{
  flex:0 0 auto;width:100%;max-width:970px;height:auto;min-height:0!important;
  margin:0 auto;
}
/* Source is #hubPart; same markup, .hubpart styles, keyframes and duration. */
.tw-preview-stage .hubpart{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.tw-preview-game[data-tema="valentine"] .hubpart i{animation-name:hubsobe}
.tw-preview-stage #twPreviewIframe{
  position:relative;z-index:1;flex:0 1 auto;
  width:100%;max-width:1480px;height:100%;min-height:0;
  display:block;border:0;background:transparent;
}
.tw-preview-game[data-jogo="sora"] #twPreviewIframe{
  max-width:760px;
  border-left:1px solid rgba(233,204,255,.23);
  border-right:1px solid rgba(233,204,255,.23);
  box-shadow:0 14px 45px rgba(11,8,39,.28);
}
@media(max-width:760px){
  .tw-preview-header-slot{gap:5px;padding:7px 8px;min-height:58px}
  .tw-preview-header-slot>header{min-width:0}
  .tw-preview-header-slot header .logo{min-width:0}
  .tw-preview-header-slot header .logo b{font-size:clamp(11px,3.7vw,17px)}
  .tw-preview-header-slot header .logo small{font-size:9px}
  .tw-preview-header-slot header .logo i,
  .tw-preview-header-slot header .tw-ico{width:28px;height:28px}
  .tw-preview-header-slot .tw-preview-voltar{font-size:11px;padding:7px 8px}
  .tw-preview-header-slot .pill{font-size:11px;padding:5px 8px}
  .tw-preview-stage{padding:0}
  .tw-preview-game[data-jogo="sora"] #twPreviewIframe{border:0;box-shadow:none}
}
@media(max-width:385px){
  .tw-preview-header-slot header .logo i{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tw-preview-stage .hubpart i{animation:none!important}
}

/* Página inicial em blocos (02/11/2026): "Meu mundo" (Perfil, Pet, Gacha) vem antes de "Jogos" (Center Run, Sora, Karaoke, Moon Duo).
   As missões ficam depois da busca e antes da vitrine de Idols.
   O bloco "Hoje" (Encontro, Música da semana) fica antes, em #hubHoje. */
#hub #hubCards{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"tm tm" "profile profile" "pet gacha" "tj tj" "run run" "sora karaoke" "duo duo";
}
#hub #hubCards .hubbt-jogos{grid-area:tj}
#hub #hubCards .hubbt-mundo{grid-area:tm;margin-top:10px}
#hub #hubCards .hubrun{grid-area:run}
#hub #hubCards .hubpet{grid-area:pet}
#hub #hubCards .hubperf{grid-area:profile;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:4px 10px}
#hub #hubCards .hubgacha{grid-area:gacha}
#hub #hubCards .tw-hubgame-sora{grid-area:sora}
#hub #hubCards .hubduo{grid-area:duo;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:4px 10px}
#hub #hubCards .tw-hubgame-karaoke{grid-area:karaoke}
/* no celular, Perfil e Moon Duo ocupam a linha inteira, em formato de faixa (sem a altura mínima de 150px) */
#hub #hubCards>button.hubcard.hubperf,#hub #hubCards>button.hubcard.hubduo{min-height:0}
#hub #hubCards .hubduo>small:not(.tw-hubgame-jp){flex-basis:100%}
@media(min-width:700px){
 #hub #hubCards>button.hubcard.hubperf,#hub #hubCards>button.hubcard.hubduo{min-height:150px}
 #hub #hubCards .hubduo>small:not(.tw-hubgame-jp){flex-basis:auto}
 #hub #hubCards{
   grid-template-columns:repeat(3,minmax(0,1fr));
   grid-template-areas:"tm tm tm" "profile pet gacha" "tj tj tj" "run run run" "sora karaoke duo";
   align-items:stretch;
 }
 #hub #hubCards .hubperf,#hub #hubCards .hubduo{
   flex-direction:column;justify-content:center;gap:3px;flex-wrap:nowrap;
 }
}
#hub #hubCards .tw-hubgame-karaoke .tw-karaoke-timer{
  display:block;margin-top:5px;padding:5px 8px;
  border-radius:999px;background:rgba(245,180,0,.13);
  color:var(--ink);font:800 11px/1.3 "M PLUS Rounded 1c",sans-serif;
  font-variant-numeric:tabular-nums;
}
#hub #hubCards .tw-hubgame-karaoke[aria-disabled="true"]{
  cursor:not-allowed;
}