/* ============================================================
 * BLOCO 01 — Componentes visuais reutilizáveis
 * ============================================================ */
.nav-link {
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    color: rgb(203 213 225);
    transition: background .2s ease, color .2s ease;
}

.nav-link:hover {
    background: rgba(255,255,255,.08);
    color: white;
}

.card {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    border-radius: 1.25rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: 999px;
    padding: .45rem .75rem;
    font-size: .8125rem;
    line-height: 1rem;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: white;
    transition: transform .15s ease, background .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.14);
}

.btn-primary {
    background: rgba(99,102,241,.9);
    border-color: rgba(129,140,248,.5);
}

.btn-danger {
    background: rgba(239,68,68,.7);
    border-color: rgba(248,113,113,.5);
}

.input {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(15,23,42,.8);
    padding: .7rem .9rem;
    color: white;
    outline: none;
}

.input:focus {
    border-color: rgba(129,140,248,.8);
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

/* ============================================================
 * BLOCO 02 — Mapa do jogo
 * ============================================================ */
.tile {
    position: relative;
    min-height: 40px;
    border-radius: .7rem;
    border: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
}

.tile-grama { background: linear-gradient(135deg, rgba(34,197,94,.28), rgba(21,128,61,.18)); }
.tile-floresta { background: linear-gradient(135deg, rgba(22,101,52,.55), rgba(20,83,45,.35)); }
.tile-cidade { background: linear-gradient(135deg, rgba(148,163,184,.35), rgba(71,85,105,.25)); }
.tile-agua { background: linear-gradient(135deg, rgba(14,165,233,.45), rgba(37,99,235,.25)); }
.tile-montanha { background: linear-gradient(135deg, rgba(100,116,139,.5), rgba(51,65,85,.45)); }

.entity {
    position: absolute;
    inset: .15rem;
    display: grid;
    place-items: center;
    border-radius: .55rem;
    font-size: .85rem;
}

.entity-player { background: rgba(99,102,241,.8); }
.entity-me { background: rgba(234,179,8,.9); color: rgb(15 23 42); }
.entity-monster { background: rgba(239,68,68,.85); cursor: pointer; }