/* Ajustes responsivos complementares ao style.css principal. */
@media (max-width: 800px) {
  .wrap {
    width: min(100% - 18px, 1180px);
  }

  .topbar-inner {
    grid-template-columns: auto 1fr auto;
    gap: 8px 10px;
    padding: 8px 0;
  }
  
  .character-portrait-frame img {
    width: 100%;
    height: auto;
  }

  .brand {
    font-size: 18px;
  }

  .brand-icon {
    font-size: 22px;
  }

  .hamb {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 42px;
    height: 34px;
    padding: 0;
    place-items: center;
  }

  .player-mini {
    grid-column: 1 / 3;
    grid-row: 2;
    gap: 8px;
    min-width: 0;
  }

  .player-mini b,
  .player-mini small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .avatar-sm {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  .resources {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 13px;
    line-height: 1.1;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    width: min(100% - 18px, 1180px);
    margin-inline: 0;
    transform: translateX(-50%);
    background: rgba(10, 10, 15, .98);
    border: 1px solid var(--border-color);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .nav.open {
    display: grid;
  }

  .nav a {
    padding: 9px 8px;
    text-align: center;
  }

  .bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 8px;
  }

  .grid {
    gap: 12px;
  }

  .main {
    padding-top: 14px;
  }

  .card,
  .location,
  .shop-item,
  .quest,
  .inv-item,
  .rank-row {
    padding: 14px;
  }

  .card-title {
    justify-content: center;
    text-align: center;
  }

  .dashboard-hero-grid,
  .character-summary {
    grid-template-columns: 1fr;
  }

  .dashboard-hero-grid>.card,
  .character-card {
    text-align: center;
  }

  .character-card {
    padding: 16px;
  }

  .character-card-head {
    justify-content: center;
  }

  .character-summary {
    gap: 14px;
  }

  .character-portrait-frame {
    width: 156px;
    height: auto;
    margin-inline: auto;
  }

  .character-actions {
    grid-template-columns: 1fr;
  }

  .character-card .character-actions .btn {
    width: 100%;
  }

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

  .stat {
    padding: 10px 8px;
    text-align: center;
  }

  .stat b {
    font-size: 20px;
  }

  .village-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .action-banner-list {
    margin-top: 12px;
  }

  .village-actions .location {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 8px 12px;
    min-height: 0;
    text-align: left;
  }

  .village-actions .location .big-icon {
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: center;
    font-size: 38px;
  }

  .village-actions .location h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.15;
  }

  .village-actions .location p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .village-actions .location .btn,
  .village-actions .location form {
    width: 100%;
  }

  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-board {
    grid-template-columns: 1fr;
  }

  .shop-rpg-card {
    grid-template-columns: 86px 1fr;
    gap: 10px;
  }

  .shop-rpg-buy {
    justify-self: start;
  }

  .shop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .shop-item>div[style] {
    width: 100%;
  }

  .shop-item h3 {
    margin: 2px 0 8px;
    font-size: 17px;
    line-height: 1.15;
  }

  .shop-item p {
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .shop-item form,
  .shop-item .btn {
    width: 100%;
  }

  .shop-visual {
    width: 92px;
    height: 92px;
    min-height: 92px;
  }

  .shop-visual .item-emoji {
    font-size: 44px;
  }

  .quest {
    text-align: center;
  }

  .quest-board {
    background-size: cover;
    padding: 54px 40px 68px;
    min-height: 380px;
  }

  .quest-list {
    grid-template-columns: 1fr 1fr;
  }

  .quest-board .quest {
    text-align: left;
  }

  .quest .btn,
  .quest form {
    width: 100%;
  }

  .exploration-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .explore-card {
    border-radius: 8px;
  }

  .exploration-grid .location {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 6px 12px;
    min-height: 0;
    text-align: left;
  }

  .exploration-grid .location .big-icon {
    grid-row: 1 / span 4;
    align-self: center;
    justify-self: center;
    font-size: 38px;
  }

  .exploration-grid .location h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.15;
  }

  .exploration-grid .location p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .exploration-grid .location form,
  .exploration-grid .location .btn {
    width: 100%;
  }

  .combat-arena {
    grid-template-columns: 1fr;
  }

  .player-portrait {
    width: 136px;
    height: 176px;
  }

  .enemy-portrait {
    width: 128px;
    height: 128px;
  }

  .admin-preview-grid {
    grid-template-columns: 1fr;
  }

  .mobile-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mobile-stack>* {
    width: 100%;
  }

  .item-detail-card .mobile-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .item-detail-card .mobile-stack form,
  .item-detail-card .mobile-stack .btn,
  .item-detail-card .mobile-stack .inventory-action-image-button {
    width: 100%;
  }

  .item-detail-card .mobile-stack .inventory-action-image-button {
    width: 100%;
    justify-self: center;
  }
}

.level-badge {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.login-card {
  margin: clamp(44px, 24vh, 140px) auto;
}

.chest-info-box {
  grid-template-columns: 1fr;
}

.chest-preview-grid {
  grid-template-columns: 1fr;
}

.combat-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.combat-actions form,
.combat-actions .btn {
  width: 100%;
}

.combat-actions .btn {
  min-height: 48px;
  padding: 10px 8px;
  line-height: 1.15;
  white-space: normal;
}

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

.spell-card {
  background: #11111a;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.spell-card.active {
  border-color: var(--accent-gold);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .35);
}

.spell-card.locked {
  opacity: .62;
}

.spell-card b,
.spell-card small {
  display: block;
}

.spell-card b {
  color: var(--accent-gold);
  font-family: 'Cinzel', serif;
}

.spell-card small {
  color: var(--fg-muted);
  margin-top: 3px;
}

.spell-card p {
  margin: 0;
}

.spell-card .btn {
  width: 100%;
  align-self: end;
}

.item-square span {
  font-size: 18px;
  line-height: 1.05;
  right: 10px;
  bottom: 10px;
}

.inventory-window.inventory-v3 .backpack-grid .item-square .qty {
  font-size: 20px;
  line-height: 1.05;
  right: 13px;
  bottom: 13px;
}


@media (max-width: 800px) {
  .combat-panels {
    grid-template-columns: 1fr;
  }

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

  .spell-card {
    padding: 12px;
  }
}

@media (max-width: 560px) {
  .inventory-window {
    width: 100%;
  }

  .inventory-frame-top {
    height: 62px;
  }

  .inventory-frame-top span {
    letter-spacing: 4px;
  }

  .rpg-paper-v3 {
    margin: 8px;
  }

  .equipment-v3 {
    min-height: 540px;
  }

  .equipment-v3 .silhouette {
    top: 78px;
    transform: translateX(-50%) scale(.74);
  }

  .equipment-v3 .equip-node {
    width: 70px;
    height: 70px;
  }

  .equipment-v3 .equip-node .item-square,
  .equipment-v3 .equip-node .empty-equip {
    width: 58px;
    height: 58px;
    min-height: 58px;
  }

  .equipment-v3 .equip-node .equip-label-mini {
    display: block;
    top: -14px;
    max-width: 72px;
    color: #51381f;
    margin-bottom: 3px;
    padding: 1px 3px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
  }

  .equipment-v3 .equip-helmet {
    left: 12px;
    top: 58px;
  }

  .equipment-v3 .equip-amulet {
    right: 12px;
    top: 58px;
  }

  .equipment-v3 .equip-weapon {
    left: 12px;
    top: 152px;
  }

  .equipment-v3 .equip-shield {
    right: 12px;
    top: 152px;
  }

  .equipment-v3 .equip-armor {
    left: 50%;
    top: 152px;
    transform: translateX(-50%);
  }

  .equipment-v3 .equip-gloves {
    left: 12px;
    top: 246px;
  }

  .equipment-v3 .equip-belt {
    left: 50%;
    top: 246px;
    transform: translateX(-50%);
  }

  .equipment-v3 .equip-ring_left {
    right: 12px;
    top: 246px;
  }

  .equipment-v3 .equip-ring_right {
    left: 12px;
    top: 340px;
  }

  .equipment-v3 .equip-pants {
    left: 50%;
    top: 340px;
    transform: translateX(-50%);
  }

  .equipment-v3 .equip-boots {
    right: 12px;
    top: 340px;
  }

  .equipment-v3 .equip-cloak {
    right: 12px;
    top: 434px;
  }

  .level-badge {
    top: 14px;
    right: auto;
  }
}

@media (max-width: 520px) {
  .wrap {
    width: min(100% - 14px, 1180px);
  }

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

@media (max-width: 390px) {

  .card,
  .location,
  .shop-item,
  .quest,
  .inv-item,
  .rank-row {
    padding: 12px;
  }

  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .shop-rpg-card {
    grid-template-columns: 86px 1fr;
    justify-items: stretch;
    text-align: left;
  }

  .shop-rpg-info h3,
  .shop-rpg-info small {
    white-space: normal;
  }

  .shop-rpg-buy {
    justify-self: start;
  }

  .shop-visual {
    width: 78px;
    height: 78px;
    min-height: 78px;
  }

  .shop-visual .item-emoji {
    font-size: 38px;
  }

  .character-portrait-frame {
    width: 142px;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 350px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .register-card.form {
    max-width: 95%;
  }

  .register-class-card {
    flex-basis: 180px;
  }

  .register-avatar-frame {
    width: 112px;
    height: 112px;
  }

  .brand-logo {
    max-width: 180px;
    height: 40px;
  }
}

@media (max-width: 920px) {
  .hero-info-images {
    grid-template-columns: 1fr;
  }

  .inventory-window.inventory-v3 .rpg-paper-v3 {
    grid-template-columns: 1fr;
  }

  .quest-list {
    grid-template-columns: 1fr;
  }

  .quest-board .quest {
    min-height: 360px;
    padding: 64px 42px 58px;
  }
}

@media (max-width: 560px) {
  .hero-image-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .hero-image-button img {
    width: min(260px, 82vw);
    height: auto;
  }

  .inventory-window.inventory-v3 {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .inventory-window.inventory-v3 .rpg-paper-v3 {
    margin: 0;
  }

  .quest-board-head {
    text-align: left;
  }

  .quest-board .quest {
    min-height: 420px;
    padding: 72px 34px 66px;
  }

  .quest-board .quest .btn,
  .quest-board .quest form {
    width: 100%;
  }

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

  .craft-result {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .item-square.big {
    width: 86px;
    height: 86px;
  }

  .craft-result .item-square.big {
    height: 86px;
  }

  .craft-footer {
    grid-template-columns: 1fr;
  }

  .craft-footer .btn {
    width: 100%;
  }

  .craft-card {
    min-height: 0;
  }

  .craft-missing {
    min-height: 28px;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .main {
    padding-top: 12px;
    padding-bottom: 18px;
  }

  .topbar {
    position: static;
  }

  .topbar-inner {
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    padding: 6px 0;
  }

  .brand-logo {
    max-width: 150px;
    height: 32px;
  }

  .avatar-sm {
    width: 34px;
    height: 34px;
  }

  .player-mini {
    gap: 8px;
    grid-column: auto;
  }

  .player-mini small {
    font-size: 11px;
  }

  .resources {
    gap: 8px;
    font-size: 13px;
    grid-column: auto;
  }

  .nav {
    padding-bottom: 5px;
  }

  .nav a {
    padding: 6px 8px;
    font-size: 13px;
  }

  .bars {
    gap: 10px;
    padding-bottom: 6px;
  }

  .bar-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .bar {
    height: 9px;
  }

  .register-card.form {
    width: min(900px, 100% - 14px);
    max-width: none;
    padding: 16px;
  }

  .register-card h2 {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .register-card .input {
    padding: 8px 10px;
    margin-bottom: 8px;
  }

  .register-class-card {
    flex-basis: 160px;
  }

  .register-class-card span {
    min-height: 210px;
    padding: 10px 10px 12px;
  }

  .register-avatar-frame {
    width: 94px;
    height: 94px;
    margin-bottom: 6px;
  }

  .register-avatar-frame .class-avatar {
    width: 62px;
    height: 62px;
  }
}

@media (max-width: 560px) {
  .equipment-v3.equipment-split {
    display: grid;
    grid-template-columns: 68px minmax(112px, 1fr) 68px;
    grid-template-rows: auto;
    gap: 8px;
    min-height: 0;
    padding: 16px 10px 14px;
    overflow: hidden;
  }

  .equipment-v3.equipment-split:before {
    inset: 10px;
  }

  .equipment-split .equipment-side {
    grid-template-rows: repeat(6, 54px);
    gap: 5px;
  }

  .equipment-split .equipment-character-column {
    grid-template-rows: 1fr auto;
    min-height: 350px;
  }

  .equipment-split .inventory-character-bg {
    display: grid;
    position: relative;
    inset: auto;
    width: 100%;
    height: 310px;
    place-items: end center;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .48));
  }

  .equipment-split .inventory-character-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  .equipment-split .inventory-character-bg span {
    font-size: 78px;
  }

  .equipment-split .level-badge {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin-top: 6px;
    z-index: 4;
    padding: 7px 10px;
    font-size: 12px;
  }

  .equipment-split .equip-node,
  .equipment-split .equip-helmet,
  .equipment-split .equip-amulet,
  .equipment-split .equip-weapon,
  .equipment-split .equip-shield,
  .equipment-split .equip-armor,
  .equipment-split .equip-gloves,
  .equipment-split .equip-belt,
  .equipment-split .equip-pants,
  .equipment-split .equip-boots,
  .equipment-split .equip-ring_left,
  .equipment-split .equip-ring_right,
  .equipment-split .equip-cloak {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }

  .equipment-split .equip-node .equip-label-mini {
    position: static;
    max-width: 100%;
    margin: 0px;
    padding: 1px 4px;
    font-size: 8px;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
  }

  .equipment-split .equip-node .item-square,
  .equipment-split .equip-node .empty-equip {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .inventory-window.inventory-v3 .equipment-split .equip-node .item-square:after,
  .inventory-window.inventory-v3 .equipment-split .equip-node .empty-equip:after {
    inset: -5px;
  }

  .inventory-window.inventory-v3 .backpack-grid .item-square {
    padding: 3px;
  }
}

@media (max-width: 800px) {
  .topbar .nav {
    gap: 6px;
    padding: 8px;
  }

  .topbar .nav a {
    min-width: 0;
    padding: 8px 10px 7px;
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  .toast-stack {
    top: 74px;
    left: 10px;
    right: 10px;
    width: auto;
  }

  .form {
    max-width: 350px;
    padding: 16px;
  }

  .toast-notification {
    min-height: 48px;
    padding: 10px 10px 10px 13px;
    font-size: 14px;
  }

  .inventory-window.inventory-v3 .attribute-panel {
    padding: 14px 16px 12px;
  }

  .inventory-window.inventory-v3 .attribute-head {
    margin-bottom: 10px;
  }

  .inventory-window.inventory-v3 .attribute-head h3 {
    font-size: 15px;
    letter-spacing: 4px;
  }

  .inventory-window.inventory-v3 .stat-points-badge {
    padding: 5px 8px;
    font-size: 12px;
  }

  .inventory-window.inventory-v3 .attribute-grid,
  .inventory-window.inventory-v3 .derived-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
  }

  .inventory-window.inventory-v3 .attr-row {
    gap: 8px;
    font-size: 14px;
    min-width: 0;
  }

  .inventory-window.inventory-v3 .attr-row span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inventory-window.inventory-v3 .attr-controls {
    gap: 5px;
    min-width: 66px;
  }

  .inventory-window.inventory-v3 .attr-plus {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }

  .inventory-window.inventory-v3 .attribute-panel hr {
    margin: 12px 0;
  }

  .inventory-window.inventory-v3 .stat-save {
    margin: 12px 0 10px;
    min-height: 38px;
    padding: 10px 12px;
  }

  .inventory-window.inventory-v3 .gold-box {
    padding: 9px 12px;
    font-size: 15px;
  }
}

@media (max-width: 420px) {

  .inventory-window.inventory-v3 .attribute-grid,
  .inventory-window.inventory-v3 .derived-grid {
    gap: 7px 10px;
  }

  .inventory-window.inventory-v3 .attr-row {
    font-size: 13px;
  }

  .inventory-window.inventory-v3 .attr-controls {
    min-width: 48px;
  }
}

@media (max-width: 700px) {


  .quest-board {
    padding-top: 6px;
  }

  .quest-list {
    gap: 10px;
  }

  .quest-board .quest {
    min-height: 380px;
    padding: 58px 30px 48px;
  }

  .quest-board .quest h3 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .quest-board .quest p {
    margin: 7px 0;
  }

  .quest-reward {
    gap: 3px;
    margin: 9px 0 10px;
  }
}

@media (max-width: 420px) {
  .quest-board {
    padding-top: 5px;
  }

  .quest-board .quest {
    padding: 54px 26px 44px;
  }
}

@media (max-width: 620px) {
  .combat-page .combat-arena {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
    align-items: end;
  }

  .combat-page .combatant h3 {
    margin: 6px 0 8px;
    font-size: 13px;
    line-height: 1.1;
  }

  .combat-page .combat-portrait {
    margin-bottom: 6px;
  }

  .combat-page .player-portrait {
    width: min(92px, 27vw);
    height: 118px;
  }

  .combat-page .enemy-portrait {
    width: min(92px, 27vw);
    height: 118px;
    border-width: 1px;
  }

  .combat-page .combat-portrait span {
    font-size: 38px;
  }

  .combat-page .vs {
    align-self: center;
    font-size: 22px;
  }

  .combat-page .bar-label {
    font-size: 10px;
  }

  .combat-page .bar {
    height: 10px;
  }

  .combat-page .combat-panels {
    gap: 10px;
    margin-top: 10px !important;
  }

  .combat-page .combat-panels .card,
  .combat-page .spellbook-card {
    padding: 14px;
  }

  .combat-page .combat-panels>.card {
    height: auto;
  }

  .combat-page .combat-actions {
    gap: 8px;
  }

  .combat-page .combat-actions .btn {
    min-height: 42px;
    padding: 9px 7px;
    font-size: 12px;
  }

  .combat-page .log {
    max-height: 150px;
    font-size: 13px;
  }

  .combat-page .spellbook-card {
    margin-top: 10px !important;
  }
}

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

  .premium-money-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .premium-money-hero {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
  }

  .premium-balance-strip {
    margin-top: -6px;
  }

  .premium-shop-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .premium-money-hero {
    padding: 20px;
  }

  .premium-money-wallet {
    width: 100%;
  }

  .premium-balance-strip {
    justify-content: stretch;
    margin-top: -4px;
  }

  .premium-money-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: -10px;
    padding: 0 10px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--accent-gold) rgba(255, 255, 255, .08);
    scrollbar-width: thin;
  }

  .premium-money-card {
    flex: 0 0 255px;
    min-height: 0;
    padding: 0 18px 18px;
    scroll-snap-align: start;
  }

  .premium-package-art {
    width: calc(100% + 36px);
    min-height: 96px;
    margin-inline: -18px;
  }

  .premium-package-art img {
    height: 160px;
  }

  .premium-money-card p {
    font-size: 14px;
    line-height: 1.25;
  }

  .premium-money-card ul {
    font-size: 13px;
  }

  .premium-money-card button {
    min-height: 40px;
  }

  .premium-card-actions {
    grid-template-columns: 1fr;
  }

  .premium-package-section>h3 {
    font-size: 20px;
  }

  .premium-package-section>h3 span {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .premium-payment-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .premium-offer {
    grid-template-columns: 60px minmax(0, 1fr);
    min-height: 0;
    padding: 12px;
  }

  .premium-offer-icon {
    height: 60px;
    font-size: 28px;
  }

  .premium-offer-buy {
    grid-template-columns: 92px 1fr;
  }
}

@media (max-width: 380px) {
  .combat-page .combat-arena {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 5px;
    padding: 10px 8px;
  }

  .combat-page .player-portrait {
    width: 78px;
    height: 102px;
  }

  .combat-page .enemy-portrait {
    width: 78px;
    height: 102px;
  }
}

@media (max-width: 800px) {
  .topbar-inner {
    grid-template-columns: auto 1fr auto;
    gap: 8px 10px;
    align-items: start;
  }

  .brand-image {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
  }

  .player-mini {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
  }

  .player-mini .avatar-sm {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .player-mini > div {
    display: contents;
  }

  .player-mini b {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .player-mini small {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin-top: 0;
  }

  .topbar-status {
    grid-column: 2 / 4;
    grid-row: 1 / span 3;
    width: 100%;
    justify-self: stretch;
    gap: 8px;
  }

  .resources {
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    font-size: 13px;
    line-height: 1.1;
    gap: 10px;
  }

  .resources span:first-child {
    order: 2;
  }

  .resources span:last-child {
    order: 1;
  }

  .topbar-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .topbar-bars .bar-label {
    font-size: 10px;
  }

  .hamb {
    grid-column: 3;
    grid-row: 1;
  }

  .nav {
    width: calc(100% - 18px);
  }
}

@media (max-width: 520px) {
  .topbar-inner {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .brand-image {
    grid-column: 1;
    grid-row: 1;
  }

  .hamb {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .player-mini {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: auto 1fr auto;
    gap: 6px 10px;
    align-items: center;
  }

  .player-mini .avatar-sm {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .player-mini b {
    grid-column: 2;
    grid-row: 1;
  }

  .player-mini small {
    grid-column: 2;
    grid-row: 2;
  }

  .topbar-status {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }

  .resources {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    column-gap: 10px;
    align-items: center;
  }

  .resources span:last-child {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .resources span:first-child {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .topbar-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}


/* FIX V8: Header mobile isolado, sem interferir nos grids das páginas */
@media (max-width: 800px) {
  .topbar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px 10px !important;
    align-items: start !important;
  }

  .topbar-identity {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .topbar-status {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }

  .topbar-resources {
    gap: 12px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .topbar-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .topbar-bars .bar-label {
    font-size: 10px !important;
  }

  .hamb {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .nav {
    width: calc(100% - 18px) !important;
  }
}

@media (max-width: 520px) {
  .topbar-inner {
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }

  .brand-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .hamb {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .topbar-identity {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 4px 10px !important;
  }

  .player-mini {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
  }

  .topbar-resources {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    justify-items: end !important;
    align-content: center !important;
    row-gap: 6px !important;
    min-width: 92px !important;
  }

  .topbar-resources span:first-child { order: 1 !important; }
  .topbar-resources span:last-child { order: 2 !important; }

  .topbar-status {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }

  .topbar-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
}

/* FIX V9: header na largura do conteúdo + HP/MP ao lado da classe */
.topbar .wrap {
  width: min(1180px, calc(100% - 28px)) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}
.topbar-inner {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
}
.topbar-identity {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}
.player-mini {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.player-mini-info {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}
.player-meta-row {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.player-meta-row small {
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.topbar-bars {
  width: min(46vw, 520px) !important;
  min-width: 300px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
}
.topbar-bars .bar {
  height: 10px !important;
}
.topbar-bars .bar-label {
  font-size: 10px !important;
  margin-bottom: 2px !important;
}
.topbar-resources {
  justify-self: end !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 18px !important;
  white-space: nowrap !important;
}
.topbar .nav {
  width: min(1180px, calc(100% - 28px)) !important;
  max-width: 1180px !important;
}

@media (max-width: 900px) {
  .topbar-inner {
    grid-template-columns: 1fr auto !important;
    align-items: start !important;
  }
  .brand-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .hamb {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .topbar-identity {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .topbar-bars {
    width: min(100%, 520px) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 560px) {
  .topbar .wrap,
  .topbar .nav {
    width: calc(100% - 18px) !important;
  }
  .topbar-identity {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .topbar-resources {
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .topbar-resources span {
    justify-self: start !important;
  }
  .player-meta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .player-meta-row small {
    white-space: normal !important;
  }
  .topbar-bars {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* FIX V10: desktop header - HP e MP sempre ao lado da classe, sem cair para baixo do XP */
@media (min-width: 901px) {
  .topbar .wrap,
  .topbar .nav {
    width: min(1180px, calc(100% - 28px)) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
  }

  .topbar-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .topbar-identity {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-width: 0 !important;
  }

  .player-mini {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .player-mini-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .player-mini b {
    max-width: 220px !important;
  }

  .player-meta-row {
    display: grid !important;
    grid-template-columns: auto minmax(360px, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
  }

  .player-meta-row small {
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .topbar-bars {
    width: min(520px, 100%) !important;
    min-width: 360px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .topbar-bars > div {
    min-width: 0 !important;
  }

  .topbar-bars .bar {
    height: 10px !important;
  }

  .topbar-bars .bar-label {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .topbar-resources {
    flex: 0 0 auto !important;
    justify-self: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    white-space: nowrap !important;
  }

  .hamb {
    display: none !important;
  }
}

/* Mantém o layout mobile que já estava correto */
@media (max-width: 900px) {
  .topbar-inner {
    grid-template-columns: 1fr auto !important;
  }
}


/* FIX V11: desktop sem quebrar MP/XP e mobile restaurado */
@media (min-width: 901px) {
  .topbar .wrap,
  .topbar .nav {
    width: min(1180px, calc(100% - 28px)) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
  }

  .topbar-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
  }

  .topbar-identity {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
  }

  .player-mini {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .player-mini-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }

  .player-mini b {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .player-meta-row {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(280px, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .player-meta-row small {
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .topbar-bars {
    width: min(430px, 100%) !important;
    min-width: 280px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .topbar-bars > div { min-width: 0 !important; }

  .topbar-bars .bar-label {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .topbar-bars .bar {
    height: 10px !important;
  }

  .topbar-resources {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    white-space: nowrap !important;
  }

  .hamb {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .topbar .wrap,
  .topbar .nav {
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .topbar-inner {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .brand-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .hamb {
    display: inline-flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .topbar-identity {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
  }

  .player-mini {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .player-mini-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }

  .player-mini b {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .player-meta-row {
    display: block !important;
    min-width: 0 !important;
  }

  .player-meta-row small {
    display: block !important;
    margin: 0 0 4px !important;
    white-space: nowrap !important;
  }

  .topbar-bars {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .topbar-bars > div { min-width: 0 !important; }

  .topbar-bars .bar-label {
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .topbar-bars .bar {
    height: 10px !important;
  }

  .topbar-resources {
    min-width: 88px !important;
    display: grid !important;
    justify-items: end !important;
    align-content: start !important;
    row-gap: 6px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 560px) {
  .topbar-identity {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .topbar-resources {
    min-width: 84px !important;
    font-size: 13px !important;
  }
}