/* Textos da Página */
h3{font-size:var(--font-large); font-weight:var(--font-bold);}
span{font-size:var(--font-small); font-weight:var(--font-bold);}
.text-black{color:var(--black);}
.text-gray{color:var(--gray);}
.text-blue{color:var(--blue);}
.text-green{color:var(--green);}
.text-red{color:var(--red);}
.text-yellow{color:var(--yellow);}
.text-purple{color:var(--purple);}

/* Fontes e Inputs - Forçar a Fonte nos Botões, Campos e Opções */
.app-shell{min-height:100%;padding:10px; margin-left: 10px; margin-right: 10px;}

/* Logotipo do Topo - Elementos de marca*/
.brand{display:flex;align-items:center;}
.brand-logo{width:250px;height:100px;object-fit:contain;padding:5px;border-radius:12px;}
.eyebrow{margin:5px;text-transform:uppercase;font-size:var(--font-small);color:var(--white);}


/* Efeitos de Bola na Página do HTML */
*{box-sizing:border-box}
html{height: 100%;background:var(--background);}
body{
background: transparent;
height:100%;
margin:0;
font-family:var(--font-family);
font-optical-sizing:auto;
font-style:normal;
font-weight:500;
color:var(--white);
overflow-x:hidden;
}

/* Cards Grid*/
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* Cards Visuais*/
.card-background{grid-column:1/-1;border:1px solid var(--border);background:var(--panel);border-radius:20px;padding:10px;}
.card-background-transparent{border:none;background:transparent;grid-column:1/-1}
.card-background-title{color:var(--mutted);display:flex;align-items:center;justify-content:center;gap:10px;margin:10px;font-size:var(--font-large);font-weight:var(--font-bold);letter-spacing:.08em;text-align:center;}
.card-background-title i{color:var(--mutted);}
  
/* Paginação */
.view-panels{position:relative;min-height:min(100vh,700px);max-height:calc(100vh - 140px);overflow-y:auto;overflow-x:hidden;}
.view-panel{display:none;min-height:0;height:100%;}
.view-panel.active{display:block;}
.view-panels>.view-panel:first-child{height:100%;}

/* Mapa - Ocupar toda a página */
#mapView{width:100%;height:100%;}
#mapView .board-canvas{width:100%;height:100%;aspect-ratio:auto;}

/* Botões */
.btn,.btn-ghost{border-radius: 12px; gap:5px; padding:12px; border:1px solid var(--border); font-size: var(--font-medium); font-weight:var(--font-bold); backdrop-filter:blur(20px); box-shadow:var(--shadow); color:var(--white); transition:.25s; cursor:pointer; display:flex; align-items:center; justify-content:center;cursor:pointer; transition:.2s ease;}
.btn-ghost:hover{background:var(--panel);transform:translateY(-2px)}
.btn-red:hover{transform:translateY(-3px);}
.btn-dark:hover{transform:translateY(-3px);}
.btn-gray:hover{transform:translateY(-3px);}
.btn-yellow:hover{transform:translateY(-3px);}
.btn-blue:hover{transform:translateY(-3px);}
.btn-green:hover{transform:translateY(-3px);}
.btn-purple:hover{transform:translateY(-3px);}
.btn-dark{background:var(--panel);}
.btn-gray{background:var(--gray);}
.btn-yellow{background:var(--yellow);}
.btn-blue{background:var(--blue);}
.btn-green{background:var(--green);}
.btn-purple{background:var(--purple);}
.btn-red{background:var(--red);} 
.btn-ghost{background:var(--panel);}



/* Alerta da Página */
.dialog-backdrop{position:fixed; inset:0; display:none;align-items:center; justify-content:center; backdrop-filter:blur(20px); z-index:99999;}
.dialog-backdrop.show{display:flex;}
.dialog-card{background: var(--background);width:min(420px,100vw); padding:20px; gap:20px;border-radius:12px; background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); text-align:center;}
.dialog-icon{width:72px; height:72px; margin:auto; border-radius:50%; display:grid; place-items:center; background:rgba(255,70,70,.15); color:var(--red); font-size:30px; margin-bottom:20px;}
.dialog-buttons{margin-top:24px; display:flex; gap:20px; justify-content:center;}
.topbar-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;white-space:nowrap;}

/* Resultados de Jogadores Sorteados - Container dos jogadores da rodada */
.round-players-card{background:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;width:100%;color:var(--white);font-size:var(--font-small);margin-bottom: 10px;}
.round-players-waiting{color:var(--blue);font-weight:var(--font-bold);}

/* Ícones dos cards */
.round-players-card i{margin:10px; color:var(--white);font-size:var(--font-small);}

/* Imagem padrão da rodada */
.round-players-card>img{margin:5px;width:25px;height:25px;border-radius:50%;object-fit:cover;}

/* Texto padrão da rodada */
.round-players-card>span{margin:5px;gap:5px;font-size:var(--font-small);color:var(--white);}

/* Jogador da rodada - Linha individual do jogador*/
.round-player{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;text-align:center;}

/* Foto do jogador */
.round-player img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 24px;}

/* Nome do jogador */
.round-player span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-small);}

/* Identificação da Casa */
.house-pill{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:5px 9px;border-radius:999px;font-size:.72rem;letter-spacing:.06em;line-height:1;}

/* Identificação de Ingressos */
.badge-online,.badge-presencial{display:inline-flex;align-items:center;justify-content:center;gap:5px; padding:5px;border-radius:12px;font-size:var(--font-small);text-transform:uppercase}
.badge-online{background:rgba(255, 217, 0, 0.184);color:var(--yellow);border:1px solid var(--border)}
.badge-presencial{background:rgba(14, 124, 226, 0.172);color:var(--blue);border:1px solid var(--border)}

/* Navegação do Topo */
.topbar{display:grid;grid-template-columns:auto 1fr auto;padding:10px;align-items:center;}
.topbar .game-tabs{justify-self:center;}

/* Navegação MAPA / PERGUNTAS / ROLETAS / CONFIGURAR */
.game-tabs{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;min-width:0;}
.game-tab{display:flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;appearance:none;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--panel);color:var(--white);box-shadow:var(--shadow);font-weight:var(--font-bold);cursor:pointer;transition:.5s ease;}
.game-tab:hover{background:var(--panel);transform:translateY(-2px)}
.game-tab.active{background:var(--blue);}

/* Distribuição da Página - Ajuste de Altura Mínima */
/* Estado normal dos elementos centrais da paginação. - Para alterar a paginação e ocultação de laterais, ajusar os pontos de STAGE e manter sempre a lagura estipulada igual em todos os campos abaixo (240PX) */
.stage{position:relative;display:grid;gap:12px;align-items:stretch;height:calc(110dvh - 120px);min-height:0;display:grid; grid-template-columns:
minmax(0, auto)
minmax(0, 1fr)
minmax(240px, 240px);}

/* Distribuição - Sem painel de mover, pontuar e ajuda */
.stage.stage-no-right{grid-template-columns:240px minmax(0,1fr)}
.stage.stage-wide.stage-no-right{grid-template-columns:minmax(0,1fr)}

/* Distribuição - Sem painel de jogadores quando configurado o checkbox visual */
.stage.hide-players{grid-template-columns:minmax(0,1fr) 240px;}
.stage.hide-players .dock-left{display:none;}
.stage.hide-players .dock-right{grid-column:2;}

/* Responsividade */
@media (max-width:1200px){
.app-shell{margin-right:5px;margin-left: 5px;}
.brand-logo{width:180px;height:70px;}
.center-hud{width:min(30vw,220px);}
.game-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;justify-self:stretch; justify-content:flex-start;flex-wrap:wrap;}
.game-tab{width:100%;}
.btn-ghost,
.btn{width:100%;margin-bottom:5px;}
.stage{grid-template-columns:1fr;min-height:auto;}
.topbar{grid-template-columns:1fr;gap:12px}
.topbar-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.topbar-actions 
.btn-ghost{width:auto;flex:0 0 auto;margin:0;}
}