/* === Cursor customizado (manopla) em TODO o site, em qualquer situação ===
   32x32 porque navegadores ignoram cursores grandes (Firefox/Windows cortam acima disso).
   Hotspot "4 3" = a ponta da manopla (onde o clique realmente acontece). */
*, *::before, *::after { cursor: url("../img/cursor-32.png") 4 3, auto !important; }

:root {
    --ink: #171515;
    --paper: #f4ead6;
    --paper-strong: #fff8e9;
    --line: #d8c7aa;
    --copper: #a5572b;
    --gold: #d69b37;
    --moss: #426f52;
    --teal: #237077;
    --wine: #7b2c36;
    --night: #202027;
    --night-soft: #2c2d33;
    --white: #ffffff;
    --surface: #fff8e9;
    --surface-2: #f2e4c9;
    --surface-3: #f8efd9;
    --panel-bg: rgba(255, 248, 233, 0.94);
    --shadow: 0 18px 45px rgba(23, 21, 21, 0.18);
}

/* ============================================================
   REGISTRO DE ÍCONES E IMAGENS
   Para trocar qualquer imagem: substitua o arquivo (mantendo o
   nome) em assets/img/, OU aponte a variável abaixo para outro
   arquivo/formato (.svg, .png, etc.). É o único lugar a editar.
   Os logos crest/city/hero/google também aparecem em <img> nas
   páginas — nesses, troque o arquivo de mesmo nome.
   ============================================================ */
:root {
    /* Logos / arte */
    --img-crest: url("../img/crest.svg");
    --img-city: url("../img/city.svg");
    --img-hero: url("../img/hero.svg");
    --img-google: url("../img/icons/google.svg");

    /* Recursos */
    --img-gold: url("../img/icons/resource-gold.svg");
    --img-wood: url("../img/icons/resource-wood.svg");
    --img-stone: url("../img/icons/resource-stone.svg");
    --img-food: url("../img/icons/resource-food.svg");
    --img-iron: url("../img/icons/resource-iron.svg");
    --img-leather: url("../img/icons/resource-leather.svg");

    /* Atributos / nível / XP */
    --img-level: url("../img/icons/stat-level.svg");
    --img-xp: url("../img/icons/stat-xp.svg");
    --img-strength: url("../img/icons/stat-strength.svg");
    --img-defense: url("../img/icons/stat-defense.svg");
    --img-agility: url("../img/icons/stat-agility.svg");

    /* Ações */
    --img-hunt: url("../img/icons/train-hunt.svg");
    --img-expedition: url("../img/icons/action-expedition.svg");
    --img-ranking: url("../img/icons/action-ranking.svg");

    /* Slots de equipamento */
    --img-slot-weapon: url("../img/icons/slot-weapon.svg");
    --img-slot-armor: url("../img/icons/slot-armor.svg");
    --img-slot-belt: url("../img/icons/slot-belt.svg");
    --img-slot-boots: url("../img/icons/slot-boots.svg");
    --img-slot-trinket: url("../img/icons/slot-trinket.svg");

    /* Inventário */
    --img-lock: url("../img/icons/item-lock.svg");
    --img-unlock: url("../img/icons/item-unlock.svg");

    /* Bandeiras / idioma */
    --img-flag-br: url("../img/icons/flag-br.svg");
    --img-flag-us: url("../img/icons/flag-us.svg");

    /* Tema claro/escuro */
    --img-sun: url("../img/icons/sun.svg");
    --img-moon: url("../img/icons/moon.svg");

    /* Estratégias de defesa */
    --img-strategy-balanced: url("../img/icons/strategy-balanced.svg");
    --img-strategy-fortified: url("../img/icons/strategy-fortified.svg");
    --img-strategy-ambush: url("../img/icons/strategy-ambush.svg");

    /* Construções da base */
    --img-building-wall: url("../img/icons/building-wall.svg");
    --img-building-tower: url("../img/icons/building-tower.svg");
    --img-building-trap: url("../img/icons/building-trap.svg");
    --img-building-barracks: url("../img/icons/building-barracks.svg");
    --img-building-warehouse: url("../img/icons/building-warehouse.svg");
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: var(--paper);
    letter-spacing: 0;
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--white);
    background: var(--moss);
    cursor: pointer;
    font-weight: 700;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(23, 21, 21, 0.16);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

button.ghost {
    color: var(--ink);
    background: transparent;
    border-color: var(--line);
}

button.danger {
    background: var(--wine);
}

a {
    color: inherit;
    text-decoration: none;
}

.auth-body {
    min-height: 100vh;
    background: var(--night);
}

.auth-screen {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 560px);
    min-height: 100vh;
}

.auth-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 46px;
    overflow: hidden;
    color: var(--paper-strong);
    background:
        linear-gradient(180deg, rgba(32, 32, 39, 0.35), rgba(32, 32, 39, 0.66)),
        #273136;
}

.auth-visual-top {
    position: relative;
    z-index: 2;
}

.auth-stats {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
    color: #d8c7aa;
}

.auth-stats b {
    color: var(--white);
    font-weight: 800;
    font-size: 1.12rem;
}

.auth-stats .auth-online {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.auth-stats .online-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #57d06a;
    box-shadow: 0 0 7px rgba(87, 208, 106, 0.8);
}

.auth-village {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.auth-visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    background: linear-gradient(180deg, rgba(32, 32, 39, 0), rgba(32, 32, 39, 0.84));
}

.brand-lockup {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.brand-logo {
    flex: none;
    height: 92px;
    width: auto;           /* mantém a proporção original do arquivo (não esmaga o wordmark) */
    max-width: 100%;
    object-fit: contain;
}
/* o wordmark já escreve "MYTHIK" -> esconde o título redundante só na tela de login */
.auth-visual-top .brand-lockup h1 { display: none; }

.brand-lockup h1 {
    margin: 4px 0 0;
    font-size: 2.25rem;
    line-height: 1.05;
}

.kicker {
    display: block;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.auth-forms {
    display: flex;
    align-items: center;
    padding: 34px;
    background: var(--paper);
}

.form-grid {
    display: grid;
    gap: 18px;
    width: 100%;
}

.auth-card {
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.auth-card.accent {
    border-color: rgba(165, 87, 43, 0.38);
}

.auth-card h2 {
    margin: 0 0 4px;
    font-size: 1.35rem;
}

label {
    display: grid;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 800;
}

input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--ink);
    background: var(--surface);
}

.notice {
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    color: var(--ink);
    background: #e4f1df;
    border: 1px solid #b9d7ac;
    font-weight: 700;
}

.notice.error {
    color: #601923;
    background: #f5d6d8;
    border-color: #e5a1aa;
}

.game-body {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(255, 248, 233, 0.92), rgba(244, 234, 214, 0.98)),
        var(--paper);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 70px;
    padding: 12px 26px;
    color: var(--paper-strong);
    background: rgba(32, 32, 39, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-brand div {
    display: grid;
    gap: 2px;
}

.topbar-brand span,
.topbar-actions a,
.topbar-button {
    color: #d8c7aa;
    font-size: 0.86rem;
}

.app-version {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-players {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d8c7aa;
    font-size: 0.8rem;
    white-space: nowrap;
}

.topbar-players b {
    color: var(--white);
    font-weight: 800;
}

.topbar-players .online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #57d06a;
    box-shadow: 0 0 6px rgba(87, 208, 106, 0.7);
}

.topbar-players .dot-sep {
    opacity: 0.5;
}

@media (max-width: 760px) {
    .topbar-players {
        display: none;
    }
}

.topbar-actions a,
.topbar-button {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(216, 199, 170, 0.3);
    border-radius: 8px;
    background: transparent;
}

.topbar-button {
    color: #d8c7aa;
}

.game-shell {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
    padding: 24px 0 44px;
}

.city-hero {
    position: relative;
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 28px;
    color: var(--paper-strong);
    background:
        linear-gradient(110deg, rgba(32, 32, 39, 0.96) 0%, rgba(44, 45, 51, 0.92) 48%, rgba(66, 111, 82, 0.74) 100%),
        #202027;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.city-copy {
    position: relative;
    z-index: 1;
    max-width: 52%;
}

.city-copy h1 {
    margin: 6px 0;
    font-size: 2.35rem;
    line-height: 1.08;
}

.city-copy p {
    margin: 0;
    color: #eadfc9;
    font-size: 1.05rem;
}

.city-art {
    position: absolute;
    right: -8px;
    bottom: -20px;
    width: min(620px, 62%);
    max-height: 260px;
    object-fit: contain;
}

.stats-band {
    display: grid;
    grid-template-columns: 0.7fr 1.4fr repeat(6, minmax(92px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.stat-tile,
.panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-bg);
    box-shadow: 0 8px 26px rgba(23, 21, 21, 0.08);
}

.stat-tile {
    position: relative;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 8px;
    text-align: center;
}

.attribute-grid div::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(23, 21, 21, 0.16);
    border-radius: 8px;
    background: var(--icon) center / contain no-repeat, #2c2d33;
    box-shadow: inset 0 0 0 2px rgba(255, 248, 233, 0.12);
    transform: translateY(-50%);
}

.stat-tile::before {
    content: "";
    width: 36px;
    height: 36px;
    margin-bottom: 5px;
    border: 1px solid rgba(23, 21, 21, 0.16);
    border-radius: 8px;
    background: var(--icon) center / contain no-repeat, #2c2d33;
    box-shadow: inset 0 0 0 2px rgba(255, 248, 233, 0.12);
}

.stat-tile span,
.attribute-grid span,
.status-line,
.build-list small,
.battle small,
.opponent span {
    color: #756650;
    font-size: 0.83rem;
}

.stat-tile strong {
    font-size: 1.16rem;
    line-height: 1.1;
    white-space: nowrap;
}

.stat-tile strong small {
    font-size: 0.7rem;
    font-weight: 600;
    color: #8a7a60;
}

.stat-tile .progress {
    width: 86%;
    margin-top: 4px;
}

.progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-2);
}

.progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--moss));
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.panel {
    min-height: 190px;
    padding: 18px;
}

.hero-panel,
.city-panel,
.pvp-panel,
.results-panel,
.expedition-panel,
.inventory-panel,
.crafting-panel,
.strategy-panel {
    grid-column: span 3;
}

.inventory-panel {
    align-self: start;
}

.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.panel-title h2 {
    margin: 0;
    font-size: 1.12rem;
}

.tag,
.mini-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--paper-strong);
    background: var(--teal);
    font-size: 0.74rem;
    font-weight: 800;
}

.mini-tag {
    min-height: 20px;
    padding: 2px 6px;
    margin-left: 4px;
    background: var(--copper);
}

.attribute-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.attribute-grid div {
    position: relative;
    min-height: 70px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 12px 12px 12px 60px;
    border-radius: 8px;
    background: var(--surface-2);
}

.attribute-grid strong {
    font-size: 1.45rem;
}

.button-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* Palavra do atributo nos botões "Treinar X" — 20% menor que "Treinar". */
.train-stat {
    font-size: 0.8em;
}

/* Botões de treino são estreitos: empilha ícone em cima e texto embaixo,
   pra o conteúdo não vazar pra fora do botão. */
.button-row .icon-button {
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
    padding: 8px 4px;
    line-height: 1.1;
    text-align: center;
}

.button-row button,
.segmented button,
.build-list button,
.opponent button {
    min-width: 0;
    white-space: normal;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.icon-button::before {
    content: "";
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--icon) center / contain no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 248, 233, 0.22);
}

.icon-level { --icon: var(--img-level); }
.icon-xp { --icon: var(--img-xp); }
.icon-gold { --icon: var(--img-gold); }
.icon-wood { --icon: var(--img-wood); }
.icon-stone { --icon: var(--img-stone); }
.icon-food { --icon: var(--img-food); }
.icon-iron { --icon: var(--img-iron); }
.icon-leather { --icon: var(--img-leather); }
.icon-strength { --icon: var(--img-strength); }
.icon-defense { --icon: var(--img-defense); }
.icon-agility { --icon: var(--img-agility); }
.icon-hunt { --icon: var(--img-hunt); }
.icon-expedition { --icon: var(--img-expedition); }
.icon-adventure { --icon: var(--img-adventure); }
.icon-ranking { --icon: var(--img-ranking); }
.icon-slot-weapon { --icon: var(--img-slot-weapon); }
.icon-slot-armor { --icon: var(--img-slot-armor); }
.icon-slot-belt { --icon: var(--img-slot-belt); }
.icon-slot-boots { --icon: var(--img-slot-boots); }
.icon-slot-trinket { --icon: var(--img-slot-trinket); }
.icon-lock { --icon: var(--img-lock); }
.icon-unlock { --icon: var(--img-unlock); }
.icon-anvil { --icon: var(--img-anvil); }
.icon-refstone { --icon: var(--img-refstone); }
.icon-mail { --icon: var(--img-mail); }
.icon-market { --icon: var(--img-market); }
.icon-scale { --icon: var(--img-scale); }
.icon-flag-br { --icon: var(--img-flag-br); }
.icon-flag-us { --icon: var(--img-flag-us); }
.icon-sun { --icon: var(--img-sun); }
.icon-moon { --icon: var(--img-moon); }
.icon-strategy-balanced { --icon: var(--img-strategy-balanced); }
.icon-strategy-fortified { --icon: var(--img-strategy-fortified); }
.icon-strategy-ambush { --icon: var(--img-strategy-ambush); }

button.active,
.segmented button.active {
    background: var(--copper);
}

.primary-action {
    width: 100%;
    min-height: 58px;
    background: var(--wine);
}

.status-line {
    min-height: 24px;
    margin-top: 12px;
    font-weight: 700;
}

.timer-line {
    min-height: 22px;
    margin-top: 8px;
    color: #756650;
    font-size: 0.84rem;
    font-weight: 700;
}

.build-list {
    display: grid;
    gap: 9px;
}

.build-list button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 70px;
    overflow: hidden;
    padding-left: 64px;
    color: var(--paper-strong);
    background:
        linear-gradient(90deg, rgba(32, 32, 39, 0.88), rgba(32, 32, 39, 0.56)),
        var(--build-image) center / cover no-repeat,
        #2c2d33;
    border-color: var(--line);
    text-align: left;
}

.build-list button::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 248, 233, 0.22);
    border-radius: 8px;
    background: var(--build-image) center / cover no-repeat;
    box-shadow: inset 0 0 0 2px rgba(255, 248, 233, 0.12);
    transform: translateY(-50%);
}

.build-list button span,
.build-list button small {
    position: relative;
    z-index: 1;
}

.build-wall { --build-image: var(--img-building-wall); }
.build-tower { --build-image: var(--img-building-tower); }
.build-trap { --build-image: var(--img-building-trap); }
.build-barracks { --build-image: var(--img-building-barracks); }
.build-warehouse { --build-image: var(--img-building-warehouse); }
.build-blacksmith { --build-image: var(--img-building-blacksmith); }

.build-list span {
    display: grid;
    gap: 2px;
    font-weight: 800;
}

.build-list small {
    max-width: 52%;
    text-align: right;
    line-height: 1.3;
    color: #eadfc9;
}

.segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.segmented button {
    color: var(--ink);
    background: var(--surface-2);
    border-color: var(--line);
}

.segmented button.active {
    color: var(--white);
}

.strategy-visual {
    min-height: 118px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(32, 32, 39, 0.18), rgba(32, 32, 39, 0)),
        var(--strategy-image) center / cover no-repeat,
        #2c2d33;
    box-shadow: inset 0 0 0 1px rgba(255, 248, 233, 0.12);
}

.strategy-balanced { --strategy-image: var(--img-strategy-balanced); }
.strategy-fortified { --strategy-image: var(--img-strategy-fortified); }
.strategy-ambush { --strategy-image: var(--img-strategy-ambush); }

.opponent-list,
.battle-list,
.item-list,
.crafting-list {
    display: grid;
    gap: 9px;
}

.inventory-panel .item-list {
    max-height: 560px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
}

.opponent,
.battle,
.item,
.empty {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-3);
}

.opponent,
.item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
}

.item {
    grid-template-columns: auto 1fr auto;
}

.opponent div,
.item div,
.battle {
    display: grid;
    gap: 5px;
}

.opponent button,
.item button {
    min-width: 92px;
}

.item span,
.item small {
    color: #756650;
    font-size: 0.82rem;
}

.item-icon,
.craft-button .icon-tile {
    display: block;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(23, 21, 21, 0.16);
    border-radius: 8px;
    background: var(--icon) center / contain no-repeat, #2c2d33;
    box-shadow: inset 0 0 0 2px rgba(255, 248, 233, 0.12);
}

.rarity-gem {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: -1px;
    background: #8f8a7b;
    transform: rotate(45deg);
}

.item strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.craft-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    color: var(--ink);
    background: var(--surface-2);
    border-color: var(--line);
    text-align: left;
}

.craft-button span {
    flex: 1;
    font-weight: 800;
}

.craft-button small {
    color: #756650;
    line-height: 1.3;
}

.item.rarity-common {
    border-left: 6px solid #8f8a7b;
}

.item.rarity-uncommon {
    border-left: 6px solid var(--moss);
}

.item.rarity-rare {
    border-left: 6px solid var(--teal);
}

.item.rarity-epic {
    border-left: 6px solid #7051a8;
}

.item.rarity-legendary {
    border-left: 6px solid var(--gold);
}

.item.rarity-unique {
    border-left: 6px solid #171515;
    box-shadow: 0 0 0 1px rgba(214, 155, 55, 0.45), 0 10px 28px rgba(23, 21, 21, 0.16);
}

.rarity-gem.rarity-common { background: #8f8a7b; }
.rarity-gem.rarity-uncommon { background: var(--moss); }
.rarity-gem.rarity-rare { background: var(--teal); }
.rarity-gem.rarity-epic { background: #7051a8; }
.rarity-gem.rarity-legendary { background: var(--gold); }
.rarity-gem.rarity-unique {
    background: linear-gradient(135deg, #171515, #d69b37);
    box-shadow: 0 0 0 1px rgba(214, 155, 55, 0.8);
}

.battle.pending {
    border-color: rgba(35, 112, 119, 0.42);
}

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 20;
    max-width: min(420px, calc(100% - 36px));
    padding: 13px 15px;
    border-radius: 8px;
    color: var(--paper-strong);
    background: var(--moss);
    box-shadow: var(--shadow);
    transform: translateY(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    font-weight: 800;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.error {
    background: var(--wine);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 15;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(23, 21, 21, 0.58);
}

.modal-backdrop.show {
    display: flex;
}

.modal-panel {
    width: min(560px, 100%);
    max-height: min(680px, calc(100vh - 36px));
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.modal-confirm {
    z-index: 25;
}

.modal-confirm .modal-panel {
    width: min(400px, 100%);
}

.confirm-warning {
    margin: 6px 0 0;
    color: var(--wine);
    font-weight: 700;
    font-size: 0.9rem;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* Botões do seletor de tema (sol/lua) — reutilizam .flag-btn, ícone centralizado */
.flag-btn.theme-btn {
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================================
   TEMA ESCURO  —  ativado por data-theme="dark" no <html>
   Só sobrescreve as variáveis de superfície + alguns ajustes.
   ============================================================ */
:root[data-theme="dark"] {
    --paper: #14141a;
    --ink: #e9e1d2;
    --line: #3a3a45;
    --surface: #20202a;
    --surface-2: #2c2c37;
    --surface-3: #26262f;
    --panel-bg: rgba(32, 32, 40, 0.95);
}

:root[data-theme="dark"] .game-body {
    background:
        linear-gradient(180deg, rgba(26, 26, 33, 0.92), rgba(16, 16, 22, 0.98)),
        var(--paper);
}

:root[data-theme="dark"] .notice {
    background: #1d2a1d;
    border-color: #34492f;
}

:root[data-theme="dark"] .notice.error {
    color: #f2c4c8;
    background: #2c1a1d;
    border-color: #5a2f34;
}

:root[data-theme="dark"] .google-button {
    color: #3c4043;
    background: #ffffff;
}

/* ============================================================
   VILA ANIMADA (card do reino) — estruturas evoluem por nível
   ============================================================ */
.village .bld .d1,
.village .bld .d2,
.village .bld .d3 {
    display: none;
}

.village .bld.lvl-1 .d1,
.village .bld.lvl-2 .d1,
.village .bld.lvl-2 .d2,
.village .bld.lvl-3 .d1,
.village .bld.lvl-3 .d2,
.village .bld.lvl-3 .d3 {
    display: inline;
}

.village .v-sun {
    transform-box: fill-box;
    transform-origin: center;
    animation: v-sun 5s ease-in-out infinite;
}

.village .w1 { animation: v-walk-a 7s ease-in-out infinite; }
.village .w2 { animation: v-walk-b 8.5s ease-in-out infinite; }
.village .vbob { animation: v-bob 0.7s ease-in-out infinite; }

.village .vhammer {
    transform-box: fill-box;
    transform-origin: left center;
    animation: v-hammer 0.9s ease-in-out infinite;
}

.village .v-smoke {
    transform-box: fill-box;
    transform-origin: center;
    animation: v-smoke 3s ease-in-out infinite;
}
.village .v-smoke.s2 { animation-delay: 1s; }
.village .v-smoke.s3 { animation-delay: 2s; }

.village .v-flag {
    transform-box: fill-box;
    transform-origin: left center;
    animation: v-flag 2.2s ease-in-out infinite;
}
.village .v-water {
    animation: v-water 3s ease-in-out infinite;
}

@keyframes v-sun {
    0%, 100% { opacity: 0.92; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}
@keyframes v-walk-a {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(118px); }
}
@keyframes v-walk-b {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-128px); }
}
@keyframes v-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
@keyframes v-hammer {
    0%, 100% { transform: rotate(8deg); }
    50% { transform: rotate(-46deg); }
}
@keyframes v-smoke {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 0.5; }
    100% { transform: translateY(-26px) scale(1.25); opacity: 0; }
}
@keyframes v-flag {
    0%, 100% { transform: scaleX(1) skewY(0deg); }
    50% { transform: scaleX(0.86) skewY(-4deg); }
}
@keyframes v-water {
    0%, 100% { opacity: 0.32; transform: translateX(-3px); }
    50% { opacity: 0.6; transform: translateX(5px); }
}

/* ===== Animação de Level Up (overlay em tela cheia) ===== */
.levelup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(22,13,4,0.74), rgba(8,6,3,0.45) 46%, rgba(0,0,0,0) 72%);
    animation: lvl-overlay 2.9s ease forwards;
}
.levelup-stage {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.levelup-rays {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(246,213,115,0.30) 0deg 8deg, rgba(246,213,115,0) 8deg 22deg);
    -webkit-mask: radial-gradient(circle, #000 26%, rgba(0,0,0,0.4) 48%, transparent 70%);
    mask: radial-gradient(circle, #000 26%, rgba(0,0,0,0.4) 48%, transparent 70%);
    filter: blur(0.5px);
    animation: lvl-rays 2.9s linear forwards;
}
.levelup-ring {
    position: absolute;
    width: 196px;
    height: 196px;
    border-radius: 50%;
    border: 2px solid rgba(246,213,115,0.9);
    box-shadow: 0 0 42px rgba(246,213,115,0.55), inset 0 0 26px rgba(246,213,115,0.4);
    animation: lvl-ring 2.9s cubic-bezier(.2,.8,.2,1) forwards;
}
.levelup-card {
    position: relative;
    text-align: center;
    animation: lvl-card 2.9s cubic-bezier(.2,.9,.25,1) forwards;
}
.levelup-kicker {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
    color: #f0d9a4;
    opacity: 0.9;
}
.levelup-level {
    font-size: 5.6rem;
    line-height: 1;
    font-weight: 800;
    background: linear-gradient(180deg, #fff6da, #f7c64c 52%, #df8a2a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f7c64c;
    filter: drop-shadow(0 6px 20px rgba(238,158,40,0.5));
    animation: lvl-num 2.9s cubic-bezier(.16,1.25,.4,1) forwards;
}
.levelup-title {
    margin: 6px 0 0;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fbe8c0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.levelup-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #f7c64c 55%, rgba(247,198,76,0) 75%);
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(0);
    animation: lvl-spark 1.5s ease-out forwards;
}
@keyframes lvl-overlay {
    0% { opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes lvl-rays {
    0% { opacity: 0; transform: rotate(0deg) scale(0.6); }
    16% { opacity: 0.85; }
    82% { opacity: 0.5; }
    100% { opacity: 0; transform: rotate(120deg) scale(1.06); }
}
@keyframes lvl-ring {
    0% { opacity: 0; transform: scale(0.2); }
    24% { opacity: 1; transform: scale(1.05); }
    44% { transform: scale(0.97); }
    82% { opacity: 0.6; }
    100% { opacity: 0; transform: scale(1.34); }
}
@keyframes lvl-card {
    0% { opacity: 0; transform: translateY(16px) scale(0.82); }
    20% { opacity: 1; transform: translateY(0) scale(1); }
    82% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-12px) scale(1.03); }
}
@keyframes lvl-num {
    0% { opacity: 0; transform: scale(0.25) rotate(-10deg); }
    24% { opacity: 1; transform: scale(1.2) rotate(3deg); }
    38% { transform: scale(0.95) rotate(0deg); }
    52% { transform: scale(1.05); }
    64% { transform: scale(1); }
    100% { transform: scale(1); }
}
@keyframes lvl-spark {
    0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0.2); }
}
@media (prefers-reduced-motion: reduce) {
    .levelup-rays,
    .levelup-spark { display: none; }
    .levelup-overlay,
    .levelup-card,
    .levelup-level,
    .levelup-ring { animation: none; }
}

/* ===== Barra de anúncio de level up (full-width; o texto corre dentro e ela some) ===== */
.announce-bar {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    height: 46px;
    overflow: hidden;
    pointer-events: none;
    z-index: 900;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #241809 0%, #4a3312 50%, #241809 100%);
    border-top: 1px solid rgba(246, 213, 115, 0.5);
    border-bottom: 1px solid rgba(246, 213, 115, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
    animation: announce-bar 9s ease forwards;
}
.announce-text {
    position: absolute;
    left: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fbeccb;
    font-size: 0.98rem;
    font-weight: 500;
    will-change: transform;
    animation: announce-scroll 9s linear forwards;
}
.announce-text b { color: #f7d24c; font-weight: 700; }
.announce-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 34%, #ffe79a, #f0a93a 68%, #d2851f);
    color: #3a2207;
    font-weight: 800;
    font-size: 0.84rem;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(246, 213, 115, 0.25);
}
@keyframes announce-bar {
    0% { opacity: 0; }
    7% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes announce-scroll {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .announce-text {
        position: static;
        margin: 0 auto;
        animation: none;
    }
    .announce-bar {
        justify-content: center;
        animation: announce-bar 5s ease forwards;
    }
}

@media (prefers-reduced-motion: reduce) {
    .village .v-sun,
    .village .w1,
    .village .w2,
    .village .vbob,
    .village .vhammer,
    .village .v-smoke,
    .village .v-flag,
    .village .v-water { animation: none; }
}

.ranking-list {
    display: grid;
    gap: 9px;
}

.ranking-row {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-3);
}

.ranking-row div {
    display: grid;
    gap: 4px;
}

.ranking-row span,
.ranking-row small {
    color: #756650;
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .auth-screen {
        grid-template-columns: 1fr;
    }

    .auth-visual {
        min-height: 260px;
    }

    .stats-band {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-tile.wide {
        grid-column: span 2;
    }

    .game-grid {
        grid-template-columns: 1fr;
    }

    .hero-panel,
    .city-panel,
    .pvp-panel,
    .results-panel,
    .expedition-panel,
    .inventory-panel,
    .crafting-panel,
    .strategy-panel,
    .panel {
        grid-column: auto;
    }

    .city-copy {
        max-width: 70%;
    }

    .city-art {
        width: 58%;
        opacity: 0.82;
    }
}

@media (max-width: 620px) {
    .topbar {
        padding: 10px 14px;
    }

    .game-shell {
        width: min(100% - 18px, 1180px);
        padding-top: 12px;
    }

    .city-hero {
        min-height: 210px;
        padding: 20px;
    }

    .city-copy {
        max-width: 100%;
    }

    .city-copy h1 {
        font-size: 1.8rem;
    }

    .city-art {
        right: -70px;
        width: 88%;
        opacity: 0.42;
    }

    .stats-band,
    .attribute-grid,
    .button-row,
    .segmented {
        grid-template-columns: 1fr;
    }

    .stat-tile.wide {
        grid-column: auto;
    }

    .auth-forms {
        padding: 18px;
    }

    .auth-visual {
        padding: 24px;
    }

    .brand-lockup h1 {
        font-size: 1.75rem;
    }

    .brand-logo {
        height: 64px;
        width: auto;
    }

    .opponent,
    .item {
        grid-template-columns: 1fr;
    }

    .opponent button,
    .item button {
        width: 100%;
    }

    .item-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ranking-row {
        grid-template-columns: 1fr;
    }

    .build-list button {
        align-items: flex-start;
        flex-direction: column;
    }

    .build-list small {
        max-width: 100%;
        text-align: left;
    }
}

.auth-note {
    margin: 0;
    color: #756650;
    font-size: 0.9rem;
    line-height: 1.4;
}

.google-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #3c4043;
    background: var(--surface);
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(23, 21, 21, 0.10);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.google-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(23, 21, 21, 0.16);
}

.google-button img {
    flex: 0 0 22px;
}

.google-form {
    display: grid;
    gap: 14px;
}

.cf-turnstile {
    min-height: 65px;
    display: flex;
    justify-content: center;
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.terms-check input[type="checkbox"] {
    width: auto;
    min-height: 0;
    margin: 3px 0 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--copper);
}

.terms-check label {
    display: block;
    font-weight: 600;
    font-size: 0.86rem;
    line-height: 1.4;
    color: #756650;
}

.terms-check a {
    color: var(--copper);
    text-decoration: underline;
}

.logout-form {
    margin: 0;
}

.topbar-logout {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(216, 199, 170, 0.3);
    border-radius: 8px;
    background: transparent;
    color: #d8c7aa;
    font-size: 0.86rem;
    font-weight: 700;
}

.realm-picker {
    display: grid;
    gap: 7px;
}

.realm-picker-label {
    font-size: 0.85rem;
    font-weight: 800;
}

.realm-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    font-weight: 700;
}

.realm-option input[type="radio"] {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--copper);
}

.realm-option .realm-name {
    flex: 1;
}

.realm-option .realm-count {
    color: #756650;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.expedition-list {
    display: grid;
    gap: 9px;
}

.expedition-option {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-3);
}

.expedition-option div {
    display: grid;
    gap: 4px;
}

.expedition-option span,
.expedition-option small {
    color: #756650;
    font-size: 0.82rem;
}

.expedition-option button {
    min-width: 92px;
}

.expedition-focus {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.expedition-focus button {
    min-height: 36px;
    padding: 6px 8px;
    color: var(--ink);
    background: var(--surface-2);
    border-color: var(--line);
    font-size: 0.84rem;
}

.expedition-focus button.active {
    color: var(--white);
    background: var(--copper);
}

.inv-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.inv-tabs button {
    min-height: 34px;
    padding: 5px 12px;
    color: var(--ink);
    background: var(--surface-2);
    border-color: var(--line);
    font-size: 0.84rem;
}

.inv-tabs button.active {
    color: var(--white);
    background: var(--copper);
}

.inv-tabs button.ghost {
    margin-left: auto;
}

#open-dismantle {
    color: var(--white);
    background: var(--wine);
    border-color: var(--wine);
}

.lock-btn {
    min-width: 42px;
    padding: 4px 8px;
    background-color: var(--surface-2);
    background-image: var(--icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    border-color: var(--line);
    color: transparent;
    line-height: 1;
}

.lock-btn.locked {
    background-color: var(--copper);
}

.item.is-locked {
    box-shadow: inset 3px 0 0 var(--copper);
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.flag-btn {
    width: 30px;
    min-width: 30px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    background-color: transparent;
    background-image: var(--icon);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.45;
    filter: none;
}

.flag-btn:hover:not(:disabled) {
    opacity: 0.75;
}

.flag-btn.active {
    opacity: 1;
    background-color: transparent;
    background-image: var(--icon);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.lang-switch-float {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 20;
}

.ui-float {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 20;
    display: flex;
    gap: 10px;
}

/* ============================================================
   PIXEL-ART DASHBOARD — sistema coeso (substitui o gloss antigo)
   Escopo .game-body; molduras 9-slice, paleta enxuta, sem gloss.
   ============================================================ */
@font-face{
  font-family:"Press Start 2P";
  src:url("../fonts/PressStart2P.ttf") format("truetype");
  font-display:swap;
}

.game-body{
  /* escala / fontes */
  --s1:6px; --s2:9px; --s3:12px; --s4:18px; --s5:24px; --s6:34px;
  --font-pixel:"Press Start 2P", monospace;
  --font-body:system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  /* rampas (constantes nos dois temas) */
  --wood-0:#5a3a1e; --wood-1:#7a4f2a; --wood-2:#9c6b3c;
  --stone-0:#5f584c; --stone-1:#8d8475; --stone-2:#b6ad9a;
  --gold:#e0a32e; --gold-hi:#f6cf63; --gold-0:#9c6a1c;
  --train:#4f9a4a; --train-hi:#79c46f; --train-0:#2f6a30;
  --hunt:#cf8a2c;  --hunt-hi:#f0b24a;  --hunt-0:#8a5a14;
  --exped:#3f7fb0; --exped-hi:#62a6d2; --exped-0:#27557a;
  --stop:#b23b34;  --stop-hi:#d65a4f;  --stop-0:#7a2622;
  /* superfícies (escuro) */
  --ink:#ece0c6; --ink-soft:#b3a585;
  --bg:#1b1813; --bg-2:#221e18;
  --panel:#2c2823; --panel-2:#1f1b16;
  --frame-out:#14110d; --line:#3a342b;
  --img-frame:url("../img/ui/frame-9.png");
  --img-frame-recess:url("../img/ui/frame-9-recess.png");
  /* registro de ícones -> PNG pixel-art */
  --img-gold:url("../img/icons/ic-gold.png");
  --img-wood:url("../img/icons/ic-wood.png");
  --img-stone:url("../img/icons/ic-stone.png");
  --img-food:url("../img/icons/ic-food.png");
  --img-iron:url("../img/icons/ic-iron.png");
  --img-leather:url("../img/icons/ic-leather.png");
  --img-diamond:url("../img/icons/ic-diamond.png");
  --img-strength:url("../img/icons/ic-strength.png");
  --img-defense:url("../img/icons/ic-defense.png");
  --img-agility:url("../img/icons/ic-agility.png");
  --img-hunt:url("../img/icons/ic-hunt.png");
  --img-expedition:url("../img/icons/ic-expedition.png");
  --img-adventure:url("../img/icons/ic-adventure.png");
  --img-ranking:url("../img/icons/ic-ranking.png");
  --img-search:url("../img/icons/ic-search.png");
  --img-sun:url("../img/icons/ic-sun.png");
  --img-moon:url("../img/icons/ic-moon.png");
  --img-flag-br:url("../img/icons/ic-flag-br.png");
  --img-flag-us:url("../img/icons/ic-flag-us.png");
  --img-lock:url("../img/icons/ic-lock.png");
  --img-unlock:url("../img/icons/ic-unlock.png");
  --img-xp:url("../img/icons/ic-xp.png");
  --img-building-wall:url("../img/icons/ic-building-wall.png");
  --img-building-tower:url("../img/icons/ic-building-tower.png");
  --img-building-trap:url("../img/icons/ic-building-trap.png");
  --img-building-barracks:url("../img/icons/ic-building-barracks.png");
  --img-building-warehouse:url("../img/icons/ic-building-warehouse.png");
  --img-building-blacksmith:url("../img/icons/ic-anvil.png");
  --img-anvil:url("../img/icons/ic-anvil.png");
  --img-refstone:url("../img/icons/ic-refine-stone.png");
  --img-mail:url("../img/icons/ic-mail.png");
  --img-market:url("../img/icons/ic-market.png");
  --img-scale:url("../img/icons/ic-scale.png");
  /* aliases p/ qualquer referência antiga --m-* */
  --m-line:var(--line); --m-gold:var(--gold); --m-gold-lt:var(--gold-hi);
  --m-bronze:var(--wood-2); --m-bronze-lt:var(--wood-2); --m-faint:var(--ink-soft);
  --m-dim:var(--ink-soft); --m-pa:var(--panel); --m-pb:var(--panel-2);
  --m-green:var(--train); --m-green-d:var(--train-0); --m-orange:var(--hunt); --m-orange-d:var(--hunt-0);
  --m-blue:var(--exped); --m-blue-d:var(--exped-0); --m-red:var(--stop); --m-red-d:var(--stop-0);
  background:var(--bg) !important;
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:none;
}
html[data-theme="light"] .game-body{
  --ink:#23201b; --ink-soft:#5a4f3c;
  --bg:#cdb98c; --bg-2:#d8c8a0;
  --panel:#ecdcb4; --panel-2:#d6c39c;
  --frame-out:#4a3115; --line:#b69b6f;
  --img-moon:url("../img/icons/ic-moon-dark.png"); /* lua escura p/ aparecer no claro */
}

/* render pixel nítido p/ tudo que é arte */
.game-body [class*="icon-"]::before,
.game-body .stat-tile::before,
.game-body .build-list button::before,
.game-body .ps::before,
.game-body .flag-btn,
.game-body .port-face,
.game-body img[width]{ image-rendering:pixelated; }

/* ---------------- moldura base (painéis/tiles/modais) ---------------- */
.game-body .panel,
.game-body .stat-tile,
.game-body .modal-panel,
.game-body .city-hero{
  background:var(--panel) !important;
  border:8px solid transparent !important;
  border-image:var(--img-frame) 8 stretch !important;
  border-radius:0 !important;
  box-shadow:0 3px 0 var(--frame-out) !important;
  image-rendering:pixelated;
}
.game-body .panel{ padding:var(--s4) !important; }

/* poços carvados (barras de progresso, status, visual de estratégia) */
.game-body .progress,
.game-body .status-line,
.game-body .strategy-visual{
  background:var(--panel-2) !important;
  border:1px solid var(--frame-out) !important;
  border-radius:0 !important;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35) !important;
}
/* listas = container transparente com espaçamento (igual à lista da Base) */
.game-body .item-list,
.game-body .crafting-list,
.game-body .opponent-list,
.game-body .battle-list,
.game-body .ranking-list,
.game-body .expedition-list{
  display:flex !important; flex-direction:column; gap:var(--s2) !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
/* cada item/carta usa o MESMO fundo carvado das linhas da Base */
.game-body .item,
.game-body .craft-button,
.game-body .opponent,
.game-body .battle,
.game-body .ranking-row,
.game-body .expedition-option,
.game-body .empty{
  background:var(--panel-2) !important;
  border:2px solid var(--frame-out) !important;
  border-radius:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  color:var(--ink) !important;
}
.game-body .item span,.game-body .item small,
.game-body .opponent span,.game-body .battle span,.game-body .battle small,
.game-body .expedition-option span,.game-body .expedition-option small{ color:var(--ink-soft) !important; }
.game-body .item strong,.game-body .opponent strong,.game-body .battle strong,
.game-body .expedition-option strong{ color:var(--ink) !important; }

/* scrollbars no tema (madeira/dourado, sem cantos arredondados) */
.game-body *{ scrollbar-width:thin; scrollbar-color:var(--wood-1) var(--panel-2); }
.game-body ::-webkit-scrollbar{ width:12px; height:12px; }
.game-body ::-webkit-scrollbar-track{ background:var(--panel-2); border:1px solid var(--frame-out); }
.game-body ::-webkit-scrollbar-thumb{ background:var(--wood-1); border:2px solid var(--frame-out); border-radius:0; }
.game-body ::-webkit-scrollbar-thumb:hover{ background:var(--gold); }
.game-body ::-webkit-scrollbar-corner{ background:var(--panel-2); }

/* botões de ação (equipar/desequipar/atacar/iniciar) — estilo pixel c/ cor semântica */
.game-body .item-actions button:not(.danger):not(.lock-btn):not(.refine-btn),
.game-body .opponent button,
.game-body .expedition-option button{
  --c:var(--train); --c-hi:var(--train-hi); --c-lo:var(--train-0);
  font-family:var(--font-pixel) !important; font-size:8px !important; letter-spacing:.5px; line-height:1.5;
  color:#f6ecd6 !important; background:var(--c) !important;
  border:2px solid var(--c-lo) !important; border-radius:0 !important;
  box-shadow:inset 0 2px 0 var(--c-hi), inset 0 -2px 0 var(--c-lo), 0 2px 0 var(--frame-out) !important;
  padding:8px 10px !important; min-width:0 !important; cursor:pointer;
}
.game-body .item-actions button:not(.danger):not(.lock-btn):not(.refine-btn):hover,
.game-body .opponent button:hover,
.game-body .expedition-option button:hover{ filter:brightness(1.08); }
.game-body .item-actions button:not(.danger):not(.lock-btn):not(.refine-btn):active,
.game-body .opponent button:active,
.game-body .expedition-option button:active{ transform:translateY(2px); box-shadow:inset 0 2px 0 var(--c-hi), inset 0 -2px 0 var(--c-lo), 0 0 0 var(--frame-out) !important; }
.game-body .item-actions button.ghost:not(.danger):not(.lock-btn){   /* Desequipar = madeira */
  background:var(--wood-0) !important; border-color:var(--frame-out) !important;
  box-shadow:inset 0 2px 0 var(--wood-1), inset 0 -2px 0 var(--frame-out), 0 2px 0 var(--frame-out) !important;
}
.game-body .opponent button{   /* Atacar = vermelho */
  background:var(--stop) !important; border-color:var(--stop-0) !important;
  box-shadow:inset 0 2px 0 var(--stop-hi), inset 0 -2px 0 var(--stop-0), 0 2px 0 var(--frame-out) !important;
}
.game-body .expedition-option button{   /* Iniciar = azul */
  background:var(--exped) !important; border-color:var(--exped-0) !important;
  box-shadow:inset 0 2px 0 var(--exped-hi), inset 0 -2px 0 var(--exped-0), 0 2px 0 var(--frame-out) !important;
}
.game-body .item-actions button:disabled,
.game-body .opponent button:disabled,
.game-body .expedition-option button:disabled{ filter:grayscale(.6) brightness(.7) !important; opacity:.7; cursor:not-allowed; transform:none; }
/* botão cadeado = tile quadrado com o ícone do cadeado */
.game-body .lock-btn{
  --c:var(--wood-1); --c-hi:var(--wood-2);
  width:34px !important; min-width:34px !important; height:32px; padding:0 !important;
  background-color:var(--c) !important;
  background-image:var(--icon) !important; background-size:18px !important; background-position:center !important; background-repeat:no-repeat !important;
  border:2px solid var(--frame-out) !important; border-radius:0 !important;
  box-shadow:inset 0 2px 0 var(--c-hi), 0 2px 0 var(--frame-out) !important;
  color:transparent !important;
}
.game-body .lock-btn.locked{ --c:var(--gold); --c-hi:var(--gold-hi); background-color:var(--gold) !important; border-color:var(--gold-0) !important; }
.game-body .lock-btn:hover{ filter:brightness(1.1); }
/* tiles de ícone (item/criação) = quadrado recartado, igual ao emblema da Base */
.game-body .item-icon,
.game-body .craft-button .icon-tile{
  width:42px !important; height:42px !important; flex:0 0 42px;
  border:1px solid var(--frame-out) !important; border-radius:0 !important;
  background:var(--icon) center/28px no-repeat, var(--panel) !important;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35) !important; image-rendering:pixelated;
}
/* inventário ocupa a altura do painel alto (segue até o fim, mostra +itens) */
.game-body .inventory-panel{ display:flex !important; flex-direction:column; }
.game-body .inventory-panel .panel-title,
.game-body .inventory-panel .inv-tabs{ flex:0 0 auto; }
/* inventário: 2 itens por fileira (cards mais estreitos) */
.game-body .inventory-panel .item-list{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) !important;
  align-content:start; flex:0 1 auto; max-height:38rem !important; overflow-y:auto; padding-right:6px;
}
/* card do item: ícone + nome + raridade em cima, botões (equipar/cadeado) embaixo */
.game-body .inventory-panel .item{
  display:grid !important; grid-template-columns:auto 1fr !important; align-items:center; gap:5px 8px !important; padding:8px !important;
}
.game-body .inventory-panel .item .item-icon{ grid-column:1; grid-row:1; }
.game-body .inventory-panel .item > div:not(.item-actions){ grid-column:2; grid-row:1; min-width:0; }
.game-body .inventory-panel .item .item-actions{ display:flex !important; align-items:center; grid-column:1 / -1; grid-row:2; justify-content:flex-start; flex-wrap:wrap; gap:6px; margin-top:2px; }

/* ---------------- tipografia ---------------- */
.game-body h1,.game-body h2,.game-body h3,
.game-body .panel-title h2,.game-body .kicker,
.game-body .app-version,.game-body .tag,.game-body .mini-tag,
.game-body .up-pill,.game-body .lvl-badge strong,.game-body .xp-k{
  font-family:var(--font-pixel) !important;
  font-weight:400 !important;
  letter-spacing:.5px;
}
.game-body .panel-title h2{ font-size:11px !important; color:var(--ink) !important; line-height:1.5; }
.game-body .topbar-brand strong{ font-family:var(--font-pixel); font-size:13px; color:var(--ink); letter-spacing:.5px; }
.game-body .app-version{ font-size:7px !important; color:var(--ink-soft) !important; }

/* ---------------- topbar ---------------- */
.game-body .topbar{
  display:flex !important; align-items:center; gap:var(--s3);
  background:var(--bg-2) !important; border:0 !important; border-radius:0 !important;
  box-shadow:inset 0 -3px 0 var(--frame-out), 0 2px 0 rgba(0,0,0,.4) !important;
  padding:var(--s2) var(--s4) !important;
}
/* marca e ações com largura IGUAL (flex:1 1 0) -> o level no meio fica no centro real da tela */
.game-body .topbar-brand{ display:flex; align-items:center; gap:var(--s2); flex:1 1 0; min-width:0; }
/* Logo: altura fixa, largura AUTOMÁTICA -> mantém a proporção sempre (nunca espreme) */
.game-body .topbar-brand .brand-logo-img{ height:36px; width:auto; max-width:100%; display:block; object-fit:contain; }
.game-body .topbar-center{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:var(--s3); }
.game-body .topbar-actions{ flex:1 1 0; min-width:0; justify-content:flex-end; }
.game-body .lvl-badge{
  position:relative; min-width:46px; height:46px; padding:0 var(--s1);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--gold); color:#2a1c06;
  border:2px solid var(--gold-0); border-radius:0;
  box-shadow:inset 0 2px 0 var(--gold-hi), inset 0 -2px 0 var(--gold-0), 0 2px 0 var(--frame-out);
}
.game-body .lvl-badge strong{ font-size:15px; line-height:1; color:#2a1c06; }
.game-body .lvl-badge span{ font-family:var(--font-pixel); font-size:5px; letter-spacing:1px; margin-top:3px; text-transform:uppercase; color:#5a3a10; }
.game-body .xp-block{ min-width:170px; max-width:260px; }
.game-body .xp-line{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.game-body .xp-k{ font-size:7px; color:var(--gold); }
.game-body .xp-line strong{ font-family:var(--font-body); font-weight:600; font-size:12px; color:var(--ink-soft); }
.game-body .progress{ height:9px; overflow:hidden; }
.game-body .xp-block .progress i, .game-body #xp-bar{ background:var(--gold) !important; box-shadow:inset 0 1px 0 var(--gold-hi); }
.game-body .progress i{ display:block; height:100%; border-radius:0 !important; }

.game-body .topbar-actions{ display:flex; align-items:center; gap:var(--s2); }
.game-body .topbar-players{ font-family:var(--font-body); font-size:11px; color:var(--ink-soft); display:flex; align-items:center; gap:5px; }
.game-body .topbar-players b{ color:var(--gold); }
.game-body .online-dot{ width:7px; height:7px; background:var(--train-hi); border-radius:0; box-shadow:0 0 0 2px var(--train-0); }

/* botões quadrados de moldura (tiles do topo / flags / tema) */
.game-body .flag-btn{
  width:34px; height:30px; padding:0; border-radius:0;
  background-color:var(--panel);
  background-repeat:no-repeat; background-position:center; background-size:22px auto;
  border:2px solid var(--frame-out);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08);
  cursor:pointer;
}
.game-body .flag-btn.active{ border-color:var(--gold); box-shadow:inset 0 0 0 2px var(--gold-0); }
.game-body .icon-flag-br{ background-image:var(--img-flag-br); }
.game-body .icon-flag-us{ background-image:var(--img-flag-us); }
.game-body .icon-sun{ background-image:var(--img-sun); background-size:20px; }
.game-body .icon-moon{ background-image:var(--img-moon); background-size:20px; }
html[data-theme="light"] .game-body .icon-moon{ background-image:url("../img/icons/ic-moon-dark.png") !important; } /* lua escura visível no claro */
.game-body .lang-switch{ display:flex; gap:5px; }

/* ---------------- botão genérico pixel (pix-frame) ---------------- */
.game-body .topbar-button,
.game-body .topbar-logout,
.game-body .button-row .icon-button,
.game-body .up-pill,
.game-body .inv-tabs button,
.game-body .segmented .icon-button,
.game-body .expedition-focus button,
.game-body .modal-panel .ghost,
.game-body .danger,
.game-body .tag{
  --c:var(--wood-1); --c-hi:var(--wood-2); --c-lo:var(--frame-out);
  font-family:var(--font-pixel); font-size:9px; letter-spacing:.5px;
  color:#f6ecd6; background:var(--c);
  border:2px solid var(--c-lo); border-radius:0 !important;
  box-shadow:inset 0 2px 0 var(--c-hi), inset 0 -2px 0 var(--c-lo), 0 2px 0 var(--frame-out);
  cursor:pointer;
}
.game-body .topbar-button:hover,
.game-body .topbar-logout:hover,
.game-body .button-row .icon-button:hover,
.game-body .inv-tabs button:hover,
.game-body .segmented .icon-button:hover{ filter:brightness(1.08); }
.game-body .topbar-button:active,
.game-body .button-row .icon-button:active{ transform:translateY(2px); box-shadow:inset 0 2px 0 var(--c-hi), inset 0 -2px 0 var(--c-lo), 0 0 0 var(--frame-out); }
.game-body .topbar-button,.game-body .topbar-logout{ padding:8px 12px; }
.game-body .topbar-logout{ --c:var(--stop); --c-hi:var(--stop-hi); --c-lo:var(--stop-0); }

/* ---------------- city-hero (banner) ---------------- */
.game-body .city-hero{ position:relative; overflow:hidden; min-height:188px; padding:var(--s4) !important; margin-bottom:var(--s4); }
.game-body .city-copy{ position:relative; z-index:3; }
.game-body .city-hero .kicker{ font-size:8px; color:var(--gold); letter-spacing:2px; text-transform:uppercase; }
.game-body #city-name{ font-size:17px; color:var(--ink); margin:6px 0 4px; text-shadow:0 2px 0 var(--frame-out); }
.game-body #hero-name{ font-family:var(--font-body); font-size:13px; color:var(--ink-soft); }
.game-body .city-art.village{ position:absolute; right:0; bottom:0; width:78%; max-width:560px; height:auto; z-index:1; }

/* ---------------- stats-band (recursos + retrato) ---------------- */
.game-body .stats-band{
  display:grid !important;
  grid-template-columns:1.5fr repeat(7,minmax(0,1fr)) !important;
  gap:var(--s1) !important; margin:var(--s4) 0 !important;
}
.game-body .stat-tile{ padding:var(--s2) !important; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; }
.game-body .stat-tile > span{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.5px; color:var(--ink-soft); text-transform:uppercase; }
.game-body .stat-tile > strong{ font-family:var(--font-body); font-weight:700; font-size:15px; color:var(--ink); line-height:1; }
.game-body .stat-tile > strong small{ font-family:var(--font-body); font-weight:600; font-size:10px; color:var(--ink-soft); }
.game-body .stat-tile::before{
  content:""; display:block; width:38px; height:34px; margin-bottom:2px;
  background:var(--icon) center/26px no-repeat, var(--panel-2);
  border:1px solid var(--frame-out); box-shadow:inset 0 2px 0 rgba(0,0,0,.4); border-radius:0;
}
.game-body .stat-tile .progress{ width:88%; height:7px; margin-top:2px; }
.game-body .icon-gold .progress i{ background:var(--gold) !important; }
.game-body .icon-wood .progress i{ background:var(--wood-2) !important; }
.game-body .icon-stone .progress i{ background:var(--stone-2) !important; }
.game-body .icon-food .progress i{ background:var(--train) !important; }
.game-body .icon-iron .progress i{ background:var(--stone-1) !important; }
.game-body .icon-leather .progress i{ background:var(--wood-1) !important; }
.game-body .icon-diamond .progress i{ background:#5ad6e0 !important; }
.game-body .icon-diamond{ --icon:var(--img-diamond); }

/* retrato + 3 atributos */
.game-body .port-card{ flex-direction:row !important; align-items:center; gap:var(--s2); text-align:left; padding:7px !important; }
.game-body .port-card::before{ content:none !important; }
.game-body .port-face{
  width:64px; height:64px; flex:0 0 64px; object-fit:cover;
  background:var(--panel-2); border:2px solid var(--frame-out); border-radius:0;
  box-shadow:inset 0 0 0 1px var(--gold-0);
}
.game-body .port-face-col{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; }
/* botão Bônus embaixo da imagem do herói, na largura dela */
.game-body .port-bonus-btn{ width:64px; box-sizing:border-box; margin-top:0; align-self:auto; }
/* HP na grade de status, com ícone de coração igual aos outros (força/def/agi) */
.game-body .icon-hp{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S3 14.6 3 8.9C3 6.1 5.2 4 7.8 4 9.5 4 11 4.9 12 6.3 13 4.9 14.5 4 16.2 4 18.8 4 21 6.1 21 8.9 21 14.6 12 21 12 21z' fill='%23d94a3d' stroke='%237a1e15' stroke-width='1.2'/%3E%3C/svg%3E"); }
.game-body .port-stats{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.game-body .ps{ display:flex; align-items:center; gap:5px; }
.game-body .ps::before{
  content:""; flex:0 0 18px; width:18px; height:18px;
  background:var(--icon) center/14px no-repeat, var(--panel-2);
  border:1px solid var(--frame-out); border-radius:0;
}
.game-body .ps span{ font-family:var(--font-body); font-size:10px; color:var(--ink-soft); flex:1; }
.game-body .ps strong{ font-family:var(--font-body); font-weight:700; font-size:12px; color:var(--ink); }
/* bônus de atributo em verde (ex.: 24 (+6) -> o (+6) verde) */
.game-body .stat-bonus{ color:#5fd06a !important; font-weight:700; }
/* número flutuante de ganho(+verde)/perda(-vermelho) de recurso */
.game-body .stat-tile{ position:relative; }
.game-body .res-float{
  position:absolute; top:2px; left:50%; z-index:30; pointer-events:none;
  font-family:var(--font-pixel); font-size:11px; letter-spacing:.5px; white-space:nowrap;
  text-shadow:0 2px 0 var(--frame-out), 0 0 5px rgba(0,0,0,.6);
  animation:resFloat 1.25s ease-out forwards;
}
.game-body .res-float.gain{ color:#74e07a; }
.game-body .res-float.loss{ color:#ff7d6f; }
@keyframes resFloat{
  0%{ opacity:0; transform:translate(-50%,8px) scale(.7); }
  18%{ opacity:1; transform:translate(-50%,-2px) scale(1.15); }
  35%{ transform:translate(-50%,-8px) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-40px) scale(1); }
}

/* === Painel "Bônus" (extra status de equipamento: drop/caça/farm/reciclagem) === */
.game-body .icon-xp{ --icon:var(--img-xp); }
.game-body .port-card{ align-items:flex-start; }      /* sobe um pouco os 3 status */
.game-body .port-stats{ justify-content:flex-start; gap:2px; }
.game-body .extra-toggle{
  margin-top:1px; align-self:stretch; text-align:center; line-height:1; min-height:0 !important;
  font-family:var(--font-pixel); font-size:6px; letter-spacing:.5px; color:#f6ecd6;
  background:var(--wood-0); border:2px solid var(--frame-out); border-radius:0;
  box-shadow:inset 0 1px 0 var(--wood-1); padding:4px 6px; cursor:pointer;
}
.game-body .extra-toggle::before{
  content:""; display:inline-block; width:7px; height:7px; margin-right:4px; vertical-align:-1px;
  background:var(--img-xp) center/7px no-repeat; image-rendering:pixelated;
}
.game-body .extra-toggle:hover{ filter:brightness(1.1); }
.game-body .extra-toggle.active{ background:var(--gold); border-color:var(--gold-0); color:#2a1c06; box-shadow:inset 0 2px 0 var(--gold-hi), 0 2px 0 var(--frame-out); }
/* painel cai por baixo do card, por cima do conteúdo abaixo */
.game-body .extra-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60; width:min(440px,88vw);
  display:none; background:var(--panel); border:8px solid transparent; border-image:var(--img-frame) 8 stretch;
  box-shadow:0 4px 0 var(--frame-out), 0 14px 30px rgba(0,0,0,.55); padding:var(--s3);
}
.game-body .extra-panel.show{ display:block; }
.game-body .extra-title{ font-family:var(--font-pixel); font-size:8px; color:var(--gold); letter-spacing:.5px; margin-bottom:var(--s2); }
.game-body .extra-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); }
.game-body .extra-chip{
  display:flex; align-items:center; gap:7px; padding:6px 8px;
  background:var(--panel-2); border:2px solid var(--frame-out); border-radius:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.game-body .extra-chip .extra-ic{
  width:26px; height:26px; flex:0 0 26px; border-radius:0;
  background:var(--icon) center/20px no-repeat, var(--panel);
  border:1px solid var(--frame-out); box-shadow:inset 0 1px 0 rgba(0,0,0,.3); image-rendering:pixelated;
}
.game-body .extra-chip .extra-lab{ flex:1; min-width:0; font-family:var(--font-body); font-size:11px; color:var(--ink-soft); }
.game-body .extra-chip strong{ font-family:var(--font-pixel); font-size:9px; color:#5fd06a; white-space:nowrap; }
.game-body .extra-chip.zero{ opacity:.45; }
.game-body .extra-chip.zero strong{ color:var(--ink-soft); }
@media (max-width:600px){ .game-body .extra-panel{ width:86vw; } .game-body .extra-grid{ grid-template-columns:1fr; } }

/* === Tooltip de item (hover): bônus em linhas c/ ícone + comparação com o equipado === */
.game-body .item{ cursor:help; }
.game-body .item-tip{
  position:fixed; z-index:200; display:none; width:236px; max-width:82vw;
  background:var(--panel); border:7px solid transparent; border-image:var(--img-frame) 7 stretch;
  box-shadow:0 5px 0 var(--frame-out), 0 14px 30px rgba(0,0,0,.6); padding:9px 10px;
  pointer-events:none; image-rendering:pixelated;
}
.game-body .item-tip.show{ display:block; }
.game-body .item-tip .tip-head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; padding-bottom:6px; border-bottom:2px solid var(--frame-out); }
.game-body .item-tip .tip-head .item-icon{ flex:0 0 42px; }
.game-body .item-tip .tip-head-txt{ flex:1; min-width:0; }
.game-body .item-tip .tip-head strong{ display:block; font-family:var(--font-pixel); font-size:9px; line-height:1.5; color:var(--ink); }
.game-body .item-tip .tip-head span{ font-family:var(--font-body); font-size:10.5px; color:var(--ink-soft); }
/* "+N" de refinação depois do nome do item (âmbar de forja, independe da raridade) */
.game-body .ref-plus{ font-family:var(--font-pixel); font-size:.82em; font-style:normal; color:#ffb454 !important; margin-left:5px; text-shadow:0 1px 0 rgba(0,0,0,.45); }
/* "+0" (item ainda não refinado): visível, porém apagado pra os refinados se destacarem */
.game-body .ref-plus.ref-0{ color:var(--ink-soft) !important; opacity:.6; text-shadow:none; }
.game-body .item-tip .tip-head.rarity-common strong{ color:#d2c8b0; }
.game-body .item-tip .tip-head.rarity-uncommon strong{ color:#7fcf73; }
.game-body .item-tip .tip-head.rarity-rare strong{ color:#69aedd; }
.game-body .item-tip .tip-head.rarity-epic strong{ color:#bd93e6; }
.game-body .item-tip .tip-head.rarity-legendary strong{ color:#f6cf63; }
.game-body .item-tip .tip-head.rarity-unique strong{ color:#ef8a5a; }
.game-body .item-tip .tip-line{ display:flex; align-items:center; gap:6px; padding:2px 0; font-family:var(--font-body); font-size:11.5px; color:var(--ink); }
.game-body .item-tip .tip-line .tip-lab{ flex:1; min-width:0; color:var(--ink-soft); }
.game-body .item-tip .tip-line strong{ font-family:var(--font-pixel); font-size:8px; color:#74e07a; white-space:nowrap; }
.game-body .item-tip .tip-line.muted{ color:var(--ink-soft); font-style:italic; }
.game-body .item-tip .tip-ic{ width:18px; height:18px; flex:0 0 18px; border-radius:0; background:var(--icon) center/14px no-repeat, var(--panel-2); border:1px solid var(--frame-out); image-rendering:pixelated; }
.game-body .item-tip .tip-cmp{ margin-top:7px; padding-top:6px; border-top:2px solid var(--frame-out); }
.game-body .item-tip .tip-cmp-head{ font-family:var(--font-pixel); font-size:7px; color:var(--gold); letter-spacing:.3px; margin-bottom:5px; line-height:1.4; }
.game-body .item-tip .tip-line.cmp.better strong{ color:#74e07a; }   /* melhor = verde */
.game-body .item-tip .tip-line.cmp.worse strong{ color:#ff7d6f; }    /* pior = vermelho */
.game-body .item-tip .tip-line.cmp.same strong{ color:var(--ink-soft); }

/* Tema CLARO: o verde dos bônus é claro demais sobre o fundo cream, fica difícil de ler.
   Escurece o verde só no tema claro (mantém o verde vivo no tema escuro).
   Cobre: status do personagem, descrição/tooltip de item (e do market) e o número flutuante de recurso. */
html[data-theme="light"] .game-body .stat-bonus{ color:#176b2a !important; }
html[data-theme="light"] .game-body .res-float.gain{ color:#176b2a; }
html[data-theme="light"] .game-body .item-tip .tip-line strong{ color:#176b2a; }
html[data-theme="light"] .game-body .item-tip .tip-line.cmp.better strong{ color:#176b2a; }
/* painel "Bônus" (chips de bônus de equipamento agregados + perfil): mesmo verde escuro do status.
   :not(.zero) preserva o cinza dos bônus zerados. */
html[data-theme="light"] .game-body .extra-chip:not(.zero) strong{ color:#176b2a; }

/* Tema CLARO: nomes de itens por raridade são claros demais sobre o cream (tooltip/descrição, market e correio).
   Escurece mantendo a cor da raridade. No tema escuro continua vivo. */
html[data-theme="light"] .game-body .item-tip .tip-head.rarity-common strong,
html[data-theme="light"] .game-body .market-tile.rarity-common .mt-name,
html[data-theme="light"] .game-body .market-row.rarity-common .mail-info strong,
html[data-theme="light"] .game-body .mail-row.rarity-common .mail-info strong{ color:#574d3d; }
html[data-theme="light"] .game-body .item-tip .tip-head.rarity-uncommon strong,
html[data-theme="light"] .game-body .market-tile.rarity-uncommon .mt-name,
html[data-theme="light"] .game-body .market-row.rarity-uncommon .mail-info strong,
html[data-theme="light"] .game-body .mail-row.rarity-uncommon .mail-info strong{ color:#13591d; }
html[data-theme="light"] .game-body .item-tip .tip-head.rarity-rare strong,
html[data-theme="light"] .game-body .market-tile.rarity-rare .mt-name,
html[data-theme="light"] .game-body .market-row.rarity-rare .mail-info strong,
html[data-theme="light"] .game-body .mail-row.rarity-rare .mail-info strong{ color:#16567a; }
html[data-theme="light"] .game-body .item-tip .tip-head.rarity-epic strong,
html[data-theme="light"] .game-body .market-tile.rarity-epic .mt-name,
html[data-theme="light"] .game-body .market-row.rarity-epic .mail-info strong,
html[data-theme="light"] .game-body .mail-row.rarity-epic .mail-info strong{ color:#603493; }
html[data-theme="light"] .game-body .item-tip .tip-head.rarity-legendary strong,
html[data-theme="light"] .game-body .market-tile.rarity-legendary .mt-name,
html[data-theme="light"] .game-body .market-row.rarity-legendary .mail-info strong,
html[data-theme="light"] .game-body .mail-row.rarity-legendary .mail-info strong{ color:#654705; }
html[data-theme="light"] .game-body .item-tip .tip-head.rarity-unique strong,
html[data-theme="light"] .game-body .market-tile.rarity-unique .mt-name,
html[data-theme="light"] .game-body .market-row.rarity-unique .mail-info strong,
html[data-theme="light"] .game-body .mail-row.rarity-unique .mail-info strong{ color:#993c14; }

/* === Lupa no ranking + modal de perfil do jogador === */
.game-body .ranking-row{ display:grid !important; grid-template-columns:auto 1fr auto auto !important; align-items:center; gap:var(--s2) !important; }
.game-body .rank-peek{
  width:34px; height:32px; min-width:34px; min-height:0 !important; padding:0 !important; cursor:pointer;
  background:var(--img-search) center/20px no-repeat, var(--wood-1) !important;
  border:2px solid var(--frame-out) !important; border-radius:0 !important;
  box-shadow:inset 0 1px 0 var(--wood-2) !important; image-rendering:pixelated;
}
.game-body .rank-peek:hover{ filter:brightness(1.12); background-color:var(--gold) !important; }

.game-body .profile-panel{ width:min(560px,94vw); }
.game-body .prof-hero{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); }
.game-body .prof-avatar img{ width:78px; height:78px; flex:0 0 78px; object-fit:cover; border:2px solid var(--frame-out); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--gold-0); image-rendering:pixelated; border-radius:0; }
.game-body .prof-meta{ flex:1; min-width:0; }
.game-body .prof-meta > strong{ display:block; font-family:var(--font-pixel); font-size:11px; line-height:1.5; color:var(--gold); }
.game-body .prof-meta > span{ font-family:var(--font-body); font-size:12px; color:var(--ink-soft); }
.game-body .prof-rank{ color:var(--gold); font-weight:700; }
.game-body .prof-stats{ display:flex; gap:var(--s4); margin-top:var(--s2); flex-wrap:wrap; }
.game-body .prof-stats .ps{ flex:0 0 auto; }
.game-body .prof-bonus{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-bottom:var(--s3); }
.game-body .prof-equip-title{ font-family:var(--font-pixel); font-size:9px; color:var(--gold); letter-spacing:.5px; margin-bottom:var(--s2); padding-bottom:6px; border-bottom:2px solid var(--frame-out); }
.game-body .prof-equip{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); }
.game-body .prof-item{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; padding:8px;
  background:var(--panel-2); border:2px solid var(--frame-out); border-radius:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); cursor:help;
}
.game-body .prof-item > div{ min-width:0; }
.game-body .prof-item strong{ display:block; font-family:var(--font-body); font-weight:700; font-size:12px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-body .prof-item span{ font-family:var(--font-body); font-size:10.5px; color:var(--ink-soft); }
.game-body .prof-item.empty-slot{ opacity:.5; cursor:default; }
/* campo de busca do ranking */
.game-body .ranking-search{
  width:100%; margin-bottom:var(--s3); padding:9px 11px; box-sizing:border-box;
  font-family:var(--font-body); font-size:13px; color:var(--ink);
  background:var(--panel-2); border:2px solid var(--frame-out); border-radius:0;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.3); outline:none;
}
.game-body .ranking-search::placeholder{ color:var(--ink-soft); }
.game-body .ranking-search:focus{ border-color:var(--gold-0); box-shadow:inset 0 2px 0 rgba(0,0,0,.3), 0 0 0 1px var(--gold-0); }
/* dica do form de criação (tela de boas-vindas) */
.auth-hint{ display:block; margin-top:5px; font-size:11.5px; color:#9a8f78; line-height:1.4; }
@media (max-width:600px){ .game-body .prof-equip,.game-body .prof-bonus{ grid-template-columns:1fr; } }

/* ---------------- grid de painéis ---------------- */
.game-body .game-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:var(--s4) !important; align-items:start; }
.game-body .game-grid > .panel{ grid-column:auto !important; } /* anula o "span 3" da grade antiga de 6 colunas */
/* layout:  Herói  | Items (alto, ao lado da pilha Herói+Base)
            Base   |
            Criação| Ataque Diário
            Estrat.| Resultados                                     */
.game-body .hero-panel{ order:1; }
.game-body .inventory-panel{ order:2; grid-row:span 2; align-self:stretch; }
.game-body .city-panel{ order:3; }
.game-body .crafting-panel{ order:4; }
.game-body .pvp-panel{ order:5; }
.game-body .strategy-panel{ order:6; }
.game-body .results-panel{ order:7; }
.game-body .panel-title{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); border-bottom:2px solid var(--frame-out) !important; padding-bottom:var(--s2); margin-bottom:var(--s3); }
.game-body .panel-title h2::before{ content:""; display:inline-block; width:8px; height:8px; background:var(--gold); margin-right:7px; vertical-align:middle; }
.game-body .tag,.game-body .mini-tag{ font-size:7px; padding:5px 8px; --c:var(--wood-0); --c-hi:var(--wood-1); color:var(--gold-hi); }

/* botões de ação do herói (coloridos, ícone em cima) */
.game-body .button-row{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:var(--s2) !important; }
.game-body .button-row .icon-button{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  min-height:62px; padding:var(--s2) 4px; color:#fff5e0; font-size:9px; text-align:center;
}
.game-body .button-row .icon-button::before{
  content:""; width:30px; height:30px; flex:0 0 30px;
  background:var(--icon) center/22px no-repeat, rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.35); box-shadow:inset 0 2px 0 rgba(255,255,255,.14); border-radius:0;
}
.game-body .button-row [data-train="strength"],
.game-body .button-row [data-train="defense"],
.game-body .button-row [data-train="agility"]{ --c:var(--train); --c-hi:var(--train-hi); --c-lo:var(--train-0); }
.game-body .button-row .icon-hunt{ --c:var(--hunt); --c-hi:var(--hunt-hi); --c-lo:var(--hunt-0); }
.game-body .button-row .icon-expedition{ --c:var(--exped); --c-hi:var(--exped-hi); --c-lo:var(--exped-0); }
.game-body .button-row .icon-adventure{ --c:#7a4fa3; --c-hi:#a06fca; --c-lo:#573780; }
.game-body .button-row .ghost,.game-body .button-row #stop-training{
  --c:var(--stop); --c-hi:var(--stop-hi); --c-lo:var(--stop-0);
  font-family:var(--font-pixel); font-size:9px; color:#fbe6df; background:var(--c);
  border:2px solid var(--c-lo); border-radius:0;
  box-shadow:inset 0 2px 0 var(--c-hi), inset 0 -2px 0 var(--c-lo), 0 2px 0 var(--frame-out);
}
/* Parar fica escuro/inativo quando não há atividade pra parar */
.game-body .button-row #stop-training:disabled,
.game-body .button-row .ghost:disabled{
  filter:grayscale(.9) brightness(.4) !important; opacity:.85; cursor:not-allowed; transform:none;
}
.game-body .train-stat{ text-transform:lowercase; }
.game-body .button-row .icon-button:disabled{ filter:grayscale(.5) brightness(.78); opacity:.7; cursor:not-allowed; transform:none; }

.game-body .status-line{ font-family:var(--font-body); font-size:12.5px; color:var(--ink-soft); padding:var(--s2) var(--s3) !important; margin-top:var(--s3); }

/* base / construções */
.game-body .build-list{ display:flex; flex-direction:column; gap:var(--s2); }
.game-body .build-list button{
  position:relative;
  display:grid !important; grid-template-columns:54px 1fr auto !important; grid-template-rows:auto auto;
  align-items:center; column-gap:var(--s3); row-gap:3px;
  min-height:64px; padding:9px var(--s3) !important; text-align:left;
  background:var(--panel-2) !important; color:var(--ink) !important;
  border:2px solid var(--frame-out) !important; border-radius:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important; cursor:pointer;
}
.game-body .build-list button:hover{ filter:brightness(1.07); }
.game-body .build-list button::before{ content:none !important; }
/* emblema: ícone do prédio + badge de nível no canto inferior direito */
.game-body .b-emblem{
  grid-column:1; grid-row:1 / span 2; align-self:center; justify-self:center;
  position:relative; width:46px; height:46px;
  background:var(--build-image) center/32px no-repeat, var(--panel) !important;
  border:1px solid var(--frame-out); box-shadow:inset 0 2px 0 rgba(0,0,0,.35); border-radius:0;
  image-rendering:pixelated;
}
.game-body .b-emblem b{
  position:absolute; right:-5px; bottom:-5px;
  min-width:17px; height:16px; padding:0 3px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-pixel); font-size:8px; color:#2a1c06;
  background:var(--gold); border:2px solid var(--frame-out); border-radius:0;
}
/* nome + custo: par alinhado à esquerda, centralizado verticalmente ao lado do ícone */
.game-body .b-name{
  grid-column:2; grid-row:1; align-self:end; justify-self:start;
  font-family:var(--font-pixel); font-size:10px; color:var(--ink); letter-spacing:.5px; line-height:1.2;
}
/* custo à ESQUERDA (mesmo início do nome), sempre em UMA linha (sem quebra) */
.game-body .build-list button small{
  grid-column:2; grid-row:2; align-self:start; justify-self:start; text-align:left;
  font-family:var(--font-body); font-size:10px; color:var(--ink-soft); line-height:1.3;
  white-space:nowrap; letter-spacing:-.1px;
}
.game-body .up-pill{
  grid-column:3; grid-row:1 / span 2; align-self:center;
  --c:var(--gold); --c-hi:var(--gold-hi); --c-lo:var(--gold-0);
  font-size:8px; color:#2a1c06; padding:9px 11px; background:var(--gold);
  border:2px solid var(--gold-0); border-radius:0;
  box-shadow:inset 0 2px 0 var(--gold-hi), 0 2px 0 var(--frame-out);
}
.game-body .build-list button:disabled{ opacity:.6; filter:grayscale(.5); cursor:not-allowed; }
.game-body .build-list button:disabled .up-pill{ background:var(--stone-1); border-color:var(--stone-0); box-shadow:none; color:#2a2a2a; }
/* sem recurso pra melhorar: o "Melhorar" fica escuro/apagado (aceso = dourado só quando dá pra pagar) */
.game-body .build-list button.cant-afford{ opacity:.9; }
.game-body .build-list button.cant-afford .up-pill{
  background:var(--stone-0) !important; border-color:var(--frame-out) !important;
  box-shadow:none !important; color:#8d8475 !important; filter:grayscale(.55) brightness(.92);
}

/* abas / segmentado / foco */
.game-body .inv-tabs,.game-body .segmented,.game-body .expedition-focus{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--s3); }
.game-body .inv-tabs button,.game-body .segmented .icon-button,.game-body .expedition-focus button{ font-size:8px; padding:7px 9px; --c:var(--wood-0); --c-hi:var(--wood-1); --c-lo:var(--frame-out); }
.game-body .inv-tabs button.active,
.game-body .segmented .icon-button.active,
.game-body .expedition-focus button.active{ --c:var(--gold); --c-hi:var(--gold-hi); --c-lo:var(--gold-0); color:#2a1c06; }
.game-body .inv-tabs .ghost,.game-body .segmented .ghost{ --c:var(--stop); --c-hi:var(--stop-hi); --c-lo:var(--stop-0); }

/* "Comida" = caça rápida, botão de ação ao lado dos focos (cor da caça) */
/* "Comida" é um foco igual aos outros (Ouro/Madeira/Pedra/Item): estilo padrão + dourado quando ativo. */

/* modais */
.game-body .modal-backdrop{ background:rgba(16,12,9,.72) !important; backdrop-filter:none !important; }
.game-body .modal-panel{ padding:var(--s4) !important; }
.game-body .auth-note,.game-body .confirm-warning{ font-family:var(--font-body); font-size:12px; color:var(--ink-soft); }
.game-body .confirm-warning{ color:var(--stop-hi); }
.game-body .danger{ --c:var(--stop); --c-hi:var(--stop-hi); --c-lo:var(--stop-0); padding:8px 12px; }
.game-body .modal-panel .ghost{ --c:var(--wood-0); --c-hi:var(--wood-1); --c-lo:var(--frame-out); padding:7px 10px; }
.game-body .toast{ font-family:var(--font-body); background:var(--panel) !important; border:3px solid var(--frame-out) !important; border-radius:0 !important; color:var(--ink) !important; box-shadow:0 3px 0 var(--frame-out) !important; }

/* ===================== responsivo / mobile ===================== */
@media (max-width:980px){
  .game-body .stats-band{ grid-template-columns:repeat(4,1fr) !important; }
  .game-body .stat-tile.port-card{ grid-column:1 / -1; }
}
@media (max-width:760px){
  /* === todos os painéis na MESMA largura do topo === */
  /* o shell vira full-width com o MESMO recuo lateral do topbar (12px); assim city-hero +
     hero/itens/base/crafting/ataque/estratégia/resultados ficam idênticos e alinhados ao topo */
  .game-body{ overflow-x:hidden; }
  .game-body .topbar{ padding:10px 12px !important; }
  .game-body .game-shell{ width:100% !important; max-width:100% !important; margin:0 !important; padding:12px 12px 28px !important; }
  .game-body .city-hero{ margin:0 0 10px !important; }
  .game-body .game-grid{ grid-template-columns:1fr !important; gap:10px !important; }
  .game-body .game-grid>.panel{ grid-column:auto !important; width:auto !important; min-width:0 !important; max-width:100% !important; margin:0 !important; }
  .game-body .panel{ padding:14px !important; }
  .game-body .stats-band{ grid-template-columns:repeat(3,1fr) !important; }
  .game-body .city-art.village{ width:62%; opacity:.85; }
}
/* --- topbar mobile: marca + ações (botões só ícone) numa linha; level+XP em linha própria --- */
@media (max-width:640px){
  .game-body .topbar{ flex-wrap:wrap; gap:8px !important; row-gap:8px; padding:8px 12px !important; }
  .game-body .topbar-brand{ flex:1 1 auto; min-width:0; }
  .game-body .topbar-brand .brand-logo-img{ height:28px; }
  .game-body .app-version{ display:none; }
  .game-body .topbar-actions{ flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
  .game-body .topbar-players{ display:none; }
  /* botões Ranking/Mercado/Correio viram só ícone (texto some, ::before fica) */
  .game-body .topbar-button{ font-size:0 !important; gap:0 !important; padding:5px !important; }
  .game-body .topbar-button.icon-button::before{ flex:0 0 22px; width:22px; height:22px; }
  .game-body .topbar-logout{ font-size:8px !important; padding:6px 8px !important; }
  /* flags/tema menores pra caber mais por fileira */
  .game-body .topbar-actions .flag-btn{ width:28px; height:26px; background-size:17px auto; }
  .game-body .topbar-actions .lang-switch{ gap:4px; }
  .game-body .topbar-center{ order:3; flex:1 1 100%; justify-content:center; gap:10px; }
  .game-body .xp-block{ min-width:0 !important; max-width:none !important; flex:1 1 auto; }
  /* Itens do inventário: Equipar + Refinar + Cadeado na MESMA linha (como no desktop),
     anulando o flex-direction:column e o width:100% das regras mobile antigas. */
  .game-body .inventory-panel .item .item-actions{ flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; }
  .game-body .inventory-panel .item .item-actions button{ width:auto !important; }
}
@media (max-width:600px){
  .game-body .stats-band{ grid-template-columns:repeat(2,1fr) !important; }
  .game-body .button-row{ grid-template-columns:repeat(2,1fr) !important; }
  .game-body .city-hero{ min-height:160px; }
  /* modais quase a tela toda + nunca passam da viewport */
  .game-body .modal-panel{ max-width:94vw !important; max-height:92vh; overflow-y:auto; }
  .game-body .market-panel{ width:96vw !important; max-width:96vw !important; }
}
@media (max-width:460px){
  .game-body .stats-band{ grid-template-columns:repeat(2,1fr) !important; }
  /* inventário e grade do mercado mais largos */
  .game-body .inventory-panel .item-list{ grid-template-columns:1fr !important; max-height:none !important; }
  .game-body .market-grid{ grid-template-columns:repeat(2,1fr) !important; }
  /* filtros de compra compactos: a busca ocupa 1 linha; raridade + ordenar dividem a linha de baixo.
     !important porque a regra-base do .market-filters vem DEPOIS no arquivo (media query não soma specificity) */
  .game-body .market-filters{ gap:6px !important; }
  .game-body .market-filters input[type="search"]{ flex:1 1 100% !important; }
  .game-body .market-filters select{ flex:1 1 calc(50% - 3px) !important; min-width:0 !important; }
  .game-body .market-choose-btns button{ width:128px; font-size:9px !important; padding:18px 10px !important; }
  .game-body #city-name{ font-size:15px; }
}

/* ===================== Ferreiro: pedras de refino + modal de refinação ===================== */

/* Botão Refinar (bigorna) no card do item — irmão do cadeado, em azul */
.game-body .refine-btn{
  --icon: var(--img-anvil);
  width:34px !important; min-width:34px !important; height:32px; padding:0 !important;
  background-color:var(--exped) !important;
  background-image:var(--icon) !important; background-size:21px !important; background-position:center !important; background-repeat:no-repeat !important;
  border:2px solid var(--frame-out) !important; border-radius:0 !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), 0 2px 0 var(--frame-out) !important;
  color:transparent !important;
}
.game-body .refine-btn:hover{ filter:brightness(1.12); }

/* Criar pedra (gate por nível do Ferreiro) */
.game-body .stone-craft{ position:relative; }
.game-body .stone-craft span .rarity-gem{ margin-left:6px; vertical-align:middle; }
.game-body .stone-craft.is-locked{ filter:grayscale(.7) brightness(.62); cursor:not-allowed; }
.game-body .stone-craft .stone-lock{
  position:absolute; top:5px; right:5px; width:16px; height:16px;
  background:var(--img-lock) center/13px no-repeat; image-rendering:pixelated; opacity:.92;
}
/* tile da pedra recebe a cor da raridade na borda */
.game-body .icon-refstone.rarity-common{ border-color:#d2c8b0 !important; }
.game-body .icon-refstone.rarity-uncommon{ border-color:#7fcf73 !important; }
.game-body .icon-refstone.rarity-rare{ border-color:#69aedd !important; }
.game-body .icon-refstone.rarity-epic{ border-color:#bd93e6 !important; }
.game-body .icon-refstone.rarity-legendary{ border-color:#f6cf63 !important; }
.game-body .icon-refstone.rarity-unique{ border-color:#ef8a5a !important; }

/* Pack de pedras no inventário (sem ações) */
.game-body .stone-pack .stone-qty{ font-family:var(--font-pixel); font-size:.8em; color:var(--gold); margin-left:6px; }
.game-body .stone-pack small{ display:block; color:var(--ink-soft); font-size:10px; line-height:1.4; margin-top:2px; }

/* Aviso de refino no ticker (martelo dourado) */
.game-body .announce-refine .announce-badge{ color:var(--gold); }

/* Modal de refinação */
.game-body .refine-panel{ max-width:430px; position:relative; overflow:hidden; }
.game-body .refine-body{ display:flex; flex-direction:column; gap:12px; }
.game-body .rf-head{ display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:2px solid var(--frame-out); }
.game-body .rf-head .item-icon{ flex:0 0 42px; }
.game-body .rf-head-txt strong{ display:block; font-family:var(--font-pixel); font-size:10px; line-height:1.5; color:var(--ink); }
.game-body .rf-head-txt span{ font-family:var(--font-body); font-size:11px; color:var(--ink-soft); }
.game-body .rf-head.rarity-common strong{ color:#d2c8b0; }
.game-body .rf-head.rarity-uncommon strong{ color:#7fcf73; }
.game-body .rf-head.rarity-rare strong{ color:#69aedd; }
.game-body .rf-head.rarity-epic strong{ color:#bd93e6; }
.game-body .rf-head.rarity-legendary strong{ color:#f6cf63; }
.game-body .rf-head.rarity-unique strong{ color:#ef8a5a; }

.game-body .rf-trans{ display:flex; align-items:center; justify-content:center; gap:14px; }
.game-body .rf-trans b{ font-family:var(--font-pixel); font-size:18px; color:var(--ink-soft); }
.game-body .rf-trans .rf-next{ color:#ffce5a; }
.game-body .rf-arrow{ color:var(--gold); font-size:20px; }

.game-body .rf-cost{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 9px; padding:8px; background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .rf-cost .item-icon{ flex:0 0 34px; width:34px !important; height:34px !important; }
.game-body .rf-cost .rf-clab{ flex:1; min-width:0; font-family:var(--font-body); color:var(--ink); }
.game-body .rf-cost strong{ font-family:var(--font-pixel); font-size:11px; color:var(--gold); }
.game-body .rf-cost small{ flex:0 0 100%; color:var(--ink-soft); font-size:10.5px; }
.game-body .rf-cost.short strong{ color:#ff7d6f; }

.game-body .rf-chances{ display:flex; flex-direction:column; gap:6px; }
.game-body .rf-chance{ display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:11.5px; }
.game-body .rf-chance .rf-clab{ flex:0 0 92px; color:var(--ink-soft); }
.game-body .rf-chance .rf-bar{ flex:1; height:12px; background:var(--panel); border:1px solid var(--frame-out); overflow:hidden; }
/* cores nas BARRAS de progresso (verde/laranja/vermelho); SEM fundo na linha.
   Classes rf-* próprias p/ não herdar o fundo vermelho da .danger global. */
.game-body .rf-chance{ background:transparent !important; }
.game-body .rf-chance .rf-bar i{ display:block; height:100%; background:var(--ink-soft); }
.game-body .rf-chance strong{ flex:0 0 42px; text-align:right; font-family:var(--font-pixel); font-size:8px; color:var(--ink); }
.game-body .rf-chance.rf-ok .rf-bar i{ background:#5fd06a; } .game-body .rf-chance.rf-ok strong{ color:#5fd06a; }
.game-body .rf-chance.rf-bad .rf-bar i{ background:#e6a23c; } .game-body .rf-chance.rf-bad strong{ color:#e6a23c; }
.game-body .rf-chance.rf-danger .rf-bar i{ background:#e0574b; } .game-body .rf-chance.rf-danger strong{ color:#e0574b; }

.game-body .anvil-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px !important; font-family:var(--font-pixel); font-size:10px; }
.game-body .anvil-btn .anvil-ic{ width:22px; height:22px; background:var(--img-anvil) center/contain no-repeat; image-rendering:pixelated; }
.game-body .anvil-btn.swinging .anvil-ic{ animation:anvilSwing .42s ease; }
@keyframes anvilSwing{ 0%,100%{ transform:rotate(0) } 35%{ transform:rotate(-24deg) translateY(-2px) } 68%{ transform:rotate(8deg) } }

.game-body .rf-result{ text-align:center; font-family:var(--font-pixel); font-size:9px; line-height:1.5; padding:8px; border:2px solid var(--frame-out); }
.game-body .rf-result.ok{ color:#0c1a0c; background:#5fd06a; }
.game-body .rf-result.bad{ color:#fff; background:#a23b32; }
.game-body .rf-warn{ color:#ff9d4d; font-size:11px; text-align:center; }
.game-body .rf-max{ text-align:center; color:var(--gold); font-family:var(--font-pixel); font-size:9px; line-height:1.6; padding:10px; }
.game-body .rf-gone{ text-align:center; padding:14px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.game-body .rf-gone .rf-skull{ font-size:40px; line-height:1; }
.game-body .rf-gone p{ color:#ff7d6f; font-family:var(--font-pixel); font-size:9px; line-height:1.6; }

/* Efeitos do resultado */
.game-body .refine-panel.fx-success{ animation:rfFlash .6s ease; }
.game-body .refine-panel.fx-fail{ animation:rfShake .42s ease; }
.game-body .refine-panel.fx-destroy{ animation:rfDestroy .6s ease; }
@keyframes rfFlash{ 0%{ box-shadow:0 0 0 0 rgba(95,208,106,0) } 30%{ box-shadow:0 0 60px 12px rgba(95,208,106,.85) } 100%{ box-shadow:0 0 0 0 rgba(95,208,106,0) } }
@keyframes rfShake{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-8px) } 40%{ transform:translateX(7px) } 60%{ transform:translateX(-5px) } 80%{ transform:translateX(3px) } }
@keyframes rfDestroy{ 0%{ filter:none } 25%{ filter:brightness(2.2) saturate(.2) } 60%{ filter:brightness(.5) saturate(.5) } 100%{ filter:none } }

/* Faíscas radiais no sucesso */
.game-body .rf-burst{ position:absolute; left:50%; top:46%; width:0; height:0; pointer-events:none; z-index:6; }
.game-body .rf-burst i{ position:absolute; width:6px; height:6px; margin:-3px; background:#ffd766; box-shadow:0 0 6px #ffcf5c; transform:rotate(var(--a)) translateY(0); animation:rfSpark .9s ease-out forwards; }
@keyframes rfSpark{ 0%{ opacity:1; transform:rotate(var(--a)) translateY(0) scale(1) } 100%{ opacity:0; transform:rotate(var(--a)) translateY(-72px) scale(.3) } }

/* === 3 abas de ordenação do ranking (Base Power / Hero Power / Top Level) === */
.game-body .ranking-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:var(--s2); }
.game-body .ranking-tabs button{
  font-family:var(--font-pixel) !important; font-size:7.5px !important; letter-spacing:.3px; line-height:1.5;
  padding:8px 4px !important; min-height:0 !important; text-align:center;
  color:var(--ink-soft) !important; background:var(--panel-2) !important;
  border:2px solid var(--frame-out) !important; border-radius:0 !important; cursor:pointer;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.05) !important;
}
.game-body .ranking-tabs button:hover{ filter:brightness(1.12); color:var(--ink) !important; }
.game-body .ranking-tabs button.active{
  color:#1c1208 !important; background:var(--gold) !important; border-color:var(--gold-0) !important;
  box-shadow:inset 0 2px 0 var(--gold-hi), 0 2px 0 var(--frame-out) !important;
}

/* === Correio: ícone com badge + modal === */
.game-body .mail-button{ position:relative; }
.game-body .mail-badge{
  position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 3px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-pixel); font-size:7px; line-height:1; color:#fff;
  background:var(--stop); border:2px solid var(--frame-out); border-radius:0;
}
/* respeita o atributo hidden (senão o display:flex acima mantém o badge visível) */
.game-body .mail-badge[hidden]{ display:none !important; }
.game-body .mail-list{ display:flex; flex-direction:column; gap:var(--s2); max-height:60vh; overflow-y:auto; padding-right:4px; }
.game-body .mail-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:8px; background:var(--panel-2); border:2px solid var(--frame-out);
}
.game-body .mail-row .item-icon{ flex:0 0 42px; }
.game-body .mail-info{ min-width:0; }
.game-body .mail-info strong{ display:block; font-family:var(--font-pixel); font-size:9px; line-height:1.5; color:var(--ink); }
.game-body .mail-info > span{ font-family:var(--font-body); font-size:10.5px; color:var(--ink-soft); display:flex; align-items:center; gap:4px; }
.game-body .mail-info small{ display:block; font-size:10px; color:var(--ink-soft); margin-top:2px; font-style:italic; }
.game-body .mail-claim{
  font-family:var(--font-pixel) !important; font-size:8px !important; padding:9px 12px !important; min-height:0 !important;
  color:#f6ecd6 !important; background:var(--train) !important;
  border:2px solid var(--train-0) !important; border-radius:0 !important; cursor:pointer; white-space:nowrap;
  box-shadow:inset 0 2px 0 var(--train-hi), inset 0 -2px 0 var(--train-0), 0 2px 0 var(--frame-out) !important;
}
.game-body .mail-claim:hover{ filter:brightness(1.08); }
.game-body .mail-claim:disabled{ filter:grayscale(.7) brightness(.7) !important; cursor:not-allowed; opacity:.75; }
/* cor da raridade no nome do item da carta */
.game-body .mail-row.rarity-common .mail-info strong{ color:#d2c8b0; }
.game-body .mail-row.rarity-uncommon .mail-info strong{ color:#7fcf73; }
.game-body .mail-row.rarity-rare .mail-info strong{ color:#69aedd; }
.game-body .mail-row.rarity-epic .mail-info strong{ color:#bd93e6; }
.game-body .mail-row.rarity-legendary .mail-info strong{ color:#f6cf63; }
.game-body .mail-row.rarity-unique .mail-info strong{ color:#ef8a5a; }

/* ===================== Mercado ===================== */
.game-body .market-panel{ max-width:760px; width:94vw; max-height:88vh; display:flex; flex-direction:column; }
.game-body .market-panel .panel-title{ flex:0 0 auto; gap:10px; }
.game-body .market-diamond{ display:flex; align-items:center; gap:5px; margin-left:auto; font-family:var(--font-pixel); font-size:10px; color:var(--gold); }
.game-body .market-diamond .md-ic, .game-body .dia-ic{ display:inline-block; vertical-align:middle; width:16px; height:16px; flex:0 0 16px; background:var(--img-diamond) center/contain no-repeat; image-rendering:pixelated; }
/* diamante inline no label de preço (classe sem "icon-" pra não pegar a maquinaria de ícone/::before) */
.game-body .price-dia{ display:inline-block; vertical-align:-3px; width:16px; height:16px; background:var(--img-diamond) center/contain no-repeat; image-rendering:pixelated; flex:0 0 16px; }
/* label do preço numa linha só (ícone + texto + valor lado a lado, sem quebrar) */
.game-body .sell-price-row label{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; white-space:nowrap; }
.game-body .market-tabs{ display:flex; gap:6px; flex:0 0 auto; margin-bottom:var(--s2); }
.game-body .market-tabs button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-pixel) !important; font-size:8.5px !important; padding:10px 4px !important; min-height:0 !important;
  color:var(--ink-soft) !important; background:var(--panel-2) !important; border:2px solid var(--frame-out) !important; border-radius:0 !important; cursor:pointer;
}
.game-body .market-tabs button.active{ color:#1c1208 !important; background:var(--gold) !important; border-color:var(--gold-0) !important; box-shadow:inset 0 2px 0 var(--gold-hi) !important; }
.game-body .market-tabs .scale-ic{ width:18px; height:18px; background:var(--img-scale) center/contain no-repeat; image-rendering:pixelated; }
.game-body .market-pane{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.game-body .market-filters{ display:flex; gap:8px; flex:0 0 auto; margin-bottom:var(--s2); flex-wrap:wrap; }
.game-body .market-filters input[type="search"]{ flex:2 1 180px; min-width:0; }
.game-body .market-filters select{ flex:1 1 120px; }
.game-body .market-filters input, .game-body .market-filters select,
.game-body .sell-pick select, .game-body .sell-pick input{
  font-family:var(--font-body); font-size:12px; padding:8px; color:var(--ink);
  background:var(--panel-2); border:2px solid var(--frame-out); border-radius:0;
}
/* Foco: tira o outline branco padrão do navegador e usa borda dourada + leve halo (igual à busca do ranking).
   Cobre busca, ambos os selects (raridade/ordenar) e os campos do form de venda. */
.game-body .market-filters input:focus, .game-body .market-filters input:focus-visible,
.game-body .market-filters select:focus, .game-body .market-filters select:focus-visible,
.game-body .sell-pick select:focus, .game-body .sell-pick select:focus-visible,
.game-body .sell-pick input:focus, .game-body .sell-pick input:focus-visible{
  outline:none !important;
  border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.22), 0 0 0 2px var(--gold-0);
}
.game-body .market-cats{ display:flex; gap:6px; flex:0 0 auto; flex-wrap:wrap; margin-bottom:var(--s2); }
.game-body .market-cat{
  font-family:var(--font-pixel) !important; font-size:7.5px !important; padding:7px 9px !important; min-height:0 !important;
  color:var(--ink-soft) !important; background:var(--panel-2) !important; border:2px solid var(--frame-out) !important; border-radius:0 !important; cursor:pointer;
}
.game-body .market-cat.active{ color:#1c1208 !important; background:var(--gold) !important; border-color:var(--gold-0) !important; }
.game-body .market-cat b{ color:var(--gold); }
.game-body .market-cat.active b{ color:#1c1208; }
.game-body .market-results, .game-body .market-mine{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--s2); padding-right:4px; }
.game-body .market-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:8px; background:var(--panel-2); border:2px solid var(--frame-out);
}
.game-body .market-row .item-icon{ flex:0 0 42px; }
.game-body .market-group{ cursor:default; }
/* grade de tipos de item pra comprar (ícone -> clica -> ofertas com preço) */
.game-body .market-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; align-content:start; }
.game-body .market-tile{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; min-height:0 !important; cursor:pointer;
  background:var(--panel-2) !important; border:2px solid var(--frame-out) !important; border-radius:0 !important; color:var(--ink) !important;
}
.game-body .market-tile:hover{ filter:brightness(1.12); border-color:var(--gold-0) !important; }
.game-body .market-tile .item-icon{ flex:0 0 42px; }
.game-body .market-tile .mt-name{
  font-family:var(--font-pixel); font-size:7px; line-height:1.5; text-align:center; width:100%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.game-body .market-tile .mt-count{ font-family:var(--font-body); font-size:9.5px; color:var(--gold); }
.game-body .market-tile.rarity-common .mt-name{ color:#d2c8b0; }
.game-body .market-tile.rarity-uncommon .mt-name{ color:#7fcf73; }
.game-body .market-tile.rarity-rare .mt-name{ color:#69aedd; }
.game-body .market-tile.rarity-epic .mt-name{ color:#bd93e6; }
.game-body .market-tile.rarity-legendary .mt-name{ color:#f6cf63; }
.game-body .market-tile.rarity-unique .mt-name{ color:#ef8a5a; }
.game-body .market-row.rarity-common .mail-info strong{ color:#d2c8b0; }
.game-body .market-row.rarity-uncommon .mail-info strong{ color:#7fcf73; }
.game-body .market-row.rarity-rare .mail-info strong{ color:#69aedd; }
.game-body .market-row.rarity-epic .mail-info strong{ color:#bd93e6; }
.game-body .market-row.rarity-legendary .mail-info strong{ color:#f6cf63; }
.game-body .market-row.rarity-unique .mail-info strong{ color:#ef8a5a; }
.game-body .market-buy, .game-body .market-open-item{
  display:flex; align-items:center; gap:5px; white-space:nowrap;
  font-family:var(--font-pixel) !important; font-size:8px !important; padding:9px 11px !important; min-height:0 !important;
  color:#1c1208 !important; background:var(--gold) !important; border:2px solid var(--gold-0) !important; border-radius:0 !important; cursor:pointer;
  box-shadow:inset 0 2px 0 var(--gold-hi), 0 2px 0 var(--frame-out) !important;
}
.game-body .market-buy:hover, .game-body .market-open-item:hover{ filter:brightness(1.08); }
.game-body .market-back{
  align-self:flex-start; font-family:var(--font-pixel) !important; font-size:8px !important; padding:8px 12px !important; min-height:0 !important;
  color:#f6ecd6 !important; background:var(--wood-1) !important; border:2px solid var(--frame-out) !important; border-radius:0 !important; cursor:pointer; margin-bottom:4px;
}
/* aba Vender */
.game-body .market-warn{ font-family:var(--font-body); font-size:12px; color:#ff9d4d; background:var(--panel-2); border:2px solid var(--frame-out); padding:10px; margin-bottom:var(--s2); text-align:center; }
.game-body .sell-modes{ display:flex; gap:6px; margin-bottom:var(--s2); }
.game-body .sell-mode-btn{
  flex:1; font-family:var(--font-pixel) !important; font-size:8px !important; padding:8px !important; min-height:0 !important;
  color:var(--ink-soft) !important; background:var(--panel-2) !important; border:2px solid var(--frame-out) !important; border-radius:0 !important; cursor:pointer;
}
.game-body .sell-mode-btn.active{ color:#1c1208 !important; background:var(--gold) !important; border-color:var(--gold-0) !important; }
.game-body .sell-pick{ display:flex; gap:8px; margin-bottom:var(--s2); }
.game-body .sell-pick select{ flex:2 1 0; min-width:0; }
.game-body .sell-pick input[type="number"]{ flex:1 1 0; min-width:0; }
.game-body .sell-price-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; font-family:var(--font-body); font-size:12px; color:var(--ink); }
.game-body .sell-price-row b{ color:var(--gold); font-family:var(--font-pixel); font-size:10px; }
.game-body .sell-price-row input[type="range"]{ flex:1; accent-color:var(--gold); }
.game-body .sell-range, .game-body .sell-fee, .game-body .muted{ font-family:var(--font-body); font-size:11px; color:var(--ink-soft); margin-bottom:6px; }
.game-body .market-list-btn{
  font-family:var(--font-pixel) !important; font-size:9px !important; padding:11px 18px !important; min-height:0 !important;
  color:#f6ecd6 !important; background:var(--train) !important; border:2px solid var(--train-0) !important; border-radius:0 !important; cursor:pointer;
  box-shadow:inset 0 2px 0 var(--train-hi), inset 0 -2px 0 var(--train-0), 0 2px 0 var(--frame-out) !important;
}
.game-body .market-list-btn:hover{ filter:brightness(1.08); }
/* rodapé do form de venda: Mín·Máx + taxa à esquerda; botão Anunciar (compacto) à direita, na mesma linha */
.game-body .sell-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.game-body .sell-foot-info{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.game-body .sell-foot-info .sell-range, .game-body .sell-foot-info .sell-fee{ margin-bottom:0; }
.game-body .sell-foot .market-list-btn{ flex:0 0 auto; white-space:nowrap; }
.game-body .market-sub{ font-family:var(--font-pixel); font-size:9px; color:var(--gold); margin:14px 0 8px; }
.game-body .mkt-recv{ display:flex; align-items:center; gap:4px; }
.game-body .market-withdraw{
  font-family:var(--font-pixel) !important; font-size:8px !important; padding:9px 11px !important; min-height:0 !important; white-space:nowrap;
  color:#f6ecd6 !important; background:var(--wood-1) !important; border:2px solid var(--frame-out) !important; border-radius:0 !important; cursor:pointer;
}
.game-body .market-withdraw:disabled{ filter:grayscale(.6) brightness(.7) !important; opacity:.7; cursor:not-allowed; }
/* passo "Itens ou Recursos?" */
.game-body .market-choose{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:26px 10px; }
.game-body #market-buy-choose{ flex:1 1 auto; }
.game-body .market-choose-q{ font-family:var(--font-pixel); font-size:12px; color:var(--gold); text-align:center; line-height:1.6; }
.game-body .market-choose-btns{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.game-body .market-choose-btns button{
  display:flex; flex-direction:column; align-items:center; gap:10px; width:150px; padding:22px 12px !important; min-height:0 !important;
  font-family:var(--font-pixel) !important; font-size:11px !important; cursor:pointer;
  color:#1c1208 !important; background:var(--gold) !important; border:3px solid var(--gold-0) !important; border-radius:0 !important;
  box-shadow:inset 0 3px 0 var(--gold-hi), 0 3px 0 var(--frame-out) !important;
}
.game-body .market-choose-btns button:hover{ filter:brightness(1.08); }
.game-body .market-choose-btns .ck-ic{ width:42px; height:42px; background:var(--icon) center/contain no-repeat; image-rendering:pixelated; }
.game-body .market-browse{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.game-body .market-browse .market-back{ flex:0 0 auto; }
/* fluxo em passos: Comprar/Vender -> Itens/Recursos -> tela */
.game-body .market-step{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; position:relative; }
.game-body .market-step[hidden], .game-body .market-browse[hidden], .game-body .market-sell-screen[hidden]{ display:none !important; }
.game-body #mk-step-action, .game-body #mk-step-kind{ align-items:center; justify-content:center; gap:18px; padding:26px 10px; }
.game-body #mk-step-kind .market-back{ position:absolute; top:0; left:0; }
.game-body .market-step-screen{ overflow:hidden; }
.game-body .market-step-screen > .market-back{ flex:0 0 auto; align-self:flex-start; margin-bottom:8px; }
.game-body .market-sell-screen{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }

/* ===================== Aviso de cookies (LGPD) ===================== */
/* Usa só tokens globais (:root) para funcionar tanto na tela de login (auth-body)
   quanto no jogo (game-body), e adaptar aos temas claro/escuro. */
.cookie-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px;
    padding:12px 18px;
    background:var(--surface-2);
    border-top:2px solid var(--line);
    box-shadow:0 -6px 22px rgba(0,0,0,.28);
    font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif;
}
.cookie-bar-text{ margin:0; max-width:760px; color:var(--ink); font-size:13px; line-height:1.55; }
.cookie-bar-link{ color:var(--copper); font-weight:600; text-decoration:underline; }
.cookie-bar-ok{
    flex:0 0 auto; cursor:inherit;
    font-size:12px; font-weight:700; letter-spacing:.02em;
    padding:9px 20px; color:#2a1c06;
    background:var(--gold); border:2px solid rgba(0,0,0,.28); border-radius:8px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.18);
}
.cookie-bar-ok:hover{ filter:brightness(1.06); }
@media (max-width:520px){
    .cookie-bar{ flex-direction:column; gap:10px; padding:12px 14px; text-align:center; }
    .cookie-bar-text{ font-size:12px; }
    .cookie-bar-ok{ width:100%; }
}

/* Link permanente p/ a política na tela de login */
.auth-legal-link{ margin:14px 0 0; text-align:center; font-size:12px; }
.auth-legal-link a{ color:var(--ink); opacity:.75; text-decoration:underline; }
.auth-legal-link a:hover{ opacity:1; }

/* ===================== Página de Privacidade / Cookies ===================== */
.legal-screen{ min-height:100%; display:flex; justify-content:center; padding:34px 18px 72px; }
.legal-card{
    width:min(760px,100%);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:30px 32px 36px;
}
.legal-head{ border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:20px; }
.legal-head h1{ margin:10px 0 4px; font-size:23px; line-height:1.25; color:var(--ink); }
.legal-app{ margin:0; color:var(--gold); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:12px; }
.legal-back{ display:inline-block; color:var(--ink); opacity:.72; text-decoration:none; font-size:13px; }
.legal-back::before{ content:"\2190\00a0"; }
.legal-back:hover{ opacity:1; text-decoration:underline; }
.legal-summary{
    background:var(--surface-3);
    border:1px solid var(--line); border-left:4px solid var(--gold);
    border-radius:10px; padding:15px 17px; margin-bottom:24px;
}
.legal-summary h2,.legal-sec h2{ font-size:15px; color:var(--ink); margin:0 0 9px; }
.legal-sec{ margin:0 0 22px; }
.legal-sec p,.legal-summary p{ margin:0; color:var(--ink); opacity:.82; line-height:1.62; font-size:14px; }
.legal-table-wrap{ overflow-x:auto; }
.legal-table{ width:100%; border-collapse:collapse; font-size:13px; }
.legal-table th,.legal-table td{ text-align:left; padding:9px 11px; border-bottom:1px solid var(--line); vertical-align:top; }
.legal-table th{ color:var(--ink); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.legal-table td{ color:var(--ink); opacity:.86; }
.legal-table code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--ink); background:var(--surface-2); padding:1px 6px; border-radius:4px; }
.legal-tag{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.legal-tag.tag-ess{ background:#e8c9a0; color:#5a3a14; }
.legal-tag.tag-pref{ background:#cfe3c8; color:#2f5226; }
.legal-foot{ border-top:1px solid var(--line); padding-top:18px; margin-top:6px; }
@media (max-width:560px){
    .legal-card{ padding:22px 16px 28px; border-radius:10px; }
    .legal-head h1{ font-size:19px; }
    .legal-sec p,.legal-summary p{ font-size:13.5px; }
}

/* ===================== Cena das atividades do herói (estilo GBA, cosmética) =====================
   Fica INLINE no topo, ao lado do nome do Reino (mesmo lugar da animação antiga do herói),
   nunca no centro da tela. A animação antiga some enquanto a cena está aberta. */
.game-body .hunt-overlay{
  position:absolute; left:28%; bottom:4px; z-index:2;
  width:min(340px,42%); display:none;
}
.game-body .hunt-overlay.show{ display:block; }
.game-body .hunt-stage{
  position:relative; width:100%;
  background:var(--panel); border:3px solid var(--frame-out);
  box-shadow:0 3px 0 var(--frame-out), inset 0 0 0 2px rgba(255,255,255,.09);
  image-rendering:pixelated;
}
.game-body .hunt-close{
  position:absolute; top:-3px; right:-3px; z-index:6;
  width:22px; height:20px; padding:0 !important; min-height:0 !important; cursor:pointer;
  font-family:var(--font-pixel) !important; font-size:8px !important; line-height:1;
  color:#f6ecd6 !important; background:var(--stop) !important;
  border:2px solid var(--stop-0) !important; border-radius:0 !important;
  box-shadow:inset 0 2px 0 var(--stop-hi), 0 2px 0 var(--frame-out) !important;
}
.game-body .hunt-close:hover{ filter:brightness(1.12); }
.game-body .hunt-expand{
  position:absolute; top:-3px; right:21px; z-index:6;
  width:22px; height:20px; padding:0 !important; min-height:0 !important; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold) !important; border:2px solid var(--gold-0) !important; border-radius:0 !important;
  box-shadow:inset 0 2px 0 var(--gold-hi), 0 2px 0 var(--frame-out) !important;
}
.game-body .hunt-expand::before{
  content:""; width:11px; height:11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%231c1208' stroke-width='2'%3E%3Cpath d='M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.game-body .hunt-expand:hover{ filter:brightness(1.12); }

/* Modo TELA GRANDE: a cena vai pro centro e ocupa bem mais espaço */
.game-body .hunt-overlay.hunt-big{
  position:fixed; left:0; top:0; right:0; bottom:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(8,6,3,.74); z-index:60;
}
.game-body .hunt-overlay.hunt-big .hunt-stage{ width:min(960px,92vw); }
.game-body .hunt-overlay.hunt-big .hunt-close{ top:8px; right:8px; width:30px; height:26px; font-size:12px !important; }
.game-body .hunt-overlay.hunt-big .hunt-expand{ top:8px; right:44px; width:30px; height:26px; }
.game-body .hunt-overlay.hunt-big .hunt-expand::before{ width:15px; height:15px; }
.game-body .hunt-overlay.hunt-big .hunt-expand::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%231c1208' stroke-width='2'%3E%3Cpath d='M6 2v4H2M10 2v4h4M6 14v-4H2M10 14v-4h4'/%3E%3C/g%3E%3C/svg%3E");
}
.game-body .hunt-overlay.hunt-big .hb-text{ font-size:13px; padding:12px 14px; }

/* cenário: céu, floresta ao fundo e campo (formato banner, mais achatado) */
.game-body .hb-scene{
  position:relative; width:100%; aspect-ratio:21/9; overflow:hidden;
  background:
    linear-gradient(180deg, #9fd4e8 0%, #c3e6ef 34%, #cfe9d2 46%, #6fae6a 47%, #4f8f52 74%, #3f7a45 100%);
}
.game-body .hb-far{
  position:absolute; left:-4%; right:-4%; top:30%; height:18%;
  background:
    radial-gradient(38px 30px at 8% 100%, #2f6a3e 62%, transparent 63%),
    radial-gradient(52px 36px at 22% 100%, #38754a 62%, transparent 63%),
    radial-gradient(40px 28px at 37% 100%, #2f6a3e 62%, transparent 63%),
    radial-gradient(56px 38px at 53% 100%, #38754a 62%, transparent 63%),
    radial-gradient(42px 30px at 69% 100%, #2f6a3e 62%, transparent 63%),
    radial-gradient(54px 36px at 84% 100%, #38754a 62%, transparent 63%),
    radial-gradient(40px 28px at 97% 100%, #2f6a3e 62%, transparent 63%);
  opacity:.85;
}
.game-body .hb-plat{ position:absolute; border-radius:50%; }
.game-body .hb-plat-foe{
  right:4%; top:50%; width:31%; height:17%;
  background:radial-gradient(closest-side, #7fb46b 0 62%, #5f9a55 63% 82%, #4d8449 83% 100%);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.14);
}
.game-body .hb-plat-ally{
  left:2%; bottom:-7%; width:37%; height:21%;
  background:radial-gradient(closest-side, #86ba70 0 62%, #63a058 63% 82%, #518a4c 83% 100%);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.14);
}
/* sprites (menores: a cena agora é um banner compacto) */
.game-body .hb-foe{ position:absolute; right:8%; top:13%; width:20%; z-index:2; }
.game-body .hb-ally{ position:absolute; left:8%; bottom:5%; width:23%; z-index:3; }
.game-body .hb-foe svg, .game-body .hb-ally svg{ display:block; width:100%; height:auto; transform-origin:50% 100%; animation:hbBreath 1.7s ease-in-out infinite alternate; }
.game-body .hb-foe.hb-flying svg{ animation:hbHover 1.6s ease-in-out infinite alternate; }
/* sprites em PNG (imagens configuráveis no admin) — mesma "respiração" dos SVG */
.game-body .hb-img{ display:block; width:100%; height:auto; image-rendering:pixelated; transform-origin:50% 100%; animation:hbBreath 1.7s ease-in-out infinite alternate; }
/* cenário em imagem: cobre o fundo desenhado e some as camadas de CSS */
.game-body .hb-bg{ position:absolute; inset:0; z-index:0; background:center bottom / cover no-repeat; image-rendering:pixelated; }
.game-body .hb-scene.hb-bg-on{ background:#0e0a06; }
.game-body .hb-scene.hb-bg-on .hb-far,
.game-body .hb-scene.hb-bg-on .hb-plat{ display:none; }
.game-body .hb-bg[hidden]{ display:none; }

/* Aventuras: banners de cenário escurecido + modal de monstros */
.game-body .adventure-panel{ max-width:560px; }
.game-body .adventure-list{ display:flex; flex-direction:column; gap:12px; }
.game-body .adv-cooldown-header{ font-family:var(--font-pixel); font-size:10px; line-height:1.4; color:var(--gold); text-align:center; padding:10px 11px; margin-bottom:10px; background:var(--panel-2); border:2px solid var(--gold-0); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.game-body .adventure-list .adv-start-btn:disabled{ filter:grayscale(.6) brightness(.7); opacity:.7; cursor:not-allowed; }
.game-body .adv-card{ position:relative; min-height:118px; background:#171008 center/cover no-repeat; border:2px solid var(--frame-out); overflow:hidden; }
.game-body .adv-card-dark{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,6,3,.88), rgba(8,6,3,.5)); }
.game-body .adv-card-body{ position:relative; z-index:2; padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.game-body .adv-card-title{ font-family:var(--font-pixel); font-size:12px; color:var(--gold); text-shadow:0 2px 0 #000; }
.game-body .adv-card-stats{ display:flex; flex-wrap:wrap; gap:4px 12px; font-family:var(--font-body); font-size:12px; color:#f0e6d0; text-shadow:0 1px 2px #000; }
.game-body .adv-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.game-body .adv-foot-btns{ display:flex; align-items:center; gap:8px; }
.game-body .adv-mon-open,.game-body .adv-drop-open{ font-family:var(--font-body); font-size:11px; color:#fff5e0; background:rgba(0,0,0,.42); border:2px solid var(--gold-0); padding:6px 10px; cursor:pointer; }
.game-body .adv-mon-open:hover,.game-body .adv-drop-open:hover{ border-color:var(--gold); }
.game-body .adv-card-foot .market-list-btn{ flex:0 0 auto; }
.game-body .adv-blocked{ font-family:var(--font-body); font-size:11px; color:var(--stop-hi); text-shadow:0 1px 2px #000; }
.game-body .adv-monsters-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:10px; }
.game-body .adv-mon-cell{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px; background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .adv-mon-cell img{ width:58px; height:58px; object-fit:contain; image-rendering:pixelated; }
.game-body .adv-mon-cell span{ font-family:var(--font-body); font-size:11px; color:var(--ink); text-align:center; }
.game-body .adv-drops-list{ display:flex; flex-direction:column; gap:8px; }
.game-body .adv-drop-cell{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:10px 12px; background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .adv-drop-name{ font-family:var(--font-body); font-size:12px; color:var(--ink); font-weight:700; }
.game-body .adv-drop-attrs{ font-family:var(--font-body); font-size:11px; color:#c9bd9f; }
.game-body .adv-drop-rank{ font-family:var(--font-pixel); font-size:8px; padding:3px 6px; border:2px solid var(--frame-out); background:rgba(0,0,0,.28); white-space:nowrap; }
.game-body .adv-drop-chance{ font-family:var(--font-pixel); font-size:10px; color:var(--gold); white-space:nowrap; margin-left:auto; }
.game-body .adv-drop-rank.rarity-common{ color:#d2c8b0; }
.game-body .adv-drop-rank.rarity-uncommon{ color:#7fcf73; }
.game-body .adv-drop-rank.rarity-rare{ color:#69aedd; }
.game-body .adv-drop-rank.rarity-epic{ color:#bd93e6; }
.game-body .adv-drop-rank.rarity-legendary{ color:#f6cf63; }
.game-body .adv-drop-rank.rarity-unique{ color:#ef8a5a; }

/* ---- Relatório da batalha (modal ao fim da aventura) ---- */
.game-body .adv-report-panel{ max-width:460px; }
.game-body #adv-report-body{ display:flex; flex-direction:column; gap:10px; }
.game-body .rep-outcome{ font-family:var(--font-pixel); font-size:16px; text-align:center; padding:10px; border:2px solid var(--frame-out); text-shadow:0 2px 0 #000; }
.game-body .rep-outcome.win{ color:#0c1a0c; background:linear-gradient(180deg,#7fd08a,#4fa85f); }
.game-body .rep-outcome.lose{ color:#fff; background:linear-gradient(180deg,#b1483c,#7d2b23); }
.game-body .rep-sec-title{ font-family:var(--font-pixel); font-size:10px; color:var(--gold); margin-top:4px; }
.game-body .rep-mons,.game-body .rep-drops{ display:flex; flex-direction:column; gap:6px; }
.game-body .rep-mon{ display:flex; align-items:center; gap:9px; padding:6px 10px; background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .rep-mon.is-dead{ opacity:.72; }
.game-body .rep-mon img,.game-body .rep-drop img{ width:34px; height:34px; object-fit:contain; image-rendering:pixelated; flex:0 0 auto; }
.game-body .rep-ph,.game-body .drop-card-ph{ width:34px; height:34px; flex:0 0 auto; background:rgba(0,0,0,.3); border:1px dashed var(--frame-out); }
.game-body .rep-mon-name{ flex:1 1 auto; font-family:var(--font-body); font-size:12px; color:var(--ink); }
.game-body .rep-mon-name em{ font-style:normal; font-size:10px; color:#c9bd9f; }
.game-body .rep-tag{ font-family:var(--font-pixel); font-size:8px; padding:3px 6px; border:2px solid var(--frame-out); white-space:nowrap; }
.game-body .rep-killed{ color:#0c1a0c; background:#5fd06a; }
.game-body .rep-alive{ color:#fff; background:#a23b32; }
.game-body .rep-drop{ display:flex; align-items:center; gap:9px; padding:6px 10px; background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .rep-drop-name{ flex:1 1 auto; font-family:var(--font-body); font-size:12px; color:var(--ink); }
.game-body .rep-drop-rar{ font-family:var(--font-pixel); font-size:8px; white-space:nowrap; }
.game-body .rep-drop.rarity-common .rep-drop-rar{ color:#d2c8b0; } .game-body .rep-drop.rarity-uncommon .rep-drop-rar{ color:#7fcf73; }
.game-body .rep-drop.rarity-rare .rep-drop-rar{ color:#69aedd; } .game-body .rep-drop.rarity-epic .rep-drop-rar{ color:#bd93e6; }
.game-body .rep-drop.rarity-legendary .rep-drop-rar{ color:#f6cf63; } .game-body .rep-drop.rarity-unique .rep-drop-rar{ color:#ef8a5a; }

/* ---- Cards "Item adquirido" (deslizam pela direita) ---- */
.game-body .drop-cards{ position:fixed; top:84px; right:0; z-index:120; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.game-body .drop-card{ display:flex; align-items:center; gap:10px; width:230px; padding:9px 11px; background:linear-gradient(90deg, rgba(12,9,5,.96), rgba(28,20,10,.96));
  border:2px solid var(--gold-0); border-right:none; box-shadow:0 6px 18px rgba(0,0,0,.5);
  transform:translateX(115%); opacity:0; transition:transform .42s cubic-bezier(.2,.9,.3,1.2), opacity .42s ease; }
.game-body .drop-card.in{ transform:translateX(0); opacity:1; }
.game-body .drop-card.out{ transform:translateX(115%); opacity:0; }
.game-body .drop-card-img{ width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); border:2px solid var(--frame-out); }
.game-body .drop-card-img img{ width:40px; height:40px; object-fit:contain; image-rendering:pixelated; }
.game-body .drop-card-info{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.game-body .drop-card-info strong{ font-family:var(--font-pixel); font-size:8px; color:var(--gold); text-transform:uppercase; letter-spacing:.5px; }
.game-body .drop-card-name{ font-family:var(--font-body); font-size:12px; color:#fff5e0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-body .drop-card-rar{ font-family:var(--font-pixel); font-size:8px; }
.game-body .drop-card.rarity-common{ border-color:#8f8a7b; } .game-body .drop-card.rarity-common .drop-card-rar{ color:#d2c8b0; }
.game-body .drop-card.rarity-uncommon{ border-color:#7fcf73; } .game-body .drop-card.rarity-uncommon .drop-card-rar{ color:#7fcf73; }
.game-body .drop-card.rarity-rare{ border-color:#69aedd; } .game-body .drop-card.rarity-rare .drop-card-rar{ color:#69aedd; }
.game-body .drop-card.rarity-epic{ border-color:#bd93e6; } .game-body .drop-card.rarity-epic .drop-card-rar{ color:#bd93e6; }
.game-body .drop-card.rarity-legendary{ border-color:#f6cf63; } .game-body .drop-card.rarity-legendary .drop-card-rar{ color:#f6cf63; }
.game-body .drop-card.rarity-unique{ border-color:#ef8a5a; } .game-body .drop-card.rarity-unique .drop-card-rar{ color:#ef8a5a; }

@keyframes hbBreath{ from{ transform:scaleY(1); } to{ transform:scaleY(1.025); } }
@keyframes hbHover{ from{ transform:translateY(0); } to{ transform:translateY(-7px); } }
/* entradas */
.game-body .hb-foe.hb-enter{ animation:hbFoeIn .5s steps(6) both; }
.game-body .hb-ally.hb-enter{ animation:hbAllyIn .5s steps(6) both; }
@keyframes hbFoeIn{ from{ transform:translateX(70px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes hbAllyIn{ from{ transform:translateX(-70px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
/* ataque / dano / desmaio */
.game-body .hb-ally.hb-atk{ animation:hbAtkAlly .42s steps(5) both; }
.game-body .hb-foe.hb-atk{ animation:hbAtkFoe .42s steps(5) both; }
@keyframes hbAtkAlly{ 0%{ transform:translate(0,0); } 45%{ transform:translate(26px,-14px); } 100%{ transform:translate(0,0); } }
@keyframes hbAtkFoe{ 0%{ transform:translate(0,0); } 45%{ transform:translate(-26px,14px); } 100%{ transform:translate(0,0); } }
.game-body .hb-foe.hb-hit, .game-body .hb-ally.hb-hit{ animation:hbHit .4s steps(4) both; }
@keyframes hbHit{
  0%{ transform:translateX(0); filter:none; }
  25%{ transform:translateX(-4px); filter:brightness(2.2) saturate(.3); }
  50%{ transform:translateX(4px); filter:none; }
  75%{ transform:translateX(-3px); filter:brightness(2.2) saturate(.3); }
  100%{ transform:translateX(0); filter:none; }
}
.game-body .hb-foe.hb-faint{ animation:hbFaint .55s ease-in both; }
@keyframes hbFaint{ from{ transform:translateY(0); opacity:1; } to{ transform:translateY(46px); opacity:0; } }
.game-body .hb-scene.hb-shake{ animation:hbShake .3s steps(4) both; }
@keyframes hbShake{ 0%{ transform:translate(0,0); } 25%{ transform:translate(-4px,2px); } 50%{ transform:translate(4px,-2px); } 75%{ transform:translate(-3px,1px); } 100%{ transform:translate(0,0); } }
/* caixas de vida (estilo GBA, compactas pro formato banner) */
.game-body .hb-box{
  position:absolute; z-index:4; min-width:31%; padding:4px 6px 5px;
  background:#f6eed6; border:2px solid #4a3115; border-radius:0;
  box-shadow:0 2px 0 rgba(0,0,0,.35), inset 0 2px 0 #fffaf0;
}
.game-body .hb-box-foe{ left:3%; top:6%; }
.game-body .hb-box-ally{ right:3%; bottom:8%; }
.game-body .hb-box-row{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:4px; }
.game-body .hb-box b{ font-family:var(--font-pixel); font-size:6.5px; color:#2b1c0c; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:72%; }
.game-body .hb-box span{ font-family:var(--font-pixel); font-size:6px; color:#6b5233; }
.game-body .hb-hp{ position:relative; height:6px; background:#5a4a33; border:2px solid #2b1c0c; border-radius:0; overflow:hidden; }
.game-body .hb-hp .hb-leak{ position:absolute; left:0; top:0; height:100%; width:100%; background:linear-gradient(180deg,#ff7a5c,#c8321c); z-index:1; transition:width .55s ease .16s; }
.game-body .hb-hp i{ position:relative; display:block; height:100%; width:100%; background:linear-gradient(180deg,#7ce06a,#3aa845); z-index:2; transition:width .3s cubic-bezier(.4,0,.2,1); }
.game-body .hb-hp i.hb-mid{ background:linear-gradient(180deg,#f6d05e,#d9a12e); }
.game-body .hb-hp i.hb-low{ background:linear-gradient(180deg,#f0846a,#c8442c); }
/* efeitos: número de dano + impacto */
.game-body .hb-fx{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.game-body .hb-dmg{
  position:absolute; font-family:var(--font-pixel); font-size:9px; color:#fff3c4;
  text-shadow:0 2px 0 #241709, 0 0 6px rgba(0,0,0,.5); white-space:nowrap;
  animation:hbDmg .95s ease-out both;
}
.game-body .hb-dmg.hb-crit{ color:#ffd257; font-size:11px; }
.game-body .hb-dmg.hb-heal{ color:#8af08a; }
@keyframes hbDmg{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:1; } 100%{ transform:translateY(-24px); opacity:0; } }
.game-body .hb-impact{ position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; animation:hbImpact .34s steps(4) both; }

/* ---- Polish de batalha: flash de dano, punch, número forte, faíscas, esquiva, brasas ---- */
/* flash vermelho no sprite atingido */
.game-body .hb-hurt{ animation:hbHurt .3s steps(3) both; }
@keyframes hbHurt{ 0%{ filter:brightness(1.7) sepia(1) saturate(9) hue-rotate(-20deg); } 100%{ filter:none; } }
/* punch leve da cena no acerto (mais sutil que a tremida da morte) */
.game-body .hb-scene.hb-punch{ animation:hbPunch .2s ease-out both; }
@keyframes hbPunch{ 0%{ transform:scale(1); } 40%{ transform:scale(1.014); } 100%{ transform:scale(1); } }
/* número de dano forte */
.game-body .hb-dmg.hb-dmg-big{ font-size:15px; color:#ffcf3a; text-shadow:0 0 6px #ff7a2c,0 2px 0 #000; animation:hbDmgBig 1s cubic-bezier(.2,.9,.3,1) both; }
@keyframes hbDmgBig{ 0%{ transform:translateY(4px) scale(.5); opacity:0; } 18%{ transform:translateY(0) scale(1.35); opacity:1; } 40%{ transform:scale(1); } 100%{ transform:translateY(-30px) scale(1); opacity:0; } }
/* "Esquivou!" flutuante */
.game-body .hb-dmg.hb-miss{ color:#bfe3ff; font-size:9px; text-shadow:0 1px 3px #000; }
/* faíscas do impacto */
.game-body .hb-spark{ position:absolute; width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%; box-shadow:0 0 4px currentColor; animation:hbSpark .5s ease-out both; }
@keyframes hbSpark{ 0%{ transform:translate(0,0) scale(1.2); opacity:1; } 100%{ transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0; } }
/* esquiva do inimigo (espelho da do herói) */
.game-body .hb-foe.hb-dodge{ animation:hbDodgeFoe .52s steps(6) both; }
@keyframes hbDodgeFoe{ 0%{ transform:translateX(0); } 28%{ transform:translate(28px,5px); } 66%{ transform:translate(28px,5px); } 100%{ transform:translateX(0); } }
/* brasas flutuando na cena (ambiente) */
.game-body .hb-embers{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; opacity:.5; }
.game-body .hb-embers::before,.game-body .hb-embers::after{ content:""; position:absolute; left:0; top:104%; width:2.5px; height:2.5px; border-radius:50%; background:#f6b24a;
  box-shadow:22px 0 #f6b24a,60px 4px #e88a3a,110px -6px #f6c85a,180px 2px #e8a33d,240px -4px #f6b24a,300px 3px #e88a3a,44px -3px #f6c85a,150px 6px #e8a33d,270px -2px #f6c85a;
  animation:hbEmber 7s linear infinite; }
.game-body .hb-embers::after{ animation-duration:9.5s; animation-delay:-4s; opacity:.7; }
@keyframes hbEmber{ from{ transform:translateY(0); } to{ transform:translateY(-240px); } }
/* leve drift do cenário de fundo */
.game-body .hb-scene.hb-bg-on .hb-bg{ animation:hbBgDrift 20s ease-in-out infinite alternate; }
@keyframes hbBgDrift{ from{ transform:scale(1.04) translate(0,0); } to{ transform:scale(1.08) translate(-2%,-1%); } }
/* HP crítico pulsando (tensão) */
.game-body .hb-hp i.hb-low{ animation:hbLowPulse .75s ease-in-out infinite; }
@keyframes hbLowPulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.65) saturate(1.3); } }
/* câmera cinematográfica no golpe mortal (zoom no alvo + micro-impacto) */
.game-body .hb-scene.hb-cam{ animation:hbCam .95s cubic-bezier(.3,.7,.3,1) both; transform-origin:74% 46%; }
.game-body .hb-scene.hb-cam-ally{ animation:hbCam .95s cubic-bezier(.3,.7,.3,1) both; transform-origin:26% 52%; }
@keyframes hbCam{ 0%{ transform:scale(1); } 20%{ transform:scale(1.13); } 34%{ transform:scale(1.1) translateX(2px); } 46%{ transform:scale(1.11) translateX(-2px); } 62%{ transform:scale(1.1); } 100%{ transform:scale(1); } }
/* poeira de aterrissagem no spawn */
.game-body .hb-dust{ position:absolute; width:36px; height:15px; margin:-7px 0 0 -18px; border-radius:50%; z-index:5;
  background:radial-gradient(ellipse at center, rgba(214,194,152,.8), rgba(214,194,152,0) 70%); animation:hbDust .6s ease-out both; }
@keyframes hbDust{ 0%{ transform:scale(.3) translateY(4px); opacity:0; } 25%{ opacity:.9; } 100%{ transform:scale(1.9) translateY(0); opacity:0; } }
.game-body .hb-impact::before, .game-body .hb-impact::after{
  content:""; position:absolute; left:50%; top:50%; width:30px; height:5px; margin:-2.5px 0 0 -15px;
  background:linear-gradient(90deg, transparent, #fff8e0 22%, #fff8e0 78%, transparent);
}
.game-body .hb-impact::before{ transform:rotate(45deg); }
.game-body .hb-impact::after{ transform:rotate(-45deg); }
@keyframes hbImpact{ from{ transform:scale(.3); opacity:1; } to{ transform:scale(1.35); opacity:0; } }

/* ---- Arma na mão do herói + efeito de golpe único por tipo ---- */
.game-body .hb-weapon{ position:absolute; right:2%; top:30%; width:34%; max-width:44px; z-index:4; pointer-events:none;
  transform-origin:52% 88%; transform:rotate(20deg); filter:drop-shadow(0 0 3px var(--wpn)) drop-shadow(0 1px 1px rgba(0,0,0,.5));
  animation:hbWpnIdle 2.6s ease-in-out infinite alternate; }
.game-body .hb-weapon svg{ width:100%; height:auto; display:block; overflow:visible; }
@keyframes hbWpnIdle{ from{ transform:rotate(18deg); } to{ transform:rotate(24deg); } }
/* posição específica de arco/escudo (segurados mais na frente/baixo) */
.game-body .hb-wpn-bow{ right:6%; top:26%; transform:rotate(6deg); }
.game-body .hb-wpn-shield{ right:8%; top:34%; width:30%; transform:rotate(-6deg); }
.game-body .hb-wpn-spear,.game-body .hb-wpn-axe{ top:16%; width:30%; }

/* swing ao golpear (por tipo) */
.game-body .hb-weapon.sw{ animation:hbWpnSwing .5s cubic-bezier(.3,.7,.3,1) both; }
.game-body .hb-wpn-axe.sw{ animation:hbWpnChop .5s cubic-bezier(.4,.8,.3,1) both; }
.game-body .hb-wpn-spear.sw{ animation:hbWpnThrust .42s cubic-bezier(.3,.9,.4,1) both; }
.game-body .hb-wpn-bow.sw{ animation:hbWpnDraw .5s ease both; }
.game-body .hb-wpn-shield.sw{ animation:hbWpnBash .44s cubic-bezier(.3,.8,.4,1) both; }
@keyframes hbWpnSwing{ 0%{ transform:rotate(-46deg); } 55%{ transform:rotate(58deg); } 100%{ transform:rotate(20deg); } }
@keyframes hbWpnChop{ 0%{ transform:rotate(-72deg) translateY(-4px); } 50%{ transform:rotate(48deg) translateY(3px); } 100%{ transform:rotate(20deg); } }
@keyframes hbWpnThrust{ 0%{ transform:translate(-6px,0) rotate(18deg); } 45%{ transform:translate(20px,-6px) rotate(30deg); } 100%{ transform:translate(0,0) rotate(20deg); } }
@keyframes hbWpnDraw{ 0%{ transform:rotate(6deg) scaleX(1); } 40%{ transform:rotate(6deg) scaleX(.82); } 100%{ transform:rotate(6deg) scaleX(1); } }
@keyframes hbWpnBash{ 0%{ transform:translate(0,0) rotate(-6deg); } 45%{ transform:translate(16px,-4px) rotate(-2deg); } 100%{ transform:translate(0,0) rotate(-6deg); } }

/* efeitos do golpe */
.game-body .hb-wfx{ position:absolute; width:40%; max-width:88px; pointer-events:none; z-index:6; transform-origin:center; }
.game-body .hb-wfx svg{ width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 0 5px var(--wpn)); }
.game-body .hb-wfx-sword{ animation:hbFxSword .5s ease-out both; }
.game-body .hb-wfx-axe{ width:46%; animation:hbFxAxe .55s ease-out both; }
.game-body .hb-wfx-dagger{ width:32%; animation:hbFxDagger .34s ease-out both; }
.game-body .hb-wfx-shield{ width:38%; animation:hbFxRing .5s ease-out both; }
.game-body .hb-wfx-spear{ width:60%; animation:hbFxSpear .42s cubic-bezier(.2,.8,.3,1) both; }
.game-body .hb-wfx-bow{ width:52%; animation:hbFxArrow .44s cubic-bezier(.3,.6,.5,1) both; }
@keyframes hbFxSword{ 0%{ transform:rotate(-46deg) scale(.6); opacity:0; } 25%{ opacity:1; } 60%{ transform:rotate(26deg) scale(1.05); opacity:1; } 100%{ transform:rotate(40deg) scale(1.1); opacity:0; } }
@keyframes hbFxAxe{ 0%{ transform:rotate(-40deg) scale(.6); opacity:0; } 30%{ opacity:1; } 65%{ transform:rotate(20deg) scale(1.1); opacity:1; } 100%{ transform:rotate(30deg) scale(1.18); opacity:0; } }
@keyframes hbFxDagger{ 0%{ transform:scale(.5) rotate(-8deg); opacity:0; } 30%{ opacity:1; transform:scale(1.05); } 100%{ transform:scale(1.15) rotate(6deg); opacity:0; } }
@keyframes hbFxRing{ 0%{ transform:scale(.3); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }
@keyframes hbFxSpear{ 0%{ transform:translateX(-30px) scaleX(.5); opacity:0; } 30%{ opacity:1; } 70%{ transform:translateX(60px) scaleX(1); opacity:1; } 100%{ transform:translateX(96px) scaleX(1.1); opacity:0; } }
@keyframes hbFxArrow{ 0%{ transform:translateX(0) scale(.9); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateX(150px) scale(1); opacity:0; } }
/* caixa de texto */
.game-body .hb-text{
  min-height:26px; padding:6px 8px; display:flex; align-items:center;
  font-family:var(--font-pixel); font-size:7px; line-height:1.6; color:#f6eed6;
  background:linear-gradient(180deg, #5d3a19, #4a2d11); border-top:2px solid var(--frame-out);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12);
}
/* chip flutuante "Ver caçada" (aparece só durante a caça) */
.game-body .hunt-watch{
  position:fixed; right:14px; bottom:14px; z-index:65; cursor:pointer;
  font-family:var(--font-pixel) !important; font-size:8px !important;
  padding:9px 12px !important; min-height:0 !important;
  color:#1c1208 !important; background:var(--gold) !important;
  border:2px solid var(--gold-0) !important; border-radius:0 !important;
  box-shadow:inset 0 2px 0 var(--gold-hi), 0 3px 0 var(--frame-out), 0 6px 14px rgba(0,0,0,.4) !important;
  animation:hwPulse 1.6s ease-in-out infinite alternate;
}
.game-body .hunt-watch[hidden]{ display:none !important; }
.game-body .hunt-watch:hover{ filter:brightness(1.08); }
@keyframes hwPulse{ from{ box-shadow:inset 0 2px 0 var(--gold-hi), 0 3px 0 var(--frame-out), 0 0 0 0 rgba(224,163,46,.5); } to{ box-shadow:inset 0 2px 0 var(--gold-hi), 0 3px 0 var(--frame-out), 0 0 0 7px rgba(224,163,46,0); } }
/* mobile: a cena continua no topo, encolhendo junto com o city-hero */
@media (max-width:760px){
  .game-body .hunt-overlay{ width:min(280px,52%); }
}
@media (max-width:600px){
  .game-body .hunt-overlay{ width:250px; }
  .game-body .hb-box{ padding:3px 5px 4px; }
  .game-body .hb-box b{ font-size:6px; }
  .game-body .hb-box span{ font-size:5.5px; }
  .game-body .hb-text{ font-size:6.5px; min-height:22px; }
}
@media (max-width:460px){
  .game-body .hunt-overlay{ left:auto; right:6px; bottom:2px; width:196px; }
}
/* ---- variantes de cenário por atividade do herói ---- */
/* Treino Força: pátio de treino ao entardecer, cerca de madeira ao fundo */
.game-body .hb-scene.hb-m-strength{
  background:linear-gradient(180deg,#f4c58c 0%,#f9debc 34%,#e6c084 46%,#c99a5a 47%,#b0824a 74%,#9a7040 100%);
}
.game-body .hb-m-strength .hb-far{
  top:30%; height:16%; opacity:1;
  background:
    linear-gradient(180deg, transparent 34%, #7a5230 34% 50%, transparent 50% 66%, #7a5230 66% 82%, transparent 82%),
    repeating-linear-gradient(90deg, #8a5f38 0 8px, transparent 8px 30px);
}
/* Treino Defesa: pátio do castelo, muralha com ameias */
.game-body .hb-scene.hb-m-defense{
  background:linear-gradient(180deg,#adc3d4 0%,#cfdde6 34%,#a7b2ba 46%,#8794a0 47%,#75828e 74%,#65727e 100%);
}
.game-body .hb-m-defense .hb-far{
  top:24%; height:22%; opacity:1;
  background:
    linear-gradient(180deg, transparent 0 38%, #7d8893 38% 100%),
    repeating-linear-gradient(90deg, #6a7684 0 16px, transparent 16px 30px);
}
/* Treino Agilidade: campo ao amanhecer */
.game-body .hb-scene.hb-m-agility{
  background:linear-gradient(180deg,#f6c9a6 0%,#fbe3c4 30%,#cfe9d2 46%,#6fae6a 47%,#4f8f52 74%,#3f7a45 100%);
}
/* ===== Expedição: mini-jornada AO LADO do nome do Reino (no lugar da animação antiga) =====
   Sem overlay central: a cena compacta mostra o herói caminhando até o destino do tipo
   da expedição (ouro/madeira/pedra/item), com cenário rolando. Puro CSS enquanto visível. */
.game-body .exped-mini{
  position:absolute; left:30%; bottom:4px; z-index:2;
  width:238px; height:96px; overflow:hidden;
  border:3px solid var(--frame-out);
  box-shadow:0 3px 0 var(--frame-out), inset 0 0 0 2px rgba(255,255,255,.09);
  image-rendering:pixelated;
  --em-far:#2f6a3e; --em-near:#3f7f4b;
  background:linear-gradient(180deg,#8fc7e0 0%,#bfe3ec 34%,#6fae6a 46%,#4f8f52 62%,#a3814e 63%,#8f6a40 100%);
}
.game-body .exped-mini[hidden]{ display:none !important; }
/* temas por tipo de expedição */
.game-body .exped-mini.em-gold{ --em-far:#7a5c22; --em-near:#8f6f2c;
  background:linear-gradient(180deg,#f4c58c 0%,#f9debc 34%,#d9b25f 46%,#c99a3f 62%,#a3814e 63%,#8f6a40 100%); }
.game-body .exped-mini.em-wood{ --em-far:#245230; --em-near:#2f6a3e;
  background:linear-gradient(180deg,#7fb98f 0%,#a8d8b2 30%,#3f7a45 46%,#35673c 62%,#5d4a2e 63%,#4c3c24 100%); }
.game-body .exped-mini.em-stone{ --em-far:#57626f; --em-near:#6a7684;
  background:linear-gradient(180deg,#adc3d4 0%,#cfdde6 34%,#8794a0 46%,#75828e 62%,#5f584c 63%,#514b40 100%); }
.game-body .exped-mini.em-item{ --em-far:#3a2f52; --em-near:#4a3d66;
  background:linear-gradient(180deg,#5b4a7a 0%,#7a68a0 34%,#463a60 46%,#3a3050 62%,#4c4038 63%,#3c322a 100%); }
.game-body .em-scroll{ position:absolute; left:0; right:0; pointer-events:none; background-repeat:repeat-x; }
.game-body .em-scroll.em-far{
  top:26%; height:26%; opacity:.9;
  background-image:radial-gradient(closest-side, var(--em-far) 60%, transparent 62%);
  background-size:56px 30px; background-position:0 100%;
  animation:emBgFar 4.2s linear infinite;
}
.game-body .em-scroll.em-near{
  bottom:0; height:24%;
  background-image:radial-gradient(closest-side, var(--em-near) 58%, transparent 60%);
  background-size:88px 34px; background-position:24px 100%;
  animation:emBgNear 1.9s linear infinite;
}
@keyframes emBgFar{ to{ background-position-x:-56px; } }
@keyframes emBgNear{ from{ background-position-x:24px; } to{ background-position-x:-64px; } }
.game-body .em-hero{ position:absolute; left:9%; bottom:5%; width:33%; z-index:2; }
.game-body .em-hero svg{ display:block; width:100%; height:auto; transform-origin:50% 100%; animation:emWalk .5s ease-in-out infinite alternate; }
@keyframes emWalk{ from{ transform:translateY(0) rotate(-1.4deg); } to{ transform:translateY(-2.5px) rotate(1.4deg); } }
.game-body .em-dest{ position:absolute; right:5%; bottom:7%; width:29%; z-index:1; }
.game-body .em-dest svg{ display:block; width:100%; height:auto; animation:emGlow 1.8s ease-in-out infinite alternate; }
@keyframes emGlow{ from{ filter:brightness(1); } to{ filter:brightness(1.16); } }
@media (max-width:760px){ .game-body .exped-mini{ width:190px; height:80px; } }
@media (max-width:460px){ .game-body .exped-mini{ left:auto; right:6px; width:158px; height:70px; } }
/* projéteis (pedra da catapulta / flecha do arqueiro) */
.game-body .hb-proj{ position:absolute; z-index:4; transition:left .48s linear, top .48s linear; }
.game-body .hb-proj.hb-rock{
  width:24px; height:24px; border:2px solid #241709; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #b3a894 0 32%, #8d8475 33% 70%, #6f675b 71%);
}
.game-body .hb-proj.hb-rock.hb-big{ width:34px; height:34px; }
.game-body .hb-proj.hb-arrow{
  width:34px; height:6px; transform:rotate(202deg); border-radius:2px;
  background:linear-gradient(90deg, #f4ead8 0 16%, #7a5230 16% 80%, #c8442c 80%);
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
/* bloqueio com escudo (Defesa) e esquiva (Agilidade) */
.game-body .hb-ally.hb-block{ animation:hbBlock .45s steps(4) both; }
@keyframes hbBlock{ 0%{ transform:translate(0,0); filter:none; } 30%{ transform:translate(-6px,2px); filter:brightness(1.9); } 100%{ transform:translate(0,0); filter:none; } }
.game-body .hb-ally.hb-dodge{ animation:hbDodge .55s steps(6) both; }
@keyframes hbDodge{ 0%{ transform:translateX(0); } 28%{ transform:translate(-28px,5px); } 66%{ transform:translate(-28px,5px); } 100%{ transform:translateX(0); } }

/* acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .game-body .hb-foe svg, .game-body .hb-ally svg, .game-body .hb-img,
  .game-body .hb-foe, .game-body .hb-ally,
  .game-body .em-scroll, .game-body .em-hero svg, .game-body .em-dest svg,
  .game-body .hb-scene, .game-body .hunt-watch{ animation:none !important; }
  .game-body .hb-proj{ transition:none !important; }
}

/* ===================== VIP (troféu no topo + modal + PIX) ===================== */
.game-body .vip-badge{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  padding:1px 5px; margin-right:4px; cursor:pointer; line-height:1;
  background:transparent; border:0; border-radius:0;
}
.game-body .vip-trophy{ width:26px; height:26px; display:block; filter:grayscale(.5) brightness(.92); }
.game-body .vip-trophy svg{ width:100%; height:100%; display:block; }
.game-body .vip-badge-label{ font-family:var(--font-pixel); font-size:7px; color:var(--ink-soft); letter-spacing:1.5px; }
.game-body .vip-badge-days{ font-family:var(--font-body); font-size:8px; color:var(--ink-soft); white-space:nowrap; }
.game-body .vip-badge:hover .vip-trophy{ filter:none; }
.game-body .vip-badge.is-vip .vip-trophy{ filter:none; animation:vipGlow 1.8s ease-in-out infinite alternate; }
.game-body .vip-badge.is-vip .vip-badge-label{ color:var(--gold); }
.game-body .vip-badge.is-vip .vip-badge-days{ color:var(--gold-hi); }
@keyframes vipGlow{ from{ filter:drop-shadow(0 0 0 rgba(246,207,99,0)); } to{ filter:drop-shadow(0 0 4px rgba(246,207,99,.9)); } }

.game-body .vip-panel{ max-width:440px; }
.game-body .vip-status{ font-family:var(--font-pixel); font-size:9px; line-height:1.5; padding:9px 11px; margin-bottom:10px; border:2px solid var(--frame-out); background:var(--panel-2); color:var(--ink); }
.game-body .vip-status.is-vip{ color:#1c1208; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border-color:var(--gold-0); }
.game-body .vip-perks{ font-family:var(--font-body); font-size:12px; color:var(--ink-soft); line-height:1.55; margin:0 0 14px; }
.game-body .vip-perks b{ color:var(--gold); font-family:var(--font-pixel); font-size:9px; }
.game-body .vip-packages{ display:grid; gap:8px; }
.game-body .vip-pkg{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 12px; background:var(--panel-2); border:2px solid var(--frame-out);
}
.game-body .vip-pkg-info strong{ display:block; font-family:var(--font-pixel); font-size:11px; color:var(--gold); line-height:1.5; }
.game-body .vip-pkg-info span{ font-family:var(--font-body); font-size:11px; color:var(--ink-soft); }
.game-body .vip-pkg .market-list-btn{ flex:0 0 auto; white-space:nowrap; }

/* Cartões de VIP (loja): imagem, nome, % de bônus, vantagens, preço */
.game-body .vip-card{
  display:flex; gap:11px; padding:10px; background:var(--panel-2);
  border:2px solid var(--frame-out); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  position:relative; overflow:hidden;
}
.game-body .vip-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(214,178,94,.10), transparent 55%);
}
.game-body .vip-card-img{
  flex:0 0 78px; width:78px; height:78px; align-self:center;
  border:2px solid var(--gold-0); background:#0e0a06;
  box-shadow:0 2px 0 var(--frame-out); overflow:hidden;
}
.game-body .vip-card-img img{ width:100%; height:100%; object-fit:cover; image-rendering:auto; display:block; }
.game-body .vip-card-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.game-body .vip-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.game-body .vip-card-head h3{ margin:0; font-family:var(--font-pixel); font-size:11px; color:var(--gold); line-height:1.4; }
.game-body .vip-card-badge{
  flex:0 0 auto; font-family:var(--font-pixel); font-size:9px; color:#1c1208; padding:3px 6px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border:2px solid var(--gold-0); white-space:nowrap;
}
.game-body .vip-card-perks{ margin:0; font-family:var(--font-body); font-size:11px; line-height:1.5; color:var(--ink-soft); }
.game-body .vip-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.game-body .vip-card-days{ font-family:var(--font-pixel); font-size:8px; color:var(--ink-soft); }
.game-body .vip-card-foot .market-list-btn{ flex:0 0 auto; white-space:nowrap; }
.game-body .vip-card-locked{ font-family:var(--font-body); font-size:11px; color:var(--stop-hi); }
.game-body .vip-card.is-locked{ opacity:.62; filter:grayscale(.4); }
@media (max-width:460px){
  .game-body .vip-card-img{ flex-basis:60px; width:60px; height:60px; }
}

.game-body .vip-pix{ text-align:center; }
.game-body .vip-pix .market-back{ float:left; }
.game-body .vip-pix-title{ font-family:var(--font-pixel); font-size:11px; color:var(--gold); margin:6px 0 4px; clear:both; }
.game-body .vip-qr{ width:210px; max-width:74%; height:auto; image-rendering:pixelated; border:5px solid #fff; margin:10px auto; display:block; box-shadow:0 3px 0 var(--frame-out); }
.game-body .vip-copy-row{ display:flex; gap:6px; margin:8px 0 0; }
.game-body .vip-copy-row input{ flex:1 1 auto; min-width:0; font-family:var(--font-body); font-size:11px; padding:8px; color:var(--ink); background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .vip-copy-row input:focus{ outline:none; border-color:var(--gold); }
.game-body .vip-pix-status{ font-family:var(--font-pixel); font-size:9px; line-height:1.5; color:var(--ink-soft); margin-top:12px; }
.game-body .vip-pix-status.ok{ color:var(--train); }
.game-body .vip-pix-status.err{ color:var(--stop-hi); }
@media (max-width:640px){
  .game-body .vip-trophy{ width:22px; height:22px; }
  .game-body .vip-badge{ margin-right:2px; padding:0 3px; }
}
/* botão "+" de comprar diamantes, no canto da tile do recurso */
.game-body .diamond-plus{
  position:absolute; top:4px; right:4px; z-index:3;
  width:20px; height:20px; padding:0 !important; min-height:0 !important; line-height:1; cursor:pointer;
  font-family:var(--font-pixel) !important; font-size:11px !important; color:#1c1208 !important;
  background:var(--gold) !important; border:2px solid var(--gold-0) !important; border-radius:0 !important;
  box-shadow:inset 0 1px 0 var(--gold-hi), 0 2px 0 var(--frame-out) !important;
}
.game-body .diamond-plus:hover{ filter:brightness(1.1); }
.game-body .vip-pkg .dia-ic{ vertical-align:middle; margin-right:4px; }
/* Turnstile (anti-bot) na compra + contador do PIX */
.game-body .pix-turnstile{ margin:12px 0 2px; display:flex; justify-content:center; }
.game-body .pix-turnstile:empty{ display:none; }
.game-body .vip-pix-timer{ font-family:var(--font-pixel); font-size:9px; color:var(--gold); margin-top:10px; }
.game-body .vip-pix-timer:empty{ display:none; }
.game-body .vip-pix-timer.err{ color:var(--stop-hi); }

/* ===================== Painel administrativo (/admin) ===================== */
.game-body .admin-gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.game-body .admin-card{ width:min(420px,100%); background:var(--panel); border:3px solid var(--frame-out); box-shadow:0 4px 0 var(--frame-out); padding:22px; }
.game-body .admin-card-head h1{ font-family:var(--font-pixel); font-size:16px; color:var(--ink); margin:0 0 6px; }
.game-body .admin-card-head h1 b{ color:var(--gold); }
.game-body .admin-card-head p{ font-family:var(--font-body); font-size:12px; color:var(--ink-soft); margin:0 0 16px; }
.game-body .admin-terms{ display:block; font-family:var(--font-body); font-size:12px; color:var(--ink-soft); margin:12px 0; }
.game-body .admin-logout-form{ margin:0; }

.game-body .admin-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:var(--panel-2); border-bottom:3px solid var(--frame-out); }
.game-body .admin-brand{ font-family:var(--font-pixel); font-size:13px; color:var(--ink); }
.game-body .admin-brand b{ color:var(--gold); }
.game-body .admin-who{ display:flex; align-items:center; gap:12px; font-family:var(--font-body); font-size:12px; color:var(--ink-soft); }
.game-body .admin-who form{ margin:0; }
.game-body .admin-link{ color:var(--gold); text-decoration:none; }

.game-body .admin-nav{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 18px; background:var(--panel); border-bottom:2px solid var(--frame-out); }
.game-body .admin-nav button{ font-family:var(--font-pixel); font-size:8px; padding:8px 10px; cursor:pointer; color:var(--ink-soft); background:var(--panel-2); border:2px solid var(--frame-out); border-radius:0; }
.game-body .admin-nav button.active{ color:#1c1208; background:var(--gold); border-color:var(--gold-0); }

.game-body .admin-main{ padding:18px; max-width:960px; margin:0 auto; }
.game-body .admin-main h2{ font-family:var(--font-pixel); font-size:12px; color:var(--gold); margin:0 0 14px; }
.game-body .admin-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.game-body .admin-card-stat{ background:var(--panel-2); border:2px solid var(--frame-out); padding:12px; display:flex; flex-direction:column; gap:4px; }
.game-body .admin-card-stat span{ font-family:var(--font-body); font-size:11px; color:var(--ink-soft); }
.game-body .admin-card-stat strong{ font-family:var(--font-pixel); font-size:14px; color:var(--ink); }

.game-body .admin-pkg-head,.game-body .admin-pkg{ display:grid; grid-template-columns:1.6fr 1fr 1fr 0.8fr auto; gap:8px; align-items:center; }
.game-body .admin-pkg-head{ font-family:var(--font-pixel); font-size:7px; color:var(--ink-soft); margin-bottom:6px; padding:0 2px; }
.game-body .admin-pkg{ margin-bottom:8px; padding:8px; background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .admin-pkg input{ font-family:var(--font-body); font-size:12px; padding:7px; color:var(--ink); background:var(--panel); border:2px solid var(--frame-out); min-width:0; }
.game-body .admin-pkg .pk-active{ font-family:var(--font-body); font-size:10px; color:var(--ink-soft); display:flex; align-items:center; gap:4px; }
.game-body .admin-pkg .pk-active input{ width:auto; }

.game-body .admin-btn{ font-family:var(--font-pixel) !important; font-size:8px !important; padding:9px 12px !important; cursor:pointer; color:#f6ecd6 !important; background:var(--train) !important; border:2px solid var(--train-0) !important; border-radius:0 !important; box-shadow:inset 0 2px 0 var(--train-hi), 0 2px 0 var(--frame-out) !important; }
.game-body .admin-btn:hover{ filter:brightness(1.08); }

.game-body .admin-table-wrap{ overflow-x:auto; }
.game-body .admin-table{ width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:12px; }
.game-body .admin-table th,.game-body .admin-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--frame-out); color:var(--ink); white-space:nowrap; }
.game-body .admin-table th{ font-family:var(--font-pixel); font-size:8px; color:var(--gold); }
.game-body .admin-table .ok{ color:var(--train); }

.game-body .admin-grant{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.game-body .admin-grant-box{ background:var(--panel-2); border:2px solid var(--frame-out); padding:14px; display:flex; flex-direction:column; gap:8px; }
.game-body .admin-grant-box h3{ font-family:var(--font-pixel); font-size:9px; color:var(--ink); margin:0 0 4px; }
.game-body .admin-grant-box input{ font-family:var(--font-body); font-size:12px; padding:8px; color:var(--ink); background:var(--panel); border:2px solid var(--frame-out); }

.game-body .admin-toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:100; font-family:var(--font-pixel); font-size:9px; color:#1c1208; background:var(--gold); border:2px solid var(--gold-0); padding:10px 16px; box-shadow:0 3px 0 var(--frame-out); }
.game-body .admin-toast.err{ color:#f6ecd6; background:var(--stop); border-color:var(--stop-0); }
.game-body .admin-toast[hidden]{ display:none !important; }
@media (max-width:640px){
  .game-body .admin-pkg-head{ display:none; }
  .game-body .admin-pkg{ grid-template-columns:1fr 1fr; }
}

/* editor de pacotes VIP no admin (com imagem + % de bônus) */
.game-body .admin-vip-pkg{ display:flex; gap:12px; padding:10px; margin-bottom:10px; background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .admin-vip-pkg .vp-thumb{ flex:0 0 72px; width:72px; height:72px; border:2px solid var(--gold-0); background:#0e0a06; overflow:hidden; }
.game-body .admin-vip-pkg .vp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.game-body .admin-vip-pkg .vp-fields{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.game-body .admin-vip-pkg .pk-name{ flex:1 1 140px; font-family:var(--font-body); font-size:12px; padding:7px; color:var(--ink); background:var(--panel); border:2px solid var(--frame-out); min-width:0; }
.game-body .admin-vip-pkg .vp-f{ display:flex; flex-direction:column; gap:2px; font-family:var(--font-pixel); font-size:7px; color:var(--ink-soft); }
.game-body .admin-vip-pkg .vp-f input{ width:74px; font-family:var(--font-body); font-size:12px; padding:6px; color:var(--ink); background:var(--panel); border:2px solid var(--frame-out); }
.game-body .admin-vip-pkg .pk-active{ font-family:var(--font-body); font-size:10px; color:var(--ink-soft); display:flex; align-items:center; gap:4px; }
.game-body .admin-vip-pkg .pk-active input{ width:auto; }
.game-body .admin-vip-pkg .vp-upload{ font-family:var(--font-pixel); font-size:7px; color:var(--ink-soft); display:flex; flex-direction:column; gap:3px; }
.game-body .admin-vip-pkg .vp-upload input{ font-family:var(--font-body); font-size:10px; max-width:180px; }
.game-body .admin-vip-pkg .pk-save{ margin-left:auto; }
@media (max-width:640px){ .game-body .admin-vip-pkg{ flex-direction:column; } .game-body .admin-vip-pkg .pk-save{ margin-left:0; } }
/* grupos de sprites por categoria no admin */
.game-body .admin-sprite-group{ margin-bottom:18px; }
.game-body .admin-sprite-h{ font-family:var(--font-pixel); font-size:10px; color:var(--gold); margin:0 0 8px; padding-bottom:5px; border-bottom:2px solid var(--frame-out); }
.game-body .admin-sprite-h span{ color:var(--ink-soft); font-size:8px; }
.game-body .admin-sprite-group .admin-sprite{ margin-bottom:8px; }
/* linha de monstro no admin */
.game-body .admin-monster .ed-active{ display:flex; align-items:center; gap:4px; font-family:var(--font-body); font-size:10px; color:var(--ink-soft); }
.game-body .admin-monster .ed-active input{ width:auto; }
.game-body .admin-monster input.m-image{ flex:1 1 90px; width:auto; }
.game-body .m-thumb-wrap{ flex:0 0 auto; width:40px; height:40px; border:2px solid var(--gold-0); background:#0e0a06; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.game-body .m-thumb{ max-width:100%; max-height:100%; image-rendering:pixelated; }
.game-body .m-img-cell{ display:flex; align-items:center; gap:6px; flex:1 1 200px; }
.game-body .m-img-cell .m-gallery{ flex:0 0 auto; white-space:nowrap; }
/* imagem/ícone do equipamento no card de item */
.game-body .it-thumb-wrap{ flex:0 0 auto; width:38px; height:38px; border:2px solid var(--gold-0); background:#0e0a06; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.game-body .it-thumb{ max-width:100%; max-height:100%; image-rendering:pixelated; }
.game-body .ed-img-row{ display:flex; margin:6px 0; }
.game-body .it-img-cell{ display:flex; align-items:center; gap:6px; flex:1 1 auto; }
.game-body .it-img-cell input.f-image{ flex:1 1 120px; width:auto; }
.game-body .it-img-cell .it-gallery{ flex:0 0 auto; white-space:nowrap; }

/* modal da galeria de imagens */
.game-body .admin-gallery-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(8,6,3,.72); }
.game-body .admin-gallery-modal[hidden]{ display:none; }
.game-body .admin-gallery-panel{ width:min(760px,96vw); max-height:88vh; display:flex; flex-direction:column; background:var(--panel); border:3px solid var(--frame-out); box-shadow:0 6px 0 var(--frame-out); padding:14px; }
.game-body .admin-gallery-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.game-body .admin-gallery-head h3{ margin:0; font-family:var(--font-pixel); font-size:11px; color:var(--gold); }
.game-body .admin-gallery-grid{ overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; padding:4px; }
.game-body .gallery-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 4px; cursor:pointer; background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .gallery-item:hover{ border-color:var(--gold); }
.game-body .gallery-item img{ width:60px; height:60px; object-fit:contain; image-rendering:pixelated; }
.game-body .gallery-item span{ font-family:var(--font-body); font-size:11px; color:var(--ink); word-break:break-word; text-align:center; }
.game-body .admin-gallery-grid .empty{ grid-column:1/-1; text-align:center; color:var(--ink-soft); font-family:var(--font-body); padding:24px; }

/* editor de aventuras (mobs + drops) */
.game-body .admin-adventure .adv-section{ margin-top:10px; padding-top:8px; border-top:1px dashed var(--frame-out); }
.game-body .adv-sec-h{ font-family:var(--font-pixel); font-size:8px; color:var(--gold); margin-bottom:6px; }
.game-body .adv-mons,.game-body .adv-drops{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.game-body .adv-mon-row,.game-body .adv-drop-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px; background:var(--panel); border:2px solid var(--frame-out); }
.game-body .adv-mon-row select,.game-body .adv-drop-row select{ font-family:var(--font-body); font-size:12px; color:var(--ink); background-color:var(--panel-2); border:2px solid var(--frame-out); padding:6px 24px 6px 8px; appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a44c' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 7px center; background-size:10px 7px; }
.game-body .adv-mon-row input,.game-body .adv-drop-row input{ width:64px; font-family:var(--font-body); font-size:12px; padding:6px; color:var(--ink); background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .adv-mon-row .adv-mon-id{ flex:1 1 140px; }
.game-body .adv-drop-row .adv-drop-item{ flex:1 1 140px; }
.game-body .adv-mon-del,.game-body .adv-drop-del{ margin-left:auto; }
/* mostra item OU categoria conforme o tipo do drop */
.game-body .adv-drop-row[data-type="item"] .adv-drop-slot,
.game-body .adv-drop-row[data-type="item"] .adv-drop-rarity{ display:none; }
.game-body .adv-drop-row[data-type="category"] .adv-drop-item{ display:none; }
.game-body .admin-adventure .ed-active{ display:flex; align-items:center; gap:4px; font-family:var(--font-body); font-size:10px; color:var(--ink-soft); }
.game-body .admin-adventure .ed-active input{ width:auto; }

/* editores genéricos do admin (expedições, base, crafting, itens) */
.game-body .admin-hint{ font-family:var(--font-body); font-size:11px; color:var(--ink-soft); margin:-6px 0 14px; line-height:1.5; }
.game-body .admin-ed-list{ display:flex; flex-direction:column; gap:8px; }
.game-body .admin-ed{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px; background:var(--panel-2); border:2px solid var(--frame-out); }
.game-body .admin-ed input{ font-family:var(--font-body); font-size:12px; padding:6px; color:var(--ink); background:var(--panel); border:2px solid var(--frame-out); width:78px; min-width:0; }
.game-body .admin-ed input.f-name,.game-body .admin-ed input.f-name_en{ flex:1 1 120px; width:auto; }
.game-body .admin-ed select,
.game-body .admin-vip-pkg select,
.game-body .admin-item-card select{
  font-family:var(--font-body); font-size:12px; color:var(--ink);
  background-color:var(--panel); border:2px solid var(--frame-out); cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:7px 26px 7px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a44c' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:10px 7px;
}
.game-body .admin-ed select:focus,
.game-body .admin-vip-pkg select:focus,
.game-body .admin-item-card select:focus{ outline:none; border-color:var(--gold); }
.game-body .admin-ed b{ font-family:var(--font-pixel); font-size:8px; color:var(--gold); min-width:74px; }
.game-body .admin-ed .ed-actions{ display:flex; gap:6px; margin-left:auto; }
.game-body .admin-ed-head{ background:transparent; border:0; padding:2px 8px; }
.game-body .admin-ed-head span,.game-body .admin-ed-head b{ font-family:var(--font-pixel); font-size:7px; color:var(--ink-soft); min-width:0; }
.game-body .adm-build,.game-body .adm-craft{ display:grid; align-items:center; gap:6px; }
.game-body .adm-build{ grid-template-columns:84px repeat(6,1fr) auto; }
.game-body .adm-craft{ grid-template-columns:90px 1fr 1fr auto; }
.game-body .adm-build input,.game-body .adm-craft input{ width:auto; }
.game-body .adm-act{ display:grid; grid-template-columns:220px 160px; align-items:center; gap:8px; }
.game-body .adm-act b{ font-weight:600; }
/* barras de filtro do admin (Itens / Pagamentos) — no tema do site */
.game-body .admin-items-bar,.game-body .admin-filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.game-body .admin-items-bar select,
.game-body .admin-items-bar input[type="search"],
.game-body .admin-filter-bar input,
.game-body .admin-filter-bar select{
  font-family:var(--font-body); font-size:12px; padding:9px 11px; color:var(--ink);
  background:var(--panel); border:2px solid var(--frame-out); outline:none; min-width:0;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.18); transition:border-color .12s ease;
}
.game-body .admin-items-bar select,
.game-body .admin-filter-bar select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a44c' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:11px 8px;
}
.game-body .admin-items-bar select{ flex:0 0 auto; min-width:190px; }
.game-body .admin-items-bar input[type="search"]{ flex:1 1 220px; min-width:190px; }
.game-body .admin-items-bar select:focus,
.game-body .admin-items-bar input[type="search"]:focus,
.game-body .admin-filter-bar input:focus,
.game-body .admin-filter-bar select:focus{ border-color:var(--gold); }
.game-body .admin-items-bar input[type="search"]::-webkit-search-cancel-button{ filter:invert(.7) sepia(.5) saturate(3) hue-rotate(5deg); }
.game-body .admin-filter-bar input[type="search"]{ flex:1 1 240px; min-width:190px; }
.game-body .admin-filter-date{ display:flex; align-items:center; gap:6px; font-family:var(--font-pixel); font-size:8px; color:var(--ink-soft); }
.game-body .admin-filter-date input[type="date"]{ color-scheme:dark; cursor:pointer; }
.game-body .admin-filter-bar .admin-btn.ghost{ background:transparent; color:var(--ink-soft); box-shadow:none; }
.game-body .admin-filter-bar .admin-btn.ghost:hover{ color:var(--gold); }
.game-body .pay-mp{ font-family:var(--font-body); font-size:11px; color:var(--ink-soft); }
.game-body .pay-email{ color:var(--ink-soft); }
@media (max-width:640px){
  .game-body .admin-items-bar select,.game-body .admin-items-bar input[type="search"]{ flex:1 1 100%; }
  .game-body .admin-filter-bar input[type="search"]{ flex:1 1 100%; }
}

.game-body .admin-item-card{ padding:10px; background:var(--panel-2); border:2px solid var(--frame-out); margin-bottom:10px; }
.game-body .admin-item-card .ed-top{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
.game-body .admin-item-card .ed-top input,.game-body .admin-item-card .ed-top select{ font-family:var(--font-body); font-size:12px; padding:6px; color:var(--ink); background:var(--panel); border:2px solid var(--frame-out); }
.game-body .admin-item-card .ed-top select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding:7px 26px 7px 8px; background-color:var(--panel); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a44c' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:10px 7px; }
.game-body .admin-item-card .ed-top input.f-name,.game-body .admin-item-card .ed-top input.f-code,.game-body .admin-item-card .ed-top input.f-name_en{ flex:1 1 110px; min-width:0; }
.game-body .ed-bonuses{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:6px; margin-bottom:8px; }
.game-body .ed-b{ display:flex; align-items:center; gap:4px; font-family:var(--font-body); font-size:10px; color:var(--ink-soft); white-space:nowrap; }
.game-body .ed-b input{ width:52px; font-family:var(--font-body); font-size:12px; padding:5px; color:var(--ink); background:var(--panel); border:2px solid var(--frame-out); }
.game-body .admin-item-card .ed-actions{ display:flex; gap:6px; }
@media (max-width:640px){ .game-body .adm-build{ grid-template-columns:1fr 1fr 1fr; } .game-body .admin-ed-head{ display:none; } }