/* =========================================================
   v7.11.85 — QA responsivo + Jogador em abas + Dicas
   ========================================================= */

/* SMALL / baixa altura: mantém os dois botões da partida acima do banner,
   respeitando safe areas e sem afetar celulares altos/tablets. */
@media (max-width:430px) and (max-height:720px){
  body.nine-playing{overflow:hidden!important}
  body.nine-playing .gamePage{
    width:min(94vw,310px)!important;
    height:100dvh!important;
    box-sizing:border-box!important;
    padding:max(3px,env(safe-area-inset-top,0px)) 0 calc(66px + env(safe-area-inset-bottom,0px))!important;
    overflow:hidden!important;
  }
  body.nine-playing .gameHeaderAssets{margin:0 0 -2px!important;gap:5px!important}
  body.nine-playing .hudAsset{height:42px!important}
  body.nine-playing .musicHudButton{width:42px!important;height:42px!important;border-radius:13px!important}
  body.nine-playing .musicHudButton img{width:18px!important;height:18px!important}
  body.nine-playing .musicHudButton span{font-size:6px!important}
  body.nine-playing .gameMiniTitle{height:28px!important;margin:-2px 0 0!important}
  body.nine-playing .gameMiniTitle img{height:28px!important}
  body.nine-playing .topstats{margin:1px 0!important;gap:4px!important}
  body.nine-playing .stat{padding:3px 2px!important;border-radius:11px!important}
  body.nine-playing .stat b{font-size:15px!important}
  body.nine-playing .statIcon{height:12px!important;margin-top:0!important}
  body.nine-playing .statIcon img{width:14px!important;height:14px!important}
  body.nine-playing .progressWrap{height:4px!important;margin:4px 2px 5px!important}
  body.nine-playing .board{gap:6px!important;padding:6px!important;border-radius:17px!important}
  body.nine-playing .tile{border-radius:12px!important;font-size:clamp(27px,7vh,45px)!important}
  body.nine-playing .actions{margin-top:4px!important;gap:6px!important}
  body.nine-playing #newGame,body.nine-playing #changeMode{height:42px!important;min-height:42px!important;font-size:10px!important;padding:0 9px!important}
  body.nine-playing .gameBannerFixed{height:58px!important;min-height:58px!important}
}

/* Conquistas: data sempre abaixo da recompensa, em uma única linha. */
.achievementCard .achievementBody{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"title" "desc" "reward" "date"!important;
  row-gap:0!important;
}
.achievementCard .achievementRewardWrap{grid-area:reward!important;width:100%!important;max-width:100%!important}
.achievementCard .achievementMeta{
  grid-area:date!important;
  width:100%!important;max-width:none!important;
  margin:4px 2px 0 0!important;
  text-align:right!important;
  white-space:nowrap!important;
  font-size:9px!important;
  line-height:1!important;
  color:#5c6f84!important;
}
@media(max-width:500px){.achievementCard .achievementMeta{font-size:8px!important;margin-top:4px!important}}

/* Dicas: dois últimos cards usam o slice real TOP / MIDDLE / BOTTOM. */
#tutorial .modesGuide,#tutorial .benefitExplain{background:none!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;overflow:visible!important}
#tutorial .tutorialBottomFrame{width:100%!important;overflow:hidden!important}
#tutorial .tutorialBottomFrame .sliceFrame__content{padding:15px 17px 16px!important;box-sizing:border-box!important}
#tutorial .modesGuide h3,#tutorial .benefitExplain h3{margin:0 0 10px!important;color:#17466e!important}
#tutorial .guideGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
#tutorial .guideGrid>div{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;column-gap:8px!important;align-items:center!important;padding:9px 10px!important;border-radius:13px!important;background:rgba(220,246,250,.65)!important;min-width:0!important}
#tutorial .guideModeIcon{width:30px!important;height:30px!important;object-fit:contain!important;grid-row:1/3!important;filter:none!important}
#tutorial .guideGrid b{font-size:11px!important;color:#17466e!important;line-height:1.08!important}
#tutorial .guideGrid span{font-size:9px!important;line-height:1.2!important;color:#4f7693!important;margin-top:2px!important}
#tutorial .benefitExplainInner{display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;text-align:left!important}
#tutorial .benefitExplainInner>img{width:62px!important;height:62px!important;object-fit:contain!important}
#tutorial .benefitExplainInner p{margin:0!important;color:#4f7693!important;font-size:11px!important;line-height:1.35!important}
@media(max-width:390px){
  #tutorial .guideGrid{grid-template-columns:1fr 1fr!important}
  #tutorial .guideGrid>div{grid-template-columns:28px minmax(0,1fr)!important;padding:8px!important;column-gap:6px!important}
  #tutorial .guideModeIcon{width:25px!important;height:25px!important}
  #tutorial .guideGrid b{font-size:9px!important}
  #tutorial .guideGrid span{font-size:7px!important}
  #tutorial .benefitExplainInner{grid-template-columns:52px minmax(0,1fr)!important;gap:9px!important}
  #tutorial .benefitExplainInner>img{width:50px!important;height:50px!important}
  #tutorial .benefitExplainInner p{font-size:9px!important}
}
/* Lâmpada limpa: sem brilho, halo ou sombra no header/atalho. */
#tutorialBtn,#tutorialBtn::before,#tutorialBtn::after,#tutorialBtn img,
#tutorial .tutorialMineHero .mineHeroIconWrap,#tutorial .tutorialMineHero .mineHeroIconWrap::before,#tutorial .tutorialMineHero .mineHeroIconWrap::after,#tutorial .tutorialMineHero .mineHeroIconWrap img{
  filter:none!important;box-shadow:none!important;text-shadow:none!important;background-image:none!important;
}

/* Ícone oficial de indisponibilidade online. */
.nineOnlineRequiredIcon{object-fit:contain!important;filter:none!important}

/* Jogador: navegação por 3 abas, sem rolagem longa única. */
.playerTabs{
  position:sticky;top:0;z-index:25;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  margin:0 0 12px;padding:7px;border-radius:18px;
  background:rgba(235,250,254,.95);backdrop-filter:blur(8px);
  border:1px solid rgba(49,140,183,.14);box-shadow:0 7px 18px rgba(31,106,143,.08)
}
.playerTab{min-width:0;min-height:52px;padding:5px 4px!important;border:0!important;border-radius:13px!important;background:transparent!important;color:#527b96!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;font-size:8px!important;font-weight:1000!important;line-height:1.05!important}
.playerTab img{width:25px;height:25px;object-fit:contain;display:block;filter:none!important}
.playerTab.active{background:#fff!important;color:#17466e!important;box-shadow:0 4px 12px rgba(37,114,151,.12)!important}
.playerTabPanel.hidden{display:none!important}
.playerTabPanel{animation:ninePlayerTabIn .16s ease-out}
@keyframes ninePlayerTabIn{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}
.playerTabPanel>.playerSection:first-child{margin-top:0!important}

/* Amigos: resumo rápido clicável. */
.friendRow.friendRowClickable{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.friendRow.friendRowClickable:active{transform:scale(.992)}
.friendRow.friendRowClickable:hover{border-color:rgba(20,151,163,.22);box-shadow:0 6px 14px rgba(33,112,148,.08)}
.friendNameLine{display:flex;align-items:center;gap:6px;min-width:0}
.friendNameLine strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friendLevel{flex:none;padding:2px 6px;border-radius:999px;background:#e7f8fb;color:#168b9d;font-size:8px;font-weight:1000;white-space:nowrap}
.friendSummaryLine{display:flex!important;align-items:center;gap:5px;flex-wrap:wrap}
.friendXp{color:#5c8098;font-weight:1000}
.friendRowHint{font-size:7px!important;color:#9aabb6!important;margin-top:3px!important}

/* Detalhe do amigo */
.friendDetailOverlay{position:fixed;inset:0;z-index:10080;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(12,49,72,.54);backdrop-filter:blur(8px)}
.friendDetailOverlay.hidden{display:none!important}
.friendDetailCard{width:min(94vw,500px);max-height:min(90dvh,760px);overflow:auto;padding:16px;border-radius:25px;background:#eefbfe;box-shadow:0 24px 70px rgba(12,55,82,.28);color:#17466e}
.friendDetailHead{display:grid;grid-template-columns:58px minmax(0,1fr) 40px;gap:10px;align-items:center;margin-bottom:10px}
.friendDetailAvatar{width:58px;height:58px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid rgba(32,149,166,.18)}
.friendDetailIdentity{min-width:0}.friendDetailIdentity h3{margin:0!important;font-size:20px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friendDetailIdentity span{display:block;margin-top:2px;color:#63869b;font-size:10px;font-weight:900}
.friendDetailClose{width:38px!important;height:38px!important;padding:0!important;border-radius:50%!important;background:#fff!important;color:#17466e!important;font-size:20px!important}
.friendDetailTrajectory{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:center;padding:10px;border-radius:18px;background:#fff;border:1px solid rgba(49,140,183,.12)}
.friendDetailTrajectory img{width:100px;height:100px;object-fit:contain}.friendDetailTrajectory small{display:block;color:#6e91a5;font-size:8px;font-weight:1000;letter-spacing:.08em}.friendDetailTrajectory strong{display:block;margin-top:3px;font-size:16px}.friendDetailTrajectory span{display:block;margin-top:4px;color:#5b7f95;font-size:10px;font-weight:850}
.friendDetailStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:9px 0}.friendDetailStats>div{padding:9px 6px;border-radius:14px;background:#fff;text-align:center;border:1px solid rgba(49,140,183,.10)}.friendDetailStats small{display:block;color:#7595a6;font-size:7px;font-weight:1000}.friendDetailStats strong{display:block;margin-top:2px;font-size:14px;color:#17466e}
.friendCollection{margin-top:9px;padding:10px;border-radius:16px;background:#fff;border:1px solid rgba(49,140,183,.10)}.friendCollectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}.friendCollectionHead strong{font-size:11px}.friendCollectionHead span{font-size:9px;font-weight:1000;color:#6f8fa1}.friendCollectionChips{display:flex;gap:5px;flex-wrap:wrap}.friendCollectionChip{padding:4px 7px;border-radius:999px;background:#eaf8fb;color:#426f89;font-size:8px;font-weight:900}.friendCollectionChip.selected{background:#dff7e8;color:#178851}.friendDetailLoading{padding:30px 12px;text-align:center;color:#64869a;font-size:11px;font-weight:900}
@media(max-width:390px){.friendDetailStats{grid-template-columns:repeat(2,minmax(0,1fr))}.friendDetailTrajectory{grid-template-columns:82px minmax(0,1fr)}.friendDetailTrajectory img{width:78px;height:78px}}