:root{
/* Cores de Mapas Personalizáveis - Root */
--map-accent:#111257;
--map-accent2:#1d0fe0;
--map-track:#73adf3a4;
--map-trackGlow:#5a99e6;
--marker-start-bg:rgba(0, 255, 106, 0.50);
--marker-end-bg:rgba(255,60,140,.50);
--marker-start-text:rgba(0,255,170,1);
--marker-end-text:rgba(255,63,141,1);

/* Sombra das Casas do Tabuleiro - Root */
--glow-purple: 0 0 10px rgba(183, 48, 255, 0.80), 0 0 20px rgba(155, 48, 255, 0.80);
--glow-blue: 0 0 10px rgba(48,144,255,.80), 0 0 20px rgba(48,144,255,.80);
--glow-red: 0 0 10px rgba(255,74,104,.80), 0 0 20px rgba(255,74,104,.80);
--glow-green: 0 0 10px rgba(53,255,167,.80), 0 0 20px rgba(53,255,167,.80);
--glow-gray: 0 0 10px rgba(175, 175, 175, 0.80), 0 0 20px rgba(130, 130, 130, 0.80);
--glow-black: 0 0 10px rgba(50, 50, 50, 0.80), 0 0 10px rgba(20, 20, 20, 0.80);
--glow-yellow: 0 0 10px rgba(255, 252, 53, 0.80), 0 0 20px rgba(252, 255, 53, 0.80);
}

/* Logotipo Central - Posiação centralizada no mapa */
.center-count{position:absolute;font-size:.5rem;color:var(--white);text-transform:uppercase;}
.center-hud{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);aspect-ratio:1;display:grid;place-items:center;text-align:center;pointer-events:none;z-index:2;background:transparent;}
.center-hud img{width:70%;max-width:150px;height:auto;object-fit:contain;display:block;margin-bottom: 20px;}
.center-hud span{color:var(--white);font-size:var(--selection-size-font);font-weight:var(--font-bold);}

/* Avatares - INÍCIO */
.player-token-start{width:24px!important;height:24px!important;}

/* Avatares - CASA 01 em diante. */
.player-token-house{width:40px!important;height:40px!important;}

/* Avatares - Imagem no INÍCI.O */
.player-token-start img{width:24px!important;height:24px!important;}

/* Avatares - Imagem INTERNAS dos jogadores nas casas do tabuleiro. */
.player-token-house img{width:40px!important;height:40px!important;}

/* Limites da altura dos painéis e contêneres centrais */
.board-canvas{height:100%;min-height:0;max-height:none;aspect-ratio:auto;}

/* Seletor de Mapas */
.map-select{max-width:90%; font-size:var(--selection-size-font); background:var(--black); color:var(--white); border: transparent;}
.map-select,.finish-btn{cursor:pointer; border-radius:12px; padding:10px; border: transparent;}
.map-select:disabled,.btn-ghost:disabled,.btn-yellow:disabled,.btn-red:disabled,.btn-purple:disabled,.btn-blue:disabled,.finish-btn:disabled{opacity:.3; cursor:not-allowed;display:none;}

/* Mapa - Linha de Fundo do Mapa Renderizado */
.track-svg,.decor-layer,.cells-layer,.players-layer,.editor-layer{position:absolute;inset:0;}

/* Mapa -  Linha de Fundo do Mapa - Cores Fixas */
.track-path{fill:none; stroke:var(--map-track); stroke-width:var(--selection-size-track); stroke-linecap:round; stroke-linejoin:round;  filter:drop-shadow(0 0 5px rgba(0,0,0,.10)); opacity:.50;}
.track-path-glow{fill:none; stroke:var(--map-track-glow); stroke-width:var(--selection-size-path); stroke-linecap:round; stroke-linejoin:round;  stroke-dasharray:20 20; animation:dash 20s linear infinite; filter:drop-shadow(0 0 20px var(--map-track-glow));}

/* Mapa -  Botões START/END */
.start-marker{background:var(--marker-start-bg);color:var(--marker-start-text);border:0px solid;border-color:rgba(0,255,170,1);box-shadow:20px rgba(0,255,170,.50);transform:translate(-50%,-175%);}
.end-marker{background:var(--marker-end-bg);color:var(--marker-end-text);border:0px solid; border-color:rgba(255,63,141,1);box-shadow:20px rgba(255,63,141,.50);transform:translate(-50%,75%);}
.start-marker,.end-marker{transform:translate(-50%,-50%);}

/* Casas - Células */
.cells-layer{z-index:4}
.cell{position:absolute;width:var(--selection-size-house);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:15px;border:2px solid rgba(255,255,255,.20);background:var(--cell-empty);transition:transform .50s ease,box-shadow .50s ease,background-color .50s ease,border-color .50s ease,filter .50s ease;overflow:hidden;}

/* Casas - Números */
.cell::before{content:"";position:absolute;inset:var(--selection-icon-position);background:linear-gradient(135deg, rgba(255,255,255,.10), transparent 10%),radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 65%);opacity:0;transition:opacity .5s ease;}
.cell::after{content:attr(data-position);position:absolute;left:35%;bottom:3px;font-weight:900;font-size:var(--selection-size-font);color:var(--cell-number-color,rgba(255,255,255,.90));}
.cell.reveal::before{opacity:1}

/* Tabuleiro - Fundos - Cores das Casas do Mapa */
.cell.purple{background:linear-gradient(135deg, #751e95, var(--cell-purple));box-shadow:var(--glow-purple);border-color:rgba(166, 70, 255, 0.50)}
.cell.blue{background:linear-gradient(135deg, #1e5e95, var(--cell-blue));box-shadow:var(--glow-blue);border-color:rgba(70,155,255,.50)}
.cell.red{background:linear-gradient(135deg, #91192b, var(--cell-red));box-shadow:var(--glow-red);border-color:rgba(255,77,111,.50)}
.cell.green{background:linear-gradient(135deg, #117556, var(--cell-green));box-shadow:var(--glow-green);border-color:rgba(46,255,160,.50)}
.cell.gray{background:linear-gradient(135deg, #474b55, var(--cell-gray));box-shadow:var(--glow-gray);border-color:rgba(255,255,255,.25)}

/* Tabuleiro - Casas Especiais - Preta */
.cell.black i{color: rgba(93, 111, 138, 0.9);}
.cell.black{
--cell-number-color:rgba(93, 111, 138, 0.9);
transform: translate(-50%,-50%)rotate(-5deg);
background:linear-gradient(135deg,#444444,#111111);
box-shadow:var(--glow-black);border-color:rgba(90, 90, 90, 0.50); 
filter: 
drop-shadow(0 0 0 #1c1c1c) 
drop-shadow(0 0 3px rgba(26, 26, 39, 0.95)) 
drop-shadow(0 0 10px rgba(13, 15, 27, 0.85)) 
drop-shadow(0 0 10px rgba(32, 33, 48, 0.90))}

/*Efeito interno na casa especial (Estrela)
.cell.yellow::before{
content:"";position:absolute;inset:-12px;background:rgba(255,255,255,.20);
clip-path:polygon(50% 3%,61% 34%,96% 40%,69% 60%,76% 96%,50% 76%,24% 96%,31% 60%,4% 40%,39% 34%);
filter:drop-shadow(0 0 4px rgba(255,255,255,.95));opacity:1;z-index:1;pointer-events:none;}

/* Tabuleiro - Casas Especiais - Amarela */
.cell.yellow i{color: rgba(255, 90, 0, 0.9); z-index:3;}

.cell.yellow{
--cell-number-color:rgba(255, 90, 0, 0.9);
transform: translate(-50%,-50%)rotate(10deg);
background:linear-gradient(135deg,#ffe626 0%,#ffd86b 48%,#ddae02 100%); 
box-shadow:var(--glow-yellow); 
border-color:rgba(248, 232, 5, 0.70);
filter: 
drop-shadow(0 0 0 #d4af37) 
drop-shadow(0 0 3px rgba(255,215,0,.95)) 
drop-shadow(0 0 10px rgba(239,176,2,.85))
drop-shadow(0 0 30px rgba(239,176,2,.50));}

/* Tabuleiro - Ícones - Opacidade para Todos os Ícones das Casas */
.cell.blue i,.cell.red i,.cell.green i,.cell.purple i,.cell.yellow i,.cell.gray i{opacity:1}

/* Tabuleiro - Ícones - Cor / Tamanho / Local dos Ícones das Casas */
.cell i{position:absolute; inset:var(--selection-icon-position); font-size:var(--selection-size-icon); color:rgba(255,255,255,.90); text-shadow:10px rgba(0,0,0,.90)}
.cell.red i {color: rgba(255, 0, 98, 0.7);}
.cell.green i{color: rgba(0, 255, 128, 0.7);}
.cell.purple i{color: rgba(208, 53, 255, 0.9);}

/* Tabuleiro - Casas de Pontos - Redondas */
.cell.red,.cell.green{border-radius:50%;}

/* Tabuleiro - Casas de Pontos - Quadradas Arredondadas - Border Radius é menor que as demais casas. */
.cell.purple{border-radius:3px;}

/* Mapas Personalizáveis */
.board-background {background-color: var(--map-accent);}

/* Modo Criar Mapas */
.board-editor-active{cursor:crosshair}
#boardCanvas{overflow:hidden;}
#centerCount{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;white-space:nowrap;}

/* Board - Restrições */
.board-caption{position:absolute; left:10px;bottom:10px;z-index:6;padding:10px;border-radius:999px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.80);font-size:var(--selection-size-font);backdrop-filter:blur(10px)}
.board-canvas{min-height:min(70vh,700px);aspect-ratio:1.5;position:relative;border-radius:30px;overflow:hidden;background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.03), transparent 50%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));}
.board-canvas::before{content:"";position:absolute;inset:5px;border-radius:24px;border:1px solid rgba(255,255,255,.20);pointer-events:none;}
@keyframes dash{to{stroke-dashoffset:-260}}

/* Board - Limites */
.board-shell{height:100%;min-height:0;grid-column:1; border-radius:12px;padding:10px;z-index:3;overflow:hidden}
.board-shell-header{display:flex;justify-content:space-between;gap:15px;align-items:flex-end; padding:4px 6px 14px}

/* Responsividade */
@media (max-width:1200px){
.board-canvas{width:100%;max-width:100%;min-height:0;aspect-ratio:1;overflow:hidden;}
.board-caption{left:10px;right:10px;}
.board-shell{border-radius:22px;padding:12px;}
.board-shell-header{flex-direction:column;align-items:flex-start;}
.map-select{width:100%;margin-bottom:5px;}
}