.room-strip[hidden]{display:none}.room-strip{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 0 20px;border:1px solid #9bcea326;border-radius:8px;padding:12px 16px;background:#15372b55}.room-strip>div{display:flex;align-items:center;gap:12px}.room-strip #room-code{font-size:9px;letter-spacing:1.2px;color:var(--gold)}#room-state{font-size:8px;color:var(--muted);letter-spacing:1px}.room-strip .quiet{padding:7px 10px;font-size:9px}.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:25px 0}.mode-card{background:linear-gradient(130deg,#33513770,#0c211a);border:1px solid #e6bc702c;border-radius:9px;padding:27px 20px;text-align:left;color:var(--text)}.mode-card:hover{border-color:var(--gold)}.mode-card>span{display:block;font:40px var(--display);color:var(--gold);margin-bottom:20px}.mode-card b{font:20px var(--display);display:block}.mode-card small{font-size:11px;line-height:1.8;color:var(--muted);display:block;margin-top:12px}.join-row{display:flex;gap:12px;align-items:flex-end;margin:24px 0}.join-row label{flex:1;min-width:0}.join-row button{margin-bottom:1px;height:39px}.invite-row{display:flex;align-items:center;gap:10px;background:#091e1866;border:1px solid var(--line);border-radius:6px;padding:8px;margin:20px 0}.invite-row input{font-size:10px;border:0;margin:0;min-width:0;background:transparent}.invite-row button{white-space:nowrap;font-size:10px}.lobby-person{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.lobby-person>div{flex:1;min-width:0}.lobby-person b{font-size:12px;display:block;word-break:break-word}.lobby-person small{color:var(--muted);font-size:10px;display:block;margin-top:5px}.ready-label{font-size:9px;color:var(--muted)}.ready-label.is-ready{color:var(--green)}.saved-room{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 10px;width:100%;border:1px solid var(--line);border-radius:6px;background:#ffffff03;color:var(--text);text-align:left;margin-top:8px}.saved-room b{display:block;font-size:11px;font-weight:500}.saved-room small{display:block;color:var(--muted);font-size:9px;margin-top:8px}.saved-room>span:last-child{color:var(--gold)}.chat-messages{height:300px;overflow-y:auto;background:#071a1466;border:1px solid var(--line);border-radius:7px;padding:15px;scrollbar-color:#49634f #071a14}.chat-messages p{margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:12px;line-height:1.6}.chat-messages b{color:var(--gold);font-size:10px}.chat-messages small{float:right;font-size:8px;color:var(--muted)}.chat-messages span{display:block;color:var(--text);font-size:12px;margin-top:6px;white-space:pre-wrap;word-break:break-word}.chat-empty{font-size:11px!important;border:0!important}@media(max-width:950px){.room-strip{align-items:flex-start;flex-direction:column}.room-strip>div:last-child{width:100%;justify-content:flex-end}}@media(max-width:650px){.top-links #new-game{font-size:0;width:30px;height:30px;padding:0;border-radius:50%}.top-links #new-game:after{content:'+';font-size:18px}.top-links #online-menu{font-size:9px;padding:8px}.room-strip{padding:13px 11px;gap:13px;margin-bottom:16px}.room-strip>div{gap:8px}.room-strip #room-code{font-size:8px;letter-spacing:.5px}#room-state{font-size:7px;letter-spacing:.4px}.room-strip>div:last-child{justify-content:flex-start;flex-wrap:wrap}.room-strip .quiet{font-size:9px;padding:8px}.mode-cards{gap:10px}.mode-card{padding:20px 13px}.mode-card b{font-size:17px}.mode-card small{font-size:10px}.invite-row{flex-direction:column;align-items:stretch}.invite-row button{width:100%}.lobby-person{gap:8px}.lobby-person b{font-size:11px}.lobby-person small{font-size:9px}.ready-label{font-size:8px}.chat-messages{height:260px}.join-row{gap:8px}.join-row button{padding:10px}.chat-messages span{font-size:11px}}
.zoomed{touch-action:none;cursor:grab}.zoomed:active{cursor:grabbing}


/* Cria uma perspectiva isométrica (pseudo-3D) para o container do mapa */
.map-container {
    perspective: 1000px;
}

.hex-grid {
    transform: rotateX(55deg) rotateZ(-45deg);
    transform-style: preserve-3d;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); /* Sombra global do mapa */
}

/* Base realista para os hexágonos */
.hex-cell {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Remove a cor sólida antiga */
    background-color: transparent !important; 
}

/* Textura de Floresta (Terra) */
.hex-cell[data-terrain="terra"] {
    background-image: url('textures/floresta-realista.jpg');
    background-size: cover;
    background-position: center;
    /* Efeito de elevação da floresta */
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 5px 10px rgba(10, 30, 10, 0.5);
}

/* Textura de Rio com animação de água fluindo */
.hex-cell[data-terrain="rio"] {
    background-image: url('textures/agua-reflexo.jpg');
    background-size: 200%;
    animation: fluxoAgua 15s infinite linear;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
}

@keyframes fluxoAgua {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Camada de Névoa para áreas Inexploradas */
.hex-cell.inexplorado::after {
    content: '';
    position: absolute;
    top: -20%; left: -20%; right: -20%; bottom: -20%;
    background-image: url('textures/nevoa-realista.png');
    background-size: cover;
    opacity: 0.85;
    z-index: 5;
    animation: moverNevoa 8s infinite alternate ease-in-out;
    pointer-events: none; /* Para não atrapalhar o clique */
}

@keyframes moverNevoa {
    0% { transform: translateX(0) translateY(0) scale(1); opacity: 0.8; }
    100% { transform: translateX(10px) translateY(-5px) scale(1.1); opacity: 0.95; }
}