:root{color-scheme:dark;--ink:#e6dfcc;--muted:#adaf9f;--gold:#d4b775;--line:#56503d;--panel:#1b2326;--parchment:#ddd0af;--dark:#101719}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#344441 0,#141c20 45%,#0c1216 100%);color:var(--ink);font:15px/1.5 'Segoe UI',Arial,sans-serif;min-height:100vh}main{max-width:1180px;margin:auto;padding:28px 26px 48px}h1,h2,h3,strong.name,.name,.section-title{font-family:Georgia,'Times New Roman',serif}h1,h2,h3,p{margin:0 0 12px}h2{font-size:28px;line-height:1.2}h3{font-size:20px}button,input,select{font:inherit}button{min-height:42px;padding:10px 14px;border:1px solid #66614d;border-radius:4px;color:var(--ink);background:linear-gradient(#313a37,#202a29);cursor:pointer;box-shadow:inset 0 1px #ffffff10,0 2px 0 #0004;transition:background .15s,border-color .15s}button:hover{border-color:var(--gold);background:#354440}button.primary{color:#171c19;background:linear-gradient(#dfc786,#b69753);border-color:#edd8a0;font-weight:700}button.danger{color:#ffc4b9;border-color:#955849;background:#452b29}button:disabled,button.locked{opacity:.55;cursor:not-allowed;box-shadow:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #75c5d0;outline-offset:3px}input,select{width:100%;min-height:44px;background:#121b1e;color:var(--ink);border:1px solid #66716a;border-radius:4px;padding:10px}input[type=checkbox]{width:auto;min-height:auto}label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}a{color:var(--gold)}.muted{color:var(--muted);font-size:12px}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-size:10px;font-weight:700;margin-bottom:6px}.masthead{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:22px}.brand{font:26px/1 Georgia,serif;letter-spacing:.1em;color:#efdfb7}.brand small{font:10px 'Segoe UI',sans-serif;display:block;letter-spacing:.28em;margin-top:8px;color:#a8b1a5}.realm-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}.screen{display:flex;flex-direction:column;gap:14px}.card{padding:20px;background:linear-gradient(130deg,#27302d,#1b2427);border:1px solid var(--line);border-radius:5px;box-shadow:inset 0 1px #fff1,0 8px 24px #0003;min-width:0}.card:empty{display:none}.player-card{display:grid;grid-template-columns:1fr;gap:14px;border-top:3px solid var(--gold)}.chat-log{font-size:12px;max-height:180px;overflow:auto}.chat-line{border-bottom:1px solid #ffffff0a;padding-bottom:8px;margin-bottom:8px}.chat-line strong{color:var(--gold)}#actionStatus{grid-column:1/-1;margin:0;color:#ffd3b2}#actionStatus:empty{display:none}.top-line,.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.row{flex-wrap:wrap}.top-line{margin-bottom:14px}.top-line>strong{font:22px Georgia,serif;color:#ecdbb5}.name{font-size:24px;color:#ecdbb5}.avatar{width:76px;height:84px;justify-self:center;background:linear-gradient(140deg,#52665c,#1c2c2d);border:2px solid #9e8e62;clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%);font:30px Georgia,serif;color:#e6cf91}.stat{display:grid;grid-template-columns:24px 1fr 64px;align-items:center;gap:7px;font-size:11px;margin:9px 0}.bar{height:8px;border:1px solid #080e12;background:#0e1418;overflow:hidden;border-radius:3px}.fill{height:100%}.hp{background:linear-gradient(90deg,#8b383b,#d27665)}.mana{background:linear-gradient(90deg,#2b6487,#69bcc9)}.xp{background:linear-gradient(90deg,#7b7047,#dcc28a)}.resources{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);margin-top:14px;font-size:12px;color:var(--gold)}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.quick-actions button{font-size:12px;padding:8px}.hero-image{height:235px;border:1px solid #756d51;border-radius:3px;background:linear-gradient(0deg,#10202575,transparent 60%),url('/assets/frontier-town.png') center 52%/cover;margin-bottom:20px;box-shadow:inset 0 0 30px #0003}.hero-image.wilderness{background-position:90% center}.place-image{height:150px}.split-location,.grid-2,.battle-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.action-section{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);border-bottom:1px solid var(--line);padding:12px 0 7px;margin-bottom:10px}.list-item{padding:16px 0;border-bottom:1px solid var(--line)}.thumb{width:46px;height:46px;border:1px solid var(--line);display:grid;place-items:center;background:#172222;color:var(--gold)}.item-row{display:flex;gap:10px;align-items:center}.skill-slot,.result-pill{border:1px solid var(--line);background:#121e21;border-radius:3px;padding:10px}.battle-vs>.card{padding:12px}.battle-vs .stat{grid-template-columns:20px 1fr 50px}.combat-log{max-height:210px;overflow:auto;background:#101a1d;padding:12px;border:1px solid var(--line);font-size:12px}.combat-log-line{padding:7px 0;border-bottom:1px solid #ffffff0c}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.input-row{display:flex;align-items:center;gap:8px;margin:8px 0}.input-row input{width:65px;text-align:center}.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.admin-view{max-width:980px;margin:auto}.modal-backdrop{position:fixed;inset:0;background:#081016ce;display:grid;place-items:center;padding:20px;z-index:10}.modal{max-width:440px;width:100%;padding:28px;background:var(--panel);border:1px solid var(--gold);border-radius:6px}.hidden{display:none!important}.login{grid-column:1/-1;max-width:520px;width:100%;margin:10px auto;display:grid;gap:12px;padding:32px;border-top:3px solid var(--gold)}.login-scene{height:200px;margin:-32px -32px 14px;background:#0d1417 url('/assets/game-logo.jpg') center/cover no-repeat;border-bottom:2px solid var(--gold);box-shadow:inset 0 -24px 28px rgba(0,0,0,0.85)}.screen:has(.login:not(.hidden)) .chat{display:none}.screen:has(.login:not(.hidden)) #mainCard{grid-column:1/-1;text-align:center;max-width:520px;margin:auto;width:100%}
/* Conteudo por etapa: seis entradas, detalhes somente quando solicitados. */
.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.section-heading h2{margin:0}.section-heading>button{font-size:12px}.catalog-intro{color:var(--muted);font-size:13px;margin-bottom:16px}.catalog-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.catalog-tabs button{font-size:12px;min-height:38px;padding:8px 12px}.catalog-tabs button[aria-pressed=true]{background:#dbc48e;color:#202722;border-color:#e9d8ac}.catalog-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}.catalog-filters select{font-size:12px}.catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.catalog-card{position:relative;border:1px solid #bbab83;border-radius:3px;background:linear-gradient(125deg,#e7dcc0,#ccbd98);color:#333c35;padding:17px;box-shadow:0 3px 7px #0003;min-width:0}.catalog-card h3{font-size:18px;margin:10px 0;color:#29352f}.catalog-card p{font-size:12px;margin-bottom:10px}.catalog-card .muted{color:#565e51}.catalog-card .level-badge{font-size:10px;padding:3px 7px;border:1px solid #918463;color:#434d3f;border-radius:2px;white-space:nowrap}.catalog-card .card-kind{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#5d654e}.catalog-card .reward-strip{padding:9px 0;border-top:1px solid #a2936a;margin-top:12px;font-size:12px;color:#565024}.catalog-card>button{width:100%;margin-top:8px}.catalog-card details{font-size:12px;margin:10px 0}.catalog-card summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.catalog-card details p{margin-top:9px}.catalog-card progress{width:100%;height:8px;accent-color:#657b53}.catalog-card .bonus-line{font-weight:600;color:#3f5c47}.catalog-card.locked-card{background:linear-gradient(125deg,#c8c6b5,#a5aa9f);border-color:#8d9689}.pager{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:10px}.pager span{font-size:12px;color:var(--muted)}.empty-state{padding:34px 20px;text-align:center;border:1px dashed #687363;color:#b3baab}.empty-state strong{display:block;color:#e0d4ad;font:20px Georgia,serif;margin-bottom:10px}.journal-note{border-left:2px solid var(--gold);padding-left:13px;font-size:13px;color:#bcc3b5}.inventory-head,.inventory-section-head{display:flex;justify-content:space-between;gap:12px;margin:12px 0}.inventory-capacity{font-size:12px;color:var(--gold)}.inventory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.inventory-tile{position:relative;background:#131e20;border:1px solid #70766b;border-radius:4px;padding:10px 6px;text-align:center;min-width:0}.inventory-tile.rarity-uncommon{border-color:#7f9a63}.inventory-tile.rarity-rare{border-color:#6e9bad}.inventory-tile.rarity-epic{border-color:#a38fba}.inventory-tile.rarity-legendary{border-color:#d4b775}.inventory-qty{position:absolute;right:5px;top:2px;font-size:11px;color:#e5d29c}.inventory-icon{display:grid;place-items:center;height:42px;font:22px Georgia,serif;color:#d8c795}.inventory-name{font-size:11px;line-height:1.35;overflow-wrap:anywhere;min-height:30px}.inventory-actions{display:flex;gap:4px;justify-content:center;margin-top:8px}.inventory-actions button{font-size:11px;min-height:30px;padding:3px 7px}.inventory-pouch{display:flex;gap:10px}.pouch-slot{border:1px solid var(--line);padding:10px;font-size:12px}.pouch-slot strong,.pouch-slot span{display:block}.inventory-empty{color:var(--muted)}
@media(max-width:800px){main{padding:18px 14px 32px}.screen{grid-template-columns:1fr}.masthead{margin-bottom:16px}.realm-label{display:none}#characterCard,#mainCard,#actionsCard,.chat{grid-column:1;grid-row:auto}.player-card{padding:14px;gap:12px}.avatar{width:66px;height:76px}.name{font-size:21px}.quick-actions{grid-template-columns:repeat(4,1fr)}.chat{order:9}.hero-image{height:210px}.card{padding:16px}.login{padding:28px}.login-scene{margin:-28px -28px 12px;height:165px}.catalog-filters{grid-template-columns:1fr 1fr}.catalog-filters>label:first-child{grid-column:1/-1}.section-heading h2{font-size:25px}.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.catalog-grid{grid-template-columns:1fr}.catalog-card{padding:16px}.brand{font-size:22px}.grid-2,.split-location,.battle-vs{grid-template-columns:1fr}.inventory-grid{grid-template-columns:repeat(3,1fr)}.quick-actions{grid-template-columns:1fr 1fr}.hero-image{height:180px}.pager button{padding:8px 10px}.section-heading>button{padding:8px}.stat{grid-template-columns:22px 1fr 60px}}
.player-card .quick-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.player-card .quick-actions .game-tile-btn{min-height:86px;padding:8px 4px;gap:6px}
.player-card .quick-actions .game-tile-icon{width:46px;height:46px}
.resources{flex-wrap:wrap;gap:6px}

/* Medieval Game Tile Buttons & Iconography */
.game-tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.game-tile-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:106px;padding:14px 8px 10px;background:linear-gradient(145deg,#242d2a,#161e1f);border:1px solid #4a4535;border-radius:10px;box-shadow:inset 0 1px 0 #ffffff14,0 4px 10px #00000060;transition:all .16s ease;text-align:center;cursor:pointer;color:var(--ink);position:relative}
.game-tile-btn:hover{background:linear-gradient(145deg,#2e3c38,#1b2628);border-color:var(--gold);transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff25,0 6px 14px #00000080,0 0 12px #d4b77530}
.game-tile-btn:active{transform:translateY(1px)}
.game-tile-btn.primary, .game-tile-btn.combat-tile{background:linear-gradient(145deg,#3d2222,#211313);border-color:#9e4638;box-shadow:inset 0 1px 0 #ffffff1a,0 4px 12px #00000070,0 0 10px rgba(180,50,40,0.3)}
.game-tile-btn.primary:hover, .game-tile-btn.combat-tile:hover{background:linear-gradient(145deg,#4d2b2b,#2c1818);border-color:#c95d4d;box-shadow:inset 0 1px 0 #ffffff25,0 6px 14px #00000080,0 0 14px rgba(220,70,50,0.45)}
.game-tile-btn.locked{opacity:.55;filter:grayscale(.7);cursor:not-allowed}

/* Icon with NO background box: clean, large, transparent graphic */
.game-tile-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;box-shadow:none;flex-shrink:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.65));transition:transform .16s ease}
.game-tile-btn:hover .game-tile-icon{transform:scale(1.08)}
.game-tile-icon img{width:100%;height:100%;object-fit:contain;display:block}
.game-tile-name{font-size:12px;font-weight:600;line-height:1.25;color:#ecdbb5;letter-spacing:.02em;word-break:break-word;max-width:96%}

/* Corner badge in top-right for energy and lock state */
.tile-corner-badge{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;background:rgba(10,16,18,0.88);border:1px solid rgba(212,183,117,0.35);color:#ffd070;line-height:1;z-index:2;box-shadow:0 2px 4px rgba(0,0,0,0.5)}
.tile-corner-badge.locked{color:#ff9282;border-color:rgba(220,80,60,0.5);background:rgba(35,12,12,0.9)}
.tile-corner-badge.unlocked{color:#75c58a;border-color:rgba(100,200,120,0.5);background:rgba(12,30,18,0.9)}
.tile-corner-badge.energy{color:#f6c86a;border-color:rgba(246,200,106,0.45)}

/* Mobile-first Character Creation */
body.char-creation-active .screen {
  grid-template-columns: 1fr !important;
}

body.char-creation-active #characterCard,
body.char-creation-active #actionsCard,
body.char-creation-active .chat {
  display: none !important;
}
body.char-creation-active #mainCard {
  grid-column: 1 / -1 !important;
  max-width: 440px !important;
  margin: 10px auto 30px !important;
  width: 100% !important;
  border-top: 3px solid var(--gold);
}
.char-portrait-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 18px;
}
.char-portrait-frame {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 14px rgba(212, 183, 117, 0.35);
  background: radial-gradient(circle, #253335 0%, #101719 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.char-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.field-group {
  margin-bottom: 14px;
}
.field-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 700;
}
.creation-gender-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.creation-gender-toggle button {
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
}
.creation-gender-toggle button[aria-pressed="true"] {
  background: linear-gradient(#dfc786, #b69753);
  color: #171c19;
  border-color: #edd8a0;
  font-weight: 700;
}
.origins-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.origin-btn {
  padding: 9px 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border: 1px solid #4a4535;
  border-radius: 6px;
  background: #172124;
  color: var(--ink);
  cursor: pointer;
  min-height: 40px;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.origin-btn:hover {
  border-color: var(--gold);
  background: #202b2f;
}
.origin-btn.active {
  border-color: #d4b775;
  background: linear-gradient(145deg, #3a3b2b, #202419);
  color: #ffd070;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 10px rgba(212, 183, 117, 0.35);
  font-weight: 700;
}
.origin-desc-box {
  padding: 10px 12px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid #3c382a;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10px;
}

/* In-game Player Avatar */
.avatar-img-frame{width:76px;height:84px;justify-self:center;border:2px solid #9e8e62;border-radius:6px;overflow:hidden;background:linear-gradient(140deg,#52665c,#1c2c2d);cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.6);padding:0}
.avatar-img-frame img{width:100%;height:100%;object-fit:cover;display:block}
.origin-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);display:block;margin-top:2px}

@media(max-width:480px){.player-card .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.game-tiles-grid{grid-template-columns:repeat(2,1fr)}.game-tile-icon{width:48px;height:48px}.section-heading>button{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Unified Attributes & Point Allocation */
.attr-points-inline-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  font-family: monospace, sans-serif;
  padding: 1px 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #a4b3ac;
  vertical-align: middle;
  margin-left: 4px;
}
.attr-points-inline-badge.has-points {
  background: rgba(212, 183, 117, 0.2);
  border-color: #d4b775;
  color: #ffd070;
  box-shadow: 0 0 8px rgba(212, 183, 117, 0.35);
  font-weight: 700;
}
.attr-reset-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  margin-bottom: 12px;
  background: rgba(18, 27, 29, 0.75);
  border: 1px solid #36423f;
  border-radius: 6px;
  flex-wrap: wrap;
}
.attr-reset-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  flex-wrap: wrap;
}
.attr-reset-label {
  color: #f7edd0;
  font-weight: 600;
}
.attr-btn-reset-mini {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 11px;
  background: #2a1f1e;
  border: 1px solid #703f39;
  color: #fca5a5;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.attr-btn-reset-mini:hover:not(:disabled) {
  background: #3d2422;
  border-color: #994c44;
}
.attr-btn-reset-mini:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.attr-points-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(212, 183, 117, 0.15), rgba(30, 42, 40, 0.6));
  border: 1px solid rgba(212, 183, 117, 0.45);
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.attr-points-banner.empty {
  background: rgba(18, 26, 28, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.attr-points-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.attr-star-badge {
  font-size: 20px;
  color: #ffd070;
  text-shadow: 0 0 10px rgba(255, 208, 112, 0.6);
  line-height: 1;
}
.attr-points-title {
  font-size: 14px;
  color: #f7edd0;
  display: block;
}
.attr-points-sub {
  font-size: 12px;
  color: #c4cdc7;
}
.attr-points-pill {
  background: rgba(212, 183, 117, 0.2);
  border: 1px solid rgba(212, 183, 117, 0.6);
  color: #ffd070;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.attr-actions-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.attr-btn-reset {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
  background: #2a1f1e;
  border-color: #703f39;
  color: #fca5a5;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.attr-btn-reset:hover {
  background: #3d2422;
  border-color: #994c44;
}
.attr-btn-apply {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(212, 183, 117, 0.4);
}
.attr-unified-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .attr-unified-grid {
    grid-template-columns: 1fr;
  }
  .attr-reset-bar {
    padding: 6px 10px;
    gap: 6px;
    margin-bottom: 10px;
  }
  .attr-reset-text {
    font-size: 10.5px;
  }
  .attr-btn-reset-mini {
    min-height: 26px;
    padding: 2px 8px;
    font-size: 10.5px;
  }

  /* Card do Jogador Mobile Condensado */
  .player-card {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  .hero-header {
    gap: 8px !important;
  }
  .hero-avatar-wrap .avatar-img-frame {
    width: 52px !important;
    height: 56px !important;
    border-radius: 6px !important;
  }
  .hero-level-badge {
    font-size: 8.5px !important;
    padding: 0 4px !important;
    bottom: -4px !important;
  }
  .hero-identity {
    gap: 2px !important;
  }
  .hero-name {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }
  .hero-tags {
    gap: 4px !important;
  }
  .hero-origin-tag {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
    line-height: 1.3 !important;
  }
  .hero-location-pill {
    font-size: 9.5px !important;
    padding: 2px 5px !important;
    margin-top: 1px !important;
  }
  .hero-mobile-xp {
    display: block;
    margin-top: 2px !important;
  }
  .hero-mobile-xp-labels {
    font-size: 8px !important;
    margin-bottom: 1px !important;
  }
  .hero-mobile-xp-track {
    height: 3px !important;
  }
  .hero-vitals {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding: 2px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  }
  .hero-vitals .stat {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #121c1e;
    border: 1px solid #2d3a38;
    border-radius: 4px;
    padding: 2px 5px !important;
    min-width: 0;
  }
  .hero-vitals .stat .bar {
    flex: 1;
    min-width: 0;
    height: 5px !important;
  }
  .hero-vitals .stat > span:first-child {
    font-size: 9px !important;
    flex-shrink: 0;
  }
  .hero-vitals .stat > span:last-child {
    font-size: 9px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .hero-vitals .stat.stat-xp,
  .hero-vitals .stat:has(.fill.xp) {
    display: none !important;
  }
  .hero-resources-strip {
    gap: 4px !important;
  }
  .hero-res-chip {
    min-height: 24px !important;
    padding: 2px 4px !important;
    font-size: 9.5px !important;
    border-radius: 4px !important;
    gap: 3px !important;
  }
  .hero-res-chip svg {
    width: 10px !important;
    height: 10px !important;
  }
  .hero-res-chip .res-val {
    font-size: 10px !important;
  }
  .hero-buffs-strip {
    gap: 4px !important;
    padding: 1px 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
  }
  .hero-buff-pill.hero-buff-mini {
    padding: 2px 5px !important;
    font-size: 9.5px !important;
    min-height: 19px !important;
    border-radius: 3px !important;
    gap: 3px !important;
  }
  .hero-buff-pill.hero-buff-mini .buff-icon {
    font-size: 9.5px !important;
  }
  .hero-buff-pill.hero-buff-mini .buff-name {
    display: none !important;
  }
  .hero-buff-pill.hero-buff-mini .buff-bonus {
    font-size: 9px !important;
  }
  .player-card .quick-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-top: 2px !important;
  }
  .player-card .quick-actions .game-tile-btn {
    min-height: 54px !important;
    padding: 4px 1px !important;
    gap: 2px !important;
  }
  .player-card .quick-actions .game-tile-icon {
    width: 24px !important;
    height: 24px !important;
  }
  .player-card .quick-actions .game-tile-name {
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }
}

/* Diário em formato de chat: canais compactos e histórico rolável. */
.journal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.journal-heading .eyebrow { margin-bottom: 2px; }
.journal-heading strong { color: #ecdbb5; font: 18px/1.2 Georgia, 'Times New Roman', serif; }
.journal-expand-button { flex: none; min-height: 30px; padding: 4px 9px; font-size: 10px; }
.journal-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.journal-channel {
  min-width: 0;
  text-align: center;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 10px;
  color: #b9b9aa;
  background: rgba(8, 14, 16, .55);
  box-shadow: none;
}
.journal-channel.active {
  color: #1b211d;
  border-color: #ddc786;
  background: #d4b775;
  font-weight: 700;
}
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 154px;
  max-height: 154px;
  padding: 7px 9px;
  overflow: auto;
  border: 1px solid #343f3d;
  border-radius: 3px;
  background: rgba(8, 14, 16, .62);
  scrollbar-color: #6c674f #11191b;
  scrollbar-width: thin;
}
.chat-log.is-expanded, .journal-expanded .chat-log { height: 360px; max-height: 360px; }
.chat-log .chat-message {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  font-size: 11px;
  line-height: 1.35;
}
.chat-message time { color: #818a82; font-size: 9px; font-variant-numeric: tabular-nums; }
.chat-message strong { color: #d4b775; font-size: 10px; overflow-wrap: anywhere; }
.chat-message > span { grid-column: 2; min-width: 0; color: #d1d5cc; overflow-wrap: anywhere; }
.journal-empty { margin: auto; padding: 14px 8px; color: var(--muted); font-size: 11px; text-align: center; }
@media (max-width: 480px) {
  .journal-heading strong { font-size: 16px; }
  .chat-log { height: 138px; max-height: 138px; padding: 6px 7px; }
  .chat-log.is-expanded, .journal-expanded .chat-log { height: 330px; max-height: 330px; }
  .chat-log .chat-message { grid-template-columns: 34px minmax(0, 1fr); gap: 5px; }
}
.attr-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(145deg, #1d2627, #131c1e);
  border: 1px solid #3d4642;
  border-radius: 8px;
  transition: all 0.15s ease;
  position: relative;
  min-width: 0;
}
.attr-row-card:hover {
  border-color: #5d6a64;
}
.attr-row-card.is-staged {
  border-color: #d4b775;
  background: linear-gradient(145deg, #242e26, #16201b);
  box-shadow: 0 0 12px rgba(212, 183, 117, 0.25);
}
.attr-main-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}
.attr-header-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.attr-icon-badge {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.attr-label-name {
  font-size: 15px;
  font-weight: 700;
  color: #ecdbb5;
  font-family: Georgia, serif;
}
.attr-equip-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(100, 160, 220, 0.15);
  border: 1px solid rgba(100, 160, 220, 0.4);
  color: #93c5fd;
  font-weight: 600;
}
.attr-desc-text {
  font-size: 11px;
  color: #88938c;
  line-height: 1.25;
}
.attr-stepper-col {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 10px;
}
.attr-value-display {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.attr-total-val {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  font-family: monospace, sans-serif;
}
.attr-total-val.highlight-bonus {
  color: #75c58a;
  text-shadow: 0 0 8px rgba(117, 197, 138, 0.5);
}
.attr-staged-delta {
  font-size: 11px;
  color: #75c58a;
  font-weight: 700;
  line-height: 1.2;
}
.attr-base-detail {
  font-size: 10px;
  color: #78827c;
  line-height: 1.2;
}
.attr-stepper-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}
.attr-step-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #1e282a;
  border: 1px solid #485450;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.12s ease;
}
.attr-step-btn:hover:not(:disabled) {
  background: #2b393b;
  border-color: var(--gold);
  color: #fff;
  transform: scale(1.05);
}
.attr-step-btn.up:hover:not(:disabled) {
  background: #283e2e;
  border-color: #75c58a;
  color: #75c58a;
}
.attr-step-btn.down:hover:not(:disabled) {
  background: #3e2624;
  border-color: #ef4444;
  color: #fca5a5;
}
.attr-step-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #333d3b;
  background: #151d1e;
  transform: none;
}
.attr-bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 10px;
}

/* Derived Combat Stats (List view inspired by mobile reference) */
.stat-list-card {
  background: #111719;
  border: 1px solid #333d3c;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  margin-bottom: 14px;
}
.stat-category-block {
  padding: 6px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.stat-category-block:last-child {
  border-bottom: none;
}
.stat-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  border-bottom: 1px solid rgba(212, 183, 117, 0.2);
  margin-bottom: 4px;
}
.stat-category-icon {
  font-size: 14px;
}
.stat-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  transition: background 0.12s ease;
}
.stat-list-row:last-child {
  border-bottom: none;
}
.stat-list-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.stat-list-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.stat-icon-frame {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon-frame svg {
  width: 15px;
  height: 15px;
  display: block;
}
.stat-list-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stat-name {
  font-size: 13px;
  font-weight: 600;
  color: #ede2c9;
  line-height: 1.25;
}
.stat-sub {
  font-size: 11px;
  color: #828e88;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-list-val {
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
  font-family: monospace, 'Segoe UI', sans-serif;
  letter-spacing: 0.02em;
  color: #ecdbb5;
  margin-left: 12px;
}
.stat-list-val.staged-improved {
  color: #75c58a;
  text-shadow: 0 0 6px rgba(117, 197, 138, 0.4);
}
@media (max-width: 480px) {
  .attr-points-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .attr-actions-group {
    width: 100%;
    justify-content: flex-end;
  }
  .stat-sub {
    max-width: 180px;
  }
}

/* Hero Card Redesign */
.player-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px !important;
  border-top: 3px solid var(--gold) !important;
}
.hero-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.hero-avatar-wrap .avatar-img-frame {
  width: 66px;
  height: 72px;
  border: 2px solid #9e8e62;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(140deg, #32443d, #142022);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  padding: 0;
  display: block;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.hero-avatar-wrap .avatar-img-frame:hover {
  border-color: var(--gold);
  transform: scale(1.03);
}
.hero-avatar-wrap .avatar-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-level-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: #111718;
  border: 1px solid var(--gold);
  color: #ffd070;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.04em;
  z-index: 2;
}
.hero-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.hero-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.hero-name {
  font: 18px Georgia, serif;
  color: #ecdbb5;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.hero-tags {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-origin-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 700;
  background: rgba(212, 183, 117, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(212, 183, 117, 0.25);
  display: inline-block;
  line-height: 1.4;
}
.hero-location-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #a4b3ac;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2px;
  max-width: 100%;
}
.hero-location-pill .loc-icon {
  flex-shrink: 0;
  color: #7dd3fc;
}
.hero-location-pill.is-traveling {
  border-color: rgba(246, 200, 106, 0.45);
  background: rgba(45, 35, 15, 0.5);
  color: #f6c86a;
}
.hero-location-pill.is-traveling .loc-icon {
  color: #f6c86a;
  animation: heroPulse 1.5s infinite ease-in-out;
}
@keyframes heroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}
#playerLocationStatus {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-mobile-xp {
  display: none;
  margin-top: 3px;
}
.hero-mobile-xp-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8.5px;
  color: var(--gold);
  margin-bottom: 2px;
  font-family: monospace, sans-serif;
  font-weight: 600;
}
.hero-mobile-xp-track {
  width: 100%;
  height: 3px;
  background: #0c1214;
  border: 1px solid #3f3a2c;
  border-radius: 2px;
  overflow: hidden;
}
.hero-mobile-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #b3954a, #ecd497);
  transition: width .3s ease;
}
.hero-vitals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-vitals .stat {
  margin: 3px 0;
}
.hero-vitals .stat > span:first-child {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.hero-vitals .stat:has(.fill.hp) > span:first-child { color: #f87171; }
.hero-vitals .stat:has(.fill.mana) > span:first-child { color: #60a5fa; }
.hero-vitals .stat:has(.fill.xp) > span:first-child { color: #d4b775; }
.hero-vitals .stat > span:last-child {
  font-family: monospace, sans-serif;
  font-size: 11px;
  color: #aeb8b3;
  text-align: right;
  font-weight: 600;
}
.hero-resources-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.hero-res-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  background: #141c1e;
  border: 1px solid #333d3c;
  border-radius: 6px;
  font-size: 11px;
  color: var(--ink);
  min-height: 34px;
  text-align: center;
  text-decoration: none;
}
.hero-res-chip.has-points {
  border-color: #d4b775;
  background: linear-gradient(135deg, #2b2819, #171f1b);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(212, 183, 117, 0.35);
  transition: all 0.15s ease;
}
.hero-res-chip.has-points:hover {
  background: linear-gradient(135deg, #38331d, #1e2a24);
  transform: translateY(-1px);
  border-color: #f7edd0;
}
.hero-res-chip .res-val {
  font-weight: 700;
  font-family: monospace, sans-serif;
}
.hero-res-chip .res-val.highlight {
  color: #ffd070;
}
.hero-res-chip .res-val.muted {
  color: #727e77;
}

/* Base Logged-in Rules */
body.logged-in .masthead {
  display: none !important;
}
body.logged-in main {
  padding-top: 14px;
}

/* Mobile-first: strictly single-column layout by default */
.screen {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}
#characterCard,
#mainCard,
#actionsCard,
.chat {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#characterCard {
  order: 1 !important;
}
#mainCard {
  order: 2 !important;
}
#actionsCard {
  order: 3 !important;
}
.chat {
  order: 4 !important;
}

/* Crystal Currency Chip in Hero Strip */
.hero-res-chip.crystal-chip {
  border-color: #1e3a45;
  background: linear-gradient(135deg, #0e2227, #0a171a);
}
.hero-res-chip.crystal-chip:hover {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

/* Enhanced City / Location Card Display (Base) */
.hero-image {
  position: relative;
  height: 200px;
  min-height: 160px;
  border: 1px solid #665b45;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 16px;
  box-shadow: inset 0 -50px 60px rgba(10, 16, 18, 0.85), 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px;
  box-sizing: border-box;
}
.hero-image.wilderness {
  background-position: center;
}
.hero-image-overlay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  pointer-events: none;
}
.hero-image-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(14, 22, 24, 0.88);
  border: 1px solid #857552;
  border-radius: 4px;
  color: #f1dfaf;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hero-image-level {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(16, 26, 28, 0.88);
  border: 1px solid #4a5c53;
  border-radius: 4px;
  color: #9cdbbf;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.place-image {
  height: 140px;
  margin-bottom: 10px;
}

/* City Artwork in Route Travel Buttons */
.city-thumb-icon {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #756d51;
  background: #0d1417;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}
.city-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.city-route-tile:hover .city-thumb-icon {
  border-color: var(--gold);
  transform: scale(1.05);
}

/* Floating Action Status Toast Notification */
#actionStatus {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 420px;
  min-width: 260px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #2e1614, #1c0e0d);
  border: 1px solid #bf4e3b;
  border-radius: 8px;
  color: #ffded7;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: toastFadeIn 0.25s ease-out;
}
#actionStatus:empty {
  display: none !important;
}
@keyframes toastFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.error-text {
  color: #f87171 !important;
  font-weight: 600;
}

/* DESKTOP LAYOUT (Screen width > 800px) */
@media (min-width: 801px) {
  body.logged-in main {
    width: min(100%, 1600px);
    max-width: 1600px;
    padding: 18px clamp(20px, 2.2vw, 36px) 48px;
  }
  .screen {
    display: grid !important;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
    column-gap: clamp(18px, 2vw, 28px) !important;
    align-items: start !important;
  }
  body.logged-in .game-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
  }
  body.logged-in .game-sidebar,
  body.logged-in .game-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
  }
  body.logged-in .game-column {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .hero-image {
    height: 240px;
  }
}

/* Desktop HD: use the available width for the city and keep its options nearby. */
@media (min-width: 801px) and (max-width: 1399px) {
  body.logged-in main {
    max-width: 1240px;
    padding-inline: 24px;
  }
  .screen {
    grid-template-columns: minmax(280px, 300px) minmax(0, 1fr) !important;
    column-gap: 20px !important;
  }
  body.logged-in .game-sidebar,
  body.logged-in .game-column { gap: 18px; }
  body.logged-in .chat {
    min-height: 220px;
  }
  .hero-image.city-location-hero {
    height: clamp(220px, 24vw, 290px) !important;
  }
  .city-intro {
    padding-inline: 24px;
  }
  .game-tiles-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 12px;
  }
}

/* Wider desktops can give the player panel a compact horizontal identity header. */
@media (min-width: 1400px) {
  body.logged-in .screen {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) !important;
  }
  body.logged-in .chat {
    min-height: 180px;
  }
}

/* TABLET / LARGE MOBILE (max-width: 800px) */
@media (max-width: 800px) {
  main {
    padding: 14px 10px 32px;
  }
  .hero-image {
    height: 200px;
  }
  .game-sidebar,
  .game-column { display: contents; }
  #actionStatus {
    bottom: 14px !important;
    right: 14px !important;
    left: 14px !important;
    max-width: none !important;
  }
}

/* PHONE / SMALL MOBILE (Google Pixel 5: 393px, iPhone: 375-390px, Galaxy: 360-400px) */
@media (max-width: 480px) {
  main {
    padding: 10px 8px 24px;
  }
  .card {
    padding: 14px 10px;
  }
  .hero-image {
    height: 170px;
    margin-bottom: 12px;
    padding: 8px 10px;
  }
  .hero-image-badge {
    font-size: 10px;
    padding: 3px 7px;
  }
  .hero-image-level {
    font-size: 10px;
    padding: 3px 6px;
  }
  .player-card .quick-actions {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .player-card .quick-actions .game-tile-btn {
    min-height: 72px !important;
    padding: 6px 2px !important;
    gap: 4px !important;
  }
  .player-card .quick-actions .game-tile-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .player-card .quick-actions .game-tile-name {
    font-size: 11px !important;
  }
  .hero-resources-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }
  .hero-res-chip {
    padding: 5px 2px !important;
    font-size: 10px !important;
    min-height: 30px !important;
  }
  .hero-res-chip .res-val {
    font-size: 11px !important;
  }
  .game-tiles-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    gap: 6px !important;
  }
  .game-tile-btn {
    min-height: 84px !important;
    padding: 8px 4px 6px !important;
    gap: 4px !important;
  }
  .game-tile-icon {
    width: 38px !important;
    height: 38px !important;
  }
  .game-tile-name {
    font-size: 11px !important;
  }
  .hero-identity .hero-name {
    font-size: 16px;
  }
  .hero-avatar-wrap .avatar-img-frame {
    width: 56px;
    height: 62px;
  }
}

/* ==========================================================================
   GRID BATTLE SYSTEM (MULTI-ENEMY READY)
   ========================================================================== */

body.in-battle #characterCard,
body.in-battle .chat,
body.in-battle #actionsCard {
  display: none !important;
}
body.in-battle .game-sidebar { display: none !important; }
body.in-battle .screen { grid-template-columns: minmax(0, 1fr) !important; }
body.in-battle .game-column { display: block; grid-column: 1 !important; width: 100%; }
body.in-battle #mainCard { grid-column: 1 !important; }
body.char-creation-active .game-sidebar { display: none !important; }

/* Entrada no reino */
body:not(.logged-in):not(.char-creation-active):has(#loginCard:not(.hidden)) main { max-width: none; min-height: 100vh; padding: 0; }
body:not(.logged-in):not(.char-creation-active):has(#loginCard:not(.hidden)) .masthead { position: absolute; z-index: 3; left: max(5vw, 28px); right: max(5vw, 28px); top: 27px; border: 0; margin: 0; }
body:not(.logged-in):not(.char-creation-active):has(#loginCard:not(.hidden)) .brand { text-shadow: 0 2px 16px #000; }
body:not(.logged-in):not(.char-creation-active):has(#loginCard:not(.hidden)) .realm-label { color: #ded3b5; text-shadow: 0 2px 12px #000; }
body:not(.logged-in):not(.char-creation-active):has(#loginCard:not(.hidden)) .screen { display: block !important; }
body:not(.logged-in):not(.char-creation-active):has(#loginCard:not(.hidden)) .game-sidebar,
body:not(.logged-in):not(.char-creation-active):has(#loginCard:not(.hidden)) .game-column { display: none !important; }
.login-stage { min-height: 100vh; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, 440px); align-items: center; gap: clamp(24px, 5vw, 90px); padding: 110px max(5vw, 28px) 64px; overflow: hidden; }
.login-world { position: absolute; inset: 0; z-index: -2; background: url('/assets/frontier-town.png') center 47%/cover no-repeat; }
.login-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,18,20,.67) 0%, rgba(8,18,20,.25) 45%, rgba(7,16,18,.70) 100%),linear-gradient(0deg, rgba(6,13,16,.80), transparent 42%); }
@media(min-width:801px) { .login-world { background-attachment: fixed; } }
.login-story { max-width: 720px; align-self: end; padding-bottom: clamp(30px,8vh,115px); color: #f7efda; text-shadow: 0 2px 24px #000b; }
.login-story .eyebrow { color: #e7cd91; font-size: 12px; letter-spacing: .32em; }
.login-story h1 { font-size: clamp(42px,5vw,78px); line-height: 1.07; letter-spacing: -.035em; max-width: 700px; margin: 13px 0 20px; }
.login-story p { max-width: 490px; font-size: clamp(16px,1.4vw,20px); color: #e3e3d7; }
.login-story-rule { display: inline-block; margin-top: 28px; color: #dfc891; font: 14px Georgia,serif; letter-spacing: .07em; }
.auth-panel { position: relative; width: 100%; padding: 42px clamp(26px,3vw,43px) 34px; color: #eee6d6; background: linear-gradient(145deg,rgba(31,40,38,.97),rgba(13,25,27,.97)); border: 1px solid #89734c; border-top: 3px solid #d7b974; box-shadow: 0 25px 70px #000a,inset 0 1px #fff2; backdrop-filter: blur(14px); }
.auth-panel::after { content: ''; position: absolute; inset: 8px; border: 1px solid #d6bf7d22; pointer-events: none; }
.auth-emblem { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid #ad8f57; border-radius: 50%; color: #ead295; font-size: 30px; box-shadow: 0 0 24px #d3a65633; }
.auth-panel>.eyebrow,.auth-panel>h2,.auth-intro { text-align: center; }
.auth-panel>h2 { color: #f5e9ca; font: 31px Georgia,serif; margin: 6px 0 8px; }
.auth-intro { color: #b9c0b7; font-size: 13px; margin-bottom: 24px; }
.auth-form { display: grid; gap: 6px; position: relative; z-index: 1; }
.auth-form label:not(.auth-consent) { margin: 8px 0 0; color: #d9d3be; font-size: 12px; letter-spacing: .05em; }
.auth-form input:not([type=checkbox]) { background: #0c181b; border-color: #61706b; min-height: 48px; }
.auth-form input:not([type=checkbox]):focus { border-color: #d4b974; }
.auth-submit { width: 100%; min-height: 50px; margin-top: 20px; text-transform: uppercase; letter-spacing: .15em; }
.auth-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; line-height: 1.45; font-size: 12px; color: #c9ccbf; }
.auth-consent input { margin-top: 3px; accent-color: #c6a762; }
.auth-consent a { color: #f1d597; }
.auth-status { min-height: 18px; margin: 12px 0 0; color: #d5c9a7; text-align: center; font-size: 12px; }
.auth-switch { display: flex; justify-content: center; align-items: center; gap: 6px; padding-top: 18px; margin-top: 12px; border-top: 1px solid #c4a96b35; font-size: 12px; color: #bfc4b8; }
.auth-switch button { border: 0; box-shadow: none; padding: 4px 2px; min-height: 28px; background: transparent; color: #e7cb8d; text-decoration: underline; }
.auth-switch button:hover { background: transparent; color: #fff0bc; }
@media(max-width:800px) { .login-stage { grid-template-columns: 1fr; padding: 110px 18px 35px; gap: 24px; } .login-story { align-self: auto; padding: 0; } .login-story h1 { font-size: clamp(38px,9vw,56px); } .login-story p,.login-story-rule { display: none; } .auth-panel { max-width: 490px; margin: 0 auto; } .login-world { background-position: 38% center; } }
body.char-creation-active .game-column { display: contents; }

/* Seleção de personagem: arte completa e escolhas reais de aparência. */
body.char-creation-active .screen { display: grid !important; grid-template-columns: 1fr !important; }
body.char-creation-active #mainCard { width: 100% !important; max-width: 1120px !important; margin: 10px auto 40px !important; padding: 0; background: transparent; border: 0; box-shadow: none; }
.character-creation-shell { color: #e9e6da; }
.creation-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 14px 0 23px; }
.creation-heading h1 { color: #f4e6c3; font: clamp(32px,3.5vw,48px)/1.08 Georgia,serif; margin: 6px 0 9px; }
.creation-heading p { color: #b8c3b8; margin: 0; }
.creation-heading button { flex: none; }
.creation-layout { display: grid; grid-template-columns: minmax(320px, 480px) minmax(0,1fr); gap: clamp(16px,3vw,32px); align-items: start; }
.creation-stage-col { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.creation-gender-bar { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 6px; align-items: center; }
.creation-arrow-btn { min-height: 38px; height: 38px; padding: 0; font-size: 20px; line-height: 1; font-weight: 700; color: #e9cf91; background: #141f21; border: 1px solid #756b4d; display: flex; align-items: center; justify-content: center; }
.creation-gender-bar .creation-gender-toggle { margin: 0; gap: 6px; }
.creation-gender-bar .creation-gender-toggle button { min-height: 38px; padding: 6px 8px; font-size: 12px; }
.creation-preview-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 8px; align-items: stretch; }
.creation-preview { position: relative; overflow: hidden; border: 1px solid #9c8253; border-top: 3px solid #d7b974; background: #151d1c; box-shadow: 0 18px 42px #0007; aspect-ratio: 2/3; min-width: 0; }
.creation-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.creation-preview::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,#0b151ae8); pointer-events: none; }
.creation-preview-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 48px; min-height: 0; padding: 0; border-radius: 4px; border: 1px solid rgba(215, 185, 116, 0.55); background: rgba(12, 20, 22, 0.78); color: #f4e3b2; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.6); }
.creation-preview-nav.prev { left: 8px; }
.creation-preview-nav.next { right: 8px; }
.creation-preview-counter { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 8px; border-radius: 3px; background: rgba(11, 18, 20, 0.82); border: 1px solid rgba(215, 185, 116, 0.4); color: #e9cf91; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.creation-preview-caption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: grid; gap: 3px; text-shadow: 0 2px 12px #000; pointer-events: none; }
.creation-preview-caption span { color: #e7cf91; font-size: 10px; letter-spacing: .23em; font-weight: 700; }
.creation-preview-caption strong { color: #fff3d7; font: clamp(18px,2.4vw,28px) Georgia,serif; overflow-wrap: anywhere; }
.creation-preview-caption small { color: #d7d9cd; font-size: 12px; }
.appearance-options.creation-appearance-rail { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; }
.appearance-option { position: relative; display: flex; align-items: center; justify-content: center; padding: 3px; min-height: 0; background: #121d1f; border: 1px solid #667268; border-radius: 4px; overflow: hidden; }
.appearance-option.active { border-color: #d6b66f; background: linear-gradient(120deg,#383c2d,#1c2a28); box-shadow: inset 0 0 0 1px #d6b66f88, 0 0 10px rgba(214, 182, 111, 0.35); }
.appearance-option img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid #b4a07166; border-radius: 2px; }
.appearance-option small { position: absolute; bottom: 3px; right: 4px; padding: 1px 4px; border-radius: 2px; background: rgba(10, 16, 18, 0.88); color: #e7cf91; font-size: 9px; font-weight: 700; line-height: 1.1; }
.creation-editor { padding: 24px clamp(18px,3vw,32px) 30px; background: linear-gradient(145deg,#26312e,#1b2527); border: 1px solid #65664e; box-shadow: 0 14px 35px #0004; }
.creation-step { display: flex; align-items: center; gap: 14px; margin: 3px 0 18px; border-top: 1px solid #cdb77535; padding-top: 20px; }
.creation-step:first-child { border-top: 0; padding-top: 0; }
.creation-step>span { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid #bd9e62; border-radius: 50%; color: #e9cf91; font: 15px Georgia,serif; }
.creation-step h2 { color: #f1e4c4; font: 24px Georgia,serif; margin: 0 0 2px; }
.creation-step p { color: #aebbb1; font-size: 12px; margin: 0; }
.creation-editor>.field-group { margin-bottom: 24px; }
.creation-editor .field-group input { min-height: 48px; }
.creation-editor .origin-desc-box { margin: 12px 0 0; padding: 15px; }
.creation-editor .origin-desc-box strong { color: #e5cf99; font: 18px Georgia,serif; }
.creation-editor .origin-desc-box p { color: #d5ddd1; font-size: 12px; line-height: 1.5; margin: 6px 0 8px; }
.creation-editor .origin-desc-box small { color: #98cbd3; font-size: 11px; }
.creation-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; margin-top: 23px; padding-inline: 21px; font-size: 15px; letter-spacing: .04em; }
@media(max-width:800px) { .creation-heading { align-items: start; flex-wrap: wrap; } .creation-layout { grid-template-columns: minmax(0,1fr); min-width: 0; } .creation-stage-col { position: relative; top: auto; width: min(100%, 420px); margin: 0 auto; } .creation-editor { min-width: 0; } }
@media(max-width:520px) { body.char-creation-active #mainCard { margin-top: 0 !important; } .creation-heading { padding: 8px 2px 14px; } .creation-heading h1 { font-size: 28px; } .creation-heading p { font-size: 12px; } .creation-heading button { margin-left: auto; font-size: 11px; padding: 6px 8px; min-height: 32px; } .creation-stage-col { width: 100%; max-width: 360px; } .creation-preview-row { grid-template-columns: minmax(0, 1fr) 60px; gap: 6px; } .creation-preview-nav { width: 30px; height: 42px; font-size: 20px; } .creation-preview-caption { left: 12px; right: 12px; bottom: 10px; } .creation-preview-caption strong { font-size: 17px; } .creation-editor { padding: 16px 14px 22px; } }

body.in-battle #mainCard {
  max-width: 580px !important;
  margin: 0 auto 30px !important;
  padding: 16px !important;
  background: linear-gradient(180deg, #1a2327 0%, #101719 100%) !important;
  border: 1px solid #4d4633 !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.battle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.battle-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  color: #d1d5db !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px;
}
.battle-header-btn:hover { background: rgba(255, 255, 255, 0.12) !important; color: #f3f4f6 !important; }

.battle-header-title { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.battle-round-badge { font-size: 13px; font-weight: 700; color: #e5e7eb; letter-spacing: 0.04em; }
.battle-chain-badge { font-size: 10px; color: #d4b775; letter-spacing: 0.02em; }

/* 1. TOP ROW: Player, Vitals, Bag */
.b-top-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.b-player-portrait {
  position: relative;
  width: 76px;
  height: 76px;
  border: 2px solid #d4af37;
  border-radius: 6px;
  background: #1a1a1a;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.b-player-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.b-status-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #451a1a;
  border: 1px solid #f87171;
  border-radius: 12px;
  font-size: 9px;
  font-weight: bold;
  padding: 2px 6px;
  color: #fecaca;
  box-shadow: 0 2px 4px rgba(0,0,0,0.8);
  display: none;
  z-index: 10;
}
.b-status-badge.active { display: block; }

.b-vitals {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.b-vital-bar-wrap {
  position: relative;
  height: 18px;
  background: #0d1316;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

.b-vital-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.b-hp-fill { background: linear-gradient(90deg, #991b1b, #ef4444); }
.b-mp-fill { background: linear-gradient(90deg, #1e3a8a, #3b82f6); }

.b-vital-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.b-last-dmg {
  font-size: 10px;
  color: #a1a1aa;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  font-weight: 600;
}
.b-last-dmg span {
  display: flex;
  justify-content: space-between;
}
.b-dmg-val { color: #f87171; }
.b-heal-val { color: #4ade80; }

.b-bag {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: rgba(0,0,0,0.2);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #333;
}

.b-bag-slot {
  width: 32px;
  height: 32px;
  padding: 0;
  background: linear-gradient(145deg, #1b2326 0%, #101618 100%);
  border: 1px solid #4a5568;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.b-bag-slot:hover:not(:disabled) {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.b-bag-slot:disabled {
  opacity: 0.35;
  filter: grayscale(0.8);
  cursor: not-allowed;
}
.b-bag-slot.empty {
  background: #111;
  border: 1px dashed #444;
  cursor: default;
}
.b-bag-slot.empty:hover { transform: none; border-color: #444; }

.b-potion-icon { width: 18px; height: 18px; }
.b-potion-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8)); }
.b-potion-icon img { width: 100%; height: 100%; object-fit: contain; }
.b-potion-icon img:not([hidden]) { display: block; }
.b-potion-icon > span:not([hidden]) { display: block; width: 100%; height: 100%; }
.b-potion-qty {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 3px;
  background: #0f172a;
  border: 1px solid #64748b;
  border-radius: 3px;
  color: #f8fafc;
}

/* 2. ACTION ROW */
.b-action-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}

.b-action-slot {
  aspect-ratio: 1;
  background: linear-gradient(145deg, #182333 0%, #0d1522 100%);
  border: 1px solid #3b82f6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
  transition: all 0.15s ease;
  padding: 0 !important;
  min-height: 0 !important;
}
.b-action-slot:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #60a5fa;
  box-shadow: 0 0 10px rgba(96,165,250,0.4);
}
.b-action-slot:disabled {
  opacity: 0.4;
  filter: grayscale(1);
  cursor: not-allowed;
  border-color: #444;
  box-shadow: none;
}
.b-action-slot.empty {
  background: rgba(0,0,0,0.2);
  border: 1px dashed #333;
  cursor: default;
  box-shadow: none;
}
.b-action-slot.empty:hover { transform: none; box-shadow: none; border-color: #333; }

.b-skill-icon { 
  width: 100%; 
  height: 100%; 
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)); 
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}
.b-skill-icon svg { width: 65%; height: 65%; }
.b-skill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}
.skill-thumb-box {
  background: radial-gradient(circle, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
  overflow: hidden;
}
.skill-thumb-box .b-skill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}
.skill-thumb-box .b-skill-svg {
  width: 60%;
  height: 60%;
}
.b-skill-mana {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 3px;
  background: #1e3a8a;
  border: 1px solid #3b82f6;
  border-radius: 3px;
  color: #bfdbfe;
}

.b-attack-btn {
  grid-column: span 3;
  background: linear-gradient(180deg, #7f1d1d, #450a0a) !important;
  border: 1.5px solid #ef4444 !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: Georgia, serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6) !important;
  transition: all 0.15s ease;
  min-height: 0 !important;
  padding: 0 !important;
}
.b-attack-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #991b1b, #450a0a) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 0 14px rgba(239,68,68,0.5) !important;
}
.b-attack-icon { width: 20px; height: 20px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.b-attack-icon svg { width: 100%; height: 100%; }

/* 3. ENEMIES GRID */
.b-enemies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.b-enemies-grid.single-enemy {
  grid-template-columns: 1fr;
}

.b-enemy-card {
  position: relative;
  background: radial-gradient(circle at center, #2b1717 0%, #130a0a 100%);
  border: 2px solid #7f1d1d;
  border-radius: 6px;
  height: 110px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.b-enemy-card.stage {
  height: 220px;
  background-size: cover !important;
  background-position: center bottom !important;
  border: 1px solid #5a4b32;
  box-shadow: inset 0 0 35px rgba(0,0,0,0.7), 0 6px 18px rgba(0,0,0,0.6);
}
.b-arena-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, transparent 100%);
  z-index: 2;
}
.b-arena-loc-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #dfc786;
  text-shadow: 0 1px 2px #000;
}
.b-enemy-card.empty {
  background: rgba(0,0,0,0.1);
  border: 1px dashed #333;
  box-shadow: none;
}

.b-enemy-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.b-enemy-img-wrap.monster-display-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.b-enemy-img {
  max-height: 80px;
  max-width: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.8));
}
.b-enemy-card.stage .b-enemy-img {
  max-height: 140px;
  max-width: 140px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.95));
}
/* Calibrated 1:1 Monster Display Layer (from monster_battle_preview.html) */
.b-enemy-card.stage .monster-view-img {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.95));
  transition: opacity 0.08s ease;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

.b-enemy-animated-float { animation: battleMonsterFloat 3.4s ease-in-out infinite; transform-origin: bottom center; }

@keyframes battleMonsterFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-5px) scale(1.02); }
}

/* Flutuação/Respiração suave que preserva estritamente o translate(-50%, -50%) */
.monster-idle-breathing {
  animation: monsterIdleFloat 3.4s ease-in-out infinite !important;
}
@keyframes monsterIdleFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px) scale(1) !important;
  }
  50% {
    transform: translate(-50%, -50%) translateY(-4px) scale(1.015) !important;
  }
}

/* Impacto e tremor no monstro preservando translate(-50%, -50%) */
.monster-view-img.battle-hit-shake {
  animation: monsterHitShakeCenter 0.32s ease-in-out !important;
}
@keyframes monsterHitShakeCenter {
  0% { transform: translate(-50%, -50%) translate(0, 0); filter: brightness(2.2) drop-shadow(0 0 14px rgba(239, 68, 68, 0.95)); }
  20% { transform: translate(-50%, -50%) translate(-8px, 4px) rotate(-3deg); }
  40% { transform: translate(-50%, -50%) translate(7px, -4px) rotate(2.5deg); }
  60% { transform: translate(-50%, -50%) translate(-5px, 2px) rotate(-1deg); }
  80% { transform: translate(-50%, -50%) translate(3px, -1px); }
  100% { transform: translate(-50%, -50%) translate(0, 0); filter: drop-shadow(0 12px 20px rgba(0,0,0,0.95)); }
}

/* Lunge de ataque no monstro preservando translate(-50%, -50%) */
.monster-view-img.monster-attack-lunge {
  animation: monsterAttackLungeCenter 0.58s ease-out !important;
}
@keyframes monsterAttackLungeCenter {
  0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  25% { transform: translate(-50%, -50%) translate(2px, -3px) scale(1.01); }
  50% { transform: translate(-50%, -50%) translate(-4px, -3px) scale(1.03); filter: drop-shadow(0 0 14px rgba(234, 179, 8, 0.8)); }
  70% { transform: translate(-50%, -50%) translate(-2px, -2px) scale(1.02); filter: brightness(1.2) drop-shadow(0 0 14px rgba(234, 179, 8, 0.9)); }
  100% { transform: translate(-50%, -50%) translate(0, 0) scale(1); filter: none; }
}

.b-enemy-name {
  font-size: 10px;
  font-weight: 700;
  background: rgba(0,0,0,0.7);
  padding: 3px 5px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid #7f1d1d;
}

.b-enemy-hp-wrap {
  height: 14px;
  background: #0d1316;
  border-top: 1px solid #7f1d1d;
  position: relative;
}
.b-enemy-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #7f1d1d);
  transition: width 0.3s ease;
}
.b-enemy-hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

/* 4. INITIATIVE ROW */
.b-initiative-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.b-flee-btn {
  width: 44px;
  height: 44px;
  min-height: 44px !important;
  padding: 0 !important;
  background: linear-gradient(145deg, #302318, #1a130c) !important;
  border: 1.5px solid #d97706 !important;
  border-radius: 6px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5) !important;
  transition: all 0.15s ease;
}
.b-flee-btn:hover {
  transform: translateY(-2px);
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245,158,11,0.4) !important;
}
.b-flee-icon { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.b-flee-icon svg { width: 100%; height: 100%; }

.b-queue {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  background: rgba(0,0,0,0.3);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #333;
  overflow-x: auto;
}

.b-queue-item {
  width: 32px;
  height: 32px;
  border: 1.5px solid #555;
  border-radius: 4px;
  background: #111;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.b-queue-item.player { border-color: #d4af37; }
.b-queue-item.enemy { border-color: #ef4444; }
.b-queue-item img { width: 100%; height: 100%; object-fit: cover; }

.b-queue-arrow {
  color: #666;
  font-size: 12px;
}

/* Animations that were preserved */
.battle-floating-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-combat-num {
  position: absolute;
  font-weight: 900;
  font-family: 'Segoe UI', system-ui, sans-serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 4px #000;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.floating-combat-num.normal { color: #ff4d4d; font-size: 24px; animation: floatDmgUp 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }
.floating-combat-num.crit { color: #facc15; font-size: 28px; text-shadow: 0 0 12px rgba(250, 204, 21, 0.8), 0 2px 4px #000; animation: floatCritUp 0.92s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }
.floating-combat-num.heal { color: #4ade80; font-size: 20px; text-shadow: 0 0 10px rgba(74, 222, 128, 0.7); animation: floatDmgUp 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }
.floating-combat-num.miss { color: #94a3b8; font-size: 18px; animation: floatDmgUp 0.75s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }
.floating-combat-num.block { color: #60a5fa; font-size: 18px; animation: floatDmgUp 0.75s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }

@keyframes floatDmgUp {
  0% { opacity: 0; transform: translateY(12px) scale(0.65); }
  18% { opacity: 1; transform: translateY(-8px) scale(1.15); }
  35% { transform: translateY(-16px) scale(1); }
  75% { opacity: 1; transform: translateY(-32px) scale(0.95); }
  100% { opacity: 0; transform: translateY(-46px) scale(0.85); }
}
@keyframes floatCritUp {
  0% { opacity: 0; transform: translateY(12px) scale(0.5); }
  15% { opacity: 1; transform: translateY(-12px) scale(1.4); }
  30% { transform: translateY(-20px) scale(1.15); }
  75% { opacity: 1; transform: translateY(-38px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-56px) scale(0.9); }
}

.battle-hit-shake { animation: battleHitShake 0.32s ease-in-out !important; }
@keyframes battleHitShake {
  0% { transform: translate(0, 0); filter: brightness(2.2) drop-shadow(0 0 14px rgba(239, 68, 68, 0.95)); }
  20% { transform: translate(-8px, 4px) rotate(-3deg); }
  40% { transform: translate(7px, -4px) rotate(2.5deg); }
  60% { transform: translate(-5px, 2px) rotate(-1deg); }
  80% { transform: translate(3px, -1px); }
  100% { transform: translate(0, 0); filter: none; }
}

.player-hit-shake { animation: playerHitShake 0.32s ease-in-out !important; }
@keyframes playerHitShake {
  0% { transform: translate(0, 0); filter: brightness(1.8) drop-shadow(0 0 12px rgba(239, 68, 68, 0.85)); }
  20% { transform: translate(6px, -3px); }
  40% { transform: translate(-6px, 3px); }
  60% { transform: translate(4px, -1px); }
  80% { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); filter: none; }
}

.monster-attack-lunge { animation: monsterAttackLunge 0.58s ease-out !important; }
@keyframes monsterAttackLunge {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(2px, -3px) scale(1.01); }
  50% { transform: translate(-4px, -3px) scale(1.03); filter: drop-shadow(0 0 14px rgba(234, 179, 8, 0.8)); }
  70% { transform: translate(-2px, -2px) scale(1.02); filter: brightness(1.2) drop-shadow(0 0 14px rgba(234, 179, 8, 0.9)); }
  100% { transform: translate(0, 0) scale(1); filter: none; }
}

/* Trava de ações durante a animação de combate */
.b-action-row.battle-busy {
  filter: brightness(0.85);
  transition: filter 0.15s ease;
}
.b-action-row.battle-busy button,
.b-action-row.battle-busy .b-action-slot,
.b-bag.battle-busy .b-bag-slot {
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.b-action-row.battle-busy .b-attack-btn {
  pointer-events: none !important;
  opacity: 0.6 !important;
  background: #252e2c !important;
  border-color: #4a4535 !important;
  box-shadow: none !important;
}

/* Dynamic Monster Attack Layer */
.monster-attack-anim-layer {
  width: 140px;
  height: 140px;
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.95));
}


.log-entry {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
}

.log-entry:last-child {
  border-bottom: none;
}

.log-tag-dmg {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  line-height: 1.2;
}

.log-tag-crit {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 800;
  background: rgba(234, 179, 8, 0.25);
  border: 1px solid rgba(234, 179, 8, 0.6);
  color: #fde047;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.5);
  line-height: 1.2;
}

.log-tag-heal {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
  line-height: 1.2;
}

.log-tag-miss {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #94a3b8;
  line-height: 1.2;
}

.log-tag-block {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #93c5fd;
  line-height: 1.2;
}

.log-tag-skill {
  font-weight: 700;
  color: #c084fc;
}

.log-tag-victory {
  display: block;
  padding: 6px 10px;
  margin: 4px 0;
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.15) 0%, transparent 100%);
  border-left: 3px solid #eab308;
  color: #fef08a;
  font-weight: 700;
}

.log-tag-round {
  font-weight: 800;
  color: var(--gold);
  margin-right: 4px;
}

.log-tag-defeat {
  display: block;
  padding: 6px 10px;
  margin: 4px 0;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.18) 0%, transparent 100%);
  border-left: 3px solid #ef4444;
  color: #fca5a5;
  font-weight: 700;
}

/* Battle Rewards Banner */
.battle-rewards-box {
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(145deg, #1c251f 0%, #111714 100%);
  border: 1px solid #4ade80;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.battle-rewards-box.defeat {
  background: linear-gradient(145deg, #281616 0%, #150d0d 100%);
  border-color: #ef4444;
}

.battle-rewards-title {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fef08a;
}

.battle-rewards-box.defeat .battle-rewards-title {
  color: #fca5a5;
}

.battle-rewards-content {
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.4;
}

/* Responsive adjustments for phones (<= 480px) */
@media (max-width: 480px) {
  body.in-battle #mainCard {
    padding: 10px 8px !important;
  }
  .battle-portrait-box {
    height: 148px;
  }
  .battle-name-text {
    font-size: 12px;
  }
  .battle-bar-container {
    height: 20px;
  }
  .battle-bar-text {
    font-size: 10.5px;
  }
  .battle-stats-card {
    padding: 4px 6px;
    gap: 2.5px;
  }
  .battle-stat-row {
    font-size: 10px;
  }
  .battle-stat-val-wrap {
    font-size: 10px;
  }
  .battle-attack-btn {
    min-height: 46px !important;
    font-size: 15px !important;
  }
  .battle-skill-btn {
    width: 52px;
    height: 52px;
    min-height: 52px !important;
  }
  .battle-skill-icon {
    width: 26px;
    height: 26px;
  }
  .battle-potion-btn,
  .battle-flee-btn {
    width: 46px;
    height: 46px;
    min-height: 46px !important;
  }
}

/* ==========================================================================
   ONGOING UNFINISHED ACTION STYLES (PERSISTENT RESUME)
   ========================================================================== */

.hero-ongoing-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.16s ease;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  max-width: 100%;
}

.hero-ongoing-pill.battle {
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.9) 0%, rgba(127, 29, 29, 0.95) 100%);
  border: 1px solid #ef4444;
  color: #fef2f2;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.hero-ongoing-pill.battle:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
  border-color: #fca5a5;
}

.hero-ongoing-pill.travel {
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.85) 0%, rgba(161, 98, 7, 0.95) 100%);
  border: 1px solid #eab308;
  color: #fefce8;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}

.ongoing-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-block;
  animation: ongoingPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 6px #ffffff;
  flex-shrink: 0;
}

@keyframes ongoingPulse {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

.ongoing-arrow {
  font-size: 10px;
  opacity: 0.8;
}

/* Ongoing Action Resume Banner in Location / Main Card */
.ongoing-resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a1515 0%, #170d0d 100%);
  border: 1.5px solid #ef4444;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(239, 68, 68, 0.25);
  animation: resumeBannerPulse 3s ease-in-out infinite;
}

@keyframes resumeBannerPulse {
  0%, 100% {
    border-color: #ef4444;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(239, 68, 68, 0.2);
  }
  50% {
    border-color: #f87171;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 16px rgba(239, 68, 68, 0.4);
  }
}

.ongoing-resume-banner .resume-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ongoing-resume-banner .resume-icon {
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.ongoing-resume-banner .resume-texts {
  min-width: 0;
}

.ongoing-resume-banner .resume-title {
  font-family: Georgia, serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #fecaca;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ongoing-resume-banner .resume-desc {
  font-size: 11px;
  color: #cbd5e1;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ongoing-resume-btn {
  min-height: 38px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important;
  border: 1px solid #f87171 !important;
  border-radius: 6px !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.16s ease;
  flex-shrink: 0;
}

.ongoing-resume-btn:hover {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55) !important;
  transform: translateY(-1px);
}

.top-line-with-resume {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Establishment & Inn Visual Overhaul */
.establishment-view {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.hero-image.establishment-hero {
  height: 230px !important;
  border: 1px solid #756d51 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.back-nav-btn {
  font-size: 12px !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  background: rgba(18, 26, 28, 0.9) !important;
  border: 1px solid #5a5440 !important;
  color: #dfc786 !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.back-nav-btn:hover {
  border-color: var(--gold) !important;
  background: rgba(30, 42, 45, 0.95) !important;
  color: #fff !important;
}

.inn-rumor-card {
  margin-top: 14px;
  padding: 16px;
  background: linear-gradient(140deg, #151e22, #0e1619);
  border: 1px solid #857552;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Hero Buffs Strip on Character Card */
.hero-buffs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 0;
  margin-top: 2px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.hero-buff-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 11px;
  background: rgba(223, 199, 134, 0.12);
  border: 1px solid rgba(223, 199, 134, 0.4);
  border-radius: 4px;
  color: #efdfb7;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hero-buff-pill:hover {
  background: rgba(223, 199, 134, 0.22);
  border-color: var(--gold);
}

.hero-buff-pill.blessing {
  background: rgba(246, 200, 106, 0.14);
  border-color: rgba(246, 200, 106, 0.45);
  color: #ffd070;
}

.hero-buff-pill .buff-bonus {
  font-weight: 700;
  color: #ffd070;
  font-family: monospace, sans-serif;
}

/* ==========================================================================
   GAME CONFIRM MODAL
   ========================================================================== */
.game-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 16, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 1000;
  animation: modalFadeIn 0.2s ease-out forwards;
}

.game-confirm-card {
  max-width: 420px;
  width: 100%;
  background: linear-gradient(145deg, #242e2b 0%, #161e21 100%);
  border: 1.5px solid #d97706;
  border-radius: 8px;
  padding: 28px 26px 24px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 28px rgba(217, 119, 6, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: modalScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.game-confirm-card.danger-card {
  border-color: #ef4444;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 28px rgba(239, 68, 68, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-confirm-icon-wrap {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  background: radial-gradient(circle, #3d2f16 0%, #191610 100%);
  border: 2px solid #f59e0b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.35);
}

.game-confirm-card.danger-card .game-confirm-icon-wrap {
  background: radial-gradient(circle, #451b1b 0%, #1a0f0f 100%);
  border-color: #ef4444;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.35);
}

.game-confirm-icon-wrap img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.game-confirm-icon-wrap span.emoji-icon {
  font-size: 26px;
  line-height: 1;
}

.game-confirm-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 21px;
  color: #efdfb7;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.game-confirm-card.danger-card .game-confirm-title {
  color: #fca5a5;
}

.game-confirm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.game-confirm-badge.gold {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fcd34d;
}

.game-confirm-badge.energy {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.45);
  color: #93c5fd;
}

.game-confirm-badge.info {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #d8b4fe;
}

.game-confirm-message {
  font-size: 13.5px;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0 0 22px;
}

.game-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.game-confirm-btn-cancel {
  flex: 1;
  min-height: 42px;
  background: #202a29;
  border: 1px solid #475569;
  color: #cbd5e1;
  font-weight: 600;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.game-confirm-btn-cancel:hover {
  background: #283634;
  border-color: #64748b;
  color: #ffffff;
}

.game-confirm-btn-confirm {
  flex: 1;
  min-height: 42px;
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%);
  border: 1px solid #f59e0b;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35);
  transition: all 0.15s ease;
}

.game-confirm-btn-confirm:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  box-shadow: 0 3px 14px rgba(245, 158, 11, 0.5);
}

.game-confirm-btn-confirm.danger {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  border-color: #ef4444;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35);
}

.game-confirm-btn-confirm.danger:hover {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 3px 14px rgba(239, 68, 68, 0.5);
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Catalog Card Equipment Thumbnails */
.catalog-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 10px 0;
}
.catalog-card-header-info {
  flex: 1;
  min-width: 0;
}
.catalog-card-header-info h3 {
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.25;
}
.catalog-thumb-box {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, #2b3a3c, #131d1e);
  border: 1px solid #7d846b;
  border-radius: 4px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.25);
}
.catalog-thumb-box img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
  transition: transform 0.15s ease;
}
.catalog-thumb-box:hover img {
  transform: scale(1.1);
}

/* ==========================================================================
   Guild Ranks & City Leaderboards (Temática Medieval Sóbria)
   ========================================================================== */
.guild-rank-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

/* Tabs */
.guild-rank-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 4px;
}

.guild-rank-tab-btn {
  font-size: 12px !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  background: linear-gradient(#27322f, #1a2322) !important;
  color: var(--muted) !important;
  cursor: pointer;
  box-shadow: none !important;
}

.guild-rank-tab-btn:hover {
  background: #2b3935 !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}

.guild-rank-tab-btn.active {
  background: linear-gradient(#3a3626, #242217) !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  font-weight: 700 !important;
}

/* Ranks Cards */
.guild-rank-card {
  padding: 16px 18px;
  background: linear-gradient(135deg, #222b28 0%, #172021 100%);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.guild-rank-card.current-rank {
  border-color: var(--gold);
  background: linear-gradient(135deg, #262c26 0%, #1a2220 100%);
  border-left: 3px solid var(--gold);
}

.guild-rank-card.next-rank {
  border-color: var(--line);
  background: linear-gradient(135deg, #1d2526 0%, #141b1d 100%);
  border-left: 3px solid #6c7468;
}

.guild-rank-card.max-rank {
  border-color: var(--gold);
  text-align: center;
  padding: 20px;
}

.guild-rank-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.guild-rank-title {
  font-family: Georgia, serif;
  font-size: 18px;
  color: #ecdbb5;
  margin: 2px 0 4px 0;
}

.guild-rank-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.guild-rank-badge.badge-current {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 183, 117, 0.1);
}

.guild-rank-badge.badge-next {
  border-color: #7d8574;
  color: var(--muted);
  background: rgba(125, 133, 116, 0.1);
}

.guild-rank-badge.badge-unlocked {
  border-color: #617b5c;
  color: #9ac292;
}

.guild-rank-badge.badge-locked {
  border-color: #383e38;
  color: #747970;
}

/* Perks List */
.guild-perks-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.guild-perks-list li {
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.45;
}

.guild-perks-list li .perk-bullet {
  color: var(--gold);
  font-size: 12px;
  flex-shrink: 0;
}

.guild-perks-list.upcoming li {
  color: var(--muted);
}

.guild-perks-list.upcoming li .perk-bullet {
  color: var(--muted);
}

/* Progression Bar Block */
.guild-rank-progression-bar-box {
  background: #141c1e;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guild-rank-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.guild-rank-progress-fill {
  width: 100%;
  height: 8px;
  background: #0e1418;
  border: 1px solid #080e12;
  border-radius: 3px;
  overflow: hidden;
}

.guild-rank-progress-active {
  height: 100%;
  background: linear-gradient(90deg, #7b7047, #dcc28a);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* All Ranks Dropdown */
.guild-all-ranks-details {
  background: #141c1e;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 14px;
  margin-top: 4px;
}

.guild-all-ranks-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.guild-all-ranks-details summary:hover {
  color: #ebd698;
}

.guild-all-ranks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.guild-all-rank-item {
  background: #192224;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 12px;
}

.guild-all-rank-item.is-current {
  border-color: var(--gold);
  background: #202b28;
}

.guild-all-rank-item.is-locked {
  opacity: 0.7;
}

/* Leaderboard */
.guild-leaderboard-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 6px 12px;
  background: #172224;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
}

.guild-leaderboard-subnav {
  display: flex;
  gap: 6px;
  margin: 4px 0;
}

.guild-subnav-btn {
  background: #151e20 !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  padding: 6px 12px !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  cursor: pointer;
}

.guild-subnav-btn:hover {
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}

.guild-subnav-btn.active {
  background: #2b271b !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  font-weight: 700 !important;
}

.guild-leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #141c1e;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.guild-leaderboard-table th {
  background: #1a2426;
  color: var(--muted);
  font-size: 11px;
  text-align: left;
  padding: 9px 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
}

.guild-leaderboard-table td {
  padding: 9px 12px;
  color: var(--ink);
  border-bottom: 1px solid #222c2e;
}

.guild-leaderboard-table tr:last-child td {
  border-bottom: none;
}

.guild-leaderboard-table tr.is-player-row {
  background: #272d24 !important;
}

.guild-leaderboard-table tr.is-player-row td {
  color: var(--gold);
  font-weight: 600;
}

/* ==========================================================================
   TRAVEL ARRIVAL EVENTS MODAL
   ========================================================================== */
.travel-event-backdrop {
  z-index: 1100;
}

.travel-event-card {
  max-width: 480px;
  width: 100%;
  background: linear-gradient(155deg, #1c2627 0%, #12191b 100%);
  border: 1.5px solid #d97706;
  border-radius: 10px;
  padding: 24px 24px 20px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(217, 119, 6, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: modalScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  color: #e2e8f0;
}

.travel-event-card.danger {
  border-color: #ef4444;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, #281919 0%, #171112 100%);
}

.travel-event-card.warning {
  border-color: #f59e0b;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.travel-event-card.blessing {
  border-color: #38bdf8;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, #13242d 0%, #0d171e 100%);
}

.travel-event-card.treasure {
  border-color: #10b981;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, #13271f 0%, #0c1a15 100%);
}

.travel-event-card.caravan {
  border-color: #eab308;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(234, 179, 8, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, #242217 0%, #15140e 100%);
}

.travel-event-card.mud {
  border-color: #b45309;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(180, 83, 9, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, #281d15 0%, #17110c 100%);
}

.travel-event-card.thief {
  border-color: #a855f7;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(168, 85, 247, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, #23162d 0%, #150c1c 100%);
}

.travel-event-card.weather {
  border-color: #64748b;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(148, 163, 184, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, #18222b 0%, #0e151b 100%);
}

.travel-event-card.healer {
  border-color: #22c55e;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, #132a1e 0%, #0b1a12 100%);
}

.travel-event-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.travel-event-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.travel-event-tag.danger {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.travel-event-tag.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.travel-event-tag.blessing {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.travel-event-tag.treasure {
  background: rgba(16, 185, 129, 0.2);
  color: #86efac;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.travel-event-tag.caravan {
  background: rgba(234, 179, 8, 0.2);
  color: #fef08a;
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.travel-event-tag.mud {
  background: rgba(180, 83, 9, 0.2);
  color: #fed7aa;
  border: 1px solid rgba(180, 83, 9, 0.4);
}

.travel-event-tag.thief {
  background: rgba(168, 85, 247, 0.2);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.travel-event-tag.weather {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.travel-event-tag.healer {
  background: rgba(34, 197, 94, 0.2);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.travel-event-cap-badge {
  font-size: 11px;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.travel-event-cap-badge strong {
  color: #f8fafc;
}

.travel-event-icon-box {
  width: 68px;
  height: 68px;
  margin: 8px auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #2d3748 0%, #1a202c 100%);
  border: 2px solid #4a5568;
}

.travel-event-icon-box.danger {
  background: radial-gradient(circle, #4c1d1d 0%, #200f0f 100%);
  border-color: #ef4444;
}

.travel-event-icon-box.warning {
  background: radial-gradient(circle, #452b14 0%, #1f140a 100%);
  border-color: #f59e0b;
}

.travel-event-icon-box.blessing {
  background: radial-gradient(circle, #16364a 0%, #0a1b24 100%);
  border-color: #38bdf8;
}

.travel-event-icon-box.treasure {
  background: radial-gradient(circle, #143d2c 0%, #091e16 100%);
  border-color: #10b981;
}

.travel-event-icon-box.caravan {
  background: radial-gradient(circle, #3d3514 0%, #1a1708 100%);
  border-color: #eab308;
}

.travel-event-icon-box.mud {
  background: radial-gradient(circle, #3a2717 0%, #1b120a 100%);
  border-color: #b45309;
}

.travel-event-icon-box.thief {
  background: radial-gradient(circle, #381a4b 0%, #190a23 100%);
  border-color: #a855f7;
}

.travel-event-icon-box.weather {
  background: radial-gradient(circle, #253342 0%, #111922 100%);
  border-color: #64748b;
}

.travel-event-icon-box.healer {
  background: radial-gradient(circle, #143d24 0%, #081d11 100%);
  border-color: #22c55e;
}

.travel-event-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.travel-event-title {
  font-size: 19px;
  font-family: Georgia, serif;
  color: #f8fafc;
  margin: 0 0 8px;
  text-align: center;
}

.travel-event-desc {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0 0 16px;
  text-align: center;
}

.travel-event-alert-box {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #fca5a5;
  text-align: left;
  margin-bottom: 16px;
  line-height: 1.45;
}

.travel-event-alert-box .muted-note {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #fecaca;
  opacity: 0.9;
}

.travel-event-pills-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.travel-event-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.travel-event-pill.loss {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.travel-event-pill.gain {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
}

.travel-event-pill.gain.energy {
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
}

.travel-event-pill.gain.item {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fde047;
}

.travel-event-note {
  font-size: 11.5px;
  color: #94a3b8;
  font-style: italic;
  margin: 0 0 16px;
  text-align: center;
}

.travel-event-footer {
  margin-top: 6px;
}

.travel-event-actions-dual {
  display: flex;
  gap: 10px;
}

.travel-event-actions-dual .travel-event-btn {
  flex: 1;
}

.travel-event-actions-single .travel-event-btn {
  width: 100%;
}

.travel-event-btn {
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid transparent;
}

.travel-event-btn:disabled,
.travel-event-btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.travel-event-btn.btn-danger {
  background: linear-gradient(180deg, #dc2626, #991b1b);
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
}

.travel-event-btn.btn-danger:hover {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.5);
}

.travel-event-btn.btn-subtle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
}

.travel-event-btn.btn-subtle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.travel-event-btn.btn-primary {
  background: linear-gradient(180deg, #d97706, #b45309);
  border-color: #f59e0b;
  color: #171c19;
}

.travel-event-btn.btn-primary:hover {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}

.travel-event-btn.btn-blessing {
  background: linear-gradient(180deg, #0284c7, #0369a1);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.3);
}

.travel-event-btn.btn-blessing:hover {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.5);
}

.travel-event-btn.btn-treasure {
  background: linear-gradient(180deg, #059669, #047857);
  border-color: #10b981;
  color: #fff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

.travel-event-btn.btn-treasure:hover {
  background: linear-gradient(180deg, #10b981, #059669);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
}

.travel-event-btn.btn-caravan {
  background: linear-gradient(180deg, #ca8a04, #a16207);
  border-color: #eab308;
  color: #171c19;
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.3);
}

.travel-event-btn.btn-caravan:hover {
  background: linear-gradient(180deg, #eab308, #ca8a04);
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.5);
}

.travel-event-btn.btn-healer {
  background: linear-gradient(180deg, #16a34a, #15803d);
  border-color: #22c55e;
  color: #fff;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
}

.travel-event-btn.btn-healer:hover {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.5);
}

.travel-event-btn.btn-weather {
  background: linear-gradient(180deg, #475569, #334155);
  border-color: #64748b;
  color: #f1f5f9;
  box-shadow: 0 2px 10px rgba(100, 116, 139, 0.3);
}

.travel-event-btn.btn-weather:hover {
  background: linear-gradient(180deg, #64748b, #475569);
  box-shadow: 0 4px 14px rgba(100, 116, 139, 0.5);
}

/* ==========================================================================
   STABLES UI/UX REDESIGN (ESTABELECIMENTO PADRONIZADO SEM POPUPS)
   ========================================================================== */

.stables-hero-mount-card {
  margin: 12px 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(22, 34, 38, 0.95) 0%, rgba(14, 22, 25, 0.98) 100%);
  border: 1px solid #3d5459;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.stables-hero-mount-card.unequipped {
  background: linear-gradient(180deg, rgba(25, 30, 32, 0.9) 0%, rgba(16, 20, 22, 0.95) 100%);
  border: 1px dashed #4b5563;
}

.stables-mount-header {
  display: flex;
  gap: 14px;
  align-items: center;
}

.stables-mount-avatar {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  border: 2px solid #5a7d75;
  background: #0b1316;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.stables-mount-avatar img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.stables-mount-avatar.unequipped {
  border-color: #6b7280;
  opacity: 0.8;
}

.stables-mount-title-block {
  flex: 1;
}

.stables-mount-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f59e0b;
  margin-bottom: 2px;
}

.stables-mount-tag.unequipped {
  color: #94a3b8;
}

.stables-mount-name {
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  font-family: 'Cinzel', serif, Georgia, 'Times New Roman';
  line-height: 1.2;
}

.stables-mount-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
}

.stables-unequipped-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 10px 0 0;
  line-height: 1.5;
}

.stables-progress-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 10px;
}

@media (max-width: 640px) {
  .stables-progress-bars {
    grid-template-columns: 1fr;
  }
}

.stables-bar-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.stables-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 5px;
}

.stables-bar-track {
  height: 7px;
  background: #152024;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.stables-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.stables-bar-fill.xp {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.stables-bar-fill.good {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.stables-bar-fill.warning {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}

.stables-bar-fill.starving {
  background: linear-gradient(90deg, #b91c1c, #f87171);
}

.hunger-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.hunger-tag.good {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.hunger-tag.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.hunger-tag.starving {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.5);
  animation: pulseStarving 1.8s infinite;
}

@keyframes pulseStarving {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.stables-mount-stats-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.stables-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 19, 22, 0.85);
  border: 1px solid #2a3c40;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: #cbd5e1;
}

.stables-stat-pill .stat-icon {
  font-size: 13px;
}

.stables-stat-pill .stat-label {
  color: #8b9994;
}

.stables-stat-pill .stat-val {
  color: #f1f5f9;
}

.stables-quote-box {
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(14, 22, 25, 0.65);
  border-radius: 6px;
  border: 1px solid #233134;
  text-align: center;
}

.stables-quote-text {
  font-size: 11px;
  font-style: italic;
  color: #8a9992;
  margin: 0;
  font-family: Georgia, serif;
  line-height: 1.45;
}

/* Feed Page Styles */
.stables-feed-status-banner {
  background: #141e22;
  border: 1px solid #2c4045;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0 16px;
}

.stables-feed-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #131c20;
  border: 1px solid #26383c;
  border-radius: 6px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}

.stables-feed-card:hover {
  border-color: #3b545a;
}

.stables-feed-info {
  display: flex;
  gap: 12px;
  align-items: center;
}

.stables-feed-avatar {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #0c1417;
  border: 1px solid #364d52;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stables-feed-avatar img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.stables-feed-name {
  font-weight: 700;
  color: #f1f5f9;
  font-size: 14px;
}

.stables-feed-effects {
  display: flex;
  gap: 8px;
  margin: 3px 0;
  font-size: 11px;
}

.feed-effect {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.feed-effect.hunger {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.feed-effect.xp {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.feed-effect.buff {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.stables-feed-owned {
  font-size: 11px;
  color: #8da09a;
}

.stables-no-feed-alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  margin: 14px 0;
  color: #cbd5e1;
}

.stables-no-feed-alert .no-feed-icon {
  font-size: 24px;
  line-height: 1;
}

.stables-no-feed-alert strong {
  color: #fcd34d;
}

.btn-go-market {
  margin-top: 8px;
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #0c1214;
  font-weight: 700;
  font-size: 12px;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.15s;
}

.btn-go-market:hover {
  filter: brightness(1.15);
}

/* Swap Page Styles */
.stables-lock-cargo-alert {
  padding: 12px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 6px;
  margin-bottom: 14px;
  color: #fca5a5;
  font-size: 12px;
  line-height: 1.5;
}

.stables-mount-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #131c20;
  border: 1px solid #25373b;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}

.stables-mount-item-row.current-active {
  border-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, rgba(19, 28, 32, 0.95) 100%);
}

.stables-mount-item-info {
  display: flex;
  gap: 12px;
  align-items: center;
}

.stables-mount-item-stats {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
}

.badge-active-mount {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #ffd070;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.badge-owned {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #34d399;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.badge-locked {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(100, 116, 139, 0.2);
  border: 1px solid #64748b;
  color: #94a3b8;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* Buy Page Styles */
.stables-buy-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stables-buy-card {
  padding: 14px 16px;
  background: #141e22;
  border: 1px solid #2d4247;
  border-radius: 6px;
  transition: border-color 0.2s;
}

.stables-buy-card.owned {
  border-color: #1a4d3e;
  opacity: 0.85;
}

.stables-buy-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.stables-buy-title-block {
  flex: 1;
}

.stables-buy-name {
  font-size: 16px;
  color: #f1f5f9;
}

.stables-buy-price {
  font-size: 13px;
  font-weight: 700;
  color: #ffd070;
}

.stables-buy-desc {
  font-size: 12px;
  color: #8da09a;
  margin: 4px 0 0;
  line-height: 1.4;
}

.stables-buy-stats-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.stables-buy-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-stables-action {
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.btn-stables-action.primary {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: #34d399;
  color: #fff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.btn-stables-action.primary:hover {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}

.btn-stables-action.disabled {
  background: #1e292d;
  border-color: #334449;
  color: #64748b;
  cursor: not-allowed;
}

/* ====================================================
   Cards de Instruções / Regras em Estabelecimentos
   Padrão clean, compacto, sóbrio e recolhível (dropdown)
   ==================================================== */
#actionsCard:has(> .instruction-card),
#actionsCard:has(> details.instruction-card),
#actionsCard.instruction-mode {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Hierarquia comum para informações secundárias do lugar e regras das ações. */
.place-description {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.place-flavor-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(14, 22, 25, 0.6), rgba(10, 16, 19, 0.95));
  border: 1px solid #364347;
  border-radius: 4px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
}
.place-flavor-note p {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font: italic 12px/1.55 Georgia, 'Times New Roman', serif;
}
.hero-image.establishment-hero {
  border: 0;
  border-radius: 0;
  margin: -16px -16px 0;
  width: calc(100% + 32px);
  height: 225px !important;
  box-shadow: inset 0 -72px 65px rgba(7, 12, 13, .92);
}
#mainCard.establishment-page {
  padding: 0 !important;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#mainCard.city-page {
  padding: 0 !important;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.hero-image.city-location-hero {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  height: 270px !important;
  margin: -16px -16px 0;
  width: calc(100% + 32px);
  padding: 20px 24px;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -80px 70px rgba(4, 9, 10, .72);
}
.city-hero-heading { min-width: 0; max-width: calc(100% - 90px); }
.hero-image.city-location-hero .hero-image-overlay {
  position: absolute;
  right: 26px;
  bottom: 22px;
  width: auto;
  justify-content: flex-end;
}
.city-hero-kicker {
  display: block;
  margin-bottom: 5px;
  color: #d3bd82;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 2px 5px #000;
}
.city-hero-heading h2 {
  margin: 0;
  color: #f2e5c3;
  font: 600 clamp(26px, 5vw, 38px)/1.12 Georgia, 'Times New Roman', serif;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .9);
}
.city-intro {
  margin: 0 -16px 4px;
  padding: 12px 24px 16px;
  background: linear-gradient(180deg, #111a1b, #1a2324);
  border-bottom: 1px solid #56503d;
}
.city-region-line {
  margin: 0 0 4px;
  color: #d4b775;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.city-description {
  margin: 0;
  color: #d0c9b6;
  font: 13px/1.5 Georgia, 'Times New Roman', serif;
}
.place-intro {
  margin: 0 -16px 4px;
  padding: 10px 24px 14px;
  background: linear-gradient(180deg, #080d0e, #101719);
  border-bottom: 1px solid #4a4637;
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, .5);
}
.place-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.place-title-row h2 {
  margin: 0;
  color: #ecdbb5;
  font-size: 20px;
}
.place-title-row .player-page-city {
  margin-top: 0;
}
.place-safety-label {
  flex: none;
  color: #9cdbbf;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.place-intro .place-flavor-note {
  margin-top: 7px;
  padding: 7px 4px 0;
  border: 0;
  border-top: 1px solid rgba(190, 165, 106, .28);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.place-intro .place-flavor-note p {
  color: #b5a67d;
  font: italic 12px/1.45 Georgia, 'Times New Roman', serif;
  letter-spacing: .025em;
}
.establishment-section-card {
  margin: 12px 0 0;
}
.establishment-services-card .top-line { margin-bottom: 8px; }
.establishment-info-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.establishment-info-card .instruction-card { margin: 0; }
body.logged-in #adventureJournalCard.establishment-journal { grid-column: auto !important; grid-row: auto !important; }
@media (max-width: 480px) {
  .hero-image.establishment-hero {
    margin: -16px -16px 0;
    width: calc(100% + 32px);
    height: 205px !important;
  }
  .place-intro { padding: 9px 20px 12px; }
  body.logged-in #adventureJournalCard.establishment-journal { grid-column: 1 !important; grid-row: auto !important; }
}

details.instruction-card,
.instruction-card {
  display: block;
  padding: 8px 12px;
  background: #111b1e;
  border: 1px solid #364347;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.35);
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

details.instruction-card:hover {
  border-color: #4a5a5e;
}

.instruction-card summary,
.instruction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 0;
  margin: 0;
  outline: none;
}

.instruction-card summary::-webkit-details-marker {
  display: none;
}

.instruction-card summary::marker {
  display: none;
}

.instruction-title,
.instruction-summary-title {
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  color: #ecdbb5;
  letter-spacing: 0.02em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.instruction-card summary:hover .instruction-title,
.instruction-card summary:hover .instruction-summary-title {
  color: #ffffff;
}

.instruction-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.instruction-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8da09a;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 600;
}

.instruction-toggle-icon,
.instruction-dropdown-arrow {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.15s ease;
  display: inline-block;
  line-height: 1;
}

.instruction-card summary:hover .instruction-toggle-icon,
.instruction-card summary:hover .instruction-dropdown-arrow {
  color: #ffd070;
}

details.instruction-card[open] summary {
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

details.instruction-card[open] .instruction-toggle-icon,
details.instruction-card[open] .instruction-dropdown-arrow {
  transform: rotate(180deg);
}

.instruction-body,
.instruction-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.instruction-card p,
.instruction-desc {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.45;
}

.instruction-card p strong,
.instruction-desc strong {
  color: #e2e8f0;
  font-weight: 600;
}
.instruction-card,
.instruction-card-body,
.instruction-body {
  font-family: 'Segoe UI', Arial, sans-serif;
}
.instruction-card .instruction-desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.instruction-card .instruction-desc strong {
  color: var(--ink);
}
.instruction-card .bullet-dot {
  color: var(--gold);
}
.player-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 14px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.player-page-heading-copy { min-width: 0; }
.player-page-heading-copy .eyebrow { margin-bottom: 4px; }
.player-page-heading-copy h2 {
  margin: 0;
  color: #ecdbb5;
  font: 26px/1.2 Georgia, 'Times New Roman', serif;
}
.player-page-heading-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.player-page-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  flex-wrap: nowrap;
}
.player-page-city,
.player-page-back {
  flex: none;
  min-height: 34px;
  margin-top: 2px;
  padding: 5px 11px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #f0dfb5;
  background: #141d1f;
  border: 1px solid #857552;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.player-page-city:hover,
.player-page-back:hover {
  background: #202b2e;
  border-color: var(--gold);
  color: #ffffff;
  transform: none;
  box-shadow: none;
}
.player-page-city:active,
.player-page-back:active {
  background: #0d1416;
  transform: none;
}
.section-heading .player-page-header-actions {
  flex-shrink: 0;
}

/* Ficha do personagem */
.profile-sheet { display: grid; gap: 16px; }
.profile-hero { display: grid; grid-template-columns: minmax(210px, 35%) minmax(0, 1fr); min-height: 380px; overflow: hidden; border: 1px solid #806d4a; background: radial-gradient(circle at 45% 15%, #35443c, #152023 75%); box-shadow: 0 18px 34px #0005, inset 0 1px #fff2; }
.profile-hero-art { position: relative; min-height: 380px; background: linear-gradient(180deg, #10202222 30%, #091416b8 100%), var(--profile-scene) center/cover no-repeat; overflow: hidden; }
.profile-hero-art::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, #0c171be8); pointer-events: none; }
.profile-hero-art img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 18px #0009); }
.profile-art-stamp { position: absolute; z-index: 1; bottom: 14px; left: 0; right: 0; color: #e2cb91; font-size: 9px; font-weight: 700; letter-spacing: .24em; text-align: center; text-shadow: 0 2px 8px #000; }
.profile-hero-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(20px, 3vw, 38px); border-left: 1px solid #8e78513d; background: linear-gradient(115deg, #202b29ed, #132024f5); }
.profile-kicker { color: #d9c28b; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.profile-kicker span { padding-inline: 4px; color: #8e927e; }
.profile-hero-info h3 { margin: 11px 0 14px; color: #f4e6c6; font: clamp(30px, 3vw, 45px)/1.07 Georgia, serif; overflow-wrap: anywhere; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-tags span { padding: 5px 9px; border: 1px solid #a28e5b77; border-radius: 2px; color: #f0dca9; background: #a78c4c18; font-size: 11px; font-weight: 600; }
.profile-origin-story { max-width: 54ch; margin: 19px 0 21px; color: #c4cec2; font: italic 14px/1.55 Georgia, serif; }
.profile-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; padding: 16px 0; margin-bottom: 12px; border-top: 1px solid #d4b77535; border-bottom: 1px solid #d4b77535; }
.profile-identity-grid div, .profile-facts div { min-width: 0; }
.profile-identity-grid small, .profile-facts small { display: block; color: #aeb9ae; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.profile-identity-grid strong { display: block; margin-top: 4px; color: #f1e6cb; font: 16px Georgia, serif; overflow-wrap: anywhere; }
.profile-meter { margin-top: 12px; }
.profile-meter-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; color: #d6decf; font-size: 12px; }
.profile-meter-label strong { color: #f2e0b2; font: 600 11px 'Segoe UI', Arial, sans-serif; white-space: nowrap; }
.profile-meter-track { height: 8px; overflow: hidden; border: 1px solid #080e12; border-radius: 5px; background: #0d171a; }
.profile-meter-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f7a46, #e0c883); }
.profile-meter-hp i { background: linear-gradient(90deg, #8c3839, #db7968); }
.profile-meter-mana i { background: linear-gradient(90deg, #315f83, #6ac1cb); }
.profile-meter-energy i { background: linear-gradient(90deg, #7a7940, #c6d276); }
.profile-meter-fame i { background: linear-gradient(90deg, #986b31, #e7b861); }
.profile-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-panel { min-width: 0; padding: 22px; border: 1px solid #60644d; border-top: 2px solid #aa935e; background: linear-gradient(145deg, #26312d, #192426); }
.profile-panel-heading { margin-bottom: 18px; }
.profile-panel-heading .eyebrow { margin-bottom: 5px; }
.profile-panel-heading h3 { margin: 0; color: #f0dfb9; font: 22px/1.2 Georgia, serif; }
.profile-panel .profile-meter + .profile-meter { margin-top: 17px; }
.profile-rank { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 5px 0 12px; }
.profile-rank span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 10px; border: 1px solid #c4a662; color: #ffe1a1; background: #a881351f; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.profile-rank strong { color: #f8e6be; font: 23px Georgia, serif; }
.profile-prestige p { margin: 0 0 20px; color: #b9c5b8; font-size: 12px; }
.profile-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profile-facts div { padding: 13px; border: 1px solid #86765355; background: #111d1e8c; }
.profile-facts strong { display: block; margin-top: 5px; color: #f1dda4; font: 21px Georgia, serif; }
.profile-effects { margin-top: 21px; padding-top: 16px; border-top: 1px solid #d4b77535; }
.profile-effects > strong { display: block; margin-bottom: 9px; color: #f0dfb9; font: 17px Georgia, serif; }
.profile-effect { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ffffff12; }
.profile-effect-icon { flex: none; color: #e4c779; font-size: 19px; line-height: 1.1; }
.profile-effect div { flex: 1; min-width: 0; }
.profile-effect div strong { display: block; color: #e7d6aa; font-size: 13px; }
.profile-effect p, .profile-empty { margin: 3px 0 0; color: #b1bdb3; font-size: 12px; line-height: 1.45; }
.profile-effect small { flex: none; color: #d8c28b; font-size: 10px; white-space: nowrap; }
.profile-actions-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 14px; }
.profile-actions-heading .eyebrow { margin-bottom: 2px; }
.profile-actions-heading strong { color: #f0dfb9; font: 20px Georgia, serif; }
.profile-actions-heading > span { color: #aeb9ac; font-size: 11px; }
.profile-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.profile-action-grid button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 62px; padding: 8px; border-color: #766b4a; background: linear-gradient(#26322e, #152124); color: #eddfbf; font-size: 12px; font-weight: 600; }
.profile-action-grid button:hover { border-color: var(--gold); background: #304139; }
.profile-action-grid img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px #0009); }
.profile-session { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #d4b77535; color: #aeb9ac; font-size: 12px; }
.profile-session button { min-height: 34px; padding: 6px 12px; font-size: 11px; }
.profile-current-title { align-self: flex-start; padding: 6px 10px; border: 1px solid #ba9d5d; color: #f3d99b; background: #b98e3b1f; font: 16px Georgia, serif; }
.profile-hero-footnote { margin: 0; padding-top: 14px; border-top: 1px solid #d4b77535; color: #aebbae; font-size: 12px; }
.profile-section-note { margin: -7px 0 17px; color: #aebbae; font-size: 12px; line-height: 1.5; }
.profile-history-chart { display: grid; grid-template-columns: repeat(28, minmax(8px, 1fr)); align-items: end; gap: 4px; height: 144px; padding: 12px 4px 0; margin-bottom: 17px; border-bottom: 1px solid #a08b573f; background: repeating-linear-gradient(to top, transparent, transparent 31px, #e2d19a12 32px); }
.profile-history-day { position: relative; display: flex; flex-direction: column; justify-content: end; align-items: center; height: 100%; min-width: 0; }
.profile-history-bar { display: block; width: min(100%, 15px); min-height: 4px; border-radius: 2px 2px 0 0; background: #607069; }
.profile-history-bar.has-level { background: linear-gradient(#f2d78d, #ad803e); box-shadow: 0 0 12px #d4b77555; }
.profile-history-day small { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); color: #aeb9ae; font-size: 9px; white-space: nowrap; }
.profile-history { padding-bottom: 28px; }
.profile-history .profile-section-note:last-child { margin: 25px 0 0; }
.profile-guild-card { min-width: 0; padding: 18px; border: 1px solid #8577556b; background: #101d1f83; }
.profile-guild-card .profile-rank { margin: 9px 0; }
.profile-guild-card .profile-rank strong { font-size: 19px; }
.profile-guild-card p { color: #b6c1b5; font-size: 11px; margin: 0 0 13px; }
.profile-selector-label { margin-bottom: 7px; color: #d8c494; letter-spacing: .08em; text-transform: uppercase; }
.profile-roadmap { margin-top: 19px; border-top: 1px solid #d4b77535; }
.profile-roadmap summary { padding: 15px 0; color: #e7d1a0; font-size: 12px; font-weight: 700; cursor: pointer; }
.profile-title-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 8px; }
.profile-visual-icons-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.profile-visual-icon-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 6px 4px; border: 1px solid #586357; border-radius: 5px; background: #121c1e; color: #cfd6cb; cursor: pointer; overflow: hidden; }
.profile-visual-icon-btn img { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; border: 1px solid #8a7952; background: #0c1416; }
.profile-visual-icon-btn small { font-size: 10px; line-height: 1.15; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-visual-icon-btn.is-locked { opacity: .62; }
.profile-visual-icon-btn.is-locked img { filter: grayscale(60%); }
.profile-visual-icon-btn.is-inspected { border-color: #d8b86c; background: linear-gradient(160deg, #2d3426, #162221); box-shadow: inset 0 0 0 1px #d8b86c88, 0 0 12px rgba(216, 184, 108, 0.25); color: #f6e7c1; }
.profile-visual-step-badge { position: absolute; top: 4px; left: 5px; padding: 1px 4px; border-radius: 3px; background: rgba(9, 15, 17, 0.88); color: #d8b86c; font-size: 9px; font-weight: 700; line-height: 1.1; }
.profile-visual-state-dot, .profile-visual-state-lock { position: absolute; top: 4px; right: 5px; font-size: 10px; font-style: normal; line-height: 1; color: #ffd070; }
.profile-visual-grid { display: grid; grid-template-columns: 1fr; gap: 11px; }
.profile-visual-card { min-width: 0; overflow: hidden; border: 1px solid #6d705b; border-radius: 5px; background: linear-gradient(160deg, #1b2827, #101a1d); }
.profile-visual-card.profile-visual-inspector { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: stretch; }
.profile-visual-card.is-selected { border-color: #d8b86c; box-shadow: inset 0 0 0 1px #d8b86c, 0 0 20px #d8b86c20; }
.profile-visual-card.is-locked { opacity: .82; }
.profile-visual-art { position: relative; height: 175px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 55%, #6f654449, #10191b 68%); overflow: hidden; }
.profile-visual-art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.profile-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 26px; height: 36px; min-height: 0; padding: 0; border-radius: 4px; border: 1px solid rgba(216, 184, 108, 0.5); background: rgba(11, 18, 20, 0.82); color: #f3e0b0; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.profile-carousel-arrow.prev { left: 5px; }
.profile-carousel-arrow.next { right: 5px; }
.profile-visual-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 14px; }
.profile-visual-info span { color: #d8b86c; font-size: 10px; font-weight: 700; letter-spacing: .11em; }
.profile-visual-info strong { color: #f0dfb9; font: 19px Georgia, serif; }
.profile-visual-info small { color: #b3bdb3; font-size: 11px; line-height: 1.4; }
.profile-visual-info button { width: auto; min-width: 140px; min-height: 34px; margin-top: 4px; padding: 6px 12px; font-size: 11px; }
.profile-visual-info em { color: #e5c77e; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .08em; }
.profile-visual-info em.is-locked-label { color: #94a3b8; font-weight: 600; letter-spacing: .02em; }
.profile-title-card { padding: 12px; border: 1px solid #556058; background: #111d1f9c; opacity: .75; }
.profile-title-card.is-unlocked { border-color: #ae955d; opacity: 1; }
.profile-title-card span, .profile-title-card small { display: block; color: #aebbae; font-size: 10px; line-height: 1.4; }
.profile-title-card span { color: #d7bb7e; font-weight: 700; letter-spacing: .09em; }
.profile-title-card strong { display: block; margin: 5px 0; color: #f1e2bf; font: 16px Georgia, serif; }
.profile-bg-filter-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.profile-bg-filter-btn { min-height: 32px; padding: 5px 12px; font-size: 11px; font-weight: 600; border-radius: 4px; background: #131e20; border: 1px solid #545d52; color: #b9c3b8; }
.profile-bg-filter-btn.active { background: linear-gradient(#dfc786, #b69753); color: #191f1b; border-color: #edd8a0; font-weight: 700; }
.profile-bg-strip-wrap { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 6px; align-items: center; margin-bottom: 12px; }
.profile-strip-scroll-btn { min-height: 54px; height: 100%; padding: 0; font-size: 20px; line-height: 1; background: #131e20; border: 1px solid #5e6350; color: #e8d29c; display: flex; align-items: center; justify-content: center; }
.profile-background-strip { display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; scrollbar-color: #7c6d48 #0f1719; scroll-snap-type: x proximity; }
.profile-bg-thumb { position: relative; flex: 0 0 72px; width: 72px; height: 54px; min-height: 0; padding: 0; border-radius: 4px; border: 1.5px solid #545b4e; background: #0e1618; overflow: hidden; scroll-snap-align: start; }
.profile-bg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-bg-thumb.is-locked img { filter: grayscale(65%) brightness(0.7); }
.profile-bg-thumb.is-inspected { border-color: #dbb96d; box-shadow: 0 0 0 1px #dbb96d, 0 0 10px rgba(219, 185, 109, 0.4); transform: translateY(-1px); }
.profile-bg-thumb-badge, .profile-bg-thumb-lock, .profile-bg-thumb-vip { position: absolute; bottom: 2px; right: 2px; padding: 1px 4px; border-radius: 2px; background: rgba(10, 16, 18, 0.88); color: #ffd070; font-size: 8px; font-weight: 700; line-height: 1.1; }
.profile-background-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.profile-background-card { min-width: 0; overflow: hidden; border: 1px solid #646752; border-radius: 5px; background: #101d1f; }
.profile-background-card.profile-background-inspector { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: stretch; }
.profile-background-card.is-selected { border-color: #dbb96d; box-shadow: inset 0 0 0 1px #dbb96d; }
.profile-bg-preview-box { position: relative; min-height: 125px; background: #0b1315; overflow: hidden; }
.profile-bg-preview-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-bg-counter { position: absolute; bottom: 6px; right: 6px; padding: 2px 6px; border-radius: 3px; background: rgba(10, 16, 18, 0.85); border: 1px solid rgba(219, 185, 109, 0.35); color: #e7cf91; font-size: 9px; font-weight: 700; }
.profile-bg-inspector-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; padding: 12px 14px; }
.profile-bg-status-tag { color: #d8b86c; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; }
.profile-background-card strong { color: #ebdbb8; font: 16px/1.25 Georgia, serif; }
.profile-background-card small { color: #acb8ad; font-size: 11px; line-height: 1.35; }
.profile-background-card .profile-bg-inspector-info button { width: auto; min-width: 130px; min-height: 32px; padding: 5px 12px; margin-top: 4px; font-size: 11px; }
.profile-badges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; background: radial-gradient(circle at 50% 50%, #17232b 0%, #0d151a 100%); border: 1px solid #d4b77544; border-radius: 8px; padding: 16px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); }
.profile-badge-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.2s, border-color 0.2s; min-width: 0; }
.profile-badge-item.is-unlocked { border-color: #d4b77555; background: linear-gradient(180deg, rgba(212, 183, 117, 0.08) 0%, rgba(16, 29, 31, 0.8) 100%); }
.profile-badge-item:hover { transform: translateY(-2px); }
.profile-badge-icon-box { position: relative; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #090e12; border: 2px solid #334155; margin-bottom: 8px; flex-shrink: 0; }
.profile-badge-icon { font-size: 26px; }
.profile-badge-lock { position: absolute; bottom: -4px; right: -4px; font-size: 14px; }
.profile-badge-name { font-size: 12px; line-height: 1.25; margin-bottom: 4px; }
.profile-badge-city { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.profile-settings { display: grid; gap: 0; }
.profile-switch { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 13px 0; margin: 0; border-bottom: 1px solid #d4b7752b; cursor: pointer; }
.profile-switch span, .profile-language { min-width: 0; }
.profile-switch strong, .profile-language strong { display: block; color: #ede0c1; font-size: 13px; font-weight: 600; }
.profile-switch small, .profile-language small { display: block; margin-top: 3px; color: #aebbae; font-size: 11px; line-height: 1.4; }
.profile-switch input { flex: none; width: 18px; height: 18px; accent-color: #d4b775; }
.profile-language { margin: 15px 0 8px; }
.profile-settings select { max-width: 360px; }
@media (max-width: 1100px) { .profile-hero { grid-template-columns: minmax(180px, 36%) minmax(0, 1fr); } .profile-hero-info { padding: 22px; } }
@media (max-width: 700px) { .profile-hero { grid-template-columns: 1fr; } .profile-hero-art { min-height: 350px; } .profile-hero-info { border-left: 0; border-top: 1px solid #8e78513d; } .profile-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .profile-hero-art { min-height: 300px; }
  .profile-hero-info, .profile-panel { padding: 14px; }
  .profile-hero-info h3 { font-size: 28px; }
  .profile-badges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .profile-badge-item { padding: 8px 6px; }
  .profile-badge-icon-box { width: 38px; height: 38px; margin-bottom: 5px; }
  .profile-badge-icon { font-size: 19px; }
  .profile-badge-lock { font-size: 11px; bottom: -2px; right: -2px; }
  .profile-badge-name { font-size: 10.5px; margin-bottom: 2px; }
  .profile-badge-city { font-size: 8.5px; }
  .profile-title-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .profile-title-card { padding: 8px; }
  .profile-title-card strong { font-size: 13px; margin: 3px 0; }
  .profile-title-card span, .profile-title-card small { font-size: 9px; }
  .profile-visual-icons-row { gap: 5px; }
  .profile-visual-icon-btn { padding: 5px 2px; }
  .profile-visual-icon-btn img { width: 38px; height: 38px; }
  .profile-visual-icon-btn small { font-size: 8.5px; }
  .profile-visual-card.profile-visual-inspector { grid-template-columns: 112px minmax(0, 1fr); }
  .profile-visual-art { height: 152px; }
  .profile-visual-info { padding: 10px 11px; gap: 4px; }
  .profile-visual-info strong { font-size: 16px; }
  .profile-visual-info small { font-size: 10px; }
  .profile-visual-info button { width: 100%; min-width: 0; }
  .profile-bg-strip-wrap { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 4px; }
  .profile-bg-thumb { flex: 0 0 64px; width: 64px; height: 48px; }
  .profile-background-card.profile-background-inspector { grid-template-columns: 116px minmax(0, 1fr); }
  .profile-bg-preview-box { min-height: 108px; }
  .profile-bg-inspector-info { padding: 10px 11px; gap: 4px; }
  .profile-background-card strong { font-size: 14px; }
  .profile-background-card small { font-size: 10px; }
  .profile-background-card .profile-bg-inspector-info button { width: 100%; min-width: 0; }
  .profile-history-chart { gap: 2px; }
  .profile-effect { flex-wrap: wrap; }
  .profile-effect small { padding-left: 29px; }
  .player-page-header { gap: 10px; padding-bottom: 12px; margin-bottom: 13px; }
  .player-page-heading-copy h2 { font-size: 22px; }
  .player-page-header-actions { gap: 4px; }
  .player-page-city,
  .player-page-back { padding: 4px 7px; min-height: 28px; font-size: 9.5px; }
}

/* Atalhos principais: quatro opções em uma fileira também em telas estreitas. */
.player-card .quick-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
.player-card .quick-actions .game-tile-btn {
  min-width: 0;
}
.location-back-button {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  min-height: 32px;
  padding: 5px 10px;
  color: #f0dfb5;
  background: rgba(14, 22, 24, .9);
  border-color: #857552;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
.location-back-button:hover {
  background: rgba(34, 44, 40, .96);
  border-color: var(--gold);
}
.hero-image.establishment-hero { height: 225px !important; }
@media (max-width: 480px) {
  .hero-image.establishment-hero { height: 205px !important; }
}
.study-breadcrumb,
.place-breadcrumb {
  display: none !important;
}
.study-tabs { margin-top: 14px; }
.study-tabs button span { margin-left: 4px; opacity: .75; font-size: 10px; }
.study-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  margin: 0 0 14px;
  border: 1px solid #3c4944;
  background: rgba(10, 17, 19, .55);
  color: var(--muted);
  font-size: 12px;
}
.study-progress strong { color: var(--gold); }
.study-entry { overflow: hidden; }
.study-art {
  display: grid;
  place-items: center;
  position: relative;
  height: 132px;
  margin: -17px -17px 14px;
  overflow: hidden;
  background: radial-gradient(ellipse, #3c4438, #131b1c 72%);
  border-bottom: 1px solid #74684b;
}
.study-art img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  padding: 8px;
}
.study-art--monsters { height: 244px; }
.study-art--monsters img { padding: 8px 12px; }
.study-art--skills, .study-art--recipes { height: 126px; }
.study-art--skills img, .study-art--recipes img { width: 100px; height: 100px; flex: none; }
.study-art img.image-missing { display: none; }
.study-art.is-silhouette::before {
  content: '';
  display: block;
  position: absolute;
  background: linear-gradient(145deg, #899187, #48524a);
  filter: drop-shadow(0 5px 9px #000);
  opacity: .62;
}
.study-art--monsters.is-silhouette::before {
  display: none;
}
.study-art--skills.is-silhouette::before {
  display: none;
}
.study-art--recipes.is-silhouette::before {
  width: 46px;
  height: 112px;
  clip-path: polygon(50% 0, 68% 26%, 60% 34%, 58% 72%, 100% 100%, 50% 91%, 0 100%, 42% 72%, 40% 34%, 32% 26%);
}
.study-art.is-silhouette img {
  filter: grayscale(1) brightness(.08) contrast(1.2);
  opacity: .96;
}
.study-art.is-silhouette span {
  position: absolute;
  z-index: 2;
  color: #d8dfd2;
  font: 28px Georgia, serif;
  text-shadow: 0 2px 8px #000;
}
.study-entry.is-undiscovered h3 { color: #aeb7a6; }
.study-entry-hint { color: var(--muted) !important; font-style: italic; }
.study-entry.is-discovered { border-color: #8b805e; }
.study-grid { align-items: stretch; }
.study-variants { margin-top: 12px !important; padding-top: 9px; border-top: 1px solid #a2936a; }
.study-variants summary { color: #565024; font-weight: 700; text-decoration: none !important; }
.study-variant-row { display: grid; gap: 3px; padding: 8px 0 0; margin-top: 8px; border-top: 1px solid rgba(86, 80, 36, .22); }
.study-variant-row strong { color: #29352f; }
.study-variant-row span { color: #565e51; font-size: 11px; }

/* Keep bestiary artwork legible on desktop without oversized two-card rows. */
@media (min-width: 801px) {
  .study-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 13px;
  }
  .study-art--monsters {
    height: clamp(340px, 30vw, 420px);
  }
  .study-art--monsters img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center;
  }
}

@media (min-width: 801px) and (max-width: 1199px) {
  .study-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .study-art--monsters {
    height: 340px;
  }
}

.instruction-card .bullet-dot,
.instruction-desc .bullet-dot,
.instruction-bullet {
  color: #d4af37;
  font-weight: bold;
  margin-right: 4px;
  display: inline-block;
}

/* ========================================================
   SKILLS PAGE - COMBAT SLOTS DECK & LEARNED INVENTORY
======================================================== */
.combat-slots-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 10px 0 16px 0;
  width: 100%;
}

.combat-slots-grid {
  display: grid;
  width: 100%;
  margin: 0 auto;
}

.combat-slots-grid.weapon-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 240px;
  gap: 12px;
}

.combat-slots-grid.chosen-grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 360px;
  gap: 10px;
}

/* ========================================================
   DECK UNIFICADO EM LINHA ÚNICA (SUGESTÃO 2)
   ======================================================== */
.combat-slots-container.deck-unified-line {
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  background: rgba(14, 22, 24, 0.85);
  border: 1px solid rgba(86, 80, 61, 0.55);
  border-radius: 8px;
  padding: 8px 6px;
  margin: 6px 0 14px 0;
  box-sizing: border-box;
}

.combat-slots-container.deck-unified-line .weapon-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  flex: 2;
  gap: 5px;
}

.combat-slots-container.deck-unified-line .chosen-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
  flex: 3;
  gap: 5px;
}

.combat-slots-container.deck-unified-line .deck-divider {
  background: linear-gradient(180deg, transparent, rgba(137, 117, 78, 0.6), transparent);
  width: 1px;
  margin: 0 1px;
  align-self: stretch;
  flex-shrink: 0;
}

.combat-slots-container.deck-unified-line .combat-slot-card {
  padding: 4px 2px;
  position: relative;
}

.slot-number-tag {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 8px;
  font-family: monospace, sans-serif;
  color: #8da49c;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

.combat-slots-container.deck-unified-line .combat-slot-name {
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.combat-slots-container.deck-unified-line .combat-slot-mp {
  font-size: 8.5px;
}

.combat-slot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px;
  background: radial-gradient(circle at 50% 30%, #1c272c 0%, #111a1d 100%);
  border: 1px solid #4a5a56;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.combat-slot-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.combat-slot-card.selected {
  border-color: #60a5fa !important;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.5) !important;
}

.combat-slot-card.weapon-slot {
  border-color: #3b82f6;
  background: radial-gradient(circle at 50% 30%, #1a293a 0%, #0d1722 100%);
}

.combat-slot-card.empty-slot {
  border-style: dashed;
  border-color: #38423d;
  background: rgba(14, 22, 24, 0.4);
  cursor: default;
}

.combat-slot-card.empty-slot:hover {
  transform: none;
  border-color: #38423d;
  box-shadow: none;
}

.combat-slot-tile {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #090e10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
  position: relative;
}

.combat-slot-full-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.combat-slot-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  user-select: none;
}

.combat-slot-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 6px;
  flex-wrap: wrap;
}

.combat-slot-name {
  font-size: 11px;
  font-weight: 700;
  color: #f1ebd8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.combat-slot-mp {
  font-size: 9.5px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(30, 58, 138, 0.6);
  border: 1px solid #3b82f6;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.combat-slot-mp.muted {
  background: rgba(40, 50, 55, 0.4);
  border-color: #405055;
  color: var(--muted);
}

.badge-equipped-status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-equipped-status.active {
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #eed580;
}

.badge-equipped-status.weapon {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}

.badge-equipped-status.inactive {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
}

.skill-specs-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 8px 0;
}

.skill-spec-tag {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: 0.2px;
  user-select: none;
}

/* Specific Skill Inspector Layout (Fixes mobile squeezing & word-breaks) */
.skill-inspector,
.skill-inspector * {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.skill-inspector {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.skill-inspector .inspector-card {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.skill-inspector .inspector-info-col {
  overflow-wrap: normal !important;
  word-break: normal !important;
  min-width: 0;
}

.skill-inspector .inspector-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}

.skill-inspector .inspector-title-row strong,
.skill-inspector .inspector-meta strong {
  font-size: 17px;
  font-family: Georgia, serif;
  color: #f0e1bf;
  line-height: 1.25;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.skill-inspector .inspector-meta {
  flex: 1 1 auto;
  min-width: 130px;
}

.skill-inspector .item-desc {
  font-family: Georgia, 'Spectral', 'Cinzel', serif;
  font-style: italic;
  font-size: 13px;
  color: #ded3be;
  line-height: 1.55;
  margin: 8px 0 10px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-left: 2px solid #a89466;
  border-radius: 0 4px 4px 0;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.skill-inspector .inspector-art-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 108px;
  flex-shrink: 0;
}

.skill-inspector .inspector-art-square {
  position: relative;
  width: 108px;
  height: 108px;
  flex-shrink: 0;
  overflow: hidden;
}

.skill-art-mp-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #3b82f6;
  padding: 1px 5px;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  line-height: 1.2;
}

.skill-art-action {
  width: 100%;
  margin-top: 7px;
  display: flex;
  flex-direction: column;
}

.skill-art-action button {
  width: 100%;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 6px;
  letter-spacing: 0.2px;
  box-sizing: border-box;
}

.btn-unequip-skill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5px 6px;
  font-size: 11px;
  font-weight: 600;
  background: #2b1d19;
  border: 1px solid #7d4838;
  color: #fca5a5;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.btn-unequip-skill:hover {
  background: #3f251f;
  border-color: #ef4444;
  color: #fff;
}

/* Quick-Equip Tray in Skill Inspector */
.skill-inspector .inspector-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.skill-inspector .inspector-main-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.quick-equip-tray.full-width {
  width: 100%;
  box-sizing: border-box;
  background: rgba(14, 22, 24, 0.7);
  border: 1px solid rgba(86, 80, 61, 0.45);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.quick-equip-header {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.quick-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.quick-slots-grid .quick-slot-target {
  width: 100%;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  border-radius: 5px;
  box-sizing: border-box;
  background: #182326;
  border: 1px solid #455550;
  color: #ffd070;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.quick-slots-grid .quick-slot-target:hover {
  background: #d4b775;
  color: #121719;
  border-color: #f0dfb5;
}

.quick-slots-grid .quick-slot-target.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.quick-equip-tray.weapon-hint-tray {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(59, 130, 246, 0.35);
}

/* Skills Filter Bar */
.skills-filter-bar {
  display: flex;
  gap: 6px;
  margin: 6px 0 10px 0;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.skills-filter-pill {
  background: #141d1f;
  border: 1px solid #334442;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.skills-filter-pill:hover {
  border-color: var(--gold);
  color: #e2d7bd;
  background: #1c2729;
}

.skills-filter-pill.active {
  background: rgba(212, 183, 117, 0.18);
  border-color: #d4b775;
  color: #ffd070;
  font-weight: 700;
  box-shadow: 0 0 6px rgba(212, 183, 117, 0.25);
}

.skills-info-card {
  margin-top: 20px;
}

@media (max-width: 480px) {
  .skill-inspector .inspector-card {
    gap: 10px;
    align-items: flex-start;
  }
  .skill-inspector .inspector-art-col {
    width: 86px;
  }
  .skill-inspector .inspector-art-square {
    width: 86px;
    height: 86px;
  }
  .skill-art-action button,
  .btn-unequip-skill {
    font-size: 10px;
    padding: 4px 2px;
  }
  .skill-inspector .inspector-title-row strong,
  .skill-inspector .inspector-meta strong {
    font-size: 15px;
  }
  .skill-inspector .inspector-meta .muted {
    font-size: 10.5px;
    margin-top: 1px;
  }
  .skill-art-mp-badge {
    font-size: 9px;
    padding: 1px 4px;
    bottom: 3px;
    right: 3px;
  }
  .skill-specs-row {
    gap: 4px;
    margin: 3px 0 5px 0;
  }
  .skill-spec-tag {
    font-size: 10px;
    padding: 2px 5px;
  }
  .skill-inspector .item-desc {
    font-size: 11.5px;
    line-height: 1.42;
    padding: 6px 9px;
    margin: 3px 0 0 0;
  }
  .combat-slots-grid.weapon-grid {
    max-width: 220px;
    gap: 10px;
  }
  .combat-slots-grid.chosen-grid {
    max-width: 330px;
    gap: 8px;
  }
  .combat-slot-name {
    font-size: 10px;
  }
}

.skills-learned-section {
  margin-top: 18px;
}

.skills-learned-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.skill-grid-slot {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  min-height: 72px;
  background: radial-gradient(circle at 50% 30%, #1f2c29 0%, #10181b 100%);
  border: 1px solid #4a544a;
  border-radius: 6px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: all 0.15s ease;
}

.skill-grid-slot:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.skill-grid-slot.selected {
  outline: 2px solid #60a5fa !important;
  outline-offset: 1px;
  border-color: #93c5fd !important;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.5) !important;
}

.skill-grid-slot.equipped {
  border: 2px solid #eab308;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.45);
}

.skill-grid-slot.equipped:hover {
  border-color: #fde047;
}

.skill-grid-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.skill-grid-slot svg {
  width: 60%;
  height: 60%;
}

.skill-grid-slot .equipped-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(14, 21, 23, 0.95);
  color: #ffd070;
  border: 1px solid #eab308;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  line-height: 1.1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.slot-select-btn {
  transition: all 0.15s ease;
}

.slot-select-btn:hover {
  border-color: var(--gold) !important;
  background: rgba(212, 178, 103, 0.1) !important;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .player-card .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; margin-top: 2px !important; }
  .player-card .quick-actions .game-tile-btn { min-height: 54px !important; padding: 4px 1px !important; gap: 2px !important; }
  .player-card .quick-actions .game-tile-icon { width: 24px !important; height: 24px !important; }
  .player-card .quick-actions .game-tile-name { font-size: 8.5px !important; letter-spacing: 0 !important; white-space: nowrap; }
}
.profession-hero{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;overflow:hidden;margin:4px 0 24px;padding:22px 24px;border:1px solid #746747;border-top:2px solid #c9ae73;border-radius:5px;background:radial-gradient(ellipse at 0 0,#35463b 0,transparent 52%),linear-gradient(115deg,#222c29,#151e20 74%);box-shadow:inset 0 1px #fff1,0 8px 24px #0003}
.profession-hero:after{content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid #d4b77514}
.profession-hero-mark{display:grid;place-items:center;width:62px;height:62px;color:#e3cc91;font:36px Georgia,serif;border:1px solid #c6aa6c;border-radius:50%;background:radial-gradient(circle,#665539 0,#282d26 65%);box-shadow:0 0 24px #d4b77520,inset 0 0 14px #d4b77520}
.profession-hero-copy{min-width:0}.profession-kicker{color:#d3b979;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.2em}.profession-hero-copy h3{font:22px Georgia,serif;color:#eddfbc;margin:4px 0}.profession-hero-copy p{max-width:520px;color:#adb6a8;font-size:12px;margin:0}
.profession-overview{display:flex;gap:0;border-left:1px solid #ffffff18}.profession-overview span{display:flex;min-width:72px;flex-direction:column;align-items:center;padding:0 14px;border-right:1px solid #ffffff18}.profession-overview strong{font:22px Georgia,serif;color:#e6d4a7}.profession-overview small{font-size:9px;color:#9fa99b;text-transform:uppercase;letter-spacing:.08em}
.profession-section-heading{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:#d8c795}.profession-section-heading>span{font:20px Georgia,serif}.profession-section-heading div{display:flex;flex-direction:column}.profession-section-heading strong{font:17px Georgia,serif;color:#e7dec5}.profession-section-heading small{font-size:10px;color:#9da89d}.profession-section-heading i{height:1px;flex:1;margin-left:10px;background:linear-gradient(90deg,#796b49,transparent)}
.profession-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.profession-card{position:relative;overflow:hidden;min-width:0;padding:15px 16px 13px;border:1px solid #555747;border-left:2px solid var(--profession-accent);border-radius:4px;background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--profession-accent) 11%,transparent),transparent 48%),linear-gradient(140deg,#252d2a,#192124 72%);box-shadow:inset 0 1px #ffffff0c,0 5px 15px #0002;transition:transform .16s,border-color .16s,box-shadow .16s}.profession-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--profession-accent) 58%,#555747);box-shadow:inset 0 1px #ffffff10,0 8px 20px #0004}.profession-card:after{content:"";position:absolute;top:0;right:0;width:55px;height:55px;background:linear-gradient(135deg,transparent 49%,color-mix(in srgb,var(--profession-accent) 10%,transparent) 50%);pointer-events:none}
.profession-card-top,.profession-xp-head,.profession-xp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.profession-type{display:flex;align-items:center;gap:6px;color:#9faa9e;font-size:9px;text-transform:uppercase;letter-spacing:.12em}.profession-type i{width:6px;height:6px;border-radius:50%;background:var(--profession-accent);box-shadow:0 0 8px color-mix(in srgb,var(--profession-accent) 70%,transparent)}.profession-level{color:#9ea69b;font-size:9px;letter-spacing:.08em}.profession-level strong{color:#dfcc96;font:16px Georgia,serif}.profession-level small{color:#78837b;font-size:9px}
.profession-card-title{display:flex;align-items:center;gap:12px;margin:12px 0 13px}.profession-icon{display:grid;place-items:center;flex:0 0 44px;height:44px;color:var(--profession-accent);font:25px Georgia,serif;border:1px solid color-mix(in srgb,var(--profession-accent) 43%,#454a40);border-radius:4px;background:linear-gradient(145deg,color-mix(in srgb,var(--profession-accent) 14%,#1b2424),#11191b);text-shadow:0 0 12px color-mix(in srgb,var(--profession-accent) 55%,transparent)}.profession-card-title h3{margin:0 0 2px;color:#ecdfbd;font:20px Georgia,serif}.profession-card-title p{margin:0;color:#929e93;font-size:10px}.profession-xp-head{margin-bottom:5px;color:#9ca69a;font-size:9px}.profession-xp-head strong{color:var(--profession-accent);font-size:9px;letter-spacing:.08em}.profession-xp-track{height:7px;padding:1px;overflow:hidden;border:1px solid #090f11;border-radius:5px;background:#0d1416;box-shadow:inset 0 1px 2px #0008}.profession-xp-track span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--profession-accent) 65%,#555),var(--profession-accent));box-shadow:0 0 9px color-mix(in srgb,var(--profession-accent) 45%,transparent);transition:width .3s}.profession-xp-foot{margin-top:5px;color:#89958a;font-size:9px}.profession-xp-foot span:first-child{color:#d3c59f}.profession-card-perk{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding-top:9px;border-top:1px solid #ffffff10}.profession-card-perk>span{color:var(--profession-accent);font-size:12px}.profession-card-perk p{margin:0;color:#9fa99d;font-size:9px;line-height:1.45}
@media(max-width:700px){.profession-hero{grid-template-columns:auto 1fr;gap:12px;padding:17px}.profession-hero-mark{width:48px;height:48px;font-size:29px}.profession-hero-copy h3{font-size:18px}.profession-overview{grid-column:1/-1;justify-content:center;border-top:1px solid #ffffff18;border-left:0;padding-top:10px}.profession-overview span{flex:1}.profession-grid{grid-template-columns:1fr}}
/* Profession cards: match the game's existing flat dark panels and muted gold trim. */
.profession-hero{background:#202927;border:1px solid var(--line);border-top:2px solid var(--gold);box-shadow:none;border-radius:4px}
.profession-hero:after{display:none}.profession-hero-mark{border-radius:4px;background:#172020;box-shadow:none;color:var(--gold)}
.profession-hero-copy h3{color:#ecdbb5}.profession-hero-copy p{color:var(--muted)}.profession-kicker{color:var(--gold)}
.profession-section-heading{color:var(--gold)}.profession-section-heading strong{color:#ecdbb5}.profession-section-heading i{background:var(--line)}
.profession-card{background:#202927;border:1px solid var(--line);border-left:2px solid var(--profession-accent);border-radius:4px;box-shadow:none;transition:border-color .15s}.profession-card:hover{transform:none;border-color:#817653;box-shadow:none}.profession-card:after{display:none}
.profession-type i{box-shadow:none}.profession-icon{border-color:#56503d;border-radius:3px;background:#172020;text-shadow:none}.profession-xp-track{border-radius:2px;box-shadow:none}.profession-xp-track span{border-radius:1px;box-shadow:none;background:var(--profession-accent)}
/* Restrained medieval styling for the professions page. */
.profession-hero{background:transparent;border:0;box-shadow:none;padding:0;margin:0}.profession-hero:after,.profession-hero-mark,.profession-overview{display:none}
.profession-hero-copy h3,.profession-card-title h3{font-family:Georgia,'Times New Roman',serif;color:#ecdfbd}
.profession-section-heading{display:flex;align-items:baseline;gap:12px;margin:4px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}.profession-section-heading strong{font:20px Georgia,'Times New Roman',serif;color:#ecdbb5}.profession-section-heading span{font-size:11px;color:var(--muted)}
.profession-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}.profession-card{position:static;min-width:0;padding:13px 2px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;transition:none}.profession-card:hover{transform:none;border-color:var(--line);box-shadow:none}.profession-card:after{display:none}
.profession-card-title{display:flex;align-items:center;gap:11px;margin:0 0 10px}.profession-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border:1px solid #625b47;border-radius:2px;background:#172020;color:#d0b77a;font:21px Georgia,serif;text-shadow:none}.profession-card-title>div{min-width:0;flex:1}.profession-card-title h3{margin:1px 0;font-size:17px}.profession-card-title p{margin:0;color:#929b91;font-size:10px}.profession-type{color:#b6a774;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.profession-level{white-space:nowrap;color:#9da397;font-size:10px}.profession-level strong{color:#e0cf9f;font:16px Georgia,serif}.profession-level small{font-size:10px;color:#899087}
.profession-xp-head{margin-bottom:4px;color:#a9ad9f;font-size:10px}.profession-xp-head strong{color:#d4b775;font-size:10px;font-weight:600}.profession-xp-track{height:6px;padding:0;overflow:hidden;border:1px solid #0c1113;border-radius:1px;background:#101719;box-shadow:none}.profession-xp-track span{display:block;height:100%;border-radius:0;background:#a89158;box-shadow:none;transition:none}.profession-xp-foot{margin-top:4px;color:#92998f;font-size:9px}.profession-xp-foot span:first-child{color:#d4c79e}.profession-card-perk{display:flex;align-items:flex-start;gap:7px;margin-top:8px;padding-top:7px;border-top:1px solid #ffffff0a}.profession-card-perk>span{color:#bba56e;font-size:10px}.profession-card-perk p{margin:0;color:#999f93;font-size:9px;line-height:1.4}
@media(max-width:700px){.profession-grid{grid-template-columns:1fr;gap:0}.profession-section-heading{align-items:flex-start;flex-direction:column;gap:2px}}

.dungeon-combat-stage{margin:12px 0;padding:12px;border:1px solid var(--line);background:#141d1e;border-radius:4px}
.dungeon-combat-stage-title{margin:0 0 10px;color:var(--gold);font:16px Georgia,'Times New Roman',serif}
.dungeon-enemy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.dungeon-enemy-card{display:grid;grid-template-columns:minmax(76px,100px) minmax(0,1fr);gap:10px;align-items:center;min-width:0;padding:10px;border:1px solid #4b5147;background:#202927;border-radius:3px}
.dungeon-enemy-card.defeated{opacity:.58}
.dungeon-enemy-art{position:relative;display:grid;place-items:center;min-height:110px;overflow:hidden;background:radial-gradient(ellipse,#39413a 0%,#151d1e 70%);border:1px solid #303a36}
.dungeon-enemy-art img{width:100%;height:112px;object-fit:contain;object-position:center bottom}
.dungeon-enemy-art span{position:absolute;left:4px;top:4px;padding:2px 5px;background:#0e1515d9;color:#d6c18d;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.dungeon-enemy-info{display:flex;min-width:0;flex-direction:column;gap:4px}.dungeon-enemy-info>strong{color:#eee1c4;font:16px Georgia,'Times New Roman',serif}.dungeon-enemy-info>small{color:#9ba59c;font-size:10px}
.dungeon-enemy-hp{height:7px;overflow:hidden;border:1px solid #101515;background:#0d1314}.dungeon-enemy-hp span{display:block;height:100%;background:linear-gradient(90deg,#8b2923,#c7573d);transition:width .25s}
.dungeon-enemy-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:5px;margin-top:4px}.dungeon-enemy-actions button{min-height:34px;padding:5px;font-size:10px}
.dungeon-party-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px;margin-top:8px}.dungeon-party-member{display:flex;flex-direction:column;gap:2px;padding:7px;border:1px solid #3a463d;background:#182120}.dungeon-party-member strong{overflow:hidden;color:#e1d3b2;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.dungeon-party-member small{color:#98a298;font-size:9px}.dungeon-party-member.inactive{opacity:.52}
.dungeon-combat-topline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0;padding:10px 12px;border:1px solid #645334;background:linear-gradient(105deg,#28251d,#17201f);color:#d9c99f}.dungeon-combat-topline strong{color:#f0d48f;font:18px Georgia,'Times New Roman',serif}.dungeon-combat-topline>span:nth-child(3){margin-left:auto;color:#b7c8be}.dungeon-battlefield{display:grid;grid-template-columns:minmax(170px,.75fr) minmax(0,2fr);gap:12px;padding:12px;border:1px solid #3c4942;background:radial-gradient(ellipse at 72% 42%,#35443b 0,#1b2928 43%,#11191a 100%);box-shadow:inset 0 0 42px #080d0dbb}.dungeon-hero{display:flex;align-items:center;flex-direction:column;gap:5px;padding:8px;border-right:1px solid #ffffff16}.dungeon-hero-portrait{display:grid;place-items:center;width:100%;height:158px;overflow:hidden;background:radial-gradient(ellipse,#59654b 0,#202925 63%,transparent 72%)}.dungeon-hero-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 5px #0009)}.dungeon-hero>strong{color:#eee1c4;font:16px Georgia,'Times New Roman',serif}.dungeon-hero>small{color:#aab5a8;font-size:10px}.dungeon-party-vitals{display:grid;width:100%;gap:5px;margin-top:6px}.dungeon-party-vitals .dungeon-party-member{padding:6px;background:#101918c9}.dungeon-vital-bar{height:4px;overflow:hidden;background:#0b1010}.dungeon-vital-bar i{display:block;height:100%;background:linear-gradient(90deg,#698c4c,#a6bd67)}.dungeon-combat-stage{min-width:0;margin:0;padding:10px;border-color:#69735a;background:#101a1ad9}.dungeon-enemy-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.dungeon-enemy-card{grid-template-columns:minmax(76px,112px) minmax(0,1fr);background:#1a2423d9}.dungeon-enemy-art{min-height:156px;background:radial-gradient(ellipse,#62604a 0,#27312b 55%,#151d1e 78%)}.dungeon-enemy-art img{height:156px;filter:drop-shadow(0 7px 5px #0009)}.dungeon-enemy-card.defeated .dungeon-enemy-art img{filter:grayscale(1) brightness(.55)}.dungeon-target-button{width:100%;margin-top:7px;padding:6px;font-size:10px}.dungeon-action-panel{display:grid;grid-template-columns:minmax(160px,.65fr) minmax(0,2fr);gap:10px;margin:10px 0;padding:10px;border:1px solid #544831;background:#191e1bd9}.dungeon-selected-target{display:flex;flex-direction:column;gap:5px;padding:8px;border:1px solid #3c4942;background:#101817}.dungeon-selected-target>span,.dungeon-selected-target small{color:#aab5a8;font-size:10px}.dungeon-selected-target strong{color:#f1dfb7;font:16px Georgia,'Times New Roman',serif}.dungeon-selected-target .primary{margin-top:auto}.dungeon-skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}.dungeon-skill-button{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;min-height:74px;padding:7px;border:1px solid #536071;background:linear-gradient(150deg,#232d36,#171e24);color:#e1e8ef;cursor:pointer}.dungeon-skill-button:hover:not(:disabled){border-color:#8fb7d9;background:#293a49}.dungeon-skill-button:disabled{opacity:.45;cursor:not-allowed}.dungeon-skill-icon{color:#9ed5ff;font-size:19px;text-shadow:0 0 10px #39aaff}.dungeon-skill-button>span:nth-child(2){font-size:10px}.dungeon-skill-button small{color:#9fc8e7;font-size:9px}
@media(max-width:540px){.dungeon-enemy-grid{grid-template-columns:1fr}.dungeon-enemy-card{grid-template-columns:82px minmax(0,1fr);padding:8px}.dungeon-enemy-art,.dungeon-enemy-art img{min-height:100px;height:100px}.dungeon-enemy-actions{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.dungeon-battlefield{grid-template-columns:1fr}.dungeon-hero{border-right:0;border-bottom:1px solid #ffffff16}.dungeon-hero-portrait{height:130px}.dungeon-party-vitals{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.dungeon-action-panel{grid-template-columns:1fr}.dungeon-combat-topline>span:nth-child(3){margin-left:0}}

/* Dungeon combat: a single aligned action bar, visible combat pouch and enemy turn feedback. */
.dungeon-combat-controls .dungeon-action-row{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;justify-content:start;justify-items:stretch;align-items:stretch;gap:6px;width:100%;max-width:440px;box-sizing:border-box;margin:0;padding:8px;border:1px solid #ffffff11;background:#12191a}
.dungeon-combat-controls .dungeon-action-row>.b-attack-btn,.dungeon-combat-controls .dungeon-action-row>.combat-skill-cell,.dungeon-combat-controls .dungeon-action-row>.b-action-slot{width:100%;height:64px;max-width:none;min-width:0;min-height:0!important;aspect-ratio:auto;box-sizing:border-box}
.dungeon-combat-controls .dungeon-action-row>.b-attack-btn{grid-column:auto!important;grid-row:auto!important;justify-self:stretch;align-self:stretch;margin:0!important}
.dungeon-combat-controls .dungeon-action-row>.combat-skill-cell{position:relative;display:block}
.dungeon-combat-controls .dungeon-action-row>.combat-skill-cell>.b-action-slot{position:absolute;inset:0;width:100%;height:100%;max-width:none;min-width:0;min-height:0!important;aspect-ratio:auto}
.dungeon-combat-controls .dungeon-basic-attack{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:5px!important;border:1px solid #a34b3e!important;border-radius:3px!important;background:#211718!important;color:#eee1c4!important;font-size:9px!important}
.dungeon-combat-controls .dungeon-basic-attack .b-attack-icon{display:grid;place-items:center;width:24px;height:24px;margin:0}
.dungeon-combat-controls .dungeon-basic-attack .b-attack-icon svg{width:22px;height:22px}
.dungeon-combat-controls .dungeon-action-heading{display:none}
.player-page-back.dungeon-header-flee{border-color:#a65345;background:#2a211e;color:#f1c2a5;cursor:pointer}
.player-page-back.dungeon-header-flee:hover{border-color:#d97960;background:#382722;color:#ffe1c8}
.dungeon-combat-controls .dungeon-bag-wrap{width:100%;max-width:none;justify-self:stretch;margin-top:10px;padding-top:8px;border-top:1px solid #ffffff12}
.dungeon-combat-controls .dungeon-bag-wrap .b-bag{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:0;padding:0;border:0;background:transparent}
.dungeon-combat-controls .dungeon-bag-wrap .b-bag-slot{height:auto;aspect-ratio:1;border-radius:3px}
.dungeon-combat-controls .dungeon-bag-wrap .b-bag-slot.empty{border:1px dashed #526057;background:#141a1c}
.dungeon-combat-controls .dungeon-bag-wrap .b-bag-slot.locked{display:flex;align-items:center;justify-content:center;opacity:.42;font-size:11px}
.dungeon-monster-image-wrap{position:relative}
.dungeon-monster-image-wrap .dungeon-monster-attack-canvas{position:absolute;z-index:10;display:none;pointer-events:none}
.dungeon-damage-number{position:absolute;z-index:5;top:2px;right:5px;max-width:85%;padding:4px 7px;border:1px solid #d97960;border-radius:3px;background:#261714ed;color:#ffe2a4;font-size:10px;font-weight:900;text-shadow:0 1px 3px #000;pointer-events:none;animation:dungeonDamageFloat 1.05s ease-out forwards}
.dungeon-damage-number.critical{color:#ffbd65;border-color:#f59e0b}.dungeon-damage-number.miss{border-color:#8a9a9a;color:#d0d9d7}
@keyframes dungeonDamageFloat{0%{opacity:0;transform:translateY(12px) scale(.8)}14%{opacity:1;transform:translateY(0) scale(1)}78%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
@media(max-width:430px){.dungeon-combat-controls .dungeon-action-row{grid-template-columns:repeat(3,minmax(58px,64px))!important;max-width:220px;justify-content:center;margin-inline:auto}.dungeon-combat-controls .dungeon-action-row>.b-attack-btn,.dungeon-combat-controls .dungeon-action-row>.combat-skill-cell,.dungeon-combat-controls .dungeon-action-row>.b-action-slot{height:62px}}
.dungeon-entry-hero,.dungeon-lobby-banner{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:230px;margin:12px 0 14px;padding:26px 30px;overflow:hidden;border:1px solid #675639;border-radius:5px;background:#17201f}.dungeon-entry-hero::before,.dungeon-lobby-banner::before{position:absolute;z-index:-2;inset:0;background:var(--dungeon-scene) center 48%/cover no-repeat;content:"";filter:saturate(.7)}.dungeon-entry-hero::after,.dungeon-lobby-banner::after{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#0d1515f5 0%,#111918e8 43%,#1119187d 72%,#10161570 100%),linear-gradient(0deg,#101615aa,#10161508 50%);content:""}.dungeon-entry-copy,.dungeon-lobby-banner-copy{max-width:560px}.dungeon-entry-copy>span,.dungeon-lobby-banner-copy>span,.dungeon-section-heading>div>span{color:#d2b874;font-size:10px;font-weight:800;letter-spacing:.17em}.dungeon-entry-copy h3,.dungeon-lobby-banner-copy h3{margin:9px 0;color:#f1e4c8;font:30px/1.08 Georgia,'Times New Roman',serif;text-shadow:0 3px 12px #000}.dungeon-entry-copy p,.dungeon-lobby-banner-copy p{max-width:420px;margin:8px 0 16px;color:#c5c8bb;font-size:12px;line-height:1.55}.dungeon-entry-facts{display:flex;flex-wrap:wrap;gap:7px}.dungeon-entry-facts span{padding:6px 8px;border:1px solid #b39a5a55;border-radius:3px;background:#101615b8;color:#ded1ad;font-size:9px}.dungeon-portal-art{position:relative;display:grid;place-items:center;flex:0 0 168px;width:168px;height:168px;margin-right:4%;border:1px solid #b8a46f55;border-radius:50%;background:radial-gradient(circle,#86b4c32a 0,#486c7040 31%,#252b2833 57%,transparent 72%);box-shadow:0 0 50px #9dc8d12e,inset 0 0 35px #b4c8d025}.dungeon-portal-ring{position:absolute;inset:13px;border:1px solid #d5bf806b;border-radius:50%;box-shadow:0 0 19px #bbd8cf45,inset 0 0 25px #b8d8cf29;animation:dungeonPortalBreathe 4s ease-in-out infinite}.dungeon-portal-ring::before,.dungeon-portal-ring::after{position:absolute;inset:14px;border:1px dashed #abc5c27a;border-radius:50%;content:"";transform:rotate(24deg)}.dungeon-portal-ring::after{inset:28px;border-style:solid;transform:rotate(-38deg)}.dungeon-portal-art>span{color:#d7d3aa;font-size:52px;text-shadow:0 0 22px #b7e2e6,0 0 50px #94baff;transform:rotate(45deg)}@keyframes dungeonPortalBreathe{50%{transform:scale(1.035) rotate(8deg);filter:brightness(1.25)}}
.dungeon-entry-actions{display:grid;grid-template-columns:minmax(230px,.75fr) minmax(0,1.5fr);gap:14px;align-items:start}.dungeon-create-card{display:flex;align-items:center;gap:12px;min-height:96px;padding:16px;border:1px solid #817046;border-radius:4px;background:linear-gradient(130deg,#3b3323,#242921 70%);color:#eee3c6;text-align:left;cursor:pointer;transition:border-color .16s,transform .16s}.dungeon-create-card:hover:not(:disabled){transform:translateY(-2px);border-color:#d4b875}.dungeon-create-card:disabled{opacity:.5;cursor:not-allowed}.dungeon-create-icon{display:grid;place-items:center;flex:0 0 44px;height:44px;border:1px solid #c9ab63;border-radius:50%;color:#efd282;font-size:27px;box-shadow:0 0 17px #d6b55837}.dungeon-create-card>span:nth-child(2){display:flex;flex-direction:column;gap:5px}.dungeon-create-card strong{font:16px Georgia,'Times New Roman',serif}.dungeon-create-card small,.dungeon-open-lobby small{color:#aeb4a7;font-size:10px;line-height:1.4}.dungeon-create-card>i{margin-left:auto;color:#e6c66f;font-size:19px;font-style:normal}.dungeon-open-lobbies{min-width:0}.dungeon-section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:2px 0 8px}.dungeon-section-heading h3{margin:3px 0 0;color:#eee1c4;font:18px Georgia,'Times New Roman',serif}.dungeon-section-heading>small{color:#9da79d;font-size:9px;text-align:right}.dungeon-open-lobby{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0;padding:9px 11px;border:1px solid #3f4a42;border-radius:3px;background:linear-gradient(110deg,#222c29,#192121);transition:border-color .15s}.dungeon-open-lobby:hover{border-color:#827146}.dungeon-open-lobby-main{display:flex;align-items:center;gap:11px;min-width:0}.dungeon-open-lobby-main>div:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}.dungeon-open-lobby-main strong{overflow:hidden;color:#e9ddbd;font:14px Georgia,'Times New Roman',serif;text-overflow:ellipsis;white-space:nowrap}.dungeon-lobby-mini-portraits{display:flex;align-items:center;min-width:50px}.dungeon-lobby-mini-portraits img,.dungeon-lobby-mini-portraits span{width:31px;height:31px;margin-left:-7px;border:1px solid #a28a52;border-radius:50%;background:#182120;object-fit:cover}.dungeon-lobby-mini-portraits img:first-child{margin-left:0}.dungeon-lobby-mini-portraits span{display:grid;place-items:center;color:#dfcc9e;font-size:9px}.dungeon-join-button{flex:0 0 auto;padding:8px 11px;border:1px solid #788454;border-radius:3px;background:#313d2c;color:#e8e4c9;font-size:10px;font-weight:700;cursor:pointer}.dungeon-join-button:hover{background:#425138}.dungeon-join-button span{margin-left:6px;color:#e4cb76}.dungeon-empty-lobbies{display:flex;align-items:center;flex-direction:column;gap:6px;min-height:96px;padding:15px;border:1px dashed #485248;border-radius:4px;background:#141c1c99;color:#b9b8a5}.dungeon-empty-lobbies>span{font-size:22px}.dungeon-empty-lobbies strong{font:14px Georgia,'Times New Roman',serif}.dungeon-empty-lobbies small,.dungeon-entry-footnote{color:#929c91;font-size:9px}.dungeon-entry-footnote{margin:12px 0;text-align:center}
.dungeon-lobby-banner{min-height:155px;margin-bottom:12px;padding:20px 24px}.dungeon-lobby-banner::after{background:linear-gradient(90deg,#101615f2,#111918c9 65%,#10161566)}.dungeon-lobby-banner-copy h3{margin:6px 0;font-size:26px}.dungeon-lobby-banner-copy p{margin:5px 0;color:#bbc4b7}.dungeon-lobby-count{display:flex;align-items:center;flex-direction:column;gap:2px;min-width:100px;padding:12px;border:1px solid #bdab765c;background:#111716a6}.dungeon-lobby-count strong{color:#f0d48f;font:30px Georgia,'Times New Roman',serif}.dungeon-lobby-count strong i{color:#b9b29b;font-size:16px;font-style:normal}.dungeon-lobby-count span{color:#aeb6a6;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.dungeon-lobby-roster{padding:14px;border:1px solid #444f45;background:linear-gradient(145deg,#202927,#151d1e)}.dungeon-lobby-roster>.dungeon-section-heading{margin:0 0 12px}.dungeon-lobby-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dungeon-lobby-member{display:flex;align-items:center;gap:10px;min-width:0;padding:9px;border:1px solid #425044;border-left:2px solid #718354;background:linear-gradient(110deg,#222d28,#171f20)}.dungeon-lobby-member.is-self{border-color:#58728a;border-left-color:#78a7ca;background:linear-gradient(110deg,#263745,#192323)}.dungeon-lobby-member.is-leader{border-left-color:#d1af56}.dungeon-lobby-avatar-wrap{position:relative;flex:0 0 48px;width:48px;height:48px}.dungeon-lobby-avatar-wrap img{width:100%;height:100%;border:1px solid #83734e;border-radius:3px;background:#121918;object-fit:cover}.dungeon-lobby-avatar-wrap span{position:absolute;right:-5px;bottom:-4px;padding:2px 4px;border:1px solid #635637;border-radius:2px;background:#141a18;color:#e7d49f;font-size:8px;font-weight:800}.dungeon-lobby-member-info{display:flex;flex-direction:column;gap:5px;min-width:0}.dungeon-lobby-member-info strong{overflow:hidden;color:#eee1c4;font:15px Georgia,'Times New Roman',serif;text-overflow:ellipsis;white-space:nowrap}.dungeon-lobby-member-info small{color:#a8b1a6;font-size:9px}.dungeon-lobby-ready{display:flex;align-items:center;flex-direction:column;gap:2px;margin-left:auto;color:#9ebe77;font-size:17px}.dungeon-lobby-ready small{font-size:8px}.dungeon-lobby-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-height:67px;border:1px dashed #485248;background:#141b1a88;color:#a2ac9f}.dungeon-lobby-empty>span{color:#a3b48c;font-size:22px}.dungeon-lobby-empty small{font-size:9px;text-align:center}.dungeon-lobby-actions{display:flex;align-items:center;gap:9px;margin-top:13px}.dungeon-enter-button{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:center;min-width:215px;padding:8px 12px;border:1px solid #b59b59;border-radius:3px;background:linear-gradient(120deg,#55472a,#293126);color:#f1e5c5;text-align:left;cursor:pointer}.dungeon-enter-button:hover{border-color:#eed487;background:linear-gradient(120deg,#665431,#34412d)}.dungeon-enter-button>span{grid-row:1/3;color:#f0d27e;font-size:23px}.dungeon-enter-button strong{font:15px Georgia,'Times New Roman',serif}.dungeon-enter-button small{color:#b9b5a4;font-size:9px}.dungeon-leave-button{padding:8px 11px;border:1px solid #745044;border-radius:3px;background:#2a211e;color:#d7b8a1;font-size:9px;font-weight:700;cursor:pointer}.dungeon-leave-button:hover{border-color:#b46b52;background:#382722}.dungeon-wait-note{display:flex;align-items:center;gap:8px;padding:10px 12px;color:#d8c992;font-size:10px}.dungeon-wait-pulse{width:8px;height:8px;border-radius:50%;background:#dec876;box-shadow:0 0 9px #dec876aa;animation:dungeonWaitPulse 1.5s ease-in-out infinite}@keyframes dungeonWaitPulse{50%{opacity:.45;box-shadow:0 0 3px #dec87666}}
.dungeon-combat-party{padding:10px 12px}.dungeon-combat-party .boss-challengers-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.dungeon-combat-member{position:relative;padding:7px;border-radius:3px;background:linear-gradient(120deg,#222c29,#171e20)}.dungeon-combat-member.is-self{border-color:#547997!important;background:linear-gradient(120deg,#253945,#192323)!important}.dungeon-combat-member .boss-challenger-avatar{width:42px;height:42px;border:1px solid #81704a;border-radius:3px;object-fit:cover}.dungeon-combat-member .boss-challenger-name{overflow:hidden;color:#e8dfc8;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.dungeon-combat-member .boss-challenger-name span{color:#77b7ed;font-size:8px}.dungeon-member-level{margin:2px 0 4px;color:#9ca79d;font-size:8px}.dungeon-combat-member .boss-challenger-bar{height:5px;margin:3px 0;background:#121718}.dungeon-combat-member .boss-challenger-hp-fill{height:100%}.dungeon-combat-member .dungeon-mana-bar{margin-top:2px;background:#101824}.dungeon-combat-member .boss-challenger-status{margin-top:4px;color:#bfc09e;font-size:8px}.dungeon-combat-member.defeated{opacity:.57;filter:grayscale(.6)}
.dungeon-combat-party .boss-challengers-strip{overflow:visible}.dungeon-combat-party .boss-challenger-card{min-width:0;flex-shrink:1}
.dungeon-boss-stage{position:relative;isolation:isolate;min-height:390px;margin:12px 0;overflow:hidden;border:1px solid #66583c;border-radius:4px;background:#171e20}.dungeon-stage-backdrop{position:absolute;z-index:-2;inset:0;background-position:center 48%;background-size:cover;filter:saturate(.72)}.dungeon-boss-stage::after{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#11181651 0%,#11181628 45%,#101617e8 100%);content:""}.dungeon-stage-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;color:#e2d4af}.dungeon-stage-heading>span{font-size:9px;text-shadow:0 1px 4px #000}.dungeon-stage-heading>strong{padding:5px 8px;border:1px solid #8a714a;border-radius:3px;background:#111817b8;color:#f0d48f;font-size:9px;text-transform:uppercase;letter-spacing:.07em}.dungeon-monster-line{display:grid;grid-template-columns:repeat(var(--monster-count),minmax(0,1fr));align-items:end;gap:10px;min-height:320px;padding:5px 18px 17px}.dungeon-monster{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;gap:0;min-width:0;height:310px;padding:10px 9px 9px;overflow:visible;border:1px solid transparent;border-radius:4px;background:linear-gradient(180deg,#131a1900 15%,#11171618 56%,#101617a3 100%);color:#eee2c5;cursor:pointer;transition:background .16s,border-color .16s,filter .16s,transform .16s}.dungeon-monster:hover:not(:disabled){transform:translateY(-3px);border-color:#c9b16c66;background:linear-gradient(180deg,#bba95508 0%,#12191850 63%,#111817d1 100%)}.dungeon-monster.selected{border-color:#e0c66d;background:linear-gradient(180deg,#cbb66312 0%,#11181741 58%,#101716e8 100%);box-shadow:inset 0 0 24px #e4c66b15,0 0 14px #e4c66b29}.dungeon-monster:disabled{cursor:default}.dungeon-monster-image-wrap{position:relative;display:flex;align-items:flex-end;justify-content:center;flex:1;width:100%;min-height:0}.dungeon-monster-image-wrap img{position:relative;z-index:1;max-width:100%;max-height:255px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 7px #000b);transition:filter .15s,transform .15s}.dungeon-monster.selected .dungeon-monster-image-wrap img{filter:drop-shadow(0 0 12px #f0d174a8) drop-shadow(0 8px 7px #000b);transform:scale(1.045)}.dungeon-monster-shadow{position:absolute;bottom:2px;left:50%;width:65%;height:18px;border:1px solid #d0bd7280;border-radius:50%;background:#d8bd6024;box-shadow:0 0 19px #d9c46e62;opacity:0;transform:translateX(-50%);transition:opacity .15s}.dungeon-monster.selected .dungeon-monster-shadow{opacity:1}.dungeon-target-marker{position:absolute;z-index:3;top:12px;left:50%;display:flex;align-items:center;flex-direction:column;gap:1px;padding:4px 8px;border:1px solid #d6ba5e;border-radius:3px;background:#241e10e8;color:#f7dc83;font-size:9px;font-weight:900;letter-spacing:.12em;opacity:0;transform:translate(-50%,5px);transition:opacity .15s,transform .15s;box-shadow:0 0 14px #dfc36766}.dungeon-target-marker i{font-size:13px;font-style:normal;line-height:10px;text-shadow:0 0 7px #f2d87b}.dungeon-monster.selected .dungeon-target-marker{opacity:1;transform:translate(-50%,0);animation:dungeonTargetPulse 1.35s ease-in-out infinite}.dungeon-monster-details{display:flex;align-items:center;flex-direction:column;gap:3px;width:100%;padding-top:4px;text-shadow:0 2px 5px #000}.dungeon-monster-details strong{max-width:100%;overflow:hidden;color:#f1e4c5;font:15px Georgia,'Times New Roman',serif;text-overflow:ellipsis;white-space:nowrap}.dungeon-monster-details small{color:#c6c2ac;font-size:8px}.dungeon-monster-hp{display:block;width:100%;height:7px;margin:2px 0;border:1px solid #1c1514;background:#100e0e}.dungeon-monster-hp i{display:block;height:100%;background:linear-gradient(90deg,#842f2c,#d95546,#e78162);box-shadow:0 0 8px #e2523d70}.dungeon-defeated-stamp{position:absolute;z-index:2;top:42%;left:50%;padding:6px 9px;border:2px solid #d8cbb0;background:#171b1bd9;color:#eee3ca;font-size:13px;font-weight:900;letter-spacing:.1em;transform:translate(-50%,-50%) rotate(-13deg)}.dungeon-monster.defeated .dungeon-monster-image-wrap img{filter:grayscale(1) brightness(.42)}@keyframes dungeonTargetPulse{50%{filter:brightness(1.25);box-shadow:0 0 21px #dfc36799}}
.dungeon-combat-controls{padding:10px;border:1px solid #4c5547;border-radius:4px;background:linear-gradient(125deg,#222b28,#171e20)}.dungeon-action-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}.dungeon-action-heading>strong{color:#e9ddbe;font:15px Georgia,'Times New Roman',serif}.dungeon-action-heading>span{color:#a6b0a5;font-size:9px}.dungeon-action-heading>span b{color:#f0d37d}.dungeon-action-heading .dungeon-leave-button{margin-left:auto}.dungeon-action-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;justify-items:center;padding:9px;border:1px solid #ffffff11;background:#12191a}.dungeon-action-row .b-action-slot,.dungeon-action-row .b-attack-btn{width:100%;max-width:88px;height:76px;min-width:0;min-height:0!important;aspect-ratio:auto}.dungeon-action-row .b-action-slot.empty{background:#17201f;border-color:#46524c}.dungeon-action-row .b-action-slot:disabled,.dungeon-action-row .b-attack-btn:disabled{opacity:.42}.dungeon-action-row .dungeon-cooldown{right:auto;left:3px;background:#713f12;color:#fef3c7}.dungeon-action-row .dungeon-basic-attack{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;padding:5px!important;border:1px solid #a34b3e!important;border-radius:3px!important;background:#211718!important;color:#eee1c4!important;font-size:9px!important}.dungeon-action-row .dungeon-basic-attack:hover:not(:disabled){border-color:#df927c!important;background:#382321!important}.dungeon-action-row .dungeon-basic-attack .b-attack-icon{width:24px;height:24px}.dungeon-turn-wait{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border:1px solid #35413c;background:#131a19;color:#c8bd99;font-size:10px}
@media(max-width:700px){.dungeon-entry-hero{min-height:200px;padding:19px}.dungeon-entry-copy h3{font-size:24px}.dungeon-portal-art{flex-basis:112px;width:112px;height:112px;margin-right:0}.dungeon-portal-ring{inset:9px}.dungeon-portal-art>span{font-size:38px}.dungeon-entry-actions{grid-template-columns:1fr}.dungeon-lobby-grid{grid-template-columns:1fr}.dungeon-combat-party .boss-challengers-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.dungeon-boss-stage{min-height:300px}.dungeon-monster-line{min-height:240px;padding:4px 6px 10px;gap:3px}.dungeon-monster{height:236px;padding:7px 3px}.dungeon-monster-image-wrap img{max-height:170px}.dungeon-monster-details strong{font-size:11px}.dungeon-monster-details small{font-size:7px}.dungeon-stage-heading{padding:8px}.dungeon-stage-heading>span,.dungeon-stage-heading>strong{font-size:8px}.dungeon-action-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:7px}.dungeon-action-row .b-action-slot,.dungeon-action-row .b-attack-btn{max-width:96px;height:66px}.dungeon-lobby-actions{align-items:stretch;flex-direction:column}.dungeon-enter-button{width:100%;box-sizing:border-box}.dungeon-lobby-count{min-width:75px;padding:8px}.dungeon-lobby-banner{min-height:125px;padding:16px}.dungeon-lobby-banner-copy h3{font-size:22px}}
.dungeon-unavailable-card{position:relative;isolation:isolate;display:flex;align-items:flex-start;flex-direction:column;gap:12px;min-height:210px;margin:12px 0;padding:28px;overflow:hidden;border:1px solid #63563e;background:#171f20}.dungeon-unavailable-card::before{position:absolute;z-index:-2;inset:0;background:var(--dungeon-scene) center/cover no-repeat;content:"";filter:saturate(.55)}.dungeon-unavailable-card::after{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#101616f5,#101616bf 70%,#10161666);content:""}.dungeon-unavailable-card>span{color:#d4b878;font-size:9px;font-weight:800;letter-spacing:.15em}.dungeon-unavailable-card>strong{color:#f0e1bf;font:27px/1.1 Georgia,'Times New Roman',serif}.dungeon-unavailable-card>small{max-width:420px;color:#b7bcb0;font-size:10px;line-height:1.5}.dungeon-unavailable-card .dungeon-leave-button{margin-top:4px}
.boss-combat-stage{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:16px;align-items:center;margin:12px 0;padding:14px;border:1px solid #66583c;border-radius:4px;background:linear-gradient(120deg,#242b27,#171e20)}
.boss-art-wrap{display:grid;place-items:center;min-height:190px;overflow:hidden;background:radial-gradient(ellipse,#4a4331 0%,#151d1e 72%);border:1px solid #534a35}.boss-art-wrap img{width:100%;height:210px;object-fit:contain;object-position:center bottom}.boss-stage-info{min-width:0}.boss-stage-kicker{color:#d3b979;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.boss-stage-info h3{margin:5px 0;color:#eee1c4;font:24px Georgia,'Times New Roman',serif}.boss-stage-info p{color:#a9b0a5;font-size:11px}.boss-stage-info small{color:#bcc1b6;font-size:10px}.boss-health-track{height:12px;margin:10px 0 5px;overflow:hidden;border:1px solid #0b1111;background:#0a1011}.boss-health-track span{display:block;height:100%;background:linear-gradient(90deg,#7f1d1d,#c04131);transition:width .3s}.boss-skill-flash{color:#edc779!important;font:italic 13px Georgia,serif}.boss-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:7px;margin-top:10px}.boss-action-grid button{min-height:38px;font-size:11px}.boss-invoke-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}.boss-invoke-controls select{min-width:0;padding:9px;border:1px solid #625a45;background:#141c1d;color:#e8ddc1}.boss-recipe{margin-top:8px;padding:9px}.boss-recipe .compact-row{font-size:11px}
@media(max-width:580px){.boss-combat-stage{grid-template-columns:1fr;gap:10px;padding:10px}.boss-art-wrap{min-height:150px}.boss-art-wrap img{height:160px}.boss-stage-info h3{font-size:20px}.boss-invoke-controls{grid-template-columns:1fr}.boss-invoke-controls button{width:100%}}


/* ========================================= */
/* CAMADAS DE SKILL VFX E COMBATE             */
/* ========================================= */
.vfx-layer-canvas {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: screen;
  display: none;
  margin: 0 !important;
}

#battleMonsterBox .vfx-layer-canvas {
  top: 30% !important;
}

#battlePlayerBox .vfx-layer-canvas {
  top: 45% !important;
}

.screen-flash-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.05s ease-out;
}

/* ========================================= */
/* BATALHA EPICA DE CHEFE (BOSS REGIONAL)    */
/* ========================================= */
.boss-party-container {
  background: rgba(15, 20, 30, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.boss-party-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c084fc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.boss-challengers-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.boss-challenger-card {
  background: #0d121c;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 155px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.boss-challenger-card:hover {
  background: #141c2c;
  border-color: #3b82f6;
}

.boss-challenger-avatar {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #334155;
  object-fit: cover;
  background: #020617;
}

.boss-challenger-info {
  flex: 1;
  min-width: 0;
}

.boss-challenger-name {
  font-size: 11px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.boss-challenger-bar {
  height: 5px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
}

.boss-challenger-hp-fill {
  height: 100%;
  background: #22c55e;
  transition: width 0.3s;
}

.boss-challenger-status {
  font-size: 9.5px;
  color: #94a3b8;
  margin-top: 2px;
}

.boss-epic-badge {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25) 0%, rgba(244, 63, 94, 0.25) 100%);
  border: 1px solid #eab308;
  color: #fde047;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.35);
}

.boss-aoe-warning-badge {
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid #ef4444;
  color: #fca5a5;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  animation: aoePulse 1.4s ease-in-out infinite alternate;
}

@keyframes aoePulse {
  0% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
  100% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.9); transform: scale(1.02); }
}

.boss-arena-card {
  border: 1.5px solid rgba(234, 179, 8, 0.45) !important;
  box-shadow: 0 0 25px rgba(234, 179, 8, 0.18), 0 15px 40px rgba(0,0,0,0.85) !important;
}

.boss-arena-card .monster-view-img {
  top: 40% !important;
  filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(244, 63, 94, 0.38)) !important;
}

.boss-arena-card .monster-idle-breathing {
  animation: none !important;
}

.boss-view-img {
  filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(244, 63, 94, 0.38));
}

/* Shared responsive combat layout for hunts and regional bosses. */
body.in-battle #mainCard {
  width: calc(100% - 32px) !important;
  max-width: 1180px !important;
  margin: 0 auto 30px !important;
  padding: 18px !important;
  box-sizing: border-box;
}

.battle-header {
  min-height: 44px;
  gap: 12px;
  align-items: center;
}

.battle-header-title {
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.battle-flee-btn {
  width: auto !important;
  height: auto !important;
  min-width: 72px;
  min-height: 40px !important;
  padding: 0 13px !important;
  flex: 0 0 auto;
  white-space: nowrap;
  border-color: rgba(239, 68, 68, 0.55) !important;
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.88), rgba(69, 10, 10, 0.95)) !important;
  color: #fee2e2 !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  touch-action: manipulation;
}

.battle-flee-btn:hover:not(:disabled) {
  border-color: #fca5a5 !important;
  background: linear-gradient(180deg, #991b1b, #450a0a) !important;
}

.battle-flee-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.battle-header-mode {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  color: #d6c394;
  border: 1px solid rgba(148, 125, 75, 0.35);
  border-radius: 6px;
  background: rgba(40, 34, 24, 0.45);
  font-size: 11px;
  font-weight: 700;
}

.b-top-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 190px;
  align-items: center;
  gap: 14px;
}

.b-vitals { min-width: 0; }

.b-bag-wrap {
  width: 190px;
  min-width: 0;
  justify-self: end;
}

.b-bag-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2px 5px;
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.b-bag-label span { color: #94a3b8; font-weight: 600; letter-spacing: 0; }

.b-bag {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  box-sizing: border-box;
}

.b-bag-slot {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  box-sizing: border-box;
}

.b-potion-icon { width: 66%; height: 66%; }
.b-potion-qty { bottom: -3px; right: -2px; font-size: 8px; }

.b-action-row {
  width: 100%;
  max-width: 790px;
  margin: 0 auto 14px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}

.b-action-slot {
  overflow: hidden;
  isolation: isolate;
  background: #101722;
}

.b-action-slot:not(.empty) {
  background: #101722;
}

.b-skill-icon {
  position: absolute;
  inset: 0;
  filter: none;
  overflow: hidden;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 35%, rgba(63, 83, 112, 0.45), rgba(8, 13, 22, 0.92));
  z-index: 0;
}

.b-skill-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.b-skill-svg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 12%;
  box-sizing: border-box;
  background: linear-gradient(145deg, #25354a, #0d1522);
}

.b-skill-svg svg { width: 100%; height: 100%; }

.b-action-slot:not(.empty)::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  pointer-events: none;
  z-index: 1;
}

.b-skill-mana {
  top: auto;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  min-width: 22px;
  padding: 2px 4px;
  background: rgba(8, 15, 31, 0.92);
  border: 1px solid rgba(96, 165, 250, 0.65);
  border-radius: 4px;
  color: #dbeafe;
  font-size: 9px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.b-action-row .b-attack-btn {
  align-self: stretch;
  min-height: 0 !important;
}

.boss-party-container { padding: 12px; }
.boss-party-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #e2d8ef;
  font-size: 11px;
  font-weight: 800;
}

.boss-challengers-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.boss-challenger-card {
  min-width: 0;
  padding: 7px;
  gap: 7px;
}

.boss-challenger-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.boss-challenger-name { font-size: 10px; }
.boss-challenger-status { font-size: 9px; }

.boss-entry-notice {
  margin: 8px 0;
  padding: 8px 10px;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.2);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 6px;
  font-size: 12px;
}

.b-enemy-card.stage { min-height: 410px; }
.b-enemy-img-wrap { max-width: 100%; overflow: hidden; }
.b-enemy-img-wrap .monster-view-img { max-width: min(75vw, 410px) !important; max-height: 410px !important; object-fit: contain; }

@media (max-width: 700px) {
  body.in-battle #mainCard {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    padding: 10px 8px !important;
    margin: 0 auto 14px !important;
  }

  .battle-header { min-height: 40px; gap: 7px; padding-bottom: 8px; }
  .battle-header-title { justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
  .battle-round-badge { font-size: 11px; }
  .battle-chain-badge { font-size: 9px; }
  .battle-flee-btn { min-width: 68px; min-height: 38px !important; padding: 0 9px !important; font-size: 10px; }

  .b-top-row {
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .b-player-portrait { width: 54px; height: 54px; }
  .b-status-badge { right: -4px; top: -5px; font-size: 8px; padding: 2px 4px; }
  .b-vitals { gap: 5px; padding-top: 0; }
  .b-vital-bar-wrap { height: 16px; }
  .b-last-dmg { font-size: 9px; }

  .b-bag-wrap { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
  .b-bag-label { margin: 0 2px 4px; font-size: 8px; }
  .b-bag {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
  }
  .b-bag-slot { border-radius: 4px; }
  .b-potion-qty { right: -1px; bottom: -2px; padding: 0 2px; font-size: 7px; }

  .b-action-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
  }

  .b-action-row .b-attack-btn {
    grid-column: 2 / span 3;
    min-height: 44px !important;
    flex-direction: row;
    gap: 8px;
  }

  .b-attack-icon { width: 21px; height: 21px; }
  .b-skill-mana { right: 2px; bottom: 2px; font-size: 8px; padding: 2px 3px; }

  .boss-party-container { padding: 8px; margin-bottom: 10px; }
  .boss-party-header { align-items: flex-start; gap: 4px; flex-wrap: wrap; }
  .boss-party-header > span:first-child { font-size: 10px; }
  .boss-challengers-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .boss-challenger-card { padding: 5px; gap: 5px; }
  .boss-challenger-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .boss-challenger-name { font-size: 9px; }
  .boss-challenger-info > div[style*="font-size: 9px"] { font-size: 8px !important; }
  .boss-challenger-status { font-size: 8px; }

  .b-enemy-card.stage { min-height: 320px; }
  .b-arena-header { flex-wrap: wrap; gap: 5px; }
  .b-enemy-img-wrap .monster-view-img { max-width: min(88vw, 320px) !important; max-height: 300px !important; }
  .boss-epic-badge { font-size: 9px; padding: 3px 7px; }
}

/* Caçada solo: mesma hierarquia visual do mockup responsivo. */
.hunt-topbar {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(220px, 1.5fr) minmax(120px, 1fr);
  gap: 12px;
  min-height: 52px;
  padding: 0 0 10px;
  align-items: center;
}
.hunt-topbar > .battle-header-btn,
.hunt-topbar > .battle-header-mode { justify-self: start; }
.hunt-encounter-title { min-width: 0; text-align: center; line-height: 1.15; }
.hunt-encounter-title > span { display: block; margin-bottom: 3px; color: #c9ae73; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hunt-encounter-title > strong { display: block; overflow: hidden; color: #f0e2bf; font: 18px/1.1 Georgia, 'Times New Roman', serif; text-overflow: ellipsis; white-space: nowrap; }
.hunt-encounter-title > small { display: block; margin-top: 4px; color: #a7afa6; font-size: 9px; }
.hunt-round-info { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.hunt-round-info .battle-round-badge { padding: 5px 7px; border: 1px solid #554c37; border-radius: 3px; background: #151c1e; color: #e5d3a5; font-size: 9px; font-weight: 700; white-space: nowrap; }
.hunt-round-info .battle-chain-badge { width: 100%; text-align: right; }

.hunt-hero-panel {
  display: grid;
  grid-template-columns: 48px minmax(120px, .8fr) minmax(240px, 1.5fr);
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid #514b3b;
  border-left: 2px solid #a78e5b;
  border-radius: 4px;
  background: linear-gradient(145deg, #222c29, #171f21);
  box-shadow: inset 0 1px #ffffff0a, 0 4px 10px #0003;
}
.hunt-player-portrait { width: 46px; height: 46px; border-radius: 4px; }
.hunt-player-portrait img { object-fit: cover; object-position: center top; }
.hunt-hero-identity { min-width: 0; }
.hunt-hero-identity strong { display: block; overflow: hidden; color: #efe3c5; font: 16px/1.1 Georgia, 'Times New Roman', serif; text-overflow: ellipsis; white-space: nowrap; }
.hunt-hero-identity small { display: block; overflow: hidden; margin-top: 4px; color: #a6ada1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hunt-vitals { min-width: 0; display: grid; gap: 6px; }
.hunt-vital-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; color: #bfc2b2; font-size: 8px; line-height: 1.1; }
.hunt-vital-label strong { color: #e2decb; font-size: 9px; }
.hunt-meter { height: 7px; overflow: hidden; border: 1px solid #090f11; border-radius: 2px; background: #0c1214; box-shadow: inset 0 1px 3px #0008; }
.hunt-meter span { display: block; height: 100%; transition: width .25s ease; }
.hunt-meter.hp span { background: linear-gradient(90deg, #733b36, #c96253); }
.hunt-meter.mp span { background: linear-gradient(90deg, #27546d, #4e9cb3); }
.hunt-attribute-strip { display: none; }
.hunt-attribute-stat { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 5px 7px; border: 1px solid #ffffff12; border-radius: 3px; background: #101719a8; }
.hunt-attribute-stat span { overflow: hidden; color: #9fa99f; font-size: 8px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.hunt-attribute-stat strong { color: #dfd1ae; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.hunt-effects { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.hunt-effect-tag { padding: 2px 5px; border: 1px solid #495447; border-radius: 3px; background: #19221f; color: #c7d2b7; font-size: 8px; }
.hunt-effect-tag b { color: #a9c5a0; }
.hunt-hero-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid #ffffff12; color: #929d94; font-size: 9px; }
.hunt-hero-footer strong { color: #dcc58e; font-size: 10px; }

.hunt-duel-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 10px; }
.hunt-hero-panel { margin: 0; }
.hunt-arena { min-width: 0; margin: 0; }
.hunt-enemy-stage {
  height: 332px !important;
  min-height: 332px !important;
  background-position: center 48% !important;
  isolation: isolate;
}
.hunt-enemy-stage::before { position: absolute; z-index: 0; inset: 0; background: var(--hunt-stage-image) center 48% / cover no-repeat; content: ""; filter: saturate(.72); }
.hunt-enemy-stage::after { position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, #0e151452 0%, #1118190a 34%, #11181940 59%, #101617f2 100%); content: ""; }
.hunt-enemy-stage .b-arena-header { position: relative; z-index: 3; display: flex; justify-content: flex-end; padding: 8px 9px; }
.hunt-threat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #d4b77566; border-radius: 3px; background: #111817d9; color: #e4d29f; font-size: 8px; font-weight: 700; letter-spacing: .04em; }
.hunt-threat-pill { border-color: #855447; color: #e3b49d; }
.hunt-threat-pill i { width: 6px; height: 6px; border-radius: 50%; background: #df795f; box-shadow: 0 0 7px #df795f88; }
.hunt-enemy-stage .b-enemy-img-wrap { position: absolute; z-index: 1; inset: 30px 0 76px; display: block; width: 100%; height: auto; flex: none; overflow: visible; }
.hunt-enemy-stage .monster-view-img { width: min(112vw, 490px) !important; height: min(112vw, 490px) !important; max-width: none !important; max-height: none !important; }
.hunt-enemy-stage .vfx-layer-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.hunt-enemy-details { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; padding: 0 9px 8px; background: linear-gradient(180deg, #10161700, #101617c9 25%); }
.hunt-enemy-name-row { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.hunt-enemy-name-row .b-enemy-name { min-width: 0; padding: 0; overflow: hidden; border: 0; background: none; color: #f0e3c4; font: 18px/1.1 Georgia, 'Times New Roman', serif; text-align: left; text-overflow: ellipsis; text-shadow: 0 2px 5px #000; white-space: nowrap; }
.hunt-enemy-name-row small { flex: 0 0 auto; color: #d0c7ae; font-size: 8px; white-space: nowrap; }
.hunt-enemy-hp-label { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 3px; color: #eee0c4; font-size: 8px; text-shadow: 0 1px 3px #000; }
.hunt-enemy-hp-label strong { font-size: 9px; }
.hunt-enemy-stage .b-enemy-hp-wrap { height: 10px; border: 1px solid #3e231f; border-radius: 2px; }
.hunt-enemy-stage .b-enemy-hp-fill { background: linear-gradient(90deg, #812e2e, #c84d43, #e17b61); box-shadow: 0 0 9px #d34c3888; }
.hunt-enemy-stage .b-enemy-hp-text { display: none; }
.hunt-enemy-context { margin: 4px 0 0; color: #d5ccb5; font-size: 8px; text-shadow: 0 1px 3px #000; }

.hunt-lower-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(240px, .9fr); align-items: start; gap: 10px; }
.hunt-actions-panel, .hunt-journal-panel { min-width: 0; overflow: hidden; border: 1px solid #4f4b3d; border-radius: 4px; background: linear-gradient(145deg, #202927, #161e20); box-shadow: inset 0 1px #ffffff0a, 0 5px 12px #0003; }
.hunt-panel-head, .hunt-journal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px 7px; border-bottom: 1px solid #ffffff12; }
.hunt-panel-head strong, .hunt-journal-head strong { color: #e8dab8; font: 15px Georgia, 'Times New Roman', serif; }
.hunt-panel-head small, .hunt-journal-head span { color: #9ba599; font-size: 8px; text-align: right; }
.hunt-action-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.combat-skill-cell { position: relative; min-width: 0; }
.hunt-action-grid .combat-skill-cell { height: 72px; }
.hunt-action-grid .combat-skill-cell > .b-action-slot { width: 100%; height: 100%; min-width: 0; min-height: 0 !important; aspect-ratio: auto; }
.b-action-row .combat-skill-cell { aspect-ratio: 1; }
.b-action-row .combat-skill-cell > .b-action-slot { width: 100%; height: 100%; min-width: 0; min-height: 0 !important; aspect-ratio: auto; }
.boss-topbar { grid-template-columns: minmax(92px, 1fr) minmax(220px, 1.5fr) minmax(150px, 1fr); }
.boss-topbar .hunt-round-info { gap: 5px; }
.boss-turn-badge { padding: 5px 7px; border: 1px solid #514b3d; border-radius: 3px; background: #151c1e; color: #aaa99a; font-size: 8px; font-weight: 700; white-space: nowrap; }
.boss-turn-badge.is-active { border-color: #5d7658; color: #bbd2a5; }
.boss-turn-badge.is-defeated { border-color: #855447; color: #e3a99b; }
.boss-party-container { margin: 0 0 10px; padding: 10px; border: 1px solid #4f4b3d; border-radius: 4px; background: linear-gradient(145deg, #202927, #161e20); box-shadow: inset 0 1px #ffffff0a, 0 5px 12px #0003; }
.boss-party-header { margin-bottom: 8px; color: #e8dab8; }
.boss-party-header strong { color: inherit; font: 15px Georgia, 'Times New Roman', serif; }
.boss-party-header > span { color: #9ba599; font-size: 9px; font-weight: 500; }
.boss-challengers-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.boss-challenger-card { border-color: #46534a; border-radius: 3px; background: #151d1e; }
.boss-challenger-card:hover { border-color: #ad9661; background: #202927; }
.boss-challenger-card.is-self { border-color: #d4b775; background: #302c20; }
.boss-challenger-card.defeated { opacity: .56; }
.boss-challenger-avatar { border-color: #756642; background: #101719; }
.boss-challenger-name { text-align: left; }
.boss-self-label { color: #d9bf7c; font-size: 8px; }
.boss-member-state { font-size: 8px; font-weight: 700; }
.boss-member-state.is-ready { color: #a9c68f; }
.boss-member-state.is-acted { color: #e0c879; }
.boss-member-state.is-defeated { color: #df8e7d; }
.boss-warning-row { display: flex; justify-content: center; margin: 0 0 10px; }
.boss-hero-panel { border-left-color: #d4b775; }
.hunt-location-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #d4b77566; border-radius: 3px; background: #111817d9; color: #e4d29f; font-size: 8px; font-weight: 700; }
.combat-state-notice { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #514b3d; border-radius: 4px; background: #171f20; color: #d9d1bb; font-size: 12px; text-align: center; }
.combat-state-notice p { margin: 6px 0 10px; color: #aeb6aa; }
.combat-state-notice.is-defeated { border-color: #855447; background: #281c1b; }
.combat-state-notice.is-defeated > strong { color: #edb1a2; }
.combat-state-notice.is-waiting { margin: 0 8px 8px; border-color: #625637; color: #dfce9e; }
.combat-state-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.boss-lower-grid { margin-top: 0; }
.boss-action-grid .combat-skill-cell { height: 72px; }
.boss-action-grid .hunt-attack-btn { width: 100%; }
.dungeon-action-row .dungeon-combat-skill-cell { width: 100%; max-width: 88px; height: 76px; }
.dungeon-action-row .dungeon-combat-skill-cell > .b-action-slot { width: 100%; max-width: none; height: 100%; min-height: 0 !important; aspect-ratio: auto; }
.dungeon-combat-topline { border-color: #4f4b3d; border-radius: 4px; background: linear-gradient(105deg, #28251d, #17201f); color: #d9c99f; }
.dungeon-battlefield { border-color: #4f4b3d; background: radial-gradient(ellipse at 72% 42%, #303a34 0, #1d2826 45%, #141b1d 100%); box-shadow: inset 0 1px #ffffff0a, 0 5px 12px #0003; }
.dungeon-action-panel { border-color: #4f4b3d; border-radius: 4px; background: linear-gradient(145deg, #202927, #161e20); }
.dungeon-combat-topline .battle-flee-btn { min-height: 34px !important; }
.hunt-action-grid .b-action-slot { width: 100%; height: 72px; min-width: 0; min-height: 0 !important; aspect-ratio: auto; border-color: #4c5d58; border-radius: 3px; }
.hunt-action-grid .b-action-slot:not(.empty) { background: #11191c; }
.hunt-action-grid .b-action-slot:disabled { opacity: .48; }
.hunt-action-grid .b-action-slot.empty { background: #141a1c; border-color: #53605a; }
.hunt-action-grid .b-action-slot:not(.empty)::after { z-index: 1; }
.hunt-action-grid .b-skill-icon { position: absolute; inset: 0; z-index: 0; width: auto; height: auto; border-radius: 0; background: #171d1c; }
.hunt-action-grid .b-skill-img { width: 100%; height: 100%; object-fit: cover; }
.hunt-action-grid .b-skill-svg { z-index: 0; padding: 10%; }
.hunt-action-grid .b-skill-mana { top: auto; right: 3px; bottom: 3px; z-index: 2; padding: 2px 4px; border-color: #6293a3a8; border-radius: 3px; background: #10191de8; color: #b9dce6; font-size: 8px; }
.hunt-action-grid .b-skill-mana[style*="left:4px"] { right: auto; left: 3px !important; }
.hunt-action-grid .b-attack-btn { grid-column: auto; display: flex; flex-direction: column; gap: 3px; width: 100%; height: 72px; min-height: 0 !important; padding: 5px !important; border: 1px solid #a34b3e !important; border-radius: 3px !important; background: #211718 !important; box-shadow: inset 0 1px #ffffff0b, 0 3px 6px #0005 !important; font: 800 9px/1 'Segoe UI', Arial, sans-serif !important; letter-spacing: .06em; text-transform: uppercase; }
.hunt-action-grid .b-attack-btn:hover:not(:disabled) { border-color: #df927c !important; background: #382321 !important; }
.hunt-action-grid .b-attack-btn:disabled { opacity: .48; }
.hunt-action-grid .b-attack-icon { width: 22px; height: 22px; }
.hunt-quickbar { margin: 0 8px 8px; padding-top: 7px; border-top: 1px solid #ffffff12; }
.hunt-quickbar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #99a59b; font-size: 8px; }
.hunt-quickbar-head strong { color: #dfd1ae; font: 12px Georgia, 'Times New Roman', serif; }
.hunt-quickbar .b-bag { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 5px; padding: 0; border: 0; background: transparent; }
.hunt-quickbar .b-bag-slot { height: auto; min-width: 0; aspect-ratio: 1; border-radius: 3px; }
.hunt-quickbar .b-bag-slot.empty { background: #141a1c; border: 1px dashed #526057; }
.hunt-quickbar .b-bag-slot.locked { opacity: .4 !important; }
.hunt-quickbar .b-potion-icon { width: 66%; height: 66%; }
.hunt-quickbar .b-potion-qty { right: -1px; bottom: -1px; padding: 0 2px; font-size: 7px; }
.hunt-journal-head { padding: 8px 9px 7px; }
.hunt-journal-head strong { font-size: 15px; }
.hunt-journal-latest { display: flex; align-items: flex-start; gap: 7px; padding: 9px; color: #c5c6b9; font-size: 11px; line-height: 1.45; }
.hunt-journal-latest > span { color: #d9bf7c; font-size: 13px; }
.hunt-journal-latest .log-entry { padding: 0; border: 0; color: inherit; font-size: inherit; }
.hunt-journal-latest > p { margin: 0; color: #9ba599; }
.hunt-journal-history { border-top: 1px solid #ffffff10; }
.hunt-journal-history summary { display: flex; justify-content: space-between; gap: 7px; padding: 7px 9px; color: #c3bdab; cursor: pointer; font-size: 10px; list-style-position: inside; }
.hunt-journal-history summary span { color: #929d94; }
.hunt-journal-list { max-height: 130px; overflow-y: auto; padding: 0 9px 8px; }
.hunt-journal-list .log-entry { padding: 5px 0; border-top: 1px solid #ffffff0d; font-size: 10px; }

/* Torre e Labirinto: portais visuais para as expedições e leitura de progresso. */
.expedition-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  min-height: 255px;
  margin: 12px 0;
  padding: 22px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #71613f;
  border-radius: 5px;
  background:
    linear-gradient(90deg, #111918f5 0%, #141c1bdc 42%, #141c1b5c 100%),
    linear-gradient(0deg, #0d1414dc 0%, transparent 64%),
    var(--expedition-scene, linear-gradient(125deg, #28332d, #111819));
  background-position: center, center, center 48%;
  background-size: cover;
  box-shadow: inset 0 1px #ffffff10, 0 7px 18px #0004;
}
.expedition-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 80% 45%, #d8bd7430, transparent 43%);
  content: "";
}
.expedition-hero-copy { position: relative; z-index: 1; max-width: 620px; }
.expedition-mode-crest {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 5px 8px;
  border: 1px solid #d6ba6c88;
  border-radius: 3px;
  background: #101817d9;
  color: #ecd79e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}
.expedition-mode-crest img { width: 20px; height: 20px; object-fit: contain; }
.expedition-hero-title { display: block; color: #f1e2bf; font: 30px/1.08 Georgia, 'Times New Roman', serif; text-shadow: 0 2px 8px #000b; }
.expedition-hero-description { max-width: 520px; margin: 8px 0 0; color: #d0d0c2; font-size: 12px; line-height: 1.55; text-shadow: 0 1px 4px #000c; }
.expedition-hero-emblem {
  position: absolute;
  z-index: 0;
  right: 37%;
  bottom: 18px;
  width: clamp(100px, 15vw, 160px);
  height: clamp(100px, 15vw, 160px);
  object-fit: contain;
  opacity: .86;
  filter: drop-shadow(0 10px 14px #000b);
  pointer-events: none;
}
.expedition-metric-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); gap: 6px; align-self: end; width: min(100%, 340px); }
.expedition-metric { min-width: 0; padding: 8px; border: 1px solid #ffffff20; border-radius: 3px; background: #101817d9; box-shadow: inset 0 1px #ffffff0a; }
.expedition-metric span { display: block; overflow: hidden; color: #aab1a5; font-size: 8px; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.expedition-metric strong { display: block; overflow: hidden; margin-top: 4px; color: #f0d894; font: 14px Georgia, 'Times New Roman', serif; text-overflow: ellipsis; white-space: nowrap; }
.expedition-progress { position: relative; z-index: 1; grid-column: 1 / -1; width: 100%; margin-top: 2px; }
.expedition-progress-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: #d2c9b0; font-size: 8px; }
.expedition-progress-label strong { color: #f0d894; font-variant-numeric: tabular-nums; }
.expedition-progress-track { height: 6px; overflow: hidden; border: 1px solid #090e0e; border-radius: 2px; background: #0b1112; }
.expedition-progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #88713d, #e5c775); box-shadow: 0 0 8px #e4c36680; }
.expedition-portal-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0 0 12px; padding: 14px; border: 1px solid #4b5145; border-radius: 4px; background: linear-gradient(145deg, #202927, #151d1e); box-shadow: inset 0 1px #ffffff08; }
.expedition-panel-copy { min-width: 0; }
.expedition-panel-kicker { color: #d2b66e; font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.expedition-panel-copy h3 { margin: 4px 0 5px; color: #eee0c0; font: 17px Georgia, 'Times New Roman', serif; }
.expedition-panel-copy p { margin: 0; color: #aab3a9; font-size: 10px; line-height: 1.5; }
.expedition-summary p { margin: 4px 0 0; color: #aab3a9; font-size: 10px; line-height: 1.45; }
.expedition-summary .text-gold { color: #e3ce91; }
.expedition-action-row { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.expedition-action-row > button { min-width: 170px; }
.expedition-action-row > .grid-2 { display: flex; gap: 8px; }
.expedition-action-row > .grid-2 > button { min-width: 145px; }
.expedition-door-grid { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; }
.expedition-door-option {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 124px;
  padding: 10px 7px;
  border: 1px solid #55574a;
  border-radius: 4px;
  background: linear-gradient(180deg, #252a25, #131a1b);
  color: #e3d5b6;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.expedition-door-option:hover { transform: translateY(-2px); border-color: #d4b775; background: linear-gradient(180deg, #393523, #19201f); }
.expedition-door-art { position: relative; display: grid; place-items: center; width: 46px; height: 64px; border: 2px solid #9b8250; border-bottom-width: 4px; border-radius: 24px 24px 2px 2px; background: linear-gradient(90deg, #1b211f, #4a4029 50%, #1b211f); box-shadow: inset 0 0 0 3px #111817, 0 4px 10px #0008; }
.expedition-door-art::before { position: absolute; inset: 8px 7px 5px; border: 1px solid #c4a85f88; border-radius: 18px 18px 0 0; content: ""; }
.expedition-door-art i { position: absolute; right: 8px; bottom: 16px; width: 4px; height: 4px; border-radius: 50%; background: #e7c96f; box-shadow: 0 0 7px #e7c96f; }
.expedition-door-option strong { color: #f0d894; font: 12px Georgia, 'Times New Roman', serif; }
.expedition-door-option small { color: #9ea69d; font-size: 8px; }
.labyrinth-door-panel .expedition-panel-copy,
.labyrinth-door-panel .expedition-door-grid { grid-column: 1 / -1; }
.expedition-start-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding-top: 2px; color: #9fa89e; font-size: 9px; }
.expedition-start-note > span:first-child { color: #d7bd79; font-size: 13px; }
.expedition-result-door-grid { max-width: 350px; margin: 12px auto 0; }
.expedition-result-door-grid .expedition-door-option { min-height: 110px; }
.expedition-unavailable { margin: 12px 0; }
.expedition-unavailable { grid-column: 1 / -1; padding: 13px; border: 1px solid #66563b; border-radius: 3px; background: #1b201d; color: #d7c89e; font-size: 11px; }
.battle-header-mode { gap: 6px; border-color: #76623c; border-radius: 4px; background: #171d1bdf; letter-spacing: .08em; text-transform: uppercase; }
.battle-header-mode img { width: 21px; height: 21px; object-fit: contain; filter: drop-shadow(0 2px 3px #0008); }
.battle-header-mode.tower-battle-mode { color: #efdcaa; }
.battle-header-mode.labyrinth-battle-mode { border-color: #64706b; color: #d8dfd4; }

@media (max-width: 760px) {
  .expedition-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 14px; padding: 15px; }
  .expedition-hero-copy { max-width: 75%; }
  .expedition-hero-title { font-size: 24px; }
  .expedition-hero-description { font-size: 10px; }
  .expedition-hero-emblem { right: 4%; bottom: 72px; width: clamp(92px, 27vw, 145px); height: clamp(92px, 27vw, 145px); }
  .expedition-metric-grid { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expedition-metric { padding: 7px 6px; }
  .expedition-metric strong { font-size: 12px; }
  .expedition-portal-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 11px; }
  .expedition-action-row, .expedition-action-row > .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); justify-content: stretch; }
  .expedition-action-row > button, .expedition-action-row > .grid-2 > button { min-width: 0; width: 100%; }
  .expedition-door-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .expedition-door-option { min-height: 112px; padding: 8px 4px; }
}
@media (max-width: 420px) {
  .expedition-hero-copy { max-width: 78%; }
  .expedition-mode-crest { margin-bottom: 7px; font-size: 7px; }
  .expedition-mode-crest img { width: 17px; height: 17px; }
  .expedition-hero-title { font-size: 21px; }
  .expedition-metric span { font-size: 7px; }
  .expedition-metric strong { font-size: 11px; }
}

/* Oficina: folhas de receita com leitura clara e estados de criação visíveis. */
.crafting-summary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;padding:8px 12px;border:1px solid #6d6548;background:#202a28;color:#e7d7ae;font-size:11px;letter-spacing:.03em}
.crafting-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:stretch}
.crafting-card{display:flex;flex-direction:column;gap:0;overflow:hidden;padding:19px;border:1px solid #a58c5e;border-top:3px solid #806340;background:radial-gradient(circle at 96% 4%,#f4e8c9 0,transparent 34%),linear-gradient(145deg,#ebddbb,#d6c399);color:#302a20;box-shadow:inset 0 0 0 4px #f6eac243,0 6px 16px #0004;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.crafting-card:hover{transform:translateY(-3px);border-color:#c6a468;box-shadow:inset 0 0 0 4px #f6eac243,0 10px 22px #0005}
.crafting-card.is-craftable{border-top-color:#386044}
.crafting-card.locked-card{background:radial-gradient(circle at 96% 4%,#e8deca 0,transparent 34%),linear-gradient(145deg,#dcd1b7,#c5b89d);color:#342e24;border-color:#998b70}
.crafting-card .crafting-card-top{align-items:flex-start;flex-wrap:wrap;gap:6px;margin:0 0 11px;padding-bottom:10px;border-bottom:1px solid #aa956d}
.crafting-card .card-kind{font-size:10px;font-weight:800;line-height:1.4;color:#55442d}
.crafting-state{padding:3px 8px;border:1px solid #87775b;border-radius:2px;background:#d0c09d;color:#3e372b;font-size:10px;font-weight:700;white-space:nowrap}
.crafting-card.is-craftable .crafting-state{border-color:#59805c;background:#d8e6c5;color:#24442d}
.crafting-card .catalog-card-header{margin:0 0 9px;align-items:center}
.crafting-card .catalog-thumb-box{width:58px;height:58px;border-color:#705c40;background:radial-gradient(circle,#52605a,#1c2929);box-shadow:inset 0 0 8px #0007,0 2px 3px #0004}
.crafting-card .catalog-thumb-box img{width:49px;height:49px}
.crafting-card .catalog-card-header-info h3{margin:0;color:#28291e;font-size:18px;line-height:1.2;overflow-wrap:anywhere}
.crafting-card .crafting-signature{margin:5px 0 0;color:#385540;font-size:11px;font-weight:700}
.crafting-card .crafting-requirements{margin:0 0 9px;padding:5px 8px;border-left:2px solid #866f45;background:#f4e8c580;color:#4a3e2b;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.crafting-card .crafting-bonus{margin:0 0 11px;color:#31583a;font-size:12px;line-height:1.45}
.crafting-card .crafting-bonus:empty{display:none}
.crafting-skill{display:flex;align-items:flex-start;gap:8px;margin:0 0 11px;padding:8px 9px;border:1px solid #81929a;background:#d8e3df;color:#1e3942;font-size:11px;line-height:1.45}
.crafting-skill-icon{color:#285769;font-size:17px;line-height:1}
.crafting-skill strong,.crafting-skill span:not(.crafting-skill-icon){display:block}
.crafting-skill strong{color:#163643}
.crafting-costs{display:flex;flex-wrap:wrap;gap:5px 10px;padding:10px 0;border-top:1px solid #aa956d;border-bottom:1px solid #aa956d;color:#493b27;font-size:11px}
.crafting-costs span{white-space:nowrap}
.crafting-costs strong{color:#2d2b21;font-family:inherit;font-variant-numeric:tabular-nums}
.crafting-materials{margin-top:12px}
.crafting-materials-heading{display:flex;justify-content:space-between;flex-wrap:wrap;gap:3px 10px;margin-bottom:7px;color:#403322;font-size:11px}
.crafting-materials-heading strong{font-family:inherit;text-transform:uppercase;letter-spacing:.1em}
.crafting-materials-heading span{color:#514935;font-variant-numeric:tabular-nums}
.crafting-materials ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.crafting-ingredient{display:grid;grid-template-columns:15px minmax(0,1fr) auto;align-items:start;gap:7px;padding:5px 7px;border:1px solid #b5a37d;background:#f4e8cc9c;color:#342c21;font-size:11px;line-height:1.35}
.crafting-ingredient.is-ready{border-color:#8fa283;background:#e3e9d5}
.crafting-ingredient.is-missing{border-color:#b99177;background:#f1e0ca}
.crafting-ingredient-mark{font-weight:900;color:#385d3a}
.crafting-ingredient.is-missing .crafting-ingredient-mark{color:#934b35}
.crafting-ingredient-name{overflow-wrap:anywhere}
.crafting-ingredient strong{font-family:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}
.crafting-ingredient.is-missing strong{color:#813d2c}
.crafting-card .crafting-lore{margin:11px 0;color:#3b382d}
.crafting-card .crafting-lore summary{font-size:11px;font-weight:700;text-decoration:none}
.crafting-card .crafting-lore summary:hover{text-decoration:underline}
.crafting-card .crafting-lore p{margin:7px 0 0;color:#413b2d;line-height:1.45}
.crafting-action{margin-top:auto;padding-top:7px}
.crafting-card .crafting-blocker{margin:0 0 6px;color:#713d2e;font-size:11px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.crafting-card .crafting-action button{width:100%;min-height:40px;margin:0}
.crafting-card .crafting-action button:disabled{opacity:1;border-color:#817965;background:#a9a394;color:#302f29;font-size:11px;box-shadow:none}
.crafting-card .crafting-action button.primary:hover{background:linear-gradient(#f1d796,#c7a35b)}
@media(max-width:480px){.crafting-card{padding:16px}.crafting-summary{align-items:flex-start;flex-direction:column}.crafting-card .catalog-card-header-info h3{font-size:17px}}
@media(prefers-reduced-motion:reduce){.crafting-card{transition:none}.crafting-card:hover{transform:none}}

@media (min-width: 901px) {
  .hunt-duel-layout { grid-template-columns: minmax(245px, .38fr) minmax(0, 1fr); align-items: stretch; gap: 10px; }
  .hunt-hero-panel {
    height: 100%;
    min-height: 332px;
    box-sizing: border-box;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    align-content: stretch;
    gap: 10px 9px;
    padding: 12px;
  }
  .hunt-player-portrait { width: 54px; height: 54px; }
  .hunt-hero-identity strong { font-size: 18px; }
  .hunt-hero-identity small { font-size: 10px; }
  .hunt-hero-panel .hunt-vitals { grid-column: 1 / -1; grid-row: 2; align-self: start; gap: 13px; }
  .hunt-attribute-strip { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .hunt-hero-panel .hunt-vital-label { font-size: 10px; }
  .hunt-hero-panel .hunt-vital-label strong { font-size: 11px; }
  .hunt-hero-panel .hunt-meter { height: 9px; }
  .hunt-hero-panel .hunt-effects { grid-column: 1 / -1; grid-row: 4; gap: 5px; }
  .hunt-hero-panel .hunt-effect-tag { padding: 3px 6px; font-size: 9px; }
  .hunt-hero-panel .hunt-hero-footer { grid-column: 1 / -1; grid-row: 5; align-self: end; padding-top: 8px; font-size: 10px; }
  .hunt-hero-panel .hunt-hero-footer strong { font-size: 11px; }
}

@media (max-width: 760px) {
  .hunt-topbar { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 6px; min-height: 48px; padding-bottom: 8px; }
  .hunt-topbar > .battle-header-btn { min-width: 64px; min-height: 35px !important; padding: 0 7px !important; font-size: 9px; }
  .hunt-topbar > .battle-header-mode { max-width: 75px; min-height: 31px; padding: 0 5px; font-size: 8px; }
  .hunt-encounter-title > span { font-size: 7px; letter-spacing: .14em; }
  .hunt-encounter-title > strong { font-size: 14px; }
  .hunt-encounter-title > small { margin-top: 3px; font-size: 7px; }
  .hunt-round-info { flex-direction: column; align-items: end; gap: 3px; }
  .hunt-round-info .battle-round-badge { padding: 3px 5px; font-size: 7px; }
  .hunt-round-info .battle-chain-badge { display: none; }
  .hunt-hero-panel { grid-template-columns: 42px minmax(78px, .75fr) minmax(0, 1.25fr); gap: 6px 7px; margin-bottom: 0; padding: 7px; }
  .hunt-player-portrait { width: 42px; height: 42px; }
  .hunt-hero-identity strong { font-size: 13px; }
  .hunt-hero-identity small { margin-top: 3px; font-size: 7px; }
  .hunt-vitals { gap: 5px; }
  .hunt-vital-label { font-size: 7px; }
  .hunt-vital-label strong { font-size: 8px; }
  .hunt-meter { height: 6px; }
  .hunt-effects { grid-column: 2 / -1; }
  .hunt-hero-footer { padding-top: 5px; font-size: 9px; }
  .hunt-hero-footer strong { font-size: 10px; }
  .hunt-arena { margin-bottom: 0; }
  .hunt-enemy-stage { height: 286px !important; min-height: 286px !important; }
  .hunt-enemy-stage .b-arena-header { padding: 7px 8px; }
  .hunt-threat-pill { padding: 4px 6px; font-size: 7px; }
  .hunt-enemy-stage .b-enemy-img-wrap { inset: 29px 0 70px; }
  .hunt-enemy-stage .monster-view-img { width: min(112vw, 440px) !important; height: min(112vw, 440px) !important; }
  .hunt-enemy-details { padding: 0 8px 7px; }
  .hunt-enemy-name-row .b-enemy-name { font-size: 16px; }
  .hunt-enemy-name-row small { font-size: 7px; }
  .hunt-enemy-hp-label { font-size: 7px; }
  .hunt-enemy-hp-label strong { font-size: 8px; }
  .hunt-enemy-context { font-size: 7px; }
  .hunt-lower-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hunt-panel-head, .hunt-journal-head { padding: 7px 8px 6px; }
  .hunt-panel-head strong, .hunt-journal-head strong { font-size: 14px; }
  .hunt-panel-head small { font-size: 7px; }
  .hunt-journal-head span { font-size: 8px; }
  .hunt-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 7px; }
  .hunt-action-grid .combat-skill-cell { width: 100%; max-width: 106px; height: auto; aspect-ratio: 1.58; justify-self: center; }
  .hunt-action-grid .combat-skill-cell > .b-action-slot { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
  .hunt-action-grid .b-action-slot, .hunt-action-grid .b-attack-btn { width: 100%; max-width: 106px; height: auto; aspect-ratio: 1.58; justify-self: center; }
  .dungeon-action-row .dungeon-combat-skill-cell { max-width: 96px; height: 66px; }
  .dungeon-action-row .dungeon-combat-skill-cell > .b-action-slot { max-width: none; height: 100%; }
  .hunt-action-grid .b-skill-mana { right: 3px; bottom: 3px; font-size: 7px; }
  .hunt-action-grid .b-attack-btn { font-size: 8px !important; }
  .hunt-action-grid .b-attack-icon { width: 19px; height: 19px; }
  .hunt-quickbar { margin: 0 3px 7px; padding-top: 6px; }
  .hunt-quickbar .b-bag { gap: 2px; margin-top: 5px; }
  .hunt-quickbar .b-bag-slot { height: 46px; aspect-ratio: auto; border-radius: 3px; }
  .hunt-quickbar .b-potion-icon { width: 80%; height: 80%; }
  .hunt-journal-latest { padding: 7px 8px; font-size: 10px; }
  .hunt-journal-history summary { padding: 7px 8px; font-size: 9px; }
  .hunt-journal-list { padding: 0 8px 7px; }
  .hunt-journal-list .log-entry { font-size: 9px; }
  .boss-topbar { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .boss-topbar .hunt-round-info { flex-direction: column; align-items: end; gap: 3px; }
  .boss-turn-badge { padding: 3px 5px; font-size: 7px; }
  .boss-warning-row .boss-aoe-warning-badge { max-width: 100%; font-size: 8px; line-height: 1.3; text-align: center; }
  .boss-party-container { padding: 8px; }
  .boss-party-header strong { font-size: 13px; }
  .boss-party-header > span { font-size: 8px; }
  .boss-challengers-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .boss-challenger-card { padding: 5px; gap: 5px; }
  .boss-challenger-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .boss-challenger-name { font-size: 9px; }
  .boss-challenger-status, .boss-member-state { font-size: 8px; }
  .boss-lower-grid { grid-template-columns: minmax(0, 1fr); }
  .combat-state-actions > button { flex: 1 1 130px; }
}

/* Dungeon: divide o espaço entre ações e bolsa sem esticar os slots da bolsa. */
@media (min-width: 701px) {
  .dungeon-combat-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px 14px;
  }

  .dungeon-combat-controls .dungeon-action-row {
    grid-column: 1;
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .dungeon-combat-controls .dungeon-action-row > .b-attack-btn,
  .dungeon-combat-controls .dungeon-action-row > .combat-skill-cell,
  .dungeon-combat-controls .dungeon-action-row > .b-action-slot {
    height: 88px;
  }

  .dungeon-combat-controls .dungeon-bag-wrap {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 270px;
    min-width: 0;
    justify-self: start;
    margin: 0;
    padding: 8px 0 0;
    border-top: 1px solid #ffffff12;
  }

  .dungeon-combat-controls .dungeon-bag-wrap .b-bag {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dungeon-combat-controls .dungeon-bag-wrap .b-bag-slot {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

@media (min-width: 901px) {
  .dungeon-combat-controls {
    grid-template-columns: minmax(0, 1fr) 270px;
  }

  .dungeon-combat-controls .dungeon-action-row,
  .dungeon-combat-controls .dungeon-turn-wait {
    grid-column: 1;
    grid-row: 1;
  }

  .dungeon-combat-controls .dungeon-bag-wrap {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    padding: 0 0 0 12px;
    border-top: 0;
    border-left: 1px solid #ffffff12;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .dungeon-combat-controls .dungeon-bag-wrap .b-bag-slot {
    max-width: 58px;
  }
}

/* Keep each target isolated: transparent monster art must not cover a neighbor's hitbox. */
.dungeon-monster-line {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.dungeon-monster {
  z-index: 0;
  overflow: visible;
  isolation: isolate;
}

.dungeon-monster.is-attacking {
  z-index: 20 !important;
  overflow: visible !important;
}

.dungeon-monster:hover:not(:disabled) {
  z-index: 1;
  transform: none;
}

.dungeon-monster.selected {
  z-index: 2;
}

.dungeon-monster-image-wrap {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.dungeon-monster.is-attacking .dungeon-monster-image-wrap {
  overflow: visible !important;
}

.dungeon-monster-image-wrap img.dungeon-monster-sprite {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}

.dungeon-monster.selected .dungeon-monster-image-wrap img.dungeon-monster-sprite {
  transform: none;
}

.dungeon-monster-image-wrap .dungeon-monster-attack-canvas,
.dungeon-monster-image-wrap .dungeon-monster-attack-gif {
  position: absolute;
  z-index: 10;
  display: none;
  pointer-events: none;
}

.dungeon-target-marker,
.dungeon-monster-details,
.dungeon-monster-shadow,
.dungeon-defeated-stamp {
  pointer-events: none;
}

.dungeon-monster-image-wrap .dungeon-monster-vfx-canvas {
  z-index: 4;
  max-width: none;
  max-height: none;
}

.dungeon-miss-dodge {
  animation: dungeonMissDodge 0.42s ease-out;
}

@keyframes dungeonMissDodge {
  0%, 100% { transform: translateX(0); filter: none; }
  22% { transform: translateX(-4px) rotate(-3deg); filter: brightness(1.35); }
  46% { transform: translateX(4px) rotate(3deg); }
  70% { transform: translateX(-2px); }
}

@media (max-width: 700px) {
  .dungeon-monster-image-wrap img.dungeon-monster-sprite {
    max-height: 170px;
  }
}

@media (max-width: 760px) {
  .hunt-topbar > .battle-header-mode { gap: 3px; font-size: 7px; }
  .hunt-topbar > .battle-header-mode img { width: 16px; height: 16px; }
}

/* Santuário Sombrio: apresentação visual e estado atualizado em segundo plano. */
.sanctuary-entry-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 270px);
  grid-template-rows: 1fr auto;
  gap: 10px 20px;
  min-height: 245px;
  margin: 12px 0;
  padding: 19px 22px;
  overflow: hidden;
  border: 1px solid #776642;
  border-radius: 5px;
  background: linear-gradient(120deg, #1b2421, #131a1b);
  box-shadow: inset 0 1px #ffffff12, 0 7px 18px #0004;
}
.sanctuary-entry-hero::before,
.sanctuary-entry-hero::after { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; }
.sanctuary-entry-hero::before {
  z-index: -2;
  background: var(--sanctuary-scene) center 48%/cover no-repeat;
  filter: saturate(.58) brightness(.68);
}
.sanctuary-entry-hero::after {
  background: linear-gradient(90deg, #101716f2 0%, #121918dd 46%, #11181740 100%), linear-gradient(0deg, #0c1212c9, transparent 64%);
}
.sanctuary-entry-copy { position: relative; z-index: 1; align-self: center; min-width: 0; }
.sanctuary-entry-crest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid #d1b76a77;
  background: #101716d9;
  color: #e7d197;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
}
.sanctuary-entry-crest img { width: 18px; height: 18px; object-fit: contain; }
.sanctuary-entry-title { display: block; margin-top: 8px; color: #f1e3c2; font: 27px/1.08 Georgia, 'Times New Roman', serif; text-shadow: 0 2px 9px #000; }
.sanctuary-entry-copy p { max-width: 480px; margin: 7px 0 12px; color: #c2c7b9; font-size: 10px; line-height: 1.5; }
.sanctuary-entry-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 550px; }
.sanctuary-entry-facts > span { min-width: 0; padding: 6px 7px; border: 1px solid #ffffff1c; background: #101716c9; }
.sanctuary-entry-facts small,.sanctuary-countdown small { display: block; overflow: hidden; color: #a8b1a5; font-size: 7px; font-weight: 700; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.sanctuary-entry-facts strong { display: block; overflow: hidden; margin-top: 3px; color: #e7d39c; font-size: 9px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.sanctuary-entry-art { position: relative; z-index: 0; display: grid; place-items: center; grid-column: 2; grid-row: 1; min-height: 215px; }
.sanctuary-entry-art::before { position: absolute; bottom: 13px; left: 8%; width: 84%; height: 22px; border: 1px solid #d3bc7070; border-radius: 50%; background: #d8bd6022; box-shadow: 0 0 22px #d9c46e45; content: ""; }
.sanctuary-entry-art > img { position: relative; z-index: 1; width: 100%; height: 225px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 10px #000c); }
.sanctuary-hero-rift { display: grid; place-items: center; width: 150px; height: 150px; border: 1px solid #c9b66d77; border-radius: 50%; background: radial-gradient(circle, #9bd1d336, #333d352c 54%, transparent 72%); box-shadow: inset 0 0 30px #b8d8cf29, 0 0 35px #9dc8d12e; }
.sanctuary-hero-rift::before,.sanctuary-hero-rift::after { position: absolute; width: 122px; height: 122px; border: 1px dashed #abc5c27a; border-radius: 50%; content: ""; transform: rotate(24deg); }
.sanctuary-hero-rift::after { width: 94px; height: 94px; border-style: solid; transform: rotate(-38deg); }
.sanctuary-hero-rift span { color: #d7d3aa; font-size: 48px; text-shadow: 0 0 22px #b7e2e6; }
.sanctuary-hero-health { position: relative; z-index: 1; grid-column: 1 / -1; align-self: end; }
.sanctuary-hero-health > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; color: #b8b8a7; font-size: 8px; }
.sanctuary-hero-health > div:first-child strong { color: #e6d5ad; font-variant-numeric: tabular-nums; }
.sanctuary-health-track { height: 8px; overflow: hidden; border: 1px solid #0b1111; background: #090e0f; }
.sanctuary-health-track i { display: block; height: 100%; background: linear-gradient(90deg, #7f1d1d, #c04131, #e78162); box-shadow: 0 0 8px #e2523d70; transition: width .4s ease; }
.sanctuary-event-panel,.sanctuary-invocation-panel { margin: 0 0 12px; padding: 14px; border: 1px solid #4b554a; border-radius: 4px; background: linear-gradient(145deg, #202927, #151d1e); box-shadow: inset 0 1px #ffffff08; }
.sanctuary-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sanctuary-panel-heading > div > span,.sanctuary-invocation-content > span { color: #d2b66e; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.sanctuary-panel-heading h3,.sanctuary-invocation-content h3 { margin: 4px 0; color: #eee0c0; font: 19px Georgia, 'Times New Roman', serif; }
.sanctuary-event-panel > p,.sanctuary-invocation-content > p { max-width: 760px; margin: 5px 0 10px; color: #aab3a9; font-size: 10px; line-height: 1.5; }
.sanctuary-event-panel > .sanctuary-outcome-message { padding: 9px 10px; border-left: 2px solid #c9ab63; background: #101716aa; color: #e3d2a3; }
.sanctuary-party-count { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #bdab765c; background: #111716a6; color: #f0d48f; font: 23px Georgia, 'Times New Roman', serif; }
.sanctuary-party-count i { color: #b9b29b; font-size: 12px; font-style: normal; }
.sanctuary-roster-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 9px 0; }
.sanctuary-roster-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 1px solid #435047; background: linear-gradient(110deg, #222d28, #171f20); }
.sanctuary-roster-card img { flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #83734e; border-radius: 3px; background: #121918; object-fit: cover; }
.sanctuary-roster-card > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sanctuary-roster-card strong { overflow: hidden; color: #eee1c4; font: 12px Georgia, 'Times New Roman', serif; text-overflow: ellipsis; white-space: nowrap; }
.sanctuary-roster-card small { color: #a8b1a6; font-size: 8px; }
.sanctuary-roster-card > i { margin-left: auto; color: #e2c66f; font-size: 16px; font-style: normal; }
.sanctuary-roster-card.is-defeated { opacity: .6; filter: grayscale(.6); }
.sanctuary-panel-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sanctuary-panel-actions > .primary { min-width: 200px; }
.sanctuary-countdown { flex: 0 0 auto; min-width: 110px; padding: 8px 10px; border: 1px solid #776744; background: #131a18bd; text-align: center; }
.sanctuary-countdown strong { display: block; margin-top: 4px; color: #f0d48f; font: 19px Georgia, 'Times New Roman', serif; font-variant-numeric: tabular-nums; }
.sanctuary-invocation-panel { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; background: linear-gradient(125deg, #252820, #171e20); }
.sanctuary-invocation-crest { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #c9ab63; border-radius: 50%; color: #efd282; font-size: 27px; box-shadow: 0 0 17px #d6b55837, inset 0 0 14px #d6b55820; }
.sanctuary-invocation-content { min-width: 0; }
.sanctuary-invocation-content h3 { margin-bottom: 3px; }
.sanctuary-invocation-content > p { margin-top: 4px; }
.sanctuary-invocation-panel .boss-invoke-controls { max-width: 720px; }
.sanctuary-open-lobbies { max-width: 720px; margin-top: 12px; }
.sanctuary-open-lobbies > strong { display: block; margin-bottom: 6px; color: #d9cfb3; font-size: 9px; }
.sanctuary-open-lobbies .compact-list { display: grid; gap: 5px; }
.sanctuary-open-lobbies .compact-row { margin: 0; padding: 7px 9px; border: 1px solid #3f4a42; background: #111918aa; font-size: 9px; }
@media (max-width: 700px) {
  .sanctuary-entry-hero { grid-template-columns: minmax(0, 1fr) minmax(105px, 36%); min-height: 225px; gap: 8px; padding: 14px; }
  .sanctuary-entry-title { font-size: 21px; }
  .sanctuary-entry-copy p { font-size: 9px; }
  .sanctuary-entry-art { min-height: 175px; }
  .sanctuary-entry-art > img { height: 180px; }
  .sanctuary-hero-rift { width: 110px; height: 110px; }
  .sanctuary-hero-rift::before { width: 88px; height: 88px; }
  .sanctuary-hero-rift::after { width: 66px; height: 66px; }
  .sanctuary-entry-facts { gap: 4px; }
  .sanctuary-entry-facts > span { padding: 5px; }
  .sanctuary-entry-facts small { font-size: 6px; }
  .sanctuary-entry-facts strong { font-size: 7px; }
  .sanctuary-event-panel,.sanctuary-invocation-panel { padding: 10px; }
}
@media (max-width: 420px) {
  .sanctuary-entry-hero { grid-template-columns: minmax(0, 1fr) 92px; min-height: 215px; padding: 11px; }
  .sanctuary-entry-crest { gap: 4px; padding: 3px 5px; font-size: 6px; }
  .sanctuary-entry-crest img { width: 14px; height: 14px; }
  .sanctuary-entry-title { font-size: 18px; }
  .sanctuary-entry-art { min-height: 150px; }
  .sanctuary-entry-art > img { height: 155px; }
  .sanctuary-entry-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sanctuary-entry-facts strong { font-size: 6px; }
  .sanctuary-panel-heading h3 { font-size: 16px; }
  .sanctuary-invocation-panel { grid-template-columns: 35px minmax(0, 1fr); gap: 8px; }
  .sanctuary-invocation-crest { width: 34px; height: 34px; font-size: 20px; }
  .sanctuary-panel-actions { align-items: stretch; flex-direction: column; }
  .sanctuary-panel-actions > .primary { min-width: 0; width: 100%; }
}
.library-manage-tabs{padding-bottom:10px;border-bottom:1px solid #786a4e;margin:4px 0 16px}
.library-manage-tabs button{min-width:150px;font-weight:700}

/* Artificer Workshop - Dedicated Service Layouts */
.artificer-capacity-banner {
  background: #0f1618;
  border: 1px solid var(--line);
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 6px;
}
.artificer-capacity-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 13px;
}
.artificer-capacity-track {
  width: 100%;
  height: 8px;
  background: #060a0b;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.artificer-capacity-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 3px;
  transition: width 0.3s;
}
.artificer-capacity-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
.artificer-spotlight-card {
  padding: 24px 16px;
  background: radial-gradient(circle at center top, #1e282c 0%, #0d1315 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  margin-bottom: 16px;
}
.artificer-stage-box {
  width: 80px;
  height: 80px;
  background: #070b0c;
  border: 2px solid var(--gold);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 0 24px rgba(212, 178, 103, 0.25);
  position: relative;
}
.artificer-stage-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.artificer-stage-box .level-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: var(--gold);
  color: #0c1214;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #000;
}
.artificer-spotlight-title {
  font-size: 16px;
  font-family: Georgia, serif;
  color: #ffd070;
  margin-bottom: 4px;
}
.artificer-spotlight-desc {
  font-size: 12px;
  color: var(--muted);
  max-width: 400px;
  line-height: 1.4;
  margin-bottom: 18px;
}
.artificer-req-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin-bottom: 20px;
  text-align: left;
}
.artificer-req-card {
  background: #0d1416;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s;
}
.artificer-req-card.ok {
  border-color: #2e6930;
  background: rgba(22, 101, 52, 0.12);
}
.artificer-req-card.missing {
  border-color: #8f2d2d;
  background: rgba(153, 27, 27, 0.12);
}
.artificer-req-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.artificer-req-thumb {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.artificer-req-status {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}
.artificer-req-card.ok .artificer-req-status { color: #86efac; }
.artificer-req-card.missing .artificer-req-status { color: #f87171; }
.artificer-tip-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 11.5px;
  color: #fde68a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.artificer-chests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.artificer-chest-item {
  background: #111a1d;
  border: 1px solid #28373b;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.2s;
}
.artificer-chest-item:hover {
  border-color: #556c70;
}

/* Keep the language picker compact beside the game identity. */
#riseLanguage{width:auto;max-width:160px;flex:0 0 auto;font-size:13px;padding:8px 10px;margin:0}html:lang(ja) .login-story h1,html:lang(ko) .login-story h1{font-size:clamp(28px,3.5vw,48px);line-height:1.4;word-break:normal} @media(max-width:600px){#riseLanguage{max-width:125px;font-size:12px}.masthead{gap:10px;flex-wrap:wrap}}