/* ── RESET & BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0c0906;
  --bg2:         #16100a;
  --bg3:         #1f1610;
  --panel:       #211508;
  --border:      #3a2910;
  --border2:     #5a3e18;
  --gold:        #c8a030;
  --gold2:       #f0c860;
  --gold-dim:    #7a5f18;
  --text:        #e0cda0;
  --text2:       #9a7d50;
  --text-dim:    #5a4530;
  --red:         #8b1818;
  --red2:        #c02020;
  --blue:        #183870;
  --blue2:       #2858b0;
  --green:       #183820;
  --green2:      #2a7040;
  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 4px 20px rgba(0,0,0,.7);
  --hud-h:       56px;
  --bar-h:       68px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Georgia', serif;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.game-icon {
  display: block; width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 1.65;
  stroke-linecap: round; stroke-linejoin: round;
}
.inline-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.15em; }
.icon-label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

/* ── HUD (TOP BAR) ────────────────────────────────────────────────────────── */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--hud-h);
  background: linear-gradient(180deg, #1a1004 0%, #110c04 100%);
  border-bottom: 2px solid var(--gold-dim);
  display: flex; align-items: center; padding: 0 14px; gap: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.8);
}
#hud .hud-name {
  font-size: 13px; color: var(--gold2); font-weight: bold;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud-stat {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 4px 10px;
  font-size: 14px; color: var(--text); white-space: nowrap;
}
.hud-stat span { color: var(--gold2); font-weight: bold; }
#hud-inv-btn, #hud-market-btn {
  background: none; border: 1px solid var(--border2);
  color: var(--text2); border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: 18px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
#hud-inv-btn:hover, #hud-market-btn:hover { border-color: var(--gold); color: var(--gold2); }

/* ── MAP CONTAINER ────────────────────────────────────────────────────────── */
#map-container {
  position: fixed;
  top: var(--hud-h); left: 0; right: 0;
  bottom: var(--bar-h);
  overflow: hidden;
  background: #081015;
  isolation: isolate;
}
#map-svg {
  display: block;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: grab;
  background: #081015;
}
#map-svg:active { cursor: grabbing; }

.map-hint {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 7px 10px; border: 1px solid rgba(220,190,105,.34);
  border-radius: 999px; background: rgba(8,12,14,.66);
  color: rgba(244,223,157,.82); font-size: 11px; letter-spacing: .02em;
  pointer-events: none; backdrop-filter: blur(5px);
}
.map-focus-btn,
.map-quest-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(240,200,96,.76); background: rgba(17,16,10,.86);
  color: var(--gold2); font-size: 27px; line-height: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); backdrop-filter: blur(5px);
}
.map-quest-btn { right: 66px; display: grid; place-items: center; font-size: 0; }
.map-control-icon { width: 22px; height: 22px; }
.quest-ready-badge {
  position: absolute; right: -3px; top: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border: 1px solid #ffe28a; border-radius: 999px;
  background: #8f3c18; color: #fff2c0;
  font: 700 10px/1 Georgia, serif;
  box-shadow: 0 0 12px rgba(239,190,72,.32);
}
.map-focus-btn:active,
.map-quest-btn:active { transform: scale(.94); }

.map-art { pointer-events: none; }
.map-shade { fill: rgba(3, 8, 11, .24); pointer-events: none; }

/* Roads */
.road-shadow {
  fill: none; stroke: rgba(0,0,0,.75); stroke-width: 13;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.road-sea-shadow { stroke-width: 11; }
.road-line {
  fill: none; stroke: rgba(236,190,83,.82); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round; opacity: .95;
}
.road-active { stroke: #f1c864; stroke-width: 4.5; filter: drop-shadow(0 0 3px rgba(246,203,92,.32)); }
.road-muted { stroke: rgba(129,106,56,.36); stroke-width: 2.5; opacity: .72; }
.road-muted-shadow { stroke-width: 8; opacity: .34; }
.road-sea {
  fill: none; stroke: #74b9d8; stroke-width: 4;
  stroke-dasharray: 13 9; stroke-linecap: round; opacity: .88;
}
.road-locked {
  fill: none; stroke: rgba(34,26,17,.9); stroke-width: 4;
  stroke-dasharray: 9 12; opacity: .82;
}

.road-progress {
  fill: none; stroke: #ffe59a; stroke-width: 7;
  stroke-linecap: round; filter: drop-shadow(0 0 7px #ffd65a);
  pointer-events: none;
}

/* City nodes */
.city-node { cursor: pointer; }
.city-node .city-halo { fill: rgba(3,7,8,.7); stroke: rgba(241,204,105,.15); stroke-width: 2; }
.city-node .city-ring { fill: rgba(8,11,10,.9); stroke: rgba(245,216,132,.7); stroke-width: 3; }
.city-node .city-bg { fill: #2c2110; stroke: #f2c961; stroke-width: 2; }
.city-node:hover .city-ring { stroke: #fff1ba; stroke-width: 5; }
.city-locked { cursor: default; opacity: .76; }
.city-locked .city-ring { stroke: #766343; }
.city-locked .city-bg { fill: #1b1914; stroke: #68573a; }
.city-connected .city-ring { stroke: #fff0a2; stroke-width: 5; }
.city-current .city-halo { fill: rgba(244,197,78,.22); stroke: #ffe9a0; stroke-width: 3; }
.city-current .city-ring { stroke: #ffed98; stroke-width: 6; }
.city-current .city-bg { fill: #5a3f12; }
.city-label {
  fill: #f7e8b9; font-size: 15px; font-family: Georgia, serif;
  font-weight: bold; text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 2px;
}
.city-label-bg { fill: rgba(9,12,10,.8); stroke: rgba(229,199,114,.45); stroke-width: 1; pointer-events: none; }
.city-locked .city-label-bg { stroke: rgba(117,96,56,.5); }
.city-requirement { fill: #c5ae76; font-size: 12px; font-family: Georgia, serif; text-anchor: middle; pointer-events: none; }
.city-icon {
  color: #f5d474; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
  fill: none; stroke: currentColor;
  stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.city-icon * { vector-effect: non-scaling-stroke; }
.city-locked .city-icon { color: #9e8a5c; opacity: .8; }
.city-current .city-icon { color: #fff1a8; }
.city-king-badge {
  cursor: pointer;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(244,202,92,.35));
}
.city-king-badge-bg {
  fill: rgba(35, 23, 7, .95);
  stroke: rgba(246, 210, 111, .9);
  stroke-width: 2;
}
.city-king-icon {
  color: #ffe58c;
  stroke-width: 1.75;
}

/* Player marker */
#player-marker { pointer-events: none; filter: drop-shadow(0 0 8px #ffe99c); }
.player-pulse { fill: rgba(255,223,116,.18); stroke: rgba(255,240,176,.7); stroke-width: 2; animation: playerPulse 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.player-dot { fill: #fff7cf; stroke: #503a08; stroke-width: 2; }
.player-ring { fill: rgba(69,46,5,.85); stroke: #ffe590; stroke-width: 3; }
@keyframes playerPulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* ── BOTTOM BAR ──────────────────────────────────────────────────────────── */
#bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: var(--bar-h);
  background: linear-gradient(0deg, #1a1004 0%, #110c04 100%);
  border-top: 2px solid var(--gold-dim);
  display: flex; align-items: center; padding: 0 14px; gap: 10px;
}
#journey-info {
  flex: 1; min-width: 0;
}
.journey-label {
  font-size: 11px; color: var(--text2); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.journey-bar-bg {
  height: 8px; background: var(--bg3); border-radius: 4px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.journey-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold2));
  border-radius: 4px; transition: width .4s ease;
}
.journey-none { font-size: 12px; color: var(--text-dim); font-style: italic; }

/* Win button */
#btn-win {
  flex-shrink: 0;
  background: linear-gradient(135deg, #4a2800, #8a4800);
  border: 2px solid var(--gold);
  color: var(--gold2); font-size: 13px; font-family: Georgia, serif;
  border-radius: var(--radius); padding: 8px 16px;
  cursor: pointer; text-align: center; line-height: 1.3;
  box-shadow: 0 2px 10px rgba(200,160,48,.3);
  transition: transform .1s, box-shadow .1s;
  min-width: 100px;
}
#btn-win:active { transform: scale(.96); box-shadow: none; }
#btn-win .win-icon { font-size: 20px; display: block; }

/* ── MODAIS ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.75);
  display: flex; align-items: flex-end; justify-content: center;
  box-sizing: border-box;
  padding-top: max(8px, env(safe-area-inset-top));
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.modal-overlay.open {
  opacity: 1; pointer-events: all;
}
.modal-sheet {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  width: 100%; max-width: 520px;
  max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow);
  transform: translateY(30px);
  transition: transform .25s;
}
.modal-overlay.open .modal-sheet { transform: translateY(0); }

.modal-handle {
  width: 40px; height: 4px; background: var(--border2);
  border-radius: 2px; margin: 10px auto 4px;
}
.modal-header {
  flex: 0 0 auto;
  padding: 10px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.modal-header h2 { font-size: 17px; color: var(--gold2); flex: 1; }
.modal-close {
  background: none; border: none; color: var(--text2);
  font-size: 22px; cursor: pointer; line-height: 1; padding: 4px;
}
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px; }

/* ── CITY MODAL ──────────────────────────────────────────────────────────── */
.city-modal-hero {
  text-align: center; padding: 10px 0 16px;
}
.city-modal-icon  { font-size: 48px; display: block; margin-bottom: 8px; }
.city-modal-sub   { color: var(--text2); font-size: 13px; margin-bottom: 8px; }
.city-modal-desc  { color: var(--text); font-size: 13px; line-height: 1.5; }
.city-factions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: 12px;
}
.city-factions-label {
  width: 100%; color: var(--text2); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
}
.faction-badge {
  border: 1px solid var(--border2); border-radius: 999px;
  padding: 4px 9px; color: var(--gold2); background: rgba(80,55,14,.34);
  font-size: 11px; line-height: 1;
}
.city-fast-travel-hint {
  width: 100%; margin-top: 3px; color: #9fe7ff; font-size: 11px;
  line-height: 1.3; text-shadow: 0 0 10px rgba(88,200,238,.18);
}

.merchant-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.merchant-card {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.merchant-card:hover { border-color: var(--gold); background: #2a1e08; }
.merchant-avatar { font-size: 32px; width: 44px; text-align: center; flex-shrink: 0; }
.merchant-info h3 { font-size: 15px; color: var(--gold2); margin-bottom: 2px; }
.merchant-info p  { font-size: 12px; color: var(--text2); }
.merchant-specialty { display: block; margin-top: 5px; color: var(--gold); font-size: 11px; }
.merchant-fast-travel { display: block; margin-top: 4px; color: #8ed8ec; font-size: 11px; }
.merchant-gold    { margin-left: auto; font-size: 13px; color: var(--gold); white-space: nowrap; }

/* ── MERCHANT MODAL ──────────────────────────────────────────────────────── */
.merchant-header-info {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.merchant-header-avatar { font-size: 40px; }
.merchant-greeting { font-size: 12px; color: var(--text2); font-style: italic; line-height: 1.4; }
.merchant-header-gold { margin-left: auto; text-align: right; }
.merchant-header-gold span { font-size: 18px; color: var(--gold2); font-weight: bold; }
.merchant-header-gold p   { font-size: 11px; color: var(--text-dim); }

/* Tabs */
.tab-bar {
  display: flex; border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.tab-btn {
  flex: 1; background: none; border: none;
  color: var(--text2); font-family: Georgia, serif;
  font-size: 14px; padding: 10px; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.tab-btn.active { color: var(--gold2); border-bottom-color: var(--gold); }

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.card-item {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
  cursor: pointer; transition: border-color .2s, transform .15s;
  display: flex; flex-direction: column;
}
.card-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.card-item img {
  width: 100%; aspect-ratio: 946/1734;
  object-fit: cover; display: block;
}
.card-item-info {
  padding: 6px 8px 8px;
  background: linear-gradient(180deg, #1a1004, #0c0804);
}
.card-item-name { font-size: 10px; color: var(--text); line-height: 1.2; margin-bottom: 3px; }
.card-item-price {
  font-size: 12px; color: var(--gold2); font-weight: bold;
}
.card-item-faction { font-size: 10px; color: var(--text-dim); }

.empty-state {
  text-align: center; color: var(--text-dim);
  padding: 30px; font-style: italic; font-size: 13px;
}

/* ── DIÁLOGO CINEMATOGRÁFICO DE CAMPANHA ─────────────────────────────────── */
.story-dialogue-overlay {
  position: fixed;
  inset: 0;
  z-index: 850;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  box-sizing: border-box;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 28% 25%, rgba(139, 95, 25, .14), transparent 40%),
    rgba(2, 4, 5, .76);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.story-dialogue-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.story-dialogue-scene {
  position: relative;
  isolation: isolate;
  width: min(900px, 100%);
  min-width: 0;
  max-width: 100%;
  height: min(570px, calc(100dvh - max(28px, env(safe-area-inset-top) + env(safe-area-inset-bottom))));
  min-height: 480px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(14px) scale(.985);
  transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}
.story-dialogue-overlay.open .story-dialogue-scene { transform: none; }
.story-dialogue-scene::before {
  display: none;
}
.story-dialogue-scene::after {
  display: none;
}
.story-dialogue-art {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 3%;
  bottom: 25%;
  width: 36%;
  height: 67%;
  overflow: visible;
  background: transparent;
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.story-dialogue-art::before,
.story-dialogue-art::after { display: none; }
.story-dialogue-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: 100% 100%;
  filter: drop-shadow(-12px 12px 20px rgba(0, 0, 0, .65));
  transform: scale(1.025);
  transition: transform 8s ease-out;
}
.story-dialogue-overlay.open .story-dialogue-art img { transform: scale(1); }
.story-dialogue-art.is-fallback img { display: none; }
.story-dialogue-fallback-icon {
  display: none;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  color: rgba(239, 205, 112, .62);
  transform: translate(-50%, -50%);
}
.story-dialogue-art.is-fallback .story-dialogue-fallback-icon { display: block; }
.story-dialogue-box {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 49%;
  min-height: 0;
}
.story-dialogue-speaker {
  position: relative;
  z-index: 2;
  min-width: 44%;
  max-width: 76%;
  box-sizing: border-box;
  padding: 8px 38px 8px 20px;
  color: #211506;
  background: linear-gradient(105deg, #f0b526, #c77a0a 72%, #8a4d05);
  clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .42);
  transform: translate(8px, 2px) rotate(-.45deg);
}
.story-dialogue-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 16px 22px 18px;
  border: 1px solid rgba(229, 184, 70, .5);
  border-top: 4px solid #e4a91f;
  border-radius: 3px 10px 10px 10px;
  color: #eadfbe;
  background:
    linear-gradient(105deg, rgba(73, 57, 34, .98), rgba(28, 27, 22, .98) 62%, rgba(12, 16, 15, .98)),
    url('../assets/parchment.jpg') center / cover;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 235, 170, .11);
  scrollbar-width: thin;
  scrollbar-color: #795713 transparent;
}
.story-dialogue-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #c39d45;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.story-dialogue-campaign { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-dialogue-stage { flex: 0 0 auto; color: #a99361; }
.story-dialogue-name {
  margin: 0;
  color: #211506;
  font: 700 clamp(20px, 3.2vw, 28px)/1 Georgia, serif;
  overflow-wrap: anywhere;
  text-shadow: 0 1px rgba(255, 227, 138, .35);
}
.story-dialogue-role {
  margin: 3px 0 0;
  color: rgba(48, 28, 5, .78);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.story-dialogue-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}
.story-dialogue-divider::before,
.story-dialogue-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(219, 174, 67, .5)); }
.story-dialogue-divider::after { transform: scaleX(-1); }
.story-dialogue-divider span { width: 6px; height: 6px; transform: rotate(45deg); background: #b98825; box-shadow: 0 0 8px rgba(228, 177, 55, .42); }
.story-dialogue-title {
  margin: 0 0 8px;
  color: #d8bb6b;
  font: 700 14px/1.25 Georgia, serif;
  letter-spacing: .025em;
}
.story-dialogue-text {
  position: relative;
  margin: 0;
  padding-left: 15px;
  color: #eee2c2;
  font: 16px/1.52 Georgia, serif;
}
.story-dialogue-text::before {
  content: '“';
  position: absolute;
  left: -2px;
  top: -7px;
  color: rgba(229, 183, 67, .7);
  font-size: 27px;
}
.story-dialogue-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 165px;
  margin: 14px 0 0 auto;
  padding: 9px 18px;
  border: 1px solid #d7a733;
  border-radius: 9px;
  color: #fff0bc;
  background: linear-gradient(135deg, #684005, #a6660d);
  box-shadow: inset 0 1px 0 rgba(255, 238, 180, .2), 0 7px 20px rgba(0, 0, 0, .28);
  font: 700 14px Georgia, serif;
  cursor: pointer;
}
.story-dialogue-continue:hover { border-color: #ffe18a; background: linear-gradient(135deg, #79500b, #b87912); }

/* ── WIN OVERLAY ─────────────────────────────────────────────────────────── */
#win-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.85);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: max(34px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
#win-overlay.open { opacity: 1; pointer-events: all; }
.win-card {
  background: linear-gradient(160deg, #2a1c08, #1a1004);
  border: 2px solid var(--gold);
  border-radius: var(--radius); padding: 32px 40px;
  text-align: center; max-width: 340px; width: 90%;
  box-shadow: 0 0 40px rgba(200,160,48,.25);
  animation: winPop .4s ease;
}
@keyframes winPop {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.win-title { font-size: 24px; color: var(--gold2); margin-bottom: 6px; }
.win-rewards { margin: 18px 0; display: flex; flex-direction: column; gap: 10px; }
.win-reward {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 16px; color: var(--text);
}
.win-reward .val { color: var(--gold2); font-weight: bold; font-size: 20px; }
.win-event {
  margin-top: 14px; padding: 10px 14px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--text2);
}
.win-event-title { display: flex; align-items: center; gap: 8px; color: var(--gold2); font-size: 14px; margin-bottom: 4px; }
.win-event-icon {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid rgba(236,195,92,.28); border-radius: 9px;
  color: #f0cf70; background: rgba(7,10,10,.36);
}
.win-event-icon .game-icon { width: 20px; height: 20px; }
.road-event-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.road-event-choice { width: 100%; padding: 8px 10px; }
.road-event-choice:disabled { opacity: .45; cursor: not-allowed; }
.road-event-reward { color: var(--gold2); font-weight: bold; margin-top: 10px; }
.win-arrived {
  margin-top: 12px; padding: 10px;
  background: #1a2800; border: 1px solid #3a5010;
  border-radius: var(--radius-sm); color: #a0d040;
  font-size: 13px;
}
.win-close {
  margin-top: 20px;
  background: linear-gradient(135deg, #4a2800, #8a4800);
  border: 2px solid var(--gold); color: var(--gold2);
  font-family: Georgia, serif; font-size: 15px;
  border-radius: var(--radius); padding: 10px 32px;
  cursor: pointer; width: 100%;
}
.win-close:disabled { opacity: .55; cursor: not-allowed; }

/* ── INVENTÁRIO MODAL ────────────────────────────────────────────────────── */
.inv-modal .modal-sheet {
  max-height: calc(100vh - 8px);
  max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
}
.inv-header-stats {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: nowrap;
}
.inv-stat {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 12px;
  font-size: 12px; color: var(--text2); white-space: nowrap;
}
.inv-stat span { color: var(--gold2); font-weight: bold; }
.inv-faction-filters {
  display: flex; gap: 7px; margin: 0 0 13px; padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: thin;
}
.inv-filter-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text2); background: var(--bg3); font-family: Georgia, serif;
  font-size: 11px; cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.inv-filter-btn strong {
  color: var(--gold2); font-size: 10px; line-height: 1;
}
.inv-filter-btn.active {
  color: var(--gold2); border-color: var(--gold); background: rgba(118,79,15,.44);
}
.inv-filter-btn:hover { border-color: var(--gold); color: var(--gold2); }

/* ── SETUP SCREEN ─────────────────────────────────────────────────────────── */
#setup-screen {
  position: fixed; inset: 0; z-index: 400;
  background: radial-gradient(ellipse at center, #1a1004 0%, #050302 100%);
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding: max(22px, env(safe-area-inset-top)) 30px 30px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.setup-logo { font-size: 52px; margin-bottom: 16px; }
.setup-title { font-size: 26px; color: var(--gold2); margin-bottom: 4px; text-align: center; }
.setup-sub   { font-size: 14px; color: var(--text2); margin-bottom: 32px; text-align: center; }
.setup-form  { width: 100%; max-width: 340px; }
.setup-label { font-size: 13px; color: var(--text2); margin-bottom: 6px; display: block; }
.setup-input {
  width: 100%; background: var(--bg3);
  border: 1px solid var(--border2); border-radius: var(--radius);
  color: var(--text); font-family: Georgia, serif; font-size: 16px;
  padding: 12px 14px; outline: none; margin-bottom: 20px;
  transition: border-color .2s;
}
.setup-input:focus { border-color: var(--gold); }
.setup-start {
  width: 100%; background: linear-gradient(135deg, #6a3800, #c07000);
  border: 2px solid var(--gold2); color: var(--gold2);
  font-family: Georgia, serif; font-size: 17px; font-weight: bold;
  border-radius: var(--radius); padding: 14px;
  cursor: pointer; transition: transform .1s;
}
.setup-start:active { transform: scale(.97); }
.setup-start:disabled, #btn-win:disabled { opacity: .6; cursor: wait; }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: calc(var(--bar-h) + 10px); left: 50%;
  transform: translateX(-50%); z-index: 500;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; width: 90%; max-width: 360px;
}
.toast {
  background: #2a1e08; border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm); padding: 8px 16px;
  font-size: 13px; color: var(--text); text-align: center;
  animation: toastIn .3s ease, toastOut .3s ease 2.5s forwards;
}
.toast.error { border-color: var(--red2); background: #2a0808; color: #e08080; }
@keyframes toastIn  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }

/* ── SCROLLBAR ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── MAPA E CONTROLES EM CELULAR ─────────────────────────────────────────── */
@media (max-width: 700px) {
  :root { --hud-h: 62px; --bar-h: 88px; }

  #hud { padding: 0 10px; gap: 7px; }
  #hud .hud-name { font-size: 12px; min-width: 58px; }
  .hud-stat { gap: 3px; padding: 5px 7px; font-size: 13px; }
  #hud-inv-btn, #hud-market-btn { padding: 5px 8px; font-size: 17px; }

  .map-hint { top: 11px; left: 11px; font-size: 10px; padding: 6px 9px; }
  .map-focus-btn, .map-quest-btn { right: 11px; bottom: 11px; width: 46px; height: 46px; }
  .map-quest-btn { right: 66px; }

  #bottom-bar { height: var(--bar-h); padding: 8px 11px; gap: 10px; }
  .bottom-logo { width: clamp(42px, 13vw, 58px); max-height: 42px; }
  #journey-info, .journey-none { flex: 1; min-width: 0; }
  .journey-none { font-size: 11px; line-height: 1.35; }
  .journey-label { font-size: 10px; }
  #btn-win { min-width: 112px; padding: 7px 10px; font-size: 12px; }
  #btn-win .win-icon { font-size: 18px; }

  .modal-sheet { max-height: 89dvh; }
  .modal-body { padding: 13px 14px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .card-item-name { font-size: 11px; }
  .city-modal-icon { font-size: 42px; }
}

@media (min-width: 701px) {
  #map-container { bottom: 76px; }
  #bottom-bar { height: 76px; }
}

/* ── UTILITIES ───────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.gold   { color: var(--gold2); }

/* ── OLHINHO DE SENHA ────────────────────────────────────────────────────────── */
.pw-wrap { position: relative; }
.pw-wrap .setup-input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text2); cursor: pointer;
  padding: 5px; display: flex; align-items: center; border-radius: 6px;
  transition: color .18s;
}
.pw-toggle:hover { color: var(--gold2); }
.pw-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dim    { color: var(--text-dim); }
.btn-small {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text); font-family: Georgia, serif;
  font-size: 12px; border-radius: var(--radius-sm);
  padding: 5px 12px; cursor: pointer; transition: border-color .2s;
}
.btn-small:hover { border-color: var(--gold); color: var(--gold2); }

/* ── FASE 5: acabamento visual e estados de interação ─────────────────── */
:root {
  --ink: #070a0c;
  --surface: rgba(19, 17, 13, .94);
  --surface-raised: #211b11;
  --line-soft: rgba(239, 201, 104, .18);
  --glow: rgba(244, 190, 62, .24);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, .city-node:focus-visible {
  outline: 2px solid #ffe79c;
  outline-offset: 3px;
}
button:not(:disabled) { transition: transform .18s var(--ease-out), border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease; }
button:not(:disabled):active { transform: translateY(1px) scale(.985); }
button:disabled { cursor: not-allowed; filter: saturate(.65); }

/* Barra de status: leitura rápida, com mais contraste sobre o mapa. */
#hud {
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  gap: 8px;
  background: linear-gradient(100deg, rgba(10, 13, 14, .97), rgba(29, 22, 12, .94));
  border-bottom: 1px solid rgba(232, 190, 83, .5);
  box-shadow: 0 7px 24px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
}
#hud::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,226,143,.9), transparent);
  opacity: .58; pointer-events: none;
}
#hud .hud-name {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  letter-spacing: .025em; font-size: 14px; text-shadow: 0 1px 0 #000;
}
.hud-verified-badge {
  width: 15px; height: 15px; flex: 0 0 auto;
  filter: drop-shadow(0 0 4px rgba(255,228,140,.45));
}
#hud .hud-name::before {
  content: '✦'; display: grid; place-items: center; width: 20px; height: 20px;
  color: #ffe49a; background: rgba(147, 98, 18, .3); border: 1px solid rgba(240,200,96,.36);
  border-radius: 50%; font-size: 11px; flex: 0 0 auto;
}
.hud-stat {
  min-height: 34px; gap: 6px; padding: 5px 9px;
  background: linear-gradient(145deg, rgba(50,39,22,.84), rgba(13,16,16,.9));
  border-color: rgba(223,182,83,.38); border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,239,178,.07), 0 2px 8px rgba(0,0,0,.2);
}
.hud-stat span { min-width: 1.25ch; text-align: right; text-shadow: 0 1px 10px rgba(255,210,80,.36); }
#hud-inv-btn, #hud-market-btn {
  width: 38px; height: 36px; display: grid; place-items: center; padding: 0;
  background: linear-gradient(145deg, rgba(61,45,20,.83), rgba(12,15,15,.9));
  border-color: rgba(223,182,83,.42); border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,239,178,.08), 0 2px 8px rgba(0,0,0,.22);
}
#hud-inv-btn:hover, #hud-market-btn:hover { border-color: #f7d97e; color: #fff0bc; box-shadow: 0 0 0 3px rgba(226,171,52,.12), 0 5px 14px rgba(0,0,0,.25); }

/* Controles sobre o mapa seguem a mesma linguagem dos painéis. */
.map-focus-btn:hover,
.map-quest-btn:hover { border-color: #fff0b3; background: rgba(38,30,14,.94); box-shadow: 0 0 0 4px rgba(247,205,101,.12), 0 7px 20px rgba(0,0,0,.48); }

/* Painel de jornada. */
#bottom-bar {
  padding: 0 max(14px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px, env(safe-area-inset-left));
  background: linear-gradient(90deg, rgba(8,12,13,.97), rgba(30,23,13,.96) 55%, rgba(11,12,11,.98));
  border-top: 1px solid rgba(232,190,83,.52);
  box-shadow: 0 -7px 24px rgba(0,0,0,.36); backdrop-filter: blur(16px);
}
#bottom-bar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 10%, rgba(255,225,143,.055) 48%, transparent 86%);
}
.journey-label { color: #e9d3a0; font-size: 12px; letter-spacing: .01em; }
.journey-none { display: none !important; }
.journey-none::before { content: none !important; }
.journey-none::before { content: '✦'; color: #dcb950; margin-right: 7px; }
.bottom-logo {
  display: block;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: clamp(58px, 16vw, 96px);
  max-height: 54px;
  object-fit: contain;
  transform: none;
  opacity: .95;
  pointer-events: none;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(226,190,86,.12));
}
#journey-info,
.journey-none,
#btn-cancel-journey,
#btn-win {
  position: relative;
  z-index: 1;
}
#journey-info,
.journey-none {
  flex: 1;
  min-width: 0;
}
.journey-bar-bg { height: 9px; background: rgba(0,0,0,.4); border-color: rgba(237,195,91,.22); box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
.journey-bar-fill { background: linear-gradient(90deg, #8e5c12, #f5c95b 60%, #fff0ab); box-shadow: 0 0 10px rgba(255,206,84,.45); }
#btn-win {
  position: relative; overflow: hidden; min-width: 126px; padding: 9px 17px; margin-left: auto;
  background: linear-gradient(135deg, #5e3405, #b56d0d 58%, #7b4206);
  border-color: #f2c65a; border-radius: 12px; color: #fff0b9;
  box-shadow: inset 0 1px 0 rgba(255,246,197,.35), 0 5px 16px rgba(0,0,0,.32), 0 0 0 1px rgba(92,55,7,.6);
  text-shadow: 0 1px 1px #3c2105;
}
#btn-win::before, .setup-start::before, .win-close::before, #city-travel-btn::before, #city-fast-travel-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgba(255,246,194,.22) 48%, transparent 67%);
  transform: translateX(-130%); transition: transform .6s var(--ease-out);
}
#btn-win:hover:not(:disabled), .setup-start:hover:not(:disabled), .win-close:hover:not(:disabled), #city-travel-btn:hover:not(:disabled), #city-fast-travel-btn:hover:not(:disabled) { border-color: #fff0af; box-shadow: inset 0 1px 0 rgba(255,246,197,.42), 0 7px 20px rgba(0,0,0,.38), 0 0 18px rgba(238,176,46,.22); }
#btn-win:hover::before, .setup-start:hover::before, .win-close:hover::before, #city-travel-btn:hover::before, #city-fast-travel-btn:hover::before { transform: translateX(130%); }
#btn-win .win-icon { display: inline; margin-right: 5px; font-size: 16px; vertical-align: -1px; }
.journey-cancel {
  flex: 0 0 auto; padding: 8px 10px; color: #d9be82; background: rgba(20,24,20,.68);
  border: 1px solid rgba(224,180,75,.32); border-radius: 9px; font-family: Georgia, serif; font-size: 11px; cursor: pointer;
}
.journey-cancel:hover { color: #ffe2a0; border-color: rgba(239,199,93,.72); background: rgba(103,65,15,.36); }

/* Sheets e modais: aspecto de superfície física, sem esconder o jogo. */
.modal-overlay { background: rgba(2,5,7,.72); backdrop-filter: blur(5px); }
.modal-sheet {
  width: min(100%, 560px);
  max-height: min(91vh, 780px);
  max-height: min(91dvh, 780px);
  background: linear-gradient(150deg, rgba(38,31,18,.985), rgba(17,18,15,.99) 72%);
  border: 1px solid rgba(234,192,88,.54); border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -1px 0 rgba(255,239,172,.08), 0 -16px 60px rgba(0,0,0,.5);
}
.modal-handle { width: 44px; height: 5px; margin: 11px auto 5px; background: linear-gradient(90deg, #8b6d32, #eed28a, #8b6d32); }
.modal-header { position: relative; padding: 11px 18px 13px; border-bottom-color: var(--line-soft); }
.modal-header h2 { font-size: 18px; letter-spacing: .01em; }
.modal-close {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  color: #d8c493; border: 1px solid transparent; border-radius: 50%;
}
.modal-close:hover { color: #fff1bb; border-color: rgba(241,201,96,.42); background: rgba(100,69,16,.22); }
.modal-body { padding: 16px 18px 20px; }

/* Cidade e comerciantes. */
.city-modal-hero {
  position: relative; overflow: hidden; padding: 17px 18px 16px; border: 1px solid rgba(235,193,87,.18);
  border-radius: 14px; background: radial-gradient(circle at 50% 0, rgba(155,110,24,.24), transparent 54%), rgba(4,10,12,.28);
}
.city-modal-hero::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,229,157,.06), transparent 36%); }
.city-modal-icon { position: relative; font-size: 49px; margin-bottom: 9px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.42)); }
.city-modal-icon {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 10px;
  color: #f4d36f; border: 1px solid rgba(239,202,101,.42); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(128,90,21,.55), rgba(9,11,9,.88));
  box-shadow: inset 0 1px 0 rgba(255,239,174,.14), 0 5px 18px rgba(0,0,0,.28);
}
.city-modal-icon .game-icon { width: 36px; height: 36px; }
.city-modal-sub { color: #e8c96e; font-size: 12px; letter-spacing: .045em; text-transform: uppercase; }
.city-modal-desc { color: #d8caa7; max-width: 420px; margin: 0 auto; }
.city-factions { position: relative; }
.city-factions-label { color: #9f906f; }
.faction-badge {
  border-color: rgba(238,199,99,.36);
  background: linear-gradient(135deg, rgba(95,68,18,.72), rgba(27,26,18,.86));
  color: #f0d27d;
  box-shadow: inset 0 1px 0 rgba(255,244,184,.08);
}
.city-fast-travel-hint { position: relative; color: #a8eaff; }
#city-travel-btn {
  position: relative; overflow: hidden; width: 100%; margin: 14px 0 3px; padding: 13px 16px;
  background: linear-gradient(135deg, #543005, #a4630e 62%, #704108);
  border: 1px solid #ecc35d; color: #fff0b8; font-family: Georgia, serif; font-size: 14px; font-weight: bold;
  border-radius: 12px; cursor: pointer; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,246,191,.3), 0 5px 15px rgba(0,0,0,.24);
}
#city-travel-btn:disabled { opacity: 1 !important; color: #aa9b77; background: rgba(37,31,20,.9); border-color: rgba(177,144,70,.28); box-shadow: none; }
#city-fast-travel-btn {
  position: relative; overflow: hidden; width: 100%; margin: 14px 0 3px; padding: 13px 16px;
  border: 1px solid #8ac7dd; border-radius: 12px; color: #dcf8ff; background: linear-gradient(135deg, #0d4d67, #176e8b 62%, #0c405d);
  box-shadow: inset 0 1px 0 rgba(213,250,255,.28), 0 5px 15px rgba(0,0,0,.24), 0 0 16px rgba(72,187,217,.12);
  font-family: Georgia, serif; font-size: 14px; font-weight: bold; letter-spacing: .01em; cursor: pointer;
}
.merchant-list { gap: 9px; margin-top: 16px; }
.merchant-card {
  position: relative; width: 100%; appearance: none; font-family: Georgia, serif; text-align: left; color: inherit;
  background: linear-gradient(110deg, rgba(52,42,23,.9), rgba(14,18,17,.92)); border-color: rgba(221,179,74,.29);
  border-radius: 13px; padding: 12px 42px 12px 13px; box-shadow: inset 0 1px 0 rgba(255,239,174,.05), 0 3px 9px rgba(0,0,0,.16);
}
.merchant-card::after { content: '›'; position: absolute; right: 15px; top: 50%; transform: translateY(-52%); color: #eac56a; font-family: system-ui, sans-serif; font-size: 27px; line-height: 1; }
.merchant-card:hover { border-color: #f0ca66; background: linear-gradient(110deg, rgba(73,54,24,.95), rgba(20,24,21,.95)); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(0,0,0,.23), 0 0 0 3px rgba(224,174,51,.08); }
.merchant-avatar {
  display: grid; place-items: center; width: 47px; height: 47px; flex: 0 0 47px;
  font-size: 32px; line-height: 1; text-align: center; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
  color: #f0cf70;
}
.merchant-avatar .game-icon { width: 30px; height: 30px; }
.merchant-info h3 { color: #f7dc8c; }
.merchant-info p { color: #c4b18a; }
.merchant-specialty { color: #dfbc62; }
.merchant-fast-travel { color: #93ddeb; }
.merchant-gold { color: #f4cf70; font-weight: bold; }
.merchant-header-info {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) minmax(58px, auto); align-items: center; gap: 13px;
  padding: 13px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(113,77,20,.24), rgba(7,12,13,.28)); border: 1px solid rgba(234,191,83,.16);
}
.merchant-header-avatar {
  width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
  font-size: 36px; line-height: 1; text-align: center; border-radius: 13px; background: rgba(4,7,8,.35);
  color: #f0cf70; border: 1px solid rgba(238,196,85,.18);
}
.merchant-header-avatar .game-icon { width: 30px; height: 30px; }
.merchant-copy { min-width: 0; flex: 1; }
.merchant-greeting { color: #dbccaa; }
.merchant-stock-note { margin-top: 5px; color: #9e916f; font-size: 10px; letter-spacing: .035em; }
.merchant-header-gold { align-self: center; min-width: 58px; margin-left: 0; padding: 0; text-align: right; }
.merchant-header-gold span { color: #ffe190; text-shadow: 0 0 13px rgba(255,200,72,.25); }
.merchant-header-gold p { margin: 1px 0 0; white-space: nowrap; }
.merchant-story-message {
  position: relative;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 11px;
  margin: -3px 0 14px; padding: 12px; border: 1px solid rgba(113,190,210,.46); border-radius: 13px;
  background: radial-gradient(circle at 0 0, rgba(47,139,165,.24), transparent 46%), rgba(8,31,38,.82);
  box-shadow: inset 0 1px 0 rgba(200,241,249,.09), 0 7px 18px rgba(0,0,0,.2);
}
.merchant-story-close { position: absolute; top: 7px; right: 8px; width: 25px; height: 25px; padding: 0; border: 1px solid transparent; border-radius: 50%; color: #9dcbd2; background: transparent; font: 20px/1 system-ui, sans-serif; cursor: pointer; }
.merchant-story-close:hover { color: #e3f8f8; border-color: rgba(143,210,222,.32); background: rgba(23,82,96,.45); }
.merchant-story-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(133,205,220,.4); border-radius: 50%; color: #c9f1f5; background: rgba(16,72,88,.58); }
.merchant-story-icon-svg { width: 24px; height: 24px; }
.merchant-story-copy { min-width: 0; padding-right: 23px; }
.merchant-story-kicker { display: block; margin-bottom: 3px; color: #8ecbd6; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.merchant-story-copy strong { display: block; color: #ddf4ef; font-size: 14px; }
.merchant-story-copy p { margin: 4px 0 0; color: #bdd7d7; font-size: 11px; line-height: 1.45; }
.tab-bar { gap: 5px; padding: 4px; margin-bottom: 14px; border: 1px solid rgba(236,193,89,.16); border-radius: 12px; background: rgba(2,8,9,.3); }
.tab-btn { border: 1px solid transparent; border-radius: 8px; padding: 9px 10px; border-bottom: 1px solid transparent; }
.tab-btn:hover { color: #ead5a1; background: rgba(137,96,25,.14); }
.tab-btn.active { color: #ffeba9; border-color: rgba(243,202,96,.38); background: linear-gradient(135deg, rgba(150,101,22,.45), rgba(45,37,17,.3)); box-shadow: inset 0 1px 0 rgba(255,244,193,.12); }

/* Cartas e inventário. */
.card-grid { gap: 12px; }
.card-item { border-color: rgba(224,183,75,.28); border-radius: 11px; background: #121713; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.card-item:hover { border-color: #f0c55c; transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,.34), 0 0 0 3px rgba(235,184,61,.09); }
.card-item img { background: linear-gradient(135deg, #2b281a, #0e1110); }
.card-item-info { padding: 8px; background: linear-gradient(160deg, #252014, #101512 78%); }
.card-item-name { min-height: 2.4em; color: #f0e0ba; font-size: 11px; }
.card-item-faction { margin-bottom: 3px; color: #a99a77; }
.card-item-price { color: #f6d477; letter-spacing: .01em; }
.card-item-action { width: 100%; margin-top: 7px; border-color: rgba(229,184,77,.38); background: rgba(114,74,14,.35); color: #f4d981; font-size: 11px; }
.card-item-action:hover { background: rgba(155,103,19,.54); border-color: #f2cf72; }
.card-item.card-processing { pointer-events: none; opacity: .78; }
.card-item-action.is-loading { color: #f8df97; background: rgba(102,74,24,.54); }
.card-item-action.is-loading::before { content: '◌'; display: inline-block; margin-right: 5px; animation: actionSpin .75s linear infinite; }
.card-item.card-purchased { pointer-events: none; animation: cardPurchased .26s var(--ease-out) forwards; }
.card-item.card-sold { pointer-events: none; animation: cardSold .26s var(--ease-out) forwards; }
.card-item.card-new { animation: cardNew 1.8s var(--ease-out); border-color: #ffe28a; box-shadow: 0 0 0 3px rgba(246,203,91,.16), 0 10px 24px rgba(0,0,0,.34); }
@keyframes actionSpin { to { transform: rotate(360deg); } }
@keyframes cardPurchased { to { opacity: 0; transform: translateY(-18px) scale(.92); filter: saturate(1.35) brightness(1.18); } }
@keyframes cardSold { to { opacity: 0; transform: translateX(18px) scale(.94); filter: saturate(.45); } }
@keyframes cardNew { 0%, 20% { transform: translateY(-5px); } 45% { transform: translateY(0); } 60% { box-shadow: 0 0 0 5px rgba(246,203,91,.24), 0 12px 25px rgba(0,0,0,.38); } 100% { box-shadow: 0 4px 12px rgba(0,0,0,.25); } }
.empty-state { margin: 8px 0; padding: 28px 18px; border: 1px dashed rgba(222,179,70,.24); border-radius: 12px; color: #af9e78; background: rgba(3,8,9,.2); }
.fast-travel-offer {
  display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 13px; padding: 11px 12px;
  border: 1px solid rgba(104,207,232,.48); border-radius: 13px; background: radial-gradient(circle at 0 50%, rgba(71,181,211,.2), transparent 42%), rgba(7,36,47,.7);
  box-shadow: inset 0 1px 0 rgba(205,249,255,.12), 0 5px 14px rgba(0,0,0,.17);
}
.fast-travel-offer-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(144,226,242,.4); border-radius: 12px; color: #d4f9ff; background: rgba(8,58,75,.55); font-size: 23px; }
.fast-travel-offer-copy { min-width: 0; }
.fast-travel-offer-kicker { display: block; margin-bottom: 2px; color: #86cdda; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.fast-travel-offer-copy strong { display: block; color: #e3fbff; font-size: 14px; }
.fast-travel-offer-copy p { margin: 3px 0 0; color: #b5d7dd; font-size: 10px; line-height: 1.3; }
.fast-travel-offer-action { align-self: center; min-width: 88px; padding: 8px 9px; color: #dffaff; border-color: rgba(130,218,239,.58); background: rgba(15,101,128,.6); font-family: Georgia, serif; font-size: 10px; white-space: nowrap; cursor: pointer; }
.fast-travel-offer-action:hover:not(:disabled) { color: #fff; border-color: #c8f6ff; background: rgba(24,130,161,.76); }
.fast-travel-offer.card-processing { pointer-events: none; opacity: .78; }
.fast-travel-offer.card-purchased { pointer-events: none; animation: cardPurchased .26s var(--ease-out) forwards; }
.merchant-refresh-control {
  display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 13px; padding: 11px 12px;
  border: 1px solid rgba(224,183,75,.4); border-radius: 13px; background: radial-gradient(circle at 0 50%, rgba(190,132,31,.18), transparent 45%), rgba(39,29,12,.62);
  box-shadow: inset 0 1px 0 rgba(255,232,157,.08), 0 5px 14px rgba(0,0,0,.17);
}
.merchant-refresh-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(236,198,96,.36); border-radius: 12px; color: #ffe193; background: rgba(83,55,10,.48); }
.merchant-refresh-icon-svg { width: 25px; height: 25px; }
.merchant-refresh-copy { min-width: 0; }
.merchant-refresh-copy strong { display: block; color: #f4dc96; font-size: 14px; }
.merchant-refresh-copy p { margin: 3px 0 0; color: #bfae84; font-size: 10px; line-height: 1.3; }
.merchant-refresh-action { min-width: 104px; padding: 8px 9px; border-color: rgba(230,190,84,.5); color: #f8dfa0; background: rgba(119,76,14,.5); font-family: Georgia, serif; font-size: 10px; white-space: nowrap; cursor: pointer; }
.merchant-refresh-action:hover:not(:disabled) { border-color: #f3d37b; color: #fff0bd; background: rgba(153,99,17,.66); }
.merchant-refresh-action:disabled { opacity: .5; cursor: not-allowed; }
.merchant-refresh-action.is-loading .game-icon { animation: actionSpin .75s linear infinite; }
.merchant-refresh-control.is-refreshing { pointer-events: none; opacity: .78; }
.market-list-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 5px; margin-top: 8px; }
.market-list-controls label { display: grid; gap: 3px; color: #b8a77e; font-size: 9px; }
.market-list-price {
  width: 100%; min-width: 0; padding: 5px 6px; border: 1px solid rgba(229,184,77,.32); border-radius: 6px;
  color: #f6d477; background: rgba(3,8,9,.58); font: inherit; font-size: 11px; outline: none;
}
.market-list-price:focus { border-color: #f0c45e; box-shadow: 0 0 0 2px rgba(240,196,94,.12); }
.market-list-btn { padding: 6px 7px; color: #dff2ca; border-color: rgba(136,199,112,.45); background: rgba(46,103,47,.42); font-family: Georgia, serif; font-size: 10px; cursor: pointer; }
.market-list-btn:hover:not(:disabled) { color: #efffd7; border-color: #b8e78d; background: rgba(58,126,58,.62); }
.market-protection-hint { margin: 8px 0 0; color: #b8a77e; font-size: 9px; line-height: 1.35; }
.inv-header-stats { margin-bottom: 15px; }
.inv-stat { border-radius: 999px; padding: 7px 10px; background: rgba(111,76,18,.22); border-color: rgba(238,195,86,.27); }
.inv-collection-stat { flex: 1 1 152px; min-width: 142px; }
.inv-collection-percent { margin-left: 4px; color: #f6d777 !important; }
.inv-collection-track { display: block; width: 100%; height: 3px; margin-top: 5px; overflow: hidden; background: rgba(5,10,10,.7); border-radius: 999px; }
.inv-collection-track > i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #a76e14, #f4d36e); border-radius: inherit; box-shadow: 0 0 6px rgba(245,202,87,.55); transition: width .35s var(--ease-out); }
.inv-reset-btn {
  flex: 0 0 auto; margin-left: 0; padding: 7px 10px; color: #d98c7e; background: rgba(91,31,27,.36);
  border: 1px solid rgba(212,104,91,.4); border-radius: 999px; font-family: Georgia, serif; font-size: 11px; white-space: nowrap; cursor: pointer;
}
.inv-reset-btn:hover { color: #ffb1a6; border-color: rgba(235,124,107,.74); background: rgba(111,36,31,.55); }
.inv-modal .modal-body { overflow-x: hidden; }

.modal-header-action {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 auto; padding: 0;
  color: #d8c493; border: 1px solid rgba(235,193,87,.25); border-radius: 50%;
  background: rgba(88,61,17,.2); cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.modal-header-action .game-icon { width: 18px; height: 18px; }
.modal-header-action:hover,
.modal-header-action:focus-visible {
  color: #fff1bb; border-color: rgba(241,201,96,.62); background: rgba(117,78,17,.38);
  transform: rotate(18deg);
}
.modal-header-action:focus-visible { outline: 2px solid rgba(255,231,151,.78); outline-offset: 2px; }

/* Configurações locais — preparada para receber áudio e outros grupos. */
.settings-modal { z-index: 220; }
#confirm-modal { z-index: 260; }
.settings-sheet { width: min(100%, 470px); }
.settings-body {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
}
.settings-group {
  min-height: max-content;
  overflow: hidden;
  border: 1px solid rgba(235,193,87,.22); border-radius: 14px;
  background: linear-gradient(145deg, rgba(73,53,19,.22), rgba(3,9,10,.42));
  box-shadow: inset 0 1px 0 rgba(255,235,166,.04);
}
.settings-group-heading {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px 11px; border-bottom: 1px solid rgba(235,193,87,.13);
}
.settings-group-heading > .game-icon { width: 20px; height: 20px; color: #e8c45f; flex: 0 0 auto; }
.settings-group-heading h3 { margin: 0 0 2px; color: #f3d47b; font-size: 14px; }
.settings-group-heading p { margin: 0; color: #958563; font-size: 10px; line-height: 1.35; }
.settings-option {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center; gap: 11px; padding: 14px;
  cursor: pointer; transition: background .16s ease;
}
.settings-option:hover { background: rgba(137,94,19,.1); }
.settings-option-icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  color: #e5c261; border: 1px solid rgba(231,191,78,.3); border-radius: 10px;
  background: radial-gradient(circle at 50% 20%, rgba(189,132,25,.28), rgba(14,14,10,.5));
}
.settings-option-icon .game-icon { width: 21px; height: 21px; }
.settings-option-copy { min-width: 0; }
.settings-option-copy strong { display: block; margin-bottom: 4px; color: #ead8ac; font-size: 13px; }
.settings-option-copy small { display: block; color: #a59570; font-size: 10px; line-height: 1.4; }
.settings-switch { position: relative; display: block; width: 46px; height: 26px; flex: 0 0 auto; }
.settings-switch input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.settings-switch-track {
  position: absolute; inset: 0; padding: 3px;
  border: 1px solid rgba(214,181,105,.35); border-radius: 999px;
  background: rgba(4,9,10,.76); box-shadow: inset 0 2px 5px rgba(0,0,0,.55);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.settings-switch-track i {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(180deg, #b9aa89, #776b51);
  box-shadow: 0 2px 5px rgba(0,0,0,.48);
  transition: transform .2s ease, background .2s ease;
}
.settings-switch input:checked + .settings-switch-track {
  border-color: rgba(245,203,91,.72);
  background: linear-gradient(90deg, rgba(119,69,7,.9), rgba(179,113,12,.88));
  box-shadow: inset 0 1px 4px rgba(63,28,0,.62), 0 0 10px rgba(207,148,31,.16);
}
.settings-switch input:checked + .settings-switch-track i {
  transform: translateX(20px); background: linear-gradient(180deg, #fff0ac, #d5a82f);
}
.settings-switch input:focus-visible + .settings-switch-track { outline: 2px solid #f3d47b; outline-offset: 3px; }
.settings-switch input:disabled + .settings-switch-track { opacity: .42; filter: grayscale(.65); cursor: not-allowed; }
.settings-status {
  margin: 0; padding: 0 14px 13px 65px;
  color: #938568; font-size: 9px; line-height: 1.4;
}
.settings-status[data-state="active"] { color: #a9d998; }
.settings-status[data-state="pending"] { color: #d9bc72; }
.settings-status[data-state="unavailable"] { color: #d98d81; }
.settings-volume {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 8px 12px; padding: 4px 14px 15px 65px;
  color: #c8b789; font-size: 11px;
}
.settings-volume output { color: #f0cf70; font-size: 10px; font-variant-numeric: tabular-nums; }
.settings-volume input[type="range"] {
  grid-column: 1 / -1; width: 100%; height: 18px; margin: 0;
  accent-color: #c88a1c; cursor: pointer;
}
.settings-volume input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }
.settings-volume input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: linear-gradient(90deg, #7e4c0b, #d9a934);
}
.settings-volume input[type="range"]::-webkit-slider-thumb { margin-top: -6px; }
.settings-volume input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 999px; background: linear-gradient(90deg, #7e4c0b, #d9a934);
}
.settings-future-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
  color: #938568; border: 1px dashed rgba(218,180,83,.2); border-radius: 11px;
  background: rgba(5,10,11,.26); font-size: 10px; line-height: 1.45;
}
.settings-future-note > .game-icon { width: 17px; height: 17px; margin-top: 1px; color: #a98a43; flex: 0 0 auto; }
.settings-future-note strong { color: #c8b482; font-size: 11px; }

.settings-save-list { display: grid; gap: 8px; padding: 11px 12px 0; }
.settings-save-loading,
.settings-save-empty { margin: 0; padding: 12px; color: #9d8e6d; font-size: 11px; text-align: center; }
.settings-save-card {
  display: grid; gap: 8px; padding: 11px 12px;
  border: 1px solid rgba(219,180,78,.2); border-radius: 10px;
  background: rgba(4,9,10,.46);
}
.settings-save-card.active {
  border-color: rgba(238,196,83,.58);
  background: linear-gradient(135deg, rgba(108,71,13,.3), rgba(4,9,10,.5));
  box-shadow: inset 3px 0 0 #d7a32c;
}
.settings-save-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.settings-save-card-title { min-width: 0; }
.settings-save-card-title strong { display: block; color: #f0d487; font-size: 13px; overflow-wrap: anywhere; }
.settings-save-card-title small { display: block; margin-top: 3px; color: #8f805f; font-size: 9px; }
.settings-save-active {
  flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(238,196,83,.42); border-radius: 999px;
  color: #f2d274; background: rgba(126,82,12,.3); font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
}
.settings-save-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; color: #ad9d79; font-size: 9px; }
.settings-save-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-save-actions button,
.settings-save-form-actions button,
.settings-save-new {
  min-height: 34px; padding: 7px 11px; border: 1px solid rgba(221,182,81,.32); border-radius: 8px;
  color: #d9c695; background: rgba(25,24,17,.82); font: 700 10px Georgia, serif; cursor: pointer;
}
.settings-save-actions button:hover,
.settings-save-actions button:focus-visible,
.settings-save-form-actions button:hover,
.settings-save-new:hover { border-color: rgba(242,202,96,.72); color: #fff0b8; }
.settings-save-actions .danger { color: #d89a8d; border-color: rgba(190,75,59,.36); }
.settings-save-actions button:disabled { opacity: .45; cursor: wait; }
.settings-save-rename { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; }
.settings-save-rename input,
.settings-save-field input {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 10px;
  border: 1px solid rgba(215,174,71,.34); border-radius: 8px;
  color: #eadcb8; background: rgba(2,7,8,.72); font: 12px Georgia, serif;
}
.settings-save-create { display: grid; gap: 12px; margin: 11px 12px 0; padding: 12px; border-top: 1px solid rgba(225,184,79,.16); }
.settings-save-field { display: grid; gap: 6px; color: #c8b78d; font-size: 10px; }
.settings-save-decks { min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-save-decks legend { margin-bottom: 7px; color: #c8b78d; font-size: 10px; }
.settings-save-deck-options { display: grid; gap: 7px; }
.settings-save-deck {
  position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 9px;
  padding: 9px 10px; border: 1px solid rgba(214,174,74,.2); border-radius: 9px;
  background: rgba(3,8,9,.5); cursor: pointer;
}
.settings-save-deck:has(input:checked) { border-color: rgba(241,198,84,.68); background: rgba(111,72,12,.28); }
.settings-save-deck input { accent-color: #d7a126; }
.settings-save-deck strong { display: block; color: #e6d09c; font-size: 11px; }
.settings-save-deck small { display: block; margin-top: 2px; color: #958566; font-size: 9px; }
.settings-save-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.settings-save-form-actions .settings-save-primary,
.settings-save-new { color: #fff0b9; border-color: #bd851b; background: linear-gradient(135deg,#704407,#a9680d); }
.settings-save-new { width: calc(100% - 24px); margin: 11px 12px 12px; }
.settings-save-new:disabled { opacity: .45; cursor: not-allowed; }
.settings-save-status { min-height: 0; margin: -5px 12px 11px; color: #c7a55b; font-size: 9px; line-height: 1.4; }
.settings-save-status.error { color: #da8e82; }

@media (max-width: 480px) {
  .inv-header-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }
  .inv-collection-stat {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .inv-header-stats > .inv-stat:not(.inv-collection-stat),
  .inv-header-stats > .inv-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 7px 5px;
    box-sizing: border-box;
    font-size: 10px;
  }
  .inv-header-stats > .inv-stat:not(.inv-collection-stat) .game-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
  }
  .settings-option { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; padding: 12px; }
  .settings-option-icon { width: 36px; height: 36px; }
  .settings-status { padding-left: 57px; }
  .settings-volume { padding-left: 57px; }
}

/* Mercado global. */
.market-modal .modal-sheet { max-width: 620px; }
.market-search { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.market-search input {
  flex: 1; min-width: 0; padding: 10px 11px; border: 1px solid rgba(229,184,77,.35); border-radius: 9px;
  color: #f0e0ba; background: rgba(3,8,9,.56); font-family: Georgia, serif; font-size: 13px; outline: none;
}
.market-search input:focus { border-color: #f0c45e; box-shadow: 0 0 0 3px rgba(240,196,94,.12); }
.market-faction-select {
  flex-shrink: 0; padding: 10px 8px; border: 1px solid rgba(229,184,77,.35); border-radius: 9px;
  color: #f0e0ba; background: rgba(3,8,9,.56); font-family: Georgia, serif; font-size: 12px;
  outline: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8a040'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  padding-right: 26px;
}
.market-faction-select:focus { border-color: #f0c45e; box-shadow: 0 0 0 3px rgba(240,196,94,.12); }
.market-summary { margin: 0 0 11px; color: #b9a77c; font-size: 11px; }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.market-seller { margin: 4px 0; overflow: hidden; color: #9fcac5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.market-remove-btn { color: #ffd2c8; border-color: rgba(224,122,102,.55); background: rgba(118,44,34,.48); }
.market-remove-btn:hover:not(:disabled) { color: #fff0eb; border-color: #f0aa98; background: rgba(149,55,42,.66); }
.market-pagination { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px; }
.market-pagination button { min-width: 85px; padding: 8px 10px; color: #eddcaa; font-family: Georgia, serif; cursor: pointer; }
.market-pagination button:disabled { opacity: .42; cursor: not-allowed; }
.market-pagination span { min-width: 92px; color: #c7b68e; font-size: 11px; text-align: center; }

/* Quests. */
.quest-modal .modal-sheet { max-width: 560px; }
.quest-intro {
  margin: 0 0 13px;
  color: #c7b68e;
  font-size: 12px;
  line-height: 1.45;
}
.quest-list {
  display: grid;
  gap: 10px;
}
.quest-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(228,184,77,.23);
  border-radius: 13px;
  background: linear-gradient(120deg, rgba(45,36,18,.82), rgba(8,14,14,.9));
}
.quest-card.ready {
  border-color: rgba(244,203,96,.62);
  box-shadow: 0 0 0 3px rgba(230,178,43,.08), inset 0 1px 0 rgba(255,239,177,.08);
}
.quest-card.claimed {
  opacity: .66;
}
.master-quest-card {
  border-color: rgba(112,178,206,.46);
  background: radial-gradient(circle at 0 0, rgba(44,111,139,.2), transparent 42%), linear-gradient(120deg, rgba(31,42,40,.94), rgba(8,14,14,.94));
  box-shadow: inset 0 1px 0 rgba(189,232,244,.08);
}
.faction-quest-card { border-color: rgba(197,151,66,.52); background: radial-gradient(circle at 0 0, rgba(151,98,24,.22), transparent 44%), linear-gradient(120deg, rgba(47,37,20,.94), rgba(12,15,13,.94)); }
.faction-quest-card .master-quest-icon { color: #f5d988; border-color: rgba(228,181,77,.42); background: radial-gradient(circle, rgba(130,82,14,.42), rgba(15,16,12,.82)); }
.faction-quest-card .master-quest-kicker { color: #d6ad55; }
.faction-quest-card .campaign-objective { border-color: rgba(219,172,70,.27); background: rgba(56,38,10,.38); }
.faction-quest-card .campaign-objective small { color: #c7a968; }
.master-quest-icon { color: #c9edf3; border-color: rgba(127,203,222,.38); background: radial-gradient(circle, rgba(35,121,151,.4), rgba(8,17,19,.8)); }
.master-quest-kicker { margin-bottom: 4px; color: #8fd0dd; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.campaign-objective { display: grid; gap: 3px; margin: 9px 0; padding: 9px 10px; border: 1px solid rgba(117,190,207,.25); border-radius: 9px; background: rgba(10,35,42,.4); }
.campaign-objective strong { color: #d8f0e9; font-size: 12px; }
.campaign-objective span { color: #c5d9d4; font-size: 11px; line-height: 1.35; }
.campaign-objective small { color: #87b9c2; font-size: 10px; font-style: italic; line-height: 1.35; }
.master-quest-card .quest-progress-row strong { text-align: right; }
.quest-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(238,197,94,.34);
  border-radius: 12px;
  color: #f2d47d;
  background: radial-gradient(circle, rgba(131,86,16,.38), rgba(8,12,12,.76));
}
.quest-icon-svg { width: 24px; height: 24px; }
.quest-copy { min-width: 0; }
.quest-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.quest-heading h3 {
  margin: 0;
  color: #f7dc8c;
  font-size: 14px;
  line-height: 1.2;
}
.quest-status {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(230,190,86,.28);
  border-radius: 999px;
  color: #ceb783;
  font-size: 9px;
  line-height: 1;
}
.quest-card.ready .quest-status {
  color: #fff0b8;
  border-color: rgba(245,206,99,.58);
  background: rgba(131,84,13,.38);
}
.quest-copy p {
  margin: 6px 0 9px;
  color: #c6b795;
  font-size: 11px;
  line-height: 1.38;
}
.quest-progress-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #b8a77f;
  font-size: 10px;
}
.quest-progress-row strong {
  color: #f0ce70;
}
.quest-progress-track {
  height: 7px;
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid rgba(235,190,80,.16);
  border-radius: 999px;
  background: rgba(0,0,0,.32);
}
.quest-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8e5c12, #f4c85c 70%, #fff0aa);
}
.quest-claim-btn {
  grid-column: 2;
  justify-self: start;
  padding: 8px 10px;
  border: 1px solid #e9c35c;
  border-radius: 9px;
  color: #fff0b8;
  background: linear-gradient(135deg, #543005, #a4630e 62%, #704108);
  font-family: Georgia, serif;
  font-size: 11px;
  cursor: pointer;
}
.quest-claim-btn:disabled {
  cursor: default;
  opacity: .55;
  color: #b8a77d;
  border-color: rgba(224,180,75,.24);
  background: rgba(28,28,20,.62);
}
.quest-claim-btn.claimed {
  color: #a9d087;
  border-color: rgba(125,190,96,.25);
}

/* Tutorial. */
.tutorial-modal .modal-sheet { max-width: 460px; }
.tutorial-step-counter {
  margin: 0 0 9px; color: #b8a77e; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.tutorial-image {
  display: block; width: 100%; height: min(54dvh, 440px); object-fit: contain; object-position: center center;
  border: 1px solid rgba(236,195,92,.34); border-radius: 14px;
  background: #050606; box-shadow: 0 8px 28px rgba(0,0,0,.34);
}
.tutorial-copy {
  margin-top: 13px; padding: 12px 13px;
  border: 1px solid rgba(235,191,83,.18); border-radius: 13px;
  background: linear-gradient(110deg, rgba(112,78,18,.18), rgba(7,13,13,.28));
}
.tutorial-copy h3 { color: #f6dc88; font-size: 17px; margin-bottom: 5px; }
.tutorial-copy p { color: #d7c79f; font-size: 12px; line-height: 1.45; }
.tutorial-dots {
  display: flex; justify-content: center; gap: 6px; margin: 12px 0;
}
.tutorial-dots i {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(220,185,91,.28); border: 1px solid rgba(240,203,101,.25);
}
.tutorial-dots i.active {
  width: 20px; background: #ecc867; border-color: #ffe49a;
  box-shadow: 0 0 10px rgba(239,199,92,.35);
}
.tutorial-actions {
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center;
}
.tutorial-primary,
.tutorial-secondary {
  border-radius: 10px; padding: 10px 11px; font-family: Georgia, serif;
  font-size: 12px; cursor: pointer;
}
.tutorial-primary {
  color: #fff0b8; border: 1px solid #ecc35d;
  background: linear-gradient(135deg, #543005, #a4630e 62%, #704108);
}
.tutorial-secondary {
  color: #cdbb91; border: 1px solid rgba(222,178,74,.3);
  background: rgba(12,16,15,.42);
}
.tutorial-secondary:disabled { opacity: .4; cursor: not-allowed; }
.tutorial-primary:hover,
.tutorial-secondary:hover:not(:disabled) {
  border-color: #fff0af; color: #fff2bf;
}

/* Telas de resultado, entrada e feedback. */
#win-overlay { background: rgba(2,5,7,.78); backdrop-filter: blur(6px); }
.win-card { position: relative; overflow: visible; flex: 0 0 auto; margin-block: auto; max-width: 390px; padding: 30px 28px 26px; border: 1px solid #ecc45d; border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(163,111,23,.34), transparent 48%), linear-gradient(160deg, #2b2313, #101512 78%); box-shadow: 0 20px 70px rgba(0,0,0,.6), 0 0 35px rgba(229,179,58,.16); }
.win-card::before { content: '✦'; display: grid; place-items: center; margin: -50px auto 11px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,224,138,.6); background: #5b3b0a; color: #ffe99c; box-shadow: 0 0 18px rgba(246,193,68,.27); }
.win-title { color: #ffea9e; text-shadow: 0 1px 12px rgba(255,200,63,.25); }
.win-rewards { gap: 8px; }
.win-reward { padding: 8px 12px; border: 1px solid rgba(235,192,83,.16); border-radius: 10px; background: rgba(6,11,11,.28); }
.win-refresh-card { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(235,192,83,.38); border-radius: 11px; color: #f8dd91; background: rgba(90,59,12,.38); text-align: left; }
.win-refresh-card > span { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: rgba(110,72,11,.55); }
.win-refresh-card-icon { width: 22px; height: 22px; }
.win-refresh-card strong { display: block; font-size: 12px; }
.win-refresh-card p { margin-top: 2px; color: #cbb889; font-size: 10px; }
.win-event { border-color: rgba(234,191,83,.3); background: rgba(10,14,12,.45); color: #d6c7a7; }
.win-arrived { background: rgba(31,68,29,.45); border-color: rgba(125,194,95,.42); color: #c6e791; }
.road-event-choice { border-color: rgba(231,188,79,.42); background: rgba(111,76,18,.28); }
.road-event-choice:hover:not(:disabled) { background: rgba(142,95,18,.5); }
.win-close { position: relative; overflow: hidden; border-radius: 11px; background: linear-gradient(135deg, #603806, #af690e); }
.win-arrived { display: flex; align-items: center; gap: 11px; padding: 12px; text-align: left; animation: arrivalReveal .42s var(--ease-out); }
.arrival-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: rgba(8,23,13,.55); border: 1px solid rgba(171,221,115,.35); color: #d5eda3; font-size: 24px; }
.arrival-icon .game-icon { width: 26px; height: 26px; }
.arrival-copy { min-width: 0; }
.arrival-kicker { display: block; margin-bottom: 2px; color: #9fc775; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.arrival-copy strong { display: block; color: #e0f2b0; font-size: 15px; }
.arrival-copy p { margin-top: 3px; color: #c2d9a0; font-size: 11px; line-height: 1.3; }
@keyframes arrivalReveal { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }

.hud-stat.value-changing, .merchant-header-gold.value-changing { animation: valuePulse .5s var(--ease-out); }
.hud-stat.value-up, .merchant-header-gold.value-up { border-color: rgba(167,221,103,.74); }
.hud-stat.value-down, .merchant-header-gold.value-down { border-color: rgba(234,156,88,.72); }
@keyframes valuePulse { 40% { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 4px rgba(244,202,94,.13), 0 7px 16px rgba(0,0,0,.27); } }

/* Confirmações substituem os alertas nativos do navegador. */
.confirm-sheet { max-width: 420px; }
.confirm-content { padding: 8px 4px 20px; text-align: center; }
.confirm-icon {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 12px;
  border: 1px solid rgba(237,182,83,.55); border-radius: 50%; color: #ffe29a; font-size: 24px;
  background: radial-gradient(circle, rgba(166,104,19,.42), rgba(25,21,14,.9)); box-shadow: 0 0 20px rgba(221,158,41,.16);
}
.confirm-content p { color: #d7c7a7; font-size: 14px; line-height: 1.5; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 9px; }
.confirm-actions button { padding: 12px 10px; border-radius: 10px; font-family: Georgia, serif; font-size: 13px; cursor: pointer; }
.confirm-secondary { color: #e2cf9e; background: rgba(25,29,25,.8); border: 1px solid rgba(226,185,81,.3); }
.confirm-secondary:hover { color: #fff0bc; border-color: rgba(239,201,101,.7); }
.confirm-primary { color: #fff1bd; background: linear-gradient(135deg, #684009, #af6910); border: 1px solid #edc55e; box-shadow: inset 0 1px 0 rgba(255,246,196,.24); }
.confirm-primary.danger { color: #ffe0d6; background: linear-gradient(135deg, #702d23, #a54636); border-color: #df8673; }
.confirm-primary.danger:hover { border-color: #ffc0ae; box-shadow: 0 0 16px rgba(208,81,62,.24); }

#setup-screen { overflow-x: hidden; overflow-y: auto; background: linear-gradient(rgba(3,7,9,.42), rgba(3,7,9,.9)), url('../assets/maps/continent-map-v1.png') center / cover no-repeat; }
#setup-screen::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(38,28,14,.45), rgba(2,5,7,.8) 76%); pointer-events: none; }
#setup-screen > * { position: relative; z-index: 1; flex-shrink: 0; }
.setup-brand {
  width: min(310px, 84vw);
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
}
.setup-brand-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 158px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(220,185,82,.16));
}
.setup-logo {
  display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; margin-bottom: 17px;
  border: 1px solid rgba(251,217,125,.72); border-radius: 50%; background: radial-gradient(circle, rgba(166,109,19,.55), rgba(13,18,16,.88));
  box-shadow: 0 0 0 7px rgba(230,184,68,.1), 0 10px 30px rgba(0,0,0,.35); color: #ffe6a0; font-size: 43px; line-height: 1; text-align: center;
}
.setup-logo span { display: block; transform: translateY(1px); }
.setup-title { font-size: clamp(28px, 7vw, 36px); letter-spacing: .035em; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.setup-sub { color: #e5ce91; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.setup-form { padding: 20px; border: 1px solid rgba(239,197,92,.32); border-radius: 16px; background: rgba(8,13,14,.72); box-shadow: 0 12px 35px rgba(0,0,0,.35); backdrop-filter: blur(12px); }
.setup-label { color: #e1c987; }
.setup-input { border-color: rgba(232,189,82,.4); background: rgba(2,8,9,.7); border-radius: 10px; }
.setup-input:focus { border-color: #f4cc69; box-shadow: 0 0 0 3px rgba(237,183,53,.15); }
.setup-start { position: relative; overflow: hidden; border-radius: 11px; background: linear-gradient(135deg, #654008, #b97112); box-shadow: inset 0 1px 0 rgba(255,244,189,.3), 0 5px 15px rgba(0,0,0,.3); }
.setup-password-fields .setup-label { margin-top: 2px; }
.setup-password-fields .setup-input { margin-bottom: 12px; }
.setup-help { min-height: 2.5em; margin: -7px 0 13px; color: #b8a77f; font-size: 11px; line-height: 1.35; }
.setup-login-toggle { display: block; width: 100%; margin-top: 12px; padding: 5px; color: #e7c96f; background: transparent; border: 0; font-family: Georgia, serif; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.setup-login-toggle:hover { color: #fff0af; }
.setup-deck-section { margin: -2px 0 14px; }
.setup-deck-heading { margin-bottom: 9px; }
.setup-deck-heading h2 { margin: 0 0 3px; color: #f4d47f; font-size: 14px; }
.setup-deck-heading p { margin: 0; color: #ae9a70; font-size: 11px; line-height: 1.35; }
.setup-deck-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.setup-deck-option {
  position: relative; min-height: 92px; padding: 11px 10px; overflow: hidden; color: #e7d8b1; text-align: left;
  background: linear-gradient(135deg, rgba(40,33,17,.89), rgba(11,18,18,.92)); border: 1px solid rgba(225,181,68,.32);
  border-radius: 10px; font-family: Georgia, serif; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.setup-deck-option:hover { border-color: rgba(246,207,101,.78); background: linear-gradient(135deg, rgba(72,52,15,.9), rgba(14,22,20,.94)); transform: translateY(-1px); }
.setup-deck-option.selected { border-color: #f3ca5b; background: linear-gradient(135deg, rgba(105,70,12,.92), rgba(20,29,23,.94)); box-shadow: inset 0 0 0 1px rgba(255,232,142,.32), 0 0 17px rgba(220,166,42,.17); }
.setup-deck-option strong { display: block; max-width: calc(100% - 82px); overflow: hidden; color: #fff0b9; font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.setup-deck-recommended { position: absolute; top: 9px; right: 8px; padding: 3px 5px; color: #fbe3a0; background: rgba(118,78,10,.58); border: 1px solid rgba(244,202,92,.46); border-radius: 999px; font-size: 8px; letter-spacing: .03em; text-transform: uppercase; }
.setup-deck-description { display: -webkit-box; min-height: 28px; margin-top: 6px; overflow: hidden; color: #c3b693; font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.setup-deck-cards { display: block; margin-top: 7px; color: #e6c46c; font-size: 10px; }
.setup-deck-empty { grid-column: 1 / -1; margin: 0; padding: 11px; color: #c3ae7d; background: rgba(11,16,15,.65); border: 1px dashed rgba(228,187,80,.32); border-radius: 9px; font-size: 11px; line-height: 1.4; }
#setup-screen:has(.setup-deck-section:not(.hidden)) .setup-form { max-width: 560px; }
.reset-deck-sheet { max-width: 560px; }
.reset-deck-intro { margin-bottom: 14px; color: #cdbb90; font-size: 12px; line-height: 1.45; }
.reset-deck-list { margin-bottom: 15px; }
.reset-deck-actions { margin-top: 0; }

.progress-protection {
  display: flex; align-items: center; gap: 10px; margin: 0 0 15px; padding: 11px 12px;
  border: 1px solid rgba(235,191,83,.23); border-radius: 13px; background: linear-gradient(110deg, rgba(112,78,18,.2), rgba(7,13,13,.26));
}
.progress-protection.protected { border-color: rgba(110,178,110,.38); background: linear-gradient(110deg, rgba(38,95,43,.25), rgba(7,13,13,.26)); }
.progress-protection-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: rgba(5,10,10,.38); font-size: 21px; }
.progress-protection-copy { min-width: 0; flex: 1; }
.progress-protection-copy h3 { color: #f0d988; font-size: 12px; }
.progress-protection.protected .progress-protection-copy h3 { color: #b8e590; }
.progress-protection-copy p { margin-top: 3px; color: #ab9c7b; font-size: 10px; line-height: 1.3; }
.progress-protection-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.protect-progress-btn, .discard-progress-btn {
  padding: 7px 9px; border-radius: 8px; font-family: Georgia, serif; font-size: 10px; cursor: pointer;
}
.protect-progress-btn { color: #fff0b8; background: rgba(122,81,15,.52); border: 1px solid rgba(240,196,87,.57); }
.protect-progress-btn:hover { background: rgba(160,105,20,.66); border-color: #ffe297; }
.discard-progress-btn { color: #dca092; background: transparent; border: 1px solid rgba(205,110,96,.32); }
.discard-progress-btn:hover { color: #ffc0b3; background: rgba(104,35,29,.35); border-color: rgba(233,125,107,.65); }
.inv-faction-filters {
  margin-top: -2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.inv-filter-btn {
  border-color: rgba(238,195,86,.25);
  background: linear-gradient(135deg, rgba(83,59,18,.42), rgba(8,13,13,.48));
}
.inv-filter-btn.active {
  color: #fff0b8;
  background: linear-gradient(135deg, rgba(139,91,14,.72), rgba(65,42,10,.84));
  box-shadow: inset 0 1px 0 rgba(255,239,175,.12), 0 0 0 3px rgba(228,177,48,.08);
}
.inv-filter-btn:hover { transform: translateY(-1px); }

.protect-sheet { max-width: 440px; }
.protect-form { display: flex; flex-direction: column; }
.protect-intro { margin-bottom: 16px; color: #d8c8a7; font-size: 13px; line-height: 1.45; }
.protect-form .setup-input { margin-bottom: 14px; }
.protect-note { margin: -1px 0 16px; color: #ad9872; font-size: 11px; line-height: 1.35; }
.protect-submit { padding: 12px; color: #fff1bb; background: linear-gradient(135deg, #604107, #ae6b11); border: 1px solid #edc55f; border-radius: 10px; font-family: Georgia, serif; font-size: 14px; font-weight: bold; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,244,190,.25); }
.protect-submit:hover { border-color: #fff0ad; box-shadow: 0 0 18px rgba(229,174,47,.18); }

#toast-container { bottom: calc(var(--bar-h) + 16px); }
.toast { border-radius: 10px; border-color: rgba(245,202,94,.52); background: rgba(25,27,18,.94); box-shadow: 0 8px 22px rgba(0,0,0,.38); backdrop-filter: blur(10px); }
.btn-small { border-color: rgba(229,184,77,.38); background: rgba(41,35,21,.92); border-radius: 8px; }
.btn-small:hover:not(:disabled) { border-color: #efd07a; color: #fff0bb; background: rgba(115,77,18,.54); }

/* Ícones SVG locais: mantém HUD, botões e modais na mesma linguagem medieval. */
.setup-logo-icon { width: 44px; height: 44px; }
.hud-stat > span:first-child,
#hud-inv-btn .game-icon,
#hud-market-btn .game-icon {
  width: 18px; height: 18px; color: #f0ce70;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
#hud-inv-btn .game-icon,
#hud-market-btn .game-icon { width: 19px; height: 19px; }
#btn-win,
#city-travel-btn,
#city-fast-travel-btn,
.setup-start,
.win-close,
.tab-btn,
.card-item-price,
.merchant-gold,
.merchant-fast-travel,
.city-fast-travel-hint,
.win-reward,
.win-event-title,
.road-event-reward,
.market-protection-hint {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tab-btn { justify-content: center; }
.tab-btn .game-icon,
.card-item-action .game-icon,
.fast-travel-offer-action .game-icon,
.market-list-btn .game-icon,
.setup-start .game-icon,
.win-close .game-icon,
#city-travel-btn .game-icon,
#city-fast-travel-btn .game-icon,
#btn-win .game-icon {
  width: 15px; height: 15px; flex: 0 0 auto;
}
#btn-win { flex-direction: row; gap: 6px; }
#btn-win .win-icon { display: inline-flex; align-items: center; color: #fff2bf; }
.merchant-fast-travel,
.city-fast-travel-hint {
  justify-content: flex-start;
}
.merchant-fast-travel .game-icon,
.city-fast-travel-hint .game-icon {
  width: 13px; height: 13px;
}
.merchant-gold {
  justify-content: flex-end;
}
.merchant-gold .game-icon,
.card-item-price .game-icon,
.win-reward .game-icon,
.road-event-reward .game-icon {
  width: 14px; height: 14px; color: #f5d06c;
}
.card-item-price { justify-content: flex-start; }
.fast-travel-offer-icon .game-icon { width: 25px; height: 25px; }
.progress-protection-icon .game-icon { width: 21px; height: 21px; color: #efd581; }
.progress-protection.protected .progress-protection-icon .game-icon { color: #bde89b; }
.modal-header h2 {
  display: flex; align-items: center; gap: 8px;
}
.modal-header h2 .game-icon {
  width: 20px; height: 20px; color: #f0d27d;
}
.win-title {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.win-title-icon { width: 23px; height: 23px; color: #ffe99c; }
.win-reward { justify-content: flex-start; }
.win-event-title { justify-content: flex-start; }
.road-event-reward { justify-content: flex-start; }
.confirm-icon .game-icon { width: 25px; height: 25px; }
.market-protection-hint { justify-content: flex-start; }
.market-protection-hint .game-icon { width: 13px; height: 13px; color: #d2b979; }
.city-fast-travel-hint {
  justify-content: center;
  text-align: center;
}
.city-king {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(246, 204, 92, .34);
  border-radius: 13px;
  background: radial-gradient(circle at 0 50%, rgba(190, 133, 28, .22), transparent 48%), rgba(6, 10, 9, .38);
}
.city-king-icon-wrap {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #ffe58c;
  border: 1px solid rgba(246, 204, 92, .48);
  background: radial-gradient(circle, rgba(122, 80, 13, .65), rgba(19, 18, 12, .9));
}
.city-king-modal-icon {
  width: 23px;
  height: 23px;
}
.city-king-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.city-king-copy > span {
  color: #b6a47d;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.city-king-copy strong {
  color: #ffe29a;
  font-size: 16px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.city-king-copy small {
  color: #d2bd8b;
  font-size: 11px;
}
.city-route-hint {
  display: grid;
  gap: 5px;
  margin: 2px 0 12px;
  padding: 11px 12px;
  text-align: center;
  border: 1px solid rgba(236,194,88,.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(91,64,19,.28), rgba(9,15,15,.44));
}
.city-route-hint strong {
  color: #f4d785;
  font-size: 13px;
  line-height: 1.35;
}
.city-route-hint span {
  color: #b9aa86;
  font-size: 11px;
  line-height: 1.35;
}
.city-route-hint .city-route-kicker {
  color: #9f906f;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.city-locked-merchant-note {
  margin: 10px 0 0;
  color: #8d7b5b;
  font-size: 13px;
  text-align: center;
}

#btn-end-battle {
  position: relative;
  z-index: 1;
}

#btn-end-battle:not(.hidden) {
  margin-left: auto;
}

#btn-end-battle:not(.hidden) + #btn-win {
  margin-left: 0;
}

.battle-end {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(244, 200, 92, .5);
  color: #f4d487;
  background: linear-gradient(145deg, rgba(48, 33, 15, .95), rgba(24, 20, 13, .95));
  box-shadow: inset 0 1px 0 rgba(255, 239, 178, .16), 0 5px 16px rgba(0, 0, 0, .26);
  font-family: Georgia, serif;
  font-weight: 800;
  cursor: pointer;
}

.battle-end:hover:not(:disabled) {
  color: #fff1bd;
  border-color: #f4d487;
  background: linear-gradient(145deg, rgba(85, 43, 21, .96), rgba(35, 23, 14, .96));
}

.battle-end:disabled {
  opacity: .6;
  cursor: wait;
}

.battle-sheet {
  max-width: 560px;
}

.battle-intro {
  margin: 0 0 14px;
  color: #dccca5;
  font-size: 13px;
  line-height: 1.45;
}

.battle-status-card,
.battle-panel {
  border: 1px solid rgba(235, 192, 88, .32);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(35, 31, 19, .88), rgba(9, 14, 13, .9));
  box-shadow: inset 0 1px 0 rgba(255, 237, 177, .07);
}

.battle-status-card {
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  margin-bottom: 12px;
}

.battle-status-card strong {
  color: #f4d988;
  font-size: 15px;
}

.battle-status-card span {
  color: #c8b994;
  font-size: 12px;
  line-height: 1.35;
}

.battle-panel {
  display: grid;
  gap: 12px;
  padding: 13px;
  margin-bottom: 12px;
}

.battle-panel-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.battle-panel-heading > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #f3d47e;
  background: radial-gradient(circle, rgba(109, 74, 15, .8), rgba(20, 19, 12, .96));
  border: 1px solid rgba(240, 197, 91, .36);
}

.battle-panel-heading .game-icon {
  width: 18px;
  height: 18px;
}

.battle-panel h3 {
  margin: 0 0 4px;
  color: #ffe39b;
  font-size: 15px;
}

.battle-panel p {
  margin: 0;
  color: #ac9b78;
  font-size: 12px;
  line-height: 1.35;
}

.battle-primary,
.battle-secondary {
  min-height: 40px;
  border-radius: 10px;
  font-family: Georgia, serif;
  cursor: pointer;
}

.battle-primary {
  color: #fff2be;
  background: linear-gradient(135deg, #664007, #b66d0e);
  border: 1px solid #efc862;
  box-shadow: inset 0 1px 0 rgba(255, 241, 185, .22);
  font-weight: 700;
}

.battle-secondary {
  color: #e2cf9d;
  background: rgba(20, 22, 17, .82);
  border: 1px solid rgba(231, 188, 83, .38);
}

.battle-primary:hover:not(:disabled),
.battle-secondary:hover:not(:disabled) {
  border-color: #ffe7a3;
  color: #fff3c6;
}

.battle-primary:disabled,
.battle-secondary:disabled {
  opacity: .6;
  cursor: wait;
}

.battle-qr-box {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 13px;
  border-radius: 12px;
  background: rgba(4, 7, 7, .58);
  border: 1px solid rgba(236, 193, 88, .24);
}

#battle-qr {
  width: 220px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(244, 206, 103, .42);
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 0 0 4px rgba(13, 10, 4, .9), 0 0 0 5px rgba(244, 206, 103, .32);
}

#battle-code-label {
  color: #ffe9a4;
  font-size: 24px;
  letter-spacing: .18em;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}

.battle-reader {
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(234, 192, 88, .3);
  background: rgba(0, 0, 0, .35);
}

.battle-reader:not(.is-scanning):empty {
  display: none;
}

.battle-reader.is-scanning {
  display: block;
  min-height: 268px;
  padding: 8px;
  background:
    radial-gradient(circle at center, rgba(238, 200, 103, .08), transparent 58%),
    rgba(0, 0, 0, .46);
}

.battle-reader.is-scanning > div {
  border: 0 !important;
}

.battle-reader video {
  display: block;
  width: 100% !important;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
}

.battle-scan-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.battle-code-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 8px;
}

.battle-code-form input {
  min-width: 0;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(235, 192, 88, .44);
  color: #ffe6a0;
  background: rgba(3, 8, 8, .74);
  padding: 0 12px;
  font-family: Georgia, serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.battle-help {
  margin: 0;
  color: #a99a78;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 700px) {
  #hud { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  #hud .hud-name::before { display: none; }
  .hud-stat { min-height: 35px; border-radius: 10px; }
  #hud-inv-btn, #hud-market-btn { width: 36px; height: 35px; padding: 5px; }
  #bottom-bar { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .bottom-logo { width: clamp(62px, 16vw, 78px); max-height: 48px; }
  #btn-win { min-width: 121px; padding: 9px 11px; }
  .battle-end { width: 36px; height: 36px; border-radius: 10px; }
  #btn-win .win-icon { display: inline-flex; align-items: center; margin: 0; }
  .modal-sheet,
  .inv-modal .modal-sheet {
    border-radius: 18px 18px 0 0;
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
  }
  .modal-handle { flex: 0 0 auto; }
  .modal-header { position: relative; z-index: 2; background: rgba(27,24,16,.98); }
  .modal-close { width: 38px; height: 38px; flex: 0 0 auto; }
  .modal-body { padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); }
  .city-modal-hero { padding: 14px 13px; }
  .merchant-header-info { padding: 11px; }
  .merchant-stock-note { font-size: 9px; }
  .card-grid { gap: 10px; }
  .card-item:hover { transform: none; }
  .setup-form { padding: 18px; }
  .setup-deck-list { grid-template-columns: 1fr; }
  .setup-deck-option { min-height: 80px; }
  .progress-protection { align-items: flex-start; flex-wrap: wrap; }
  .progress-protection-actions { width: 100%; padding-left: 44px; }
  .protect-progress-btn, .discard-progress-btn { flex: 1; }
  .journey-cancel { padding: 8px; font-size: 10px; }
  .inv-header-stats { gap: 6px; }
  .inv-stat { padding: 6px 8px; font-size: 11px; }
  .inv-collection-stat { min-width: 132px; }
  .inv-reset-btn { margin-left: 0; padding: 6px 8px; font-size: 10px; }
  .inv-faction-filters { gap: 6px; margin-bottom: 11px; }
  .inv-filter-btn { padding: 6px 8px; font-size: 10px; }
  .fast-travel-offer { grid-template-columns: 38px minmax(0, 1fr); }
  .fast-travel-offer-icon { width: 38px; height: 38px; font-size: 20px; }
  .fast-travel-offer-action { grid-column: 2; justify-self: start; }
  .merchant-refresh-control { grid-template-columns: 38px minmax(0, 1fr); }
  .merchant-refresh-icon { width: 38px; height: 38px; }
  .merchant-refresh-action { grid-column: 2; justify-self: start; }
  .market-grid { gap: 10px; }
  .quest-card { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .quest-icon { width: 36px; height: 36px; }
  .quest-icon-svg { width: 21px; height: 21px; }
  .quest-heading { flex-direction: column; gap: 5px; }
  .quest-claim-btn { grid-column: 1 / -1; justify-self: stretch; }
  .confirm-actions { grid-template-columns: 1fr; }
  .tutorial-image { height: min(46dvh, 355px); }
  .tutorial-copy { margin-top: 10px; padding: 10px 11px; }
  .tutorial-copy h3 { font-size: 15px; }
  .tutorial-copy p { font-size: 11px; }
  .tutorial-actions { grid-template-columns: 1fr 1fr; }
  .tutorial-primary { grid-column: 1 / -1; }
  .battle-panel { padding: 11px; }
  .battle-code-form { grid-template-columns: 1fr; }
  .battle-scan-actions { grid-template-columns: 1fr; }
  #battle-code-label { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── PERGAMINHO DE CAMPANHA ──────────────────────────────────────────────────── */
.campaign-intro-scroll {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.campaign-intro-scroll.hidden { display: none; }

.scroll-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(12,6,0,0.68) 0%, rgba(0,0,0,0.86) 100%);
  backdrop-filter: blur(4px);
  animation: scrollFadeIn 0.4s ease forwards;
}

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

/* O papiro.png (436×572, PNG transparente com rolos e bordas rasgadas)
   serve de fundo e forma do scroll — nada de divs de cilindros artificiais. */
.scroll-parchment {
  position: relative; z-index: 1;
  width: min(560px, 92vw, calc((100dvh - 24px) * .7622));
  flex: 0 0 auto;
  /* clip-path revela o scroll de cima (rolo superior) até baixo (rolo inferior),
     imitando o papel sendo desenrolado. inset(0 0 X% 0) corta X% a partir de baixo. */
  animation: scrollUnroll 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes scrollUnroll {
  0%   { clip-path: inset(0 4% 87% 4% round 6px); opacity: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
  8%   { opacity: 1; }
  100% { clip-path: inset(0 0%  0%  0%);           opacity: 1; filter: drop-shadow(0 14px 44px rgba(0,0,0,0.82)) drop-shadow(0 3px 8px rgba(0,0,0,0.5)); }
}

/* Imagem real do scroll — define a altura do container automaticamente */
.scroll-bg-img {
  width: 100%; height: auto; display: block;
  user-select: none; pointer-events: none;
}

/* A faixa realmente limpa do papiro começa depois dos rolos e das bordas
   rasgadas. O conteúdo usa apenas 60% da largura para manter uma margem de
   leitura visível mesmo nos títulos maiores. */
.scroll-content {
  position: absolute;
  top: 19.5%; bottom: 19%;
  left: 50%; transform: translateX(-50%);
  width: 60%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(7px, 1.6vh, 12px);
  text-align: center; color: #0e0400;
}

.scroll-faction-icon { display: block; margin: 0 auto; }
.scroll-faction-icon svg {
  width: clamp(34px, 8vw, 42px); height: clamp(34px, 8vw, 42px);
  stroke: #2a0e00; fill: none; stroke-width: 1.8;
}

.scroll-kicker {
  max-width: 100%;
  font-size: clamp(7px, 1.8vw, 9px); text-transform: uppercase; letter-spacing: 1.6px;
  color: #3a1400; font-weight: 900; margin: 0;
  /* halo claro separa o texto escuro do fundo âmbar */
  text-shadow:
    0 0 8px rgba(255,245,200,0.9),
    0 0 16px rgba(255,240,180,0.5);
}

.scroll-title {
  max-width: 100%;
  font-size: clamp(18px, 5vw, 25px); font-weight: 900; color: #150400;
  margin: 0; line-height: 1.15; letter-spacing: .015em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow:
    0 0 10px rgba(255,245,200,0.95),
    0 0 22px rgba(255,235,160,0.6);
}

.scroll-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 1px auto; width: 72%;
}
.scroll-divider::before,
.scroll-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(60,22,0,0.5), transparent);
}
.scroll-divider-gem {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 35%, #c89030, #5a3205);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

.scroll-description {
  max-width: 100%;
  font-size: clamp(11px, 2.7vw, 13.5px); line-height: 1.55; color: #180800;
  margin: 0; font-style: italic; font-weight: 600;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  text-shadow:
    0 0 8px rgba(255,245,200,0.85),
    0 0 18px rgba(255,235,160,0.45);
}

/* Mesmo acabamento dourado dos controles principais do jogo. */
.scroll-cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: min(100%, 190px); min-height: 38px;
  padding: 9px 22px;
  border: 2px solid #d8aa3b; border-radius: 8px;
  background: linear-gradient(180deg, #bd760d 0%, #9b5908 52%, #733a04 100%);
  color: #fff0bd;
  cursor: pointer; font-family: Georgia, serif;
  font-size: clamp(9px, 2.2vw, 11px); font-weight: 800;
  letter-spacing: 1.25px; line-height: 1.15; text-transform: uppercase;
  text-shadow: 0 1px 2px #3a1700;
  box-shadow:
    0 4px 12px rgba(35, 12, 0, .42),
    0 0 0 1px rgba(55, 24, 2, .88),
    inset 0 1px 0 rgba(255, 224, 125, .45),
    inset 0 -2px 0 rgba(55, 20, 0, .35);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.scroll-cta::before {
  content: '';
  position: absolute; inset: 3px;
  border: 1px solid rgba(255, 220, 112, .3);
  border-radius: 4px; pointer-events: none;
}
.scroll-cta:hover,
.scroll-cta:focus-visible {
  filter: brightness(1.1);
  box-shadow:
    0 5px 15px rgba(35, 12, 0, .5),
    0 0 0 1px rgba(55, 24, 2, .9),
    0 0 12px rgba(200, 145, 28, .3),
    inset 0 1px 0 rgba(255, 232, 150, .55);
}
.scroll-cta:focus-visible { outline: 2px solid #fff0bd; outline-offset: 3px; }
.scroll-cta:active { transform: translateY(1px); filter: brightness(.92); }

@media (max-width: 360px), (max-height: 560px) {
  .scroll-content {
    top: 18.5%; bottom: 18%;
    width: 61%;
    gap: 6px;
  }
  .scroll-faction-icon svg { width: 31px; height: 31px; }
  .scroll-title { font-size: clamp(16px, 5vw, 20px); }
  .scroll-description { font-size: clamp(10px, 2.8vw, 12px); line-height: 1.45; }
  .scroll-cta { min-height: 34px; padding: 7px 16px; }
}

@media (max-width: 700px) {
  .story-dialogue-overlay {
    padding: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
  }
  .story-dialogue-scene {
    width: 100%;
    box-sizing: border-box;
    height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    min-height: 0;
  }
  .story-dialogue-art {
    top: auto;
    right: 4%;
    left: auto;
    bottom: 30%;
    width: min(54%, 230px);
    height: 56%;
    transform: none;
    clip-path: none;
  }
  .story-dialogue-art img { object-position: 100% 100%; }
  .story-dialogue-box {
    right: 12px;
    bottom: max(4px, env(safe-area-inset-bottom));
    left: 12px;
    max-height: 56%;
  }
  .story-dialogue-speaker {
    min-width: 68%;
    max-width: 94%;
    padding: 7px 32px 7px 15px;
    transform: translate(5px, 2px) rotate(-.4deg);
  }
  .story-dialogue-panel {
    padding: 13px 15px 14px;
    border-radius: 2px 8px 8px 8px;
  }
  .story-dialogue-name { font-size: clamp(21px, 6vw, 27px); }
  .story-dialogue-text { font-size: 14px; line-height: 1.45; }
  .story-dialogue-title { font-size: 13px; }
  .story-dialogue-continue { min-width: 145px; margin-top: 11px; min-height: 38px; }
}

@media (max-height: 600px) {
  .story-dialogue-art { top: auto; bottom: 34%; height: 52%; }
  .story-dialogue-box { max-height: 62%; }
  .story-dialogue-panel { padding-top: 11px; }
  .story-dialogue-meta { margin-bottom: 5px; }
  .story-dialogue-role { margin-top: 3px; }
  .story-dialogue-divider { margin-block: 9px; }
  .story-dialogue-text { line-height: 1.38; }
  .story-dialogue-continue { margin-top: 10px; padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-dialogue-overlay,
  .story-dialogue-scene,
  .story-dialogue-art img { transition: none !important; }
}