/* ============================================================================================
   Ombria — tema do HUD "Globo central" (Guild Wars 2 com alma Tibia). Escolhido no HUD Lab (01/09).
   Injetado pelo servidor (src/server.js) DEPOIS do CSS do bundle; só sobrescreve o que precisa.
   Referência de pixel: protótipo gw2-central em 1280×720 (hud-lab/src/variants/gw2-central.css).
   Layout atrás de (min-width: 1001px): abaixo disso o cliente usa o layout compacto/mobile dele.
   ============================================================================================ */

@property --hud-xp { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --hud-hp { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --hud-mp { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --hud-stam { syntax: '<percentage>'; inherits: true; initial-value: 100%; }

/* Este CSS bloqueia o primeiro paint; o sidecar e o atlas carregam depois. */
:is(.char-sheet .sheet-icon, .cyc-monster .cyc-icon, .cyc-element-icon, .analyzer-damage-icon,
    .header-character-card .hc-skill > span[aria-hidden="true"], .header-character-card .hc-scroll-icon,
    .header-exp-card .hec-row > span[aria-hidden="true"]):not(.oh-stat-fallback) {
  display: inline-block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex: 0 0 20px;
  padding: 0;
  font-size: 0 !important;
  line-height: 1;
  vertical-align: middle;
}
.char-sheet .sheet-vital .sheet-icon:not(.oh-stat-fallback) {
  width: 24px;
  height: 24px;
}
:is(.header-character-card .hc-skill > span[aria-hidden="true"], .header-character-card .hc-scroll-icon,
    .header-exp-card .hec-row > span[aria-hidden="true"]):not(.oh-stat-fallback) {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-basis: 16px;
  align-self: center;
}
.header-character-card .hc-skill { align-items: center; min-width: 0; }

.ocs-reference-pending #ui .char-window,
.ocs-reference-pending #ui .char-window * { visibility: hidden !important; }

:root {
  --oh-ink-0: #0b0c12; --oh-ink-1: #13141c; --oh-ink-2: #1a1b26; --oh-ink-3: #1f2335; --oh-ink-4: #24283b;
  --oh-line: #3b4261; --oh-line-2: #565f89;
  --oh-text: #c0caf5; --oh-text-2: #9aa5ce; --oh-text-3: #6b7394; --oh-bright: #e8eaf2;
  --oh-gold: #e0af68; --oh-gold-2: #c9a227; --oh-gold-3: #e8c47c; --oh-gold-dark: #5a4a2d;
  --oh-blue: #7aa2f7; --oh-red: #f7768e; --oh-green: #9ece6a; --oh-green-2: #7dcf8a; --oh-cyan: #7dcfff;
  --oh-hp: #4cc25a; --oh-mp: #4d7cf6; --oh-stam: #35b8a6;
  --oh-stone: rgba(14, 15, 22, .86); --oh-gline: rgba(201, 162, 39, .55); --oh-glass: rgba(14, 15, 22, .94);
  --oh-num: hud-figures, Cambria, "Palatino Linotype", Palatino, Georgia, serif;
  --oh-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --oh-ease: cubic-bezier(.2, .8, .2, 1);
  /* geometria do dock (protótipo: slot 48 · mini 28 · gap 4 · anel 132 · globo 110) */
  --d-slot: 48px; --d-mini: 28px; --d-gap: 4px; --d-core: 140px; --d-ring: 132px; --d-orb: 110px; --d-h: 154px;
  --d-side: calc(var(--d-slot) * 5 + var(--d-gap) * 4);
  --d-w: calc(var(--d-side) * 2 + var(--d-core));
  /* molduras 9-slice do cliente → versões do tema (mesma geometria, ver frames/gen_frames.py) */
  --frame-window: url(/ombria/frames/frame-window.png);
  --frame-button: url(/ombria/frames/frame-button.png);
  --frame-slot: url(/ombria/frames/frame-slot.png);
  --frame-slot-active: url(/ombria/frames/frame-slot-active.png);
  --frame-bar: url(/ombria/frames/frame-bar.png);
  --frame-icon-button: url(/ombria/frames/frame-icon-button.png);
  --frame-lit: brightness(1.45) saturate(1.35);
}
.oh-k, .ol-title, .oc-title, #oc-strip, .oh-lvk { font-family: var(--oh-ui); }

/* ============================================================================================
   TOPO ESQUERDO — cartão do menu (logo · nav 2×5 · carteira/Loja)
   ============================================================================================ */
@media (min-width: 1001px) {
  app-game-shell > header {
    position: absolute; left: 12px; top: 12px; z-index: 9; min-height: 94px; width: max-content; box-sizing: border-box;
    display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px;
    background: var(--oh-stone); border: 1px solid rgba(255, 255, 255, .06); border-top-color: var(--oh-gline); border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  }
  app-game-shell > header .header-brand { display: none; }   /* passo 6: sem logo — os botões ganham o espaço */
  app-game-shell > header #top-nav { order: 1; }
  app-game-shell > header .header-purse { order: 2; }
  app-game-shell > header #nav-menu { display: none; }
  #game { position: absolute !important; inset: 0 !important; }
  /* passo 6: Personagem e Caçar saem do menu (viram o cartão Caçar e a identidade clicável); 8 botões em 2×4 de 36px */
  #top-nav.top-nav { display: grid !important; grid-template-columns: repeat(4, 36px); grid-auto-rows: 36px; gap: 12px 6px; }   /* linhas descoladas (pedido 02/09); colunas seguem 6px */
  #top-nav.top-nav:has(#nav-party:not([hidden])), #top-nav.top-nav:has(#nav-pip:not([hidden])) { grid-template-columns: repeat(5, 36px); }
  #top-nav #nav-character, #top-nav #nav-start-hunt { display: none !important; }
  #top-nav .nav-drawer-head { display: none; }
  #top-nav .nav-labeled { position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 5px;
    background: var(--frame-icon-button) center / 100% 100% no-repeat, rgba(22, 22, 30, .9); transition: transform .16s var(--oh-ease), box-shadow .16s; }
  #top-nav .nav-labeled::after { content: none; }
  #top-nav .nav-labeled .nav-glyph { width: 28px; height: 28px; }
  #top-nav .nav-labeled .nav-glyph-art { max-width: 28px; max-height: 28px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
  #top-nav .nav-labeled:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--oh-gold); }
  #top-nav .nav-labeled:hover .nav-glyph-art { filter: drop-shadow(0 0 3px var(--oh-gold)); }
  #top-nav .nav-labeled:active { transform: translateY(0) scale(.95); }
  #top-nav .nav-labeled .nav-label { display: flex !important; top: calc(100% + 6px); bottom: auto; right: auto; left: 50%; height: 20px; padding: 0 8px;
    border-radius: 3px; background: var(--oh-ink-4); color: var(--oh-bright); font: 600 10px/1 var(--oh-ui); white-space: nowrap; opacity: 0; pointer-events: none;
    transform: translate(-50%, -4px); transition: opacity .13s ease, transform .18s var(--oh-ease); z-index: 20; }
  #top-nav .nav-labeled .nav-label::after { display: none; }
  #top-nav .nav-labeled:hover .nav-label { opacity: 1; transform: translate(-50%, 0); }

  .header-purse { display: grid; grid-template-rows: 22px 22px 26px; gap: 4px; min-width: 124px; padding-left: 12px; align-items: center;
    border-left: 1px solid; border-image: linear-gradient(transparent, var(--oh-gline), transparent) 1; }
  .header-purse .header-coin-group, .header-purse #header-gold, .header-purse #header-coins { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0; margin: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; white-space: nowrap; }
  .header-purse .store-coin { width: 15px; height: 15px; display: inline-block; background-size: contain !important; }
  .header-purse #header-gold canvas { width: 15px; height: 15px; }
  .header-purse .header-coins-count, .header-purse .header-gold-count { font: 700 13px/1 var(--oh-num); color: var(--oh-gold-3); font-variant-numeric: tabular-nums; }
  .header-purse #header-coins-buy { width: 14px; height: 14px; margin-left: 2px; padding: 0; border-radius: 50%; display: grid; place-items: center;
    background: rgba(224, 175, 104, .18); border: 1px solid var(--oh-gold-dark); font: 700 11px/1 var(--oh-ui); color: var(--oh-gold-3); }
  /* O bundle ja desenha o + em ::before; o texto criava uma segunda linha. */
  .header-purse #header-coins-buy > span[aria-hidden="true"] { display: none; }
  /* passo 7: botão Loja em placa dourada sólida (ícone novo + rótulo escuro) */
  .header-purse #nav-store { display: flex; align-items: center; justify-content: center; gap: 6px; height: 26px; width: 100%; padding: 0 8px; border-radius: 4px; box-sizing: border-box;
    background: linear-gradient(#f3d383, #cfa93a 55%, #a67a22); border: 1px solid #5a4a2d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 0 rgba(0, 0, 0, .6);
    transition: box-shadow .2s, filter .2s; }
  .header-purse #nav-store::after { content: none; }
  .header-purse #nav-store:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 14px rgba(224, 175, 104, .55); }
  .header-purse #nav-store:active { filter: brightness(.95); }
  .header-purse #nav-store .nav-glyph { width: 18px; height: 18px; }
  .header-purse #nav-store .nav-glyph-art { max-width: 18px; max-height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
  .header-purse #nav-store .nav-label { display: block !important; position: static; opacity: 1; transform: none; background: none; padding: 0;
    font: 800 11px/1 var(--oh-ui); letter-spacing: .14em; text-transform: uppercase; color: #1a1408; text-shadow: 0 1px 0 rgba(255, 255, 255, .3); }
  .header-purse #nav-store .nav-label::after { display: none; }

  /* ---- topo centro: identidade + online ---- */
  #ombria-ident { position: absolute; left: 50%; top: 12px; z-index: 9; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 14px 6px; background: var(--oh-stone); border: 1px solid rgba(255, 255, 255, .06); border-top-color: var(--oh-gline); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  #ombria-ident[hidden] { display: none; }
  /* passo 6: o cartão inteiro abre a ficha (hud.js → #nav-character); retrato, chip de EXP e Premium mantêm os cliques do cliente */
  #ombria-ident { cursor: pointer; transition: box-shadow .2s, transform .16s var(--oh-ease); }
  #ombria-ident:hover, #ombria-ident:focus-visible { outline: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(224, 175, 104, .75), 0 0 14px rgba(224, 175, 104, .25); }
  #ombria-ident::after { content: "Abrir ficha do personagem"; position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); height: 22px; padding: 0 10px; border-radius: 3px; z-index: 20;
    background: var(--oh-ink-4); border: 1px solid var(--oh-line); color: var(--oh-bright); font: 600 10px/20px var(--oh-ui); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .13s, transform .18s var(--oh-ease); }
  #ombria-ident:hover::after, #ombria-ident:focus-visible::after { opacity: 1; transform: translate(-50%, 8px); }
  #ombria-ident:has(#oh-premium:hover)::after, #ombria-ident:has(#header-exp-rate:hover)::after, #ombria-ident:has(#header-portrait:hover)::after { opacity: 0; }
  #oh-ident-go { font: 700 15px/1 var(--oh-num); color: var(--oh-gold-3); margin-left: 2px; opacity: .75; transition: opacity .16s, transform .16s var(--oh-ease); }
  #ombria-ident:hover #oh-ident-go { opacity: 1; transform: translateX(2px); }
  .header-character { position: static; order: 0; display: flex; align-items: center; gap: 8px; height: 24px; padding: 0; border: 0; white-space: nowrap; text-shadow: 0 1px 2px #000; }
  .header-character #header-portrait { width: 24px; height: 24px; padding: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 0;
    background: #0d0e14; box-shadow: 0 0 0 1px #0d0e14, 0 0 0 2px var(--oh-gold-dark); }
  .header-character #header-portrait canvas { width: 22px; height: 22px; margin-top: 4px; image-rendering: pixelated; }
  .header-character-id { display: flex !important; flex-direction: row; align-items: center; gap: 8px; line-height: 1; }
  .header-character-name { display: block !important; font: 700 16px/1 var(--oh-num); color: var(--oh-gold-3); letter-spacing: .02em; }
  .header-character-vocation { display: inline-flex; align-items: center; gap: 8px; font: 11px/1 var(--oh-ui); color: var(--oh-text-2); }
  .header-character-vocation em { font-style: normal; display: inline-flex; align-items: baseline; gap: 4px; font: 500 10px/1 var(--oh-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--oh-text-2); }
  .header-character-vocation em b { font: 700 13px/1 var(--oh-num); color: var(--oh-bright); letter-spacing: 0; }
  #header-exp-rate { display: inline-flex !important; align-items: center; margin: 0; padding: 3px 6px; border-radius: 3px; border: 1px solid rgba(125, 207, 138, .35);
    background: rgba(125, 207, 138, .12); color: var(--oh-green-2); font: 700 9px/1 var(--oh-ui); letter-spacing: .08em; text-shadow: none; }
  #header-exp-rate span { display: none; }
  #header-exp-rate strong { font: inherit; }
  #header-exp-rate strong::after { content: " EXP"; }
  .header-online { position: static; order: 1; flex: none; display: flex; flex-direction: row; align-items: center; gap: 5px;
    font: 10px/1 var(--oh-ui); color: var(--oh-text-2); white-space: nowrap; overflow: visible; text-shadow: 0 1px 2px #000; }
  .header-online .players-online { display: inline-flex; align-items: center; gap: 5px; color: var(--oh-text-2); }
  .header-online .players-online i { width: 6px; height: 6px; border-radius: 50%; background: var(--oh-green); box-shadow: 0 0 6px var(--oh-green); animation: oh-breathe 2.6s ease-in-out infinite; }
  .header-online .players-online-label { display: inline !important; }
  .header-online .release-phase { color: var(--oh-text-3); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .header-online .release-phase::before { content: "·"; margin-right: 5px; }
  /* chip de premium (hud.js → /api/me/premium) */
  #oh-premium { display: inline-flex; align-items: center; gap: 5px; height: 18px; margin-left: 2px; padding: 0 8px 0 5px; border-radius: 3px; cursor: pointer; text-shadow: none;
    font: 700 9px/1 var(--oh-ui); letter-spacing: .08em; text-transform: uppercase; transition: box-shadow .2s, transform .16s var(--oh-ease); }
  #oh-premium i { width: 13px; height: 13px; background: url(/assets/ui/premium-shield.png) center / contain no-repeat; }
  #oh-premium span { font: 600 9px/1 var(--oh-ui); letter-spacing: .04em; text-transform: none; opacity: .9; }
  #oh-premium.on { background: linear-gradient(rgba(224, 175, 104, .28), rgba(224, 175, 104, .1)); border: 1px solid var(--oh-gline); color: var(--oh-gold-3); box-shadow: 0 0 10px rgba(224, 175, 104, .18); }
  #oh-premium.on:hover { box-shadow: 0 0 14px rgba(224, 175, 104, .4); transform: translateY(-1px); }
  #oh-premium.off { background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .18); color: var(--oh-text-3); }
  #oh-premium.off i { filter: grayscale(1) opacity(.5); }
  #oh-premium.off:hover { color: var(--oh-gold-3); border-color: var(--oh-gline); }
  /* passo 7: no topo o premium é só um indicador (escudo aceso/apagado); os detalhes ficam na ficha (#oh-sheet-premium) */
  #oh-premium { width: 22px; height: 22px; padding: 0; gap: 0; margin-left: 4px; border-radius: 50%; justify-content: center; pointer-events: none; }
  #oh-premium b, #oh-premium span { display: none; }
  #oh-premium i { width: 14px; height: 14px; }
  #oh-premium.on { box-shadow: 0 0 10px rgba(224, 175, 104, .35); }
  /* passo 7: cartão "Jogar / Caçar" logo acima do chat (mesma largura, 284px). hud.js cria #ombria-cta, acompanha a altura do chat
     e faz o clique no #nav-start-hunt. Hover só acende (sem deslocar). */
  #ombria-cta { position: absolute; left: 12px; bottom: 182px; z-index: 9; width: 284px; height: 70px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 36px 0 12px;
    cursor: pointer; user-select: none; border-radius: 6px;
    background: linear-gradient(100deg, rgba(66, 55, 30, .96) 0%, rgba(26, 26, 36, .95) 50%, rgba(14, 15, 22, .94) 100%);
    border: 1px solid rgba(224, 175, 104, .45); box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(0, 0, 0, .35);
    transition: box-shadow .2s, border-color .2s, filter .2s; }
  #ombria-cta[hidden] { display: none; }
  #ombria-cta::before { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; background: radial-gradient(150px 70px at 12% 50%, rgba(224, 175, 104, .22), transparent 70%); }
  #ombria-cta::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 26px/1 var(--oh-num); color: var(--oh-gold-3); opacity: .65; transition: opacity .2s; }
  #ombria-cta:hover, #ombria-cta:focus-visible { outline: none; border-color: var(--oh-gold); filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 22px rgba(224, 175, 104, .35), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(224, 175, 104, .25); }
  #ombria-cta:hover::after { opacity: 1; }
  #ombria-cta:active { filter: brightness(.96); }
  #ombria-cta[aria-disabled="true"] { cursor: default; opacity: .75; }
  #ombria-cta[aria-disabled="true"]:hover { filter: none; border-color: rgba(224, 175, 104, .45); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  #ombria-cta .cta-chev { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 0;
    background: radial-gradient(circle at 40% 30%, #3a3320, #15120b 70%); box-shadow: 0 0 0 1px #0d0e14, 0 0 0 2px var(--oh-gold-2), 0 0 12px rgba(201, 162, 39, .45); }
  #ombria-cta .cta-chev img { width: 34px; height: 34px; filter: drop-shadow(0 1px 2px #000); }
  #ombria-cta .cta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  #ombria-cta .cta-eyebrow { font: 700 10px/1 var(--oh-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--oh-gold-3); white-space: nowrap; }
  #ombria-cta .cta-title { font: 700 22px/1.05 var(--oh-num); letter-spacing: .05em; text-transform: uppercase; color: var(--oh-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
  #ombria-cta .cta-sub { font: 11px/1.2 var(--oh-ui); font-style: normal; color: var(--oh-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ombria-cta .cta-sub u { text-decoration: none; color: var(--oh-gold-3); font-weight: 600; }
  #ombria-cta[data-mode="hunt"] .cta-title { font-size: 19px; }
  #ombria-cta[data-mode="hunt"] .cta-eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--oh-gold); box-shadow: 0 0 6px var(--oh-gold); animation: oh-breathe 1.6s ease-in-out infinite; }
  #oh-toast { position: absolute; left: 50%; top: 96px; z-index: 40; transform: translate(-50%, -8px); padding: 9px 14px 9px 12px; border-radius: 6px; display: flex; align-items: center; gap: 8px;
    background: var(--oh-stone); border: 1px solid var(--oh-gline); color: var(--oh-gold-3); font: 600 12px/1 var(--oh-ui); box-shadow: 0 8px 24px rgba(0, 0, 0, .55); opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .3s var(--oh-ease); }
  #oh-toast::before { content: ""; width: 16px; height: 16px; background: url(/assets/ui/premium-shield.png) center / contain no-repeat; }
  #oh-toast.show { opacity: 1; transform: translate(-50%, 0); }
  /* toasts do cliente (system/pending: "Indo até o portal…", avisos) nascem em top:10px, em cima da
     identidade — descem para baixo dela, como o #oh-toast */
  .system-toasts { top: 96px !important; }

  /* sombreados de contraste sobre o mapa (criados pelo hud.js) */
  #oh-shade-top, #oh-shade-bottom { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
  #oh-shade-top { top: 0; height: 110px; background: linear-gradient(rgba(6, 7, 12, .66), rgba(6, 7, 12, .22) 55%, transparent); }
  #oh-shade-bottom { bottom: 0; height: 190px; background: linear-gradient(to top, rgba(6, 7, 12, .8), rgba(6, 7, 12, .42) 50%, transparent);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 360px), calc(100% - 196px) calc(100% - 360px), calc(100% - 196px) 100%, 0 100%); }
  #oh-shade-top[hidden], #oh-shade-bottom[hidden] { display: none; }
}

/* ============================================================================================
   TOPO DIREITO — "Ações do local" (cidade) / "Caçada" (botões da caçada)
   ============================================================================================ */
@media (min-width: 1001px) {
  #ombria-local { position: absolute; right: 12px; top: 12px; z-index: 9; padding: 6px 12px 7px 10px; display: grid; gap: 7px; justify-items: end;
    background: var(--oh-stone); border: 1px solid rgba(255, 255, 255, .06); border-top-color: var(--oh-gline); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  #ombria-local[hidden] { display: none; }
  .ol-title { font: 600 9px/1 var(--oh-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--oh-gold-3); }
  .ol-city, .ol-hunt { display: none; }
  #ombria-local[data-mode="city"] .ol-city, #ombria-local[data-mode="hunt"] .ol-hunt { display: inline; }
  #ombria-local[data-mode="hunt"] .ol-hunt::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;
    background: var(--oh-gold); box-shadow: 0 0 6px var(--oh-gold); animation: oh-breathe 1.6s ease-in-out infinite; }
  /* passo 7: efeitos ativos (Haste, paralisia, timers de arena) em pílulas acima do globo de vida (hud.js move a .hud-status-strip para o dock) */
  .hud-bar-panel .hud-status-strip { position: absolute; left: 50%; top: -46px; z-index: 5; transform: translateX(-50%); width: max-content; max-width: calc(var(--d-w) - 40px); justify-content: center; gap: 6px; padding: 0; pointer-events: none; }
  .hud-bar-panel .hud-status { height: 26px; padding: 0 9px 0 5px; gap: 6px; border: 1px solid var(--oh-gline); border-radius: 13px; background: var(--oh-stone); box-shadow: 0 2px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    font: 700 11px/1 var(--oh-num); color: var(--oh-bright); font-variant-numeric: tabular-nums; }
  .hud-bar-panel .hud-status img, .hud-bar-panel .hud-status .hud-status-glyph { width: 18px; height: 18px; }
  .hud-bar-panel .hud-status.hud-status-paralyzed { border-color: rgba(247, 118, 142, .6); background: linear-gradient(#4a2530, #2a161c); color: #ffb4c0; }
  #ombria-local .hud-city-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; padding: 0 4px 0 0; overflow: visible !important; }
  #ombria-local .hud-city-actions[hidden] { display: none; }
  #ombria-local .hud-city-action { height: 28px; min-width: 0; padding: 0 12px; border-radius: 4px; font: 600 11px/1 var(--oh-ui); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
    background: linear-gradient(#232a44, #151827); transition: transform .16s var(--oh-ease), background .2s; }
  #ombria-local .hud-city-action:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(#2c3452, #1a1e30); }
  #ombria-local .hud-city-action:active:not(:disabled) { transform: translateY(0); }
  #ombria-local .hud-temple.has-blessings { color: var(--oh-gold-3); }
  #ombria-local .hud-temple.has-blessings .hud-chase { display: flex !important; align-items: center; justify-content: center; position: absolute; inset: -4px -4px auto auto !important; width: 14px; height: 14px; border-radius: 50%; z-index: 5;
    background: var(--oh-red); box-shadow: 0 0 0 1px #000; animation: oh-alert 1.8s ease-in-out infinite; letter-spacing: 0; text-indent: 0; text-transform: none; }
  #ombria-local .hud-temple.has-blessings .hud-chase::before { content: "!"; position: static; display: block; width: auto; height: auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
    font: 800 10px/1 var(--oh-ui); color: #fff; text-align: center; transform: translateY(-.5px); animation: none; offset-path: none; }
  #ombria-local .hud-temple.has-blessings .hud-chase::after { content: none; }
  #ombria-local.no-bless::after { content: "Você está sem blessings"; padding-left: 17px; font: 10px/12px var(--oh-ui); color: var(--oh-text-2);
    background: radial-gradient(circle at 6px 6px, var(--oh-red) 5.5px, transparent 6.5px) no-repeat; }
  /* caçada: botões chapados como no cartão "evento" do protótipo */
  #ombria-local .hud-hunt-action { height: 24px; padding: 0 10px; border-radius: 3px; background: rgba(36, 40, 59, .9); border: 1px solid var(--oh-line);
    font: 600 10px/1 var(--oh-ui); letter-spacing: .04em; text-transform: none; color: var(--oh-bright); }
  #ombria-local .hud-hunt-action::after { content: none; }
  #ombria-local .hud-details-glyph { display: none; }
  #ombria-local .hud-dispatch-group, #ombria-local .hud-leave-group { display: flex; }
  #ombria-local .hud-dispatch-group[hidden], #ombria-local .hud-leave-group[hidden] { display: none; }
  #ombria-local .hud-leave-hunt, #ombria-local .hud-leave-more { background: rgba(247, 118, 142, .16); border-color: rgba(247, 118, 142, .6); color: #ffb3c1; }
  #ombria-local .hud-leave-hunt:hover:not(:disabled), #ombria-local .hud-leave-more:hover:not(:disabled) { background: rgba(247, 118, 142, .26); color: #ffd0d8; }
  #ombria-local .hud-leave-glyph { margin-right: 4px; color: #ff8a9a; }
  #ombria-local .hud-city-action .hud-chase { display: none; }
  /* popovers de regras (sair/despachar sozinho): abaixo do cartão, nunca sobre os botões */
  .context-menu.leave-rules-menu, .context-menu.dispatch-rules-menu, .context-menu[class*="rules-menu"] { top: calc(var(--oh-local-bottom, 110px) + 8px) !important; }
}

/* Identidade e ações compartilham uma grade: o conteúdo de um cartão não ocupa o outro.
   A área do menu à esquerda é medida por hud.js, incluindo o zoom nativo. */
#ombria-top[hidden] { display: none !important; }
@media (min-width: 1001px) {
  #ombria-top {
    position: absolute; top: 12px; right: 12px; left: 360px; z-index: 9;
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(244px, 20vw, 300px);
    align-items: start; gap: 12px; pointer-events: none;
  }
  #ombria-top > #ombria-ident {
    position: relative; inset: auto; transform: none; justify-self: center;
    box-sizing: border-box; width: fit-content; max-width: min(100%, 620px); min-width: 0; pointer-events: auto;
  }
  #ombria-top .header-character {
    width: 100%; min-width: 0; height: auto; min-height: 24px; flex-wrap: nowrap; justify-content: center; column-gap: 6px;
  }
  #ombria-top .header-character-id { min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 6px; }
  #ombria-top .header-character-name { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.2; }
  #ombria-top #header-portrait, #ombria-top #header-exp-rate, #ombria-top #oh-premium, #ombria-top .oh-nav-icon { flex-shrink: 0; }
  #ombria-top > #ombria-local {
    position: relative; inset: auto; box-sizing: border-box; width: 100%; min-width: 0; max-width: none; pointer-events: auto;
    padding: 9px 10px; gap: 8px;
  }
  #ombria-local .hud-city-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; padding: 0; gap: 8px; }
  #ombria-local .hud-city-actions > * { min-width: 0; }
  #ombria-local .hud-city-action { width: 100%; padding-inline: 6px; }
  #ombria-local .hud-hunt-details, #ombria-local .hud-dispatch-group, #ombria-local .hud-leave-group { grid-column: 1 / -1; }
  #ombria-local .hud-dispatch-group, #ombria-local .hud-leave-group { width: 100%; gap: 6px; }
  #ombria-local .hud-hunt-quick-sell, #ombria-local .hud-leave-hunt { flex: 1 1 0; width: auto; }
  #ombria-local .hud-dispatch-more, #ombria-local .hud-leave-more { flex: 0 0 28px; width: 28px; }
}
@media (min-width: 1001px) and (max-width: 1250px) {
  #ombria-top .header-character-id { flex-direction: column; gap: 4px; }
}

/* ============================================================================================
   CANTO DIREITO — Combate · caixa (analisador na caçada / status na cidade) · faixa
   ============================================================================================ */
@media (min-width: 1001px) {
  #ombria-right { position: absolute; right: 12px; bottom: 12px; z-index: 8; width: 176px; display: flex; flex-direction: column; }
  #ombria-right[hidden] { display: none; }
  #ombria-right > .hud-preset-rail { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 6px; width: auto; padding: 6px 7px 7px; box-sizing: border-box;
    background: var(--oh-stone); border: 1px solid rgba(255, 255, 255, .06); border-top-color: var(--oh-gline); border-radius: 6px 6px 0 0; }
  #ombria-right > .hud-preset-rail::before { content: "Combate"; font: 600 9px/1 var(--oh-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--oh-text-2); }
  #ombria-right > .hud-preset-rail::after { content: "auto"; justify-self: end; padding-left: 9px; font: 600 8px/1 var(--oh-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--oh-green-2);
    background: radial-gradient(circle at 2.5px 50%, var(--oh-green) 2.5px, transparent 3px) no-repeat; grid-row: 1; grid-column: 2; }
  #ombria-right > .hud-preset-rail::before { grid-row: 1; grid-column: 1; }
  #ombria-right .hud-preset-label { display: block; font: 600 7.5px/1 var(--oh-ui); letter-spacing: .02em; text-transform: uppercase; color: var(--oh-text-2); white-space: nowrap; overflow: hidden; }
  #ombria-right .hud-preset-select, #ombria-right .hud-target-strategy { width: 100%; height: 22px; padding: 0 6px; border-radius: 3px; background: var(--oh-ink-1); border: 1px solid var(--oh-line);
    color: var(--oh-bright); font: 600 10px/1 var(--oh-num); transition: border-color .16s; }
  #ombria-right .hud-preset-select { padding: 0 2px 0 5px; } #ombria-right .hud-target-strategy { padding: 0 2px 0 5px; }
  #ombria-right .hud-preset-select:hover, #ombria-right .hud-target-strategy:hover, #ombria-right .hud-preset-select:focus, #ombria-right .hud-target-strategy:focus { border-color: var(--oh-gold); }
  #ombria-right .hud-rail-controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
  #ombria-right .hud-stances { gap: 3px; }
  #ombria-right .hud-stance { width: 23px; height: 22px; padding: 0; border-radius: 3px; border: 0; background: var(--frame-icon-button) center / 100% 100% no-repeat, var(--oh-ink-1);
    color: var(--oh-text-2); font-size: 12px; filter: grayscale(1) brightness(1.35); transition: transform .16s var(--oh-ease); }
  #ombria-right .hud-stance::after { content: none; }
  #ombria-right .hud-stance:hover { transform: translateY(-1px); }
  #ombria-right .hud-stance.active { filter: none; color: var(--oh-gold-3); box-shadow: inset 0 0 0 1px var(--oh-gold); }
  #ombria-right .hud-distance-row { gap: 2px; flex: none; }
  #ombria-right .hud-distance-icon { display: none; }
  #ombria-right .hud-distance-step { width: 16px; height: 18px; border-radius: 3px; border: 1px solid var(--oh-line); background: var(--oh-ink-1); font: 700 12px/1 var(--oh-ui); color: var(--oh-text-2); }
  #ombria-right .hud-distance-step::after { content: none; }
  #ombria-right .hud-distance-value { width: 30px; height: 18px; padding: 0; border: 0; background: none; text-align: center; font: 700 13px/1 var(--oh-num); color: var(--oh-bright); }
  #ombria-right .hud-distance-step[data-step="1"] { position: relative; }
  #ombria-right .hud-distance-step[data-step="1"]::before { content: "sqm"; position: absolute; right: calc(100% + 2px); top: 5px; font: 500 8px/1 var(--oh-ui); color: var(--oh-text-2); }
  #ombria-right .hud-distance-value { width: 36px; text-align: right; padding-right: 19px; box-sizing: border-box; }

  #oc-box { position: relative; height: 176px; box-sizing: border-box; display: block; background: var(--oh-ink-1); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px #0d0e14, 0 6px 18px rgba(0, 0, 0, .5); overflow: hidden; }
  #ombria-right.has-map #oc-box { background: transparent; box-shadow: 0 0 0 1px #0d0e14, inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 24px rgba(0, 0, 0, .55); }
  #oc-box .mm-n, #oc-box .mm-me, #oc-box .mm-zoom { display: none; }
  #ombria-right.has-map #oc-box .mm-n { display: block; position: absolute; left: 6px; top: 4px; font: 700 10px/1 var(--oh-num); color: var(--oh-text-2); text-shadow: 0 1px 2px #000; }
  #ombria-right.has-map #oc-box .mm-me { display: block; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--oh-gold-3);
    box-shadow: 0 0 0 2px rgba(224, 175, 104, .25), 0 0 8px var(--oh-gold); pointer-events: none; animation: oh-breathe 2.4s ease-in-out infinite; }
  #ombria-right.has-map #oc-box .mm-zoom { display: grid; position: absolute; right: 4px; top: 4px; gap: 2px; }
  #oc-box .mm-zoom button { width: 16px; height: 16px; padding: 0; border-radius: 3px; background: rgba(0, 0, 0, .6); border: 1px solid var(--oh-line); font: 700 11px/1 var(--oh-ui); color: var(--oh-text-2); }
  #oc-box .mm-zoom button:hover { color: var(--oh-gold-3); border-color: var(--oh-gold); }
  .oc-card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 9px; box-sizing: border-box;
    background: radial-gradient(circle at 50% 120%, rgba(224, 175, 104, .08), transparent 60%), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 15px 15px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 15px 15px; }
  .oc-card[hidden] { display: none; }
  .oc-title { font: 600 9px/1 var(--oh-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--oh-gold-3); }
  .oc-rows { display: flex; flex-direction: column; gap: 5px; }
  .oc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font: 10px/1.2 var(--oh-ui); color: var(--oh-text-2); border-bottom: 1px solid rgba(255, 255, 255, .06); padding-bottom: 4px; }
  .oc-row b { font: 700 12px/1 var(--oh-num); color: var(--oh-bright); white-space: nowrap; }
  .oc-row b.good { color: var(--oh-green-2); } .oc-row b.bad { color: var(--oh-red); }
  .hunt-analyzer-window { max-height: min(60vh, 520px) !important; background: var(--oh-glass) !important; border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, .6); animation: oh-pop .35s var(--oh-ease); }
  .hunt-analyzer-window > header { background: transparent !important; border-bottom: 1px solid rgba(201, 162, 39, .28); color: var(--oh-gold-3) !important; }
  .hunt-analyzer-window > header > span { font: 700 14px/1 var(--oh-num); letter-spacing: .02em; }
  .hunt-analyzer-window [data-mini], .hunt-analyzer-window button.active, .hunt-analyzer-window .analyzer-mini b { color: var(--oh-gold-3) !important; }
  #oc-strip { height: 26px; padding: 0 8px; display: flex; align-items: center; gap: 6px; box-sizing: border-box;
    background: var(--oh-stone); border: 1px solid rgba(255, 255, 255, .06); border-top: 0; border-radius: 0 0 6px 6px; font: 10px/1 var(--oh-ui); color: var(--oh-text-2); white-space: nowrap; overflow: hidden; }
  #oc-strip .oc-ico { color: var(--oh-text-3); font-size: 11px; font-style: normal; }
  #oc-strip b { font: 700 12px/1 var(--oh-num); color: var(--oh-bright); }
  #oc-strip .sep { color: var(--oh-text-3); margin: 0 2px; }
}

/* ============================================================================================
   DOCK — 5 slots | globo | 5 slots (linha 2 menor por cima), MP à esquerda, stamina à direita
   ============================================================================================ */
@media (min-width: 1001px) {
  .footer-hud { left: 50% !important; right: auto !important; top: auto !important; bottom: 0 !important; width: auto !important; transform: translateX(-50%); align-items: center; z-index: 6; }
  .hud-bar-panel { position: relative; display: block; width: var(--d-w); height: var(--d-h); padding: 0; margin: 0; background: none; border-radius: 0; }
  .hud-bar-panel::after { content: none !important; }   /* moldura de janela que o cliente põe no dock */
  .hud-bar-panel, .footer-hud { border: 0 !important; box-shadow: none !important; outline: 0 !important; }
  .hud-bar-panel::before { content: ""; position: absolute; left: -8px; top: 32px; width: calc(100% + 16px); height: calc(26px + var(--d-slot) + 10px); z-index: 0;
    border-radius: 8px 8px 4px 4px; background: linear-gradient(rgba(14, 15, 22, .82), rgba(14, 15, 22, .92));
    border: 1px solid rgba(255, 255, 255, .06); border-top-color: var(--oh-gline); box-shadow: 0 8px 20px rgba(0, 0, 0, .55); box-sizing: border-box; }

  /* slots: posições absolutas iguais ao protótipo */
  .hud-slots { position: absolute; inset: 0; z-index: 2; display: block; width: auto; max-width: none !important; max-height: none !important; overflow: visible !important; margin: 0; padding: 0; }
  .hud-slot { position: absolute; top: 58px; width: var(--d-slot); height: var(--d-slot); border-radius: 4px; border: 1px solid transparent; box-sizing: border-box;
    transition: transform .16s var(--oh-ease), box-shadow .16s; }
  .hud-slot:nth-child(1) { left: 0; }
  .hud-slot:nth-child(2) { left: calc(1 * (var(--d-slot) + var(--d-gap))); }
  .hud-slot:nth-child(3) { left: calc(2 * (var(--d-slot) + var(--d-gap))); }
  .hud-slot:nth-child(4) { left: calc(3 * (var(--d-slot) + var(--d-gap))); }
  .hud-slot:nth-child(5) { left: calc(4 * (var(--d-slot) + var(--d-gap))); }
  .hud-slot:nth-child(6) { left: calc(var(--d-side) + var(--d-core)); }
  .hud-slot:nth-child(7) { left: calc(var(--d-side) + var(--d-core) + 1 * (var(--d-slot) + var(--d-gap))); }
  .hud-slot:nth-child(8) { left: calc(var(--d-side) + var(--d-core) + 2 * (var(--d-slot) + var(--d-gap))); }
  .hud-slot:nth-child(9) { left: calc(var(--d-side) + var(--d-core) + 3 * (var(--d-slot) + var(--d-gap))); }
  .hud-slot:nth-child(10) { left: calc(var(--d-side) + var(--d-core) + 4 * (var(--d-slot) + var(--d-gap))); }
  .hud-slot:nth-child(n + 11) { top: 4px; width: var(--d-mini); height: var(--d-mini); border-radius: 3px; background: rgba(13, 14, 20, .78) !important; border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); font: 500 14px/1 var(--oh-ui); color: var(--oh-line-2); }
  .hud-slot:nth-child(11) { left: calc(var(--d-side) - (var(--d-mini) * 5 + var(--d-gap) * 4)); }
  .hud-slot:nth-child(12) { left: calc(var(--d-side) - (var(--d-mini) * 5 + var(--d-gap) * 4) + 1 * (var(--d-mini) + var(--d-gap))); }
  .hud-slot:nth-child(13) { left: calc(var(--d-side) - (var(--d-mini) * 5 + var(--d-gap) * 4) + 2 * (var(--d-mini) + var(--d-gap))); }
  .hud-slot:nth-child(14) { left: calc(var(--d-side) - (var(--d-mini) * 5 + var(--d-gap) * 4) + 3 * (var(--d-mini) + var(--d-gap))); }
  .hud-slot:nth-child(15) { left: calc(var(--d-side) - (var(--d-mini) * 5 + var(--d-gap) * 4) + 4 * (var(--d-mini) + var(--d-gap))); }
  .hud-slot:nth-child(16) { left: calc(var(--d-side) + var(--d-core)); }
  .hud-slot:nth-child(17) { left: calc(var(--d-side) + var(--d-core) + 1 * (var(--d-mini) + var(--d-gap))); }
  .hud-slot:nth-child(18) { left: calc(var(--d-side) + var(--d-core) + 2 * (var(--d-mini) + var(--d-gap))); }
  .hud-slot:nth-child(19) { left: calc(var(--d-side) + var(--d-core) + 3 * (var(--d-mini) + var(--d-gap))); }
  .hud-slot:nth-child(20) { left: calc(var(--d-side) + var(--d-core) + 4 * (var(--d-mini) + var(--d-gap))); }
  .hud-slot:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(224, 175, 104, .45), 0 6px 14px rgba(0, 0, 0, .5); z-index: 3; }
  .hud-slot:active { transform: translateY(0) scale(.96); }
  .hud-slot.assigned { border-color: transparent; }
  .hud-slot.assigned.missing-item { box-shadow: inset 0 0 0 1px rgba(247, 118, 142, .9); }
  .hud-slot:not(.assigned) { color: var(--oh-line-2); font: 500 18px/1 var(--oh-ui); }
  .hud-slot:not(.assigned):hover { color: var(--oh-gold-3); }
  .hud-slot .action-item-icon { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); image-rendering: pixelated; }
  .hud-slot:nth-child(n + 11) .action-item-icon { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
  .hud-slot .action-spell-icon { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 3px; }
  .hud-slot .slot-count { top: auto; left: auto; right: 5px; bottom: 4px; font: 700 11px/1 var(--oh-num); color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 1px #000; }
  .hud-slot .slot-count.slot-cost::before { content: "×"; }
  .hud-slot .slot-count.slot-mana { inset: auto 5px 4px auto; color: var(--oh-cyan); }
  .hud-slot:nth-child(n + 11) .slot-count { font-size: 8px; right: 2px; bottom: 1px; }
  .hud-slot .slot-missing { top: -5px; right: -5px; width: 14px; height: 14px; box-shadow: 0 0 0 1px #000; animation: oh-alert 1.4s ease-in-out infinite; }
  .hud-slot .slot-cooldown { border-radius: 3px; }

  /* caixa central: anel 132 · globo 110 · badge de nível · pílula de % */
  .hud-bar-vitals { position: absolute; z-index: 3; left: calc(var(--d-side) + (var(--d-core) - var(--d-ring)) / 2); top: 14px; width: var(--d-ring); height: var(--d-ring);
    display: block !important; padding: 0; border: 0; }
  .hud-bar-vitals-tracks, .hud-bars, .hud-exp-group { display: contents; }

  .hud-bar-panel .hud-exp { position: absolute; inset: 0; width: auto; height: auto; flex: none; border: 0; border-radius: 50%; background: none; overflow: visible; z-index: 1; transition: --hud-xp .8s var(--oh-ease); }
  .hud-bar-panel .hud-exp::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(8, 9, 14, .9);
    -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px), #000 calc(100% - 1.5px), transparent calc(100% - .5px));
    mask: radial-gradient(circle closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px), #000 calc(100% - 1.5px), transparent calc(100% - .5px)); }
  .hud-bar-panel .hud-exp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0; z-index: 1; pointer-events: none;
    background: conic-gradient(from 0deg, var(--oh-gold-3) 0%, var(--oh-gold) var(--hud-xp, 0%), transparent var(--hud-xp, 0%));
    -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 7.5px), #000 calc(100% - 6.5px), #000 calc(100% - 3px), transparent calc(100% - 2px));
    mask: radial-gradient(circle closest-side, transparent calc(100% - 7.5px), #000 calc(100% - 6.5px), #000 calc(100% - 3px), transparent calc(100% - 2px));
    filter: drop-shadow(0 0 3px rgba(224, 175, 104, .9)); transition: inherit; }
  .hud-bar-panel .hud-exp .fill { display: none; }
  .hud-bar-panel .hud-exp .hud-level { position: absolute; z-index: 4; left: calc((var(--d-ring) - 30px) / 2); top: -14px; bottom: auto; right: auto; width: 30px; height: 30px; padding: 0; border-radius: 50%;
    display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #3a3320, #15120b 70%);
    box-shadow: 0 0 0 1px #0d0e14, 0 0 0 2px var(--oh-gold-2), 0 0 10px rgba(201, 162, 39, .55); font: 700 12px/1 var(--oh-num); color: var(--oh-gold-3); }
  .hud-bar-panel .hud-exp .hud-level b { font: inherit; color: inherit; }
  .hud-bar-panel .hud-exp .hud-level { cursor: pointer; transition: transform .16s var(--oh-ease), box-shadow .2s; }   /* passo 6: clique abre a ficha */
  .hud-bar-panel .hud-exp .hud-level:hover { transform: scale(1.08); box-shadow: 0 0 0 1px #0d0e14, 0 0 0 2px var(--oh-gold-3), 0 0 14px rgba(224, 175, 104, .85); }
  .hud-bar-panel .hud-exp .hud-exp-percent { position: absolute; z-index: 4; left: 50%; top: calc(var(--d-ring) - 10px); bottom: auto; right: auto; transform: translateX(-50%); height: 16px; padding: 0 8px;
    display: grid; place-items: center; border-radius: 8px; background: #0d0e14; border: 1px solid var(--oh-gold-dark); white-space: nowrap;
    font: 700 10px/1 var(--oh-num); color: var(--oh-gold-3); letter-spacing: .04em; }

  .hud-bar-panel .hud-bar.hud-hp { position: absolute; left: calc((var(--d-ring) - var(--d-orb)) / 2); top: calc((var(--d-ring) - var(--d-orb)) / 2); width: var(--d-orb); height: var(--d-orb); flex: none; z-index: 2;
    border: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2a1017, #0a0509 70%);
    box-shadow: inset 0 0 0 3px #2a2f45, inset 0 0 26px rgba(0, 0, 0, .9), 0 0 0 2px #0d0e14, 0 0 0 3px var(--oh-gold-dark), 0 0 22px rgba(0, 0, 0, .8); transition: box-shadow .3s; }
  .hud-bar-panel .hud-bar.hud-hp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .14), transparent 45%), radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, .5) 100%); }
  .hud-bar-panel .hud-bar.hud-hp .fill { position: absolute; left: 0; right: 0; bottom: 0; width: 100% !important; height: var(--hud-hp, 100%);
    background: radial-gradient(circle at 50% 115%, #ff7f7f, #a8202e 45%, #4d0a14 80%); transition: height .45s var(--oh-ease); }
  .hud-bar-panel .hud-bar.hud-hp .fill::before { content: ""; position: absolute; left: -30%; right: -30%; top: -7px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .2); animation: oh-wave 3.2s ease-in-out infinite; }
  .hud-bar-panel .hud-bar.hud-hp > span:not(.hud-regen):not(.hud-shield) { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding-top: 2px;
    font-family: var(--oh-num); color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000; font-variant-numeric: tabular-nums; }
  .hud-bar-panel .hud-bar.hud-hp > span b { font: 700 24px/1 var(--oh-num); letter-spacing: .01em; }
  .hud-bar-panel .hud-bar.hud-hp > span small { font: 500 10px/1 var(--oh-num); color: rgba(255, 255, 255, .72); }
  .hud-bar-panel .hud-bar.hud-hp .hud-regen, .hud-bar-panel .hud-bar.hud-mp .hud-regen { display: none; }
  .hud-bar-panel .hud-bar.hud-hp.low { animation: oh-low 1.4s ease-in-out infinite; }
  .hud-bar-panel .hud-bar.hud-hp.crit { animation: oh-low .7s ease-in-out infinite; }
  .hud-bar-panel .hud-bar.hud-hp.hit .fill { animation: oh-hit .5s var(--oh-ease); }
  .hud-bar-panel .hud-bar.hud-hp.heal .fill { animation: oh-heal .5s var(--oh-ease); }

  /* MP: rótulo · barra segmentada · números (linha do lado esquerdo, topo 40 do dock) */
  .hud-bar-panel .hud-bar.hud-mp { position: absolute; z-index: 3; left: calc(-1 * (var(--d-side) + (var(--d-core) - var(--d-ring)) / 2) + 26px); top: 28px; width: calc(var(--d-side) - 26px - 88px); height: 10px;
    flex: none; border: 0; border-radius: 2px; overflow: visible; background: rgba(0, 0, 0, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
  .hud-bar-panel .hud-bar.hud-mp::before { content: "MP"; position: absolute; left: -26px; top: -1px; font: 700 9px/12px var(--oh-ui); letter-spacing: .12em; color: var(--oh-text-2); text-shadow: 0 1px 2px #000; }
  .hud-bar-panel .hud-bar.hud-mp::after { content: ""; position: absolute; inset: 0; border: 0; border-radius: 2px; pointer-events: none; z-index: 2;
    background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 2px), #0d0e14 calc(10% - 2px), #0d0e14 10%); }
  .hud-bar-panel .hud-bar.hud-mp .fill { position: absolute; inset: 0; width: var(--hud-mp, 100%) !important; height: 100%; border-radius: 2px;
    background: linear-gradient(#8fb4ff, var(--oh-mp) 55%, #2b4bb5); box-shadow: 0 0 8px rgba(77, 124, 246, .55); transition: width .35s var(--oh-ease); }
  .hud-bar-panel .hud-bar.hud-mp .hud-shield-fill { border-radius: 2px; z-index: 1; }
  .hud-bar-panel .hud-bar.hud-mp > span:not(.hud-regen):not(.hud-shield) { position: absolute; inset: auto auto auto calc(100% + 6px); top: -2px; width: 82px; height: auto; display: flex; align-items: baseline; gap: 3px; justify-content: flex-start;
    font-family: var(--oh-num); color: var(--oh-bright); text-shadow: 0 1px 2px #000; white-space: nowrap; }
  .hud-bar-panel .hud-bar.hud-mp > span b { font: 700 12px/1 var(--oh-num); }
  .hud-bar-panel .hud-bar.hud-mp > span small { font: 500 10px/1 var(--oh-num); color: var(--oh-text-2); }
  .hud-bar-panel .hud-bar.hud-mp .hud-shield { inset: auto auto 100% 0; width: auto; margin-bottom: 3px; font: 700 9px/1 var(--oh-num); color: var(--oh-cyan); }

  /* Stamina: relógio · rótulo · barra segmentada · hora (linha do lado direito) */
  .hud-bar-panel .hud-stamina { position: absolute; z-index: 3; left: calc(var(--d-ring) + (var(--d-core) - var(--d-ring)) / 2 + 77px); top: 28px; width: calc(var(--d-side) - 77px - 46px); height: 10px;
    border: 0; border-radius: 2px; overflow: visible; background: rgba(0, 0, 0, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
  .hud-bar-panel .hud-stamina::before { content: ""; position: absolute; left: -77px; top: -2px; width: 13px; height: 13px; border-radius: 50%;
    background: conic-gradient(var(--oh-stam) 0 var(--hud-stam, 100%), rgba(255, 255, 255, .1) 0); box-shadow: 0 0 0 1px #0d0e14, 0 0 0 2px rgba(53, 184, 166, .35); border: 0; }
  .hud-bar-panel .hud-stamina::after { content: "Stamina"; position: absolute; left: -58px; top: -1px; border: 0; font: 700 9px/12px var(--oh-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--oh-text-2); text-shadow: 0 1px 2px #000; }
  .hud-bar-panel .hud-stamina .fill { position: absolute; inset: 0; width: var(--hud-stam, 100%) !important; height: 100%; border-radius: 2px;
    background: linear-gradient(#7fe0d2, var(--oh-stam) 55%, #1f7a6e); box-shadow: 0 0 8px rgba(53, 184, 166, .5); transition: width .35s var(--oh-ease); }
  .hud-bar-panel .hud-stamina .hud-session-fill { border-radius: 2px; }
  .hud-bar-panel .hud-stamina .hud-stamina-clock { position: absolute !important; inset: auto auto auto calc(100% + 6px) !important; top: -2px !important; width: auto; height: auto; display: block; padding: 0;
    font: 700 12px/1 var(--oh-num); color: var(--oh-bright); text-shadow: 0 1px 2px #000; white-space: nowrap; }
  .hud-bar-panel .hud-stamina-buy { right: auto; bottom: auto; left: calc(var(--d-ring) + (var(--d-core) - var(--d-ring)) / 2 + var(--d-side) + 4px); top: 26px; width: 14px; height: 14px; font-size: 10px; }
  .hud-bar-panel .hud-capacity.hud-bar-capacity { display: none; }

  /* botão do inventário: à direita do dock */
  .hud-bar-vitals > .hud-bag-buttons { position: absolute; left: calc(var(--d-ring) + (var(--d-core) - var(--d-ring)) / 2 + var(--d-side) + 8px); top: 44px; z-index: 2;
    display: grid; grid-template-rows: none; grid-auto-flow: row; gap: 4px; }
  .hud-bar-panel .hud-bag-button { width: var(--d-slot); height: var(--d-slot); border-radius: 4px; border: 0; background: var(--frame-icon-button) center / 100% 100% no-repeat, rgba(22, 22, 30, .9);
    transition: transform .16s var(--oh-ease), box-shadow .16s; }
  .hud-bar-panel .hud-bag-button::after { content: none; }
  .hud-bar-panel .hud-bag-button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--oh-gold); }
  .hud-bar-panel .hud-bag-button.open { box-shadow: inset 0 0 0 1px rgba(224, 175, 104, .8); }
  .hud-bar-panel .hud-bag-button canvas { image-rendering: pixelated; }
}

/* ============================================================================================
   CHAT — inferior esquerdo (sem título; abas no topo)
   ============================================================================================ */
@media (min-width: 1001px) {
  .chat-panel { z-index: 7; background: rgba(13, 14, 20, .82); border: 1px solid rgba(255, 255, 255, .06); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
  .chat-panel:not([style*="left"]) { left: 12px; top: auto; bottom: 12px; right: auto; }
  .chat-panel:not([style*="width"]) { width: 284px; } .chat-panel:not([style*="height"]) { height: 158px; }
  .chat-panel::after { content: none; }
  /* cabeçalho vira uma alça fina (o cliente arrasta a janela por ele) */
  .chat-panel > header { position: static; height: 16px; min-height: 0; padding: 0 4px 0 0; margin: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent); border: 0; border-radius: 6px 6px 0 0;
    display: flex; align-items: center; justify-content: flex-end; cursor: grab; }
  .chat-panel > header:active { cursor: grabbing; }
  .chat-panel > header::before { content: ""; position: absolute; left: 50%; top: 6px; width: 28px; height: 3px; margin-left: -14px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
  .chat-panel > header > span { display: none; }
  .chat-panel > header .window-actions button { width: 18px; height: 16px; padding: 0; border: 0; background: none; font-size: 10px; line-height: 1; color: var(--oh-text-2); }
  .chat-panel > header .window-actions button::after { content: none; }
  .chat-tabs { height: 24px; padding: 0 6px; gap: 2px; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .chat-tab { height: 24px; padding: 0 7px; border: 0; border-bottom: 2px solid transparent; font: 600 10px/1 var(--oh-ui); letter-spacing: .04em; color: var(--oh-text-3); transition: color .16s; }
  .chat-tab.active { color: var(--oh-gold-3); border-bottom-color: var(--oh-gold); }
  .chat-messages { padding: 5px 8px; font-size: 11px; }
  .chat-compose { height: 28px; padding: 0 6px 0 8px; gap: 6px; align-items: center; border-top: 1px solid rgba(255, 255, 255, .07); background: transparent; }
  .chat-compose input { padding: 0; border: 0; background: transparent; font: 11px/1 var(--oh-ui); color: var(--oh-bright); }
  .chat-compose input::placeholder { font-style: italic; color: var(--oh-text-3); }
  .chat-compose button { height: 18px; padding: 0 8px; border-radius: 3px; background: rgba(224, 175, 104, .14); border: 1px solid var(--oh-gold-dark); font: 600 10px/1 var(--oh-ui); color: var(--oh-gold-3); }
  .chat-compose button::after { content: none; }

  /* janelas com posição padrão do protótipo: inventário à esquerda acima do chat; loot abaixo do menu */
  /* o cliente ancora o inventário com right/top inline até o jogador arrastar (aí vira left/top): enquanto for o padrão, usa o lugar do protótipo */
  .inventory-window[style*="right:"]:not([style*="left:"]) { right: auto !important; left: 12px !important; top: auto !important; bottom: 262px !important; max-height: calc(100vh - 262px - 116px) !important; }   /* acima do cartão Caçar */
  .loot-window[style*="top: 8px"] { top: 116px !important; }   /* abaixo do cartão do menu */
}

/* ============================================================================================
   JANELAS E MODAIS — tema genérico (vidro escuro, filete dourado, títulos em serifa dourada)
   ============================================================================================ */
#ui section.ui-scaled, #game > section.ui-scaled, #ui .options-menu, .daily-reward-window, .text-prompt-dialog, .move-amount-dialog, .context-menu, .ammo-picker, #game > .action-editor,
.account-card, .character-card, .vocation-window, .review-window, .spell-unlock-window, .solo-hunt-confirm-window {
  background: var(--oh-glass) !important; border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, .6); }
.options-overlay { background: rgba(6, 7, 12, .55) !important; backdrop-filter: blur(3px); }
#ui section.ui-scaled > header, #game > section.ui-scaled > header, #ui .options-menu > header, #game > .action-editor > header, .daily-reward-window > header, .solo-hunt-confirm-window > header {
  background: transparent !important; border-bottom: 1px solid rgba(201, 162, 39, .28); color: var(--oh-gold-3) !important; }
#ui section.ui-scaled > header > span:first-child, #game > section.ui-scaled > header > span:first-child, #ui .options-menu > header > span, #game > .action-editor > header > span,
#ui section.ui-scaled > header > strong, .solo-hunt-confirm-window > header strong {
  font-family: var(--oh-num); font-size: 14px; letter-spacing: .02em; color: var(--oh-gold-3) !important; }
#ui h1, #ui h2, #ui h3, #game > section.ui-scaled h3, #game > section.ui-scaled h2, .daily-reward-window h1, .daily-reward-window h2, [class*="daily-reward"] [class*="title"], [class*="gate"] strong:first-child { color: var(--oh-gold-3); font-family: var(--oh-num); }
#ui a, #game a { color: var(--oh-gold-3); }
/* abas: caixa alta pequena, ativa em dourado (a moldura acesa vem do --frame-lit) */
#ui button[class*="-tab"], #ui .char-main-tabs button, #ui .outfit-tabs button, #game .action-editor .tab, #ui .hs-board, #ui .guild-subtab,
#ui .cyc-view-toggle button, #ui .imbue-tier-tab, #ui .imbue-pay-tab, #ui .ticket-kind, #ui .ticket-platform {
  font-family: var(--oh-ui); letter-spacing: .08em; text-transform: uppercase; }
/* categorias laterais (loja, depot): caixa normal, quebra de linha permitida — a coluna tem largura fixa */
#ui .store-category, #ui .depot-category { font-family: var(--oh-ui); font-size: 13px; letter-spacing: 0; text-transform: none; }
#ui .store-category-label > span, #ui .depot-category > span { white-space: normal; line-height: 1.15; }
#ui .store-category-count { flex: none; }
#ui button[class*="-tab"].active, #ui .char-main-tabs button.active, #ui .outfit-tabs button.active, #game .action-editor .tab.active, #ui .store-category.active, #ui .depot-category.active,
#ui .hs-board.active, #ui .guild-subtab.active, #ui .cyc-view-toggle button.active, #ui .imbue-tier-tab.active, #ui .imbue-pay-tab.active { color: var(--oh-gold-3) !important; }
/* botões primários (moldura acesa) em dourado */
#ui #hunt-start, #ui #hunt-start-team, #ui #hunt-find-team, #ui #hunt-enter-arena, #ui .store-buy, #ui .imbue-apply, #ui #blessings-buy-all, #ui .prey-pick-confirm, #ui .prey-unlock, #ui .outfit-save, #ui .outfit-buy,
#ui .cyc-done, #ui .ticket-send, #ui .market-primary, #ui .shop-buy, #ui .coin-menu-buy, #ui .coin-confirm, #ui .guild-found, #ui #prey-done, #ui #store-done, #ui .friends-dismiss,
#ui .store-hero-action, #ui .daily-reward-card button, .daily-reward-window footer button, #game .action-editor .action-save, #ui .blessing-row button, #ui .market-footer button, #ui .hunt-window footer button, #ui .prey-footer button {
  color: var(--oh-gold-3); }
#ui button:disabled { color: var(--oh-text-3); }
/* seleção / foco: azul → dourado */
#ui .selected, #ui article.selected, #ui [aria-pressed="true"]:not(.hud-stance):not(.hud-bag-button), #ui .character-list article.selected { border-color: rgba(224, 175, 104, .7) !important; }
#ui article.selected strong, #ui .hunt-tier.selected, #ui [aria-pressed="true"]:not(.hud-stance):not(.hud-bag-button) strong { color: var(--oh-gold-3) !important; }
#ui input:focus, #ui select:focus, #ui textarea:focus, #game input:focus, #game select:focus, #game textarea:focus { border-color: var(--oh-gold) !important; outline: none; box-shadow: 0 0 0 1px rgba(224, 175, 104, .25); }
#ui input, #ui select, #ui textarea { border-radius: 4px; }
/* janelas que abrem: fade */
#ui section.ui-scaled:not([hidden]), #game > section.ui-scaled:not([hidden]), #game > .action-editor:not([hidden]), #ui .options-menu, .daily-reward-window { animation: oh-pop .3s var(--oh-ease); }

/* Loot do catálogo. Preserva os labels nativos: clicar no item coleta; a última coluna vende.
   O cliente antigo não tem .hunt-loot-take nem venda e usa a grade de três colunas da linha. */
#ui .hunt-window { zoom: 1; }
#ui .hunt-detail-loot > h4 { font: 700 12px/1.3 var(--oh-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--oh-gold-3); }
#ui .hunt-loot { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-width: 0; padding-right: 4px; }
#ui .hunt-loot-head { display: grid; grid-template-columns: 44px 44px; justify-content: end; gap: 8px; padding: 8px 9px 6px; background: var(--oh-ink-1); }
#ui .hunt-loot-head span { font: 700 10px/1.3 var(--oh-ui); letter-spacing: .03em; color: var(--oh-text-2); }
#ui .hunt-loot-entry {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px;
  grid-template-areas: "icon copy take" "icon rarity take"; align-items: center; gap: 4px 8px;
  min-width: 0; min-height: 72px; padding: 8px; box-sizing: border-box;
  border: 1px solid var(--oh-line); border-radius: 6px; background: var(--oh-ink-1); text-align: left;
}
#ui .hunt-loot-entry:has(> .hunt-loot-take) { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: none; column-gap: 8px; }
#ui .hunt-loot-take {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px;
  grid-template-areas: "icon copy take" "icon rarity take"; align-items: center; gap: 4px 8px;
  min-width: 0; min-height: 44px; margin: 0;
}
#ui .hunt-loot-entry .slot-icon { grid-area: icon; position: static; width: 32px; height: 32px; margin: 0; justify-self: center; image-rendering: pixelated; }
#ui .hunt-loot-copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 2px; }
#ui .hunt-loot-name { display: block; width: 100%; font-size: 13px; line-height: 1.35; color: var(--oh-bright); white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
#ui .hunt-loot-imbuement-slots { margin: 0; font-size: 11px; line-height: 1.3; white-space: normal; }
#ui .hunt-loot-rarity { grid-area: rarity; position: static; padding: 0; background: none; font: 600 10px/1.3 var(--oh-ui); letter-spacing: .03em; text-transform: uppercase; color: var(--rar, var(--oh-text-2)); white-space: normal; }
#ui .hunt-loot-take-cell { grid-area: take; }
#ui .hunt-loot-take-cell, #ui .hunt-loot-sell-cell { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; }
#ui .hunt-loot-auto, #ui .hunt-loot-sell, #ui .hunt-loot-always { position: static; margin: 0; flex: 0 0 auto; }
#ui .hunt-loot-auto, #ui .hunt-loot-sell { width: 18px; height: 18px; }
#ui .hunt-loot-always { width: auto; height: auto; font-size: 16px; text-align: center; }
#ui .hunt-loot-entry > :is(.hunt-loot-auto, .hunt-loot-always) { grid-area: take; justify-self: center; }
#ui .hunt-loot-entry:focus-within { outline: 2px solid var(--oh-gold); outline-offset: -2px; }
#ui .hunt-loot-sell-cell:not(.empty):hover { background: rgba(224, 175, 104, .12); }
#ui .hunt-loot-entry[data-rarity="always"] { --rar: var(--oh-gold); }
#ui .hunt-loot-entry:is([data-rarity="common"], [data-rarity="comum"]) { --rar: #9aa5ce; }
#ui .hunt-loot-entry:is([data-rarity="uncommon"], [data-rarity="incomum"]) { --rar: #9ece6a; }
#ui .hunt-loot-entry:is([data-rarity="semi-rare"], [data-rarity="semi-raro"]) { --rar: #7dcfff; }
#ui .hunt-loot-entry:is([data-rarity="rare"], [data-rarity="raro"]) { --rar: #bb9af7; }
#ui .hunt-loot-entry:is([data-rarity="very-rare"], [data-rarity="muito-raro"], [data-rarity="epic"]) { --rar: #ff9e64; }

/* ============================================================================================
   PASSO 7 (02/09) — janelas de Caçada, Ficha e Loja repaginadas (hierarquia e uso), não só maiores.
   Regra de fonte: nada abaixo de 12px, 13px apoio, 14–15px texto, títulos em serifa dourada. Só desktop
   (≥1001px); o cliente aplica --ui-zoom abaixo de ~1386×780 e tudo encolhe junto.
   ============================================================================================ */
@media (min-width: 1001px) {
  /* ---- abas: texto com sublinhado dourado (em vez de 5 caixas iguais disputando com o conteúdo) ---- */
  #ui .hunt-tabs, #ui .char-main-tabs, #ui .trade-tabs { display: flex; gap: 2px; padding: 0 12px; background: transparent; border-bottom: 1px solid var(--oh-line); }
  #ui .hunt-tab, #ui .char-main-tabs button, #ui .trade-tab { flex: 0 0 auto; display: grid; place-items: center; height: 42px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: none; box-shadow: none; font-size: 13px; letter-spacing: .1em; color: var(--oh-text-2); transition: color .16s, background .2s; }
  #ui .hunt-tab::after, #ui .char-main-tabs button::after, #ui .trade-tab::after { content: none; }
  #ui .hunt-tab:hover:not(.active), #ui .char-main-tabs button:hover:not(.active), #ui .trade-tab:hover:not(.active) { color: var(--oh-bright); background: rgba(255, 255, 255, .03); }
  #ui .hunt-tab.active, #ui .char-main-tabs button.active, #ui .trade-tab.active { color: var(--oh-gold-3) !important; border-bottom-color: var(--oh-gold) !important; background: linear-gradient(transparent, rgba(224, 175, 104, .1)); }

  /* ================= D · CAÇADA: lista | herói da hunt (sprite grande, nome, descrição, recorde, pull segmentado) | loot em azulejos ================= */
  #ui .hunt-window { width: min(1240px, 94vw) !important; height: min(760px, 88vh) !important; font-size: 14px; }
  #ui .hunt-window > header { min-height: 44px; padding: 0 14px; }
  #ui .hunt-window #hunt-title { font-size: 16px; }
  #ui .hunt-browser { width: 316px; flex: 0 0 316px; }
  #ui .hunt-search { margin: 12px 12px 8px; min-height: 40px; padding: 0 12px; font-size: 14px; }
  #ui .hunt-search input { font-size: 14px; }
  #ui .hunt-list-summary { padding: 0 14px 8px; font-size: 12px; }
  #ui .hunt-list { gap: 6px; padding: 0 12px 12px; }
  #ui .hunt-entry { min-height: 78px; gap: 12px; padding: 0 10px; border-radius: 5px; transition: background .16s, border-color .16s; }
  #ui .hunt-entry:hover:not(.selected) { background: rgba(255, 255, 255, .03); }
  #ui .hunt-entry.selected { background: linear-gradient(90deg, rgba(224, 175, 104, .12), rgba(224, 175, 104, .04)); box-shadow: inset 3px 0 0 var(--oh-gold); }
  #ui .hunt-entry .hunt-monster-slot { width: 58px; height: 58px; padding: 5px; }
  #ui .hunt-entry-copy { gap: 3px; }
  #ui .hunt-entry-copy strong { font-size: 15px; }
  #ui .hunt-entry-monster { font-size: 13px; }
  #ui .hunt-entry-meta { font-size: 12px; line-height: 1.25; white-space: normal; }
  #ui .hunt-detail { gap: 20px; padding: 18px 22px; }
  #ui .hunt-detail-info { flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mon head" "mon desc" "bests bests" "pullh pullh" "tiers tiers"; gap: 8px 20px; align-content: start; padding-right: 4px; }
  #ui .hunt-heading { grid-area: head; align-self: end; margin-top: 4px; }
  #ui .hunt-detail h3 { font: 700 28px/1.1 var(--oh-num); letter-spacing: .01em; }
  #ui .hunt-monsters { grid-area: mon; margin: 0; display: flex; flex-direction: column; gap: 8px; align-self: start; }
  #ui .hunt-monster { width: 96px; }
  #ui .hunt-monsters .hunt-monster-preview { width: 96px; height: 96px; border-radius: 6px 6px 0 0; padding: 0; background: radial-gradient(circle at 50% 70%, #2b3145, #14151d 74%); box-shadow: inset 0 0 0 1px rgba(224, 175, 104, .18); }
  #ui .hunt-monster-details { width: 96px; padding: 4px 2px; font-size: 10px; letter-spacing: .08em; }
  #ui .hunt-monster-name { margin-top: 5px; font-size: 13px; color: var(--oh-text-2); }
  #ui .hunt-monsters:has(.hunt-monster:nth-child(2)) { flex-direction: row; flex-wrap: wrap; max-width: 216px; }
  #ui .hunt-monsters:has(.hunt-monster:nth-child(2)) .hunt-monster { width: 64px; }
  #ui .hunt-monsters:has(.hunt-monster:nth-child(2)) .hunt-monster-preview, #ui .hunt-monsters:has(.hunt-monster:nth-child(2)) .hunt-monster-details { width: 64px; }
  #ui .hunt-monsters:has(.hunt-monster:nth-child(2)) .hunt-monster-preview { height: 64px; }
  #ui .hunt-monsters:has(.hunt-monster:nth-child(2)) .hunt-monster-name { font-size: 11px; }
  #ui .hunt-description { grid-area: desc; margin: 0; align-self: start; max-width: 60ch; font-size: 15px; line-height: 1.55; }
  #ui .hunt-bests { grid-area: bests; margin: 10px 0 0; padding: 10px 14px; border-radius: 6px; background: #1a1b26; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  #ui .hunt-bests-head { flex: none; }
  #ui .hunt-bests h4 { margin: 0; }
  #ui .hunt-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--oh-text-2); }
  #ui .hunt-detail h4 { margin: 10px 0 6px; font: 700 12px/1 var(--oh-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--oh-gold-3); }
  #ui .hunt-detail-info > h4 { grid-area: pullh; margin: 14px 0 0; }
  #ui .hunt-tiers { grid-area: tiers; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--oh-line); border-radius: 6px; overflow: hidden; background: #12131b; }
  #ui .hunt-tiers:has(.hunt-tier:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #ui .hunt-tier { min-height: 58px; padding: 8px 10px; border: 0 !important; border-right: 1px solid var(--oh-line) !important; border-radius: 0; background: transparent; box-shadow: none !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: background .16s; }
  #ui .hunt-tier:last-child { border-right: 0 !important; }
  #ui .hunt-tier::after { content: none; }
  #ui .hunt-tier:hover:not(.selected) { background: rgba(255, 255, 255, .04); }
  #ui .hunt-tier strong { font-size: 14px; letter-spacing: .02em; }
  #ui .hunt-tier::before { order: 2; font: 11px/1.2 var(--oh-ui); color: var(--oh-text-3); }
  #ui .hunt-tier:nth-child(1)::before { content: "poucos por vez"; }
  #ui .hunt-tier:nth-child(2)::before { content: "grupos médios"; }
  #ui .hunt-tier:nth-child(3)::before { content: "grupos grandes"; }
  #ui .hunt-tier:nth-child(4)::before { content: "tudo de uma vez"; }
  #ui .hunt-tier.selected { background: linear-gradient(rgba(224, 175, 104, .18), rgba(224, 175, 104, .06)); box-shadow: inset 0 -3px 0 var(--oh-gold) !important; }
  #ui .hunt-tier.selected::before { color: var(--oh-text-2); }
  /* Uma linha por drop: o cliente 14/09 separa coleta e venda em dois controles. */
  #ui .hunt-detail-loot { flex: 0 0 352px; padding-left: 20px; }
  #ui .hunt-detail-loot > h4 { margin: 4px 0 10px; }
  /* rodapé: barra de ação com o primário em placa dourada */
  #ui .hunt-window footer { padding: 10px 16px; gap: 10px; align-items: center; }
  #ui .hunt-window footer button { height: 42px; padding: 0 20px; font-size: 14px; }
  #ui .hunt-window footer .finder-summary { font-size: 13px; }
  #ui .hunt-window footer #hunt-start:not(:disabled), #ui .hunt-window footer #hunt-start-team:not(:disabled), #ui .hunt-window footer #hunt-enter-arena:not(:disabled), #ui .hunt-window footer #hunt-finder-primary:not(:disabled) {
    min-width: 210px; font-size: 15px; font-weight: 800; letter-spacing: .06em; color: #1a1408 !important; background: linear-gradient(#f3d383, #cfa93a 55%, #a67a22); border-color: #5a4a2d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 14px rgba(224, 175, 104, .35); text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
  #ui .hunt-window footer #hunt-start:hover:not(:disabled), #ui .hunt-window footer #hunt-start-team:hover:not(:disabled), #ui .hunt-window footer #hunt-enter-arena:hover:not(:disabled), #ui .hunt-window footer #hunt-finder-primary:hover:not(:disabled) { filter: brightness(1.08); }

  /* ================= E · FICHA: retrato + premium + stats na coluna esquerda; nome/vitais, skills | progressão, combate na direita ================= */
  #ui .char-window, #ui .char-window.outfit-window { width: min(1240px, 94vw) !important; height: min(1000px, 93vh) !important; font-size: 14px; }
  #ui .char-window > header { min-height: 44px; padding: 0 14px; }
  #ui .char-window #char-name { font-size: 16px; }
  #ui .char-sheet-body { padding: 12px 16px 14px; }
  #ui .char-sheet { display: grid; grid-template-columns: 236px minmax(0, 1.1fr) minmax(0, 1fr) 240px; grid-template-areas: "frame id id premium" "stats skills prog premium" "stats combat combat combat"; gap: 10px 14px; align-items: start; }
  #ui .sheet-hero { display: contents; }
  #ui .sheet-hero-frame { grid-area: frame; height: 220px; border-radius: 8px; border-color: rgba(224, 175, 104, .35); background: radial-gradient(circle at 50% 68%, #2f3550, #14151d 74%); box-shadow: inset 0 0 40px rgba(0, 0, 0, .5); }
  #ui .sheet-hero-frame canvas { width: 168px; height: 168px; }
  /* identidade: nome grande (o cliente esconde o h2 porque o título da janela já tem o nome; aqui ele é a hierarquia), nível, e os 3 vitais empilhados na altura do retrato */
  #ui .sheet-hero-identity { grid-area: id; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr 1fr 1fr; gap: 6px; align-content: stretch; min-height: 220px; }
  #ui .sheet-hero-identity h2, #ui #oh-sheet-name { display: block !important; margin: 0; font: 700 30px/1.05 var(--oh-num); letter-spacing: .02em; text-transform: none; color: var(--oh-gold-3); }
  #ui .sheet-hero-identity h2:empty { display: none !important; }   /* o cliente deixa o h2 vazio; hud.js põe o nome em #oh-sheet-name */
  #ui .sheet-hero-sub { margin: -4px 0 2px; font-size: 14px; color: var(--oh-text-2); }
  #ui .sheet-vital { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ic lb vl" "m m m"; align-items: center; gap: 6px 10px; padding: 8px 14px; border: 1px solid var(--oh-line); border-radius: 6px; background: #1a1b26; }
  #ui .sheet-vital .sheet-icon { grid-area: ic; font-size: 14px; text-align: center; }
  #ui .sheet-vital-label { grid-area: lb; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--oh-text-2); }
  #ui .sheet-vital .sheet-meter { grid-area: m; height: 10px; }
  #ui .sheet-vital-value { grid-area: vl; font: 700 17px/1 var(--oh-num); color: var(--oh-bright); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #ui .sheet-hero-stats { grid-area: stats; padding: 6px 12px; border-radius: 6px; }
  #ui .sheet-hero-stat { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "ic term" "ic val"; align-items: center; column-gap: 10px; row-gap: 1px; min-height: 38px; padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
  #ui .sheet-hero-stat:last-child { border-bottom: 0; }
  #ui .sheet-hero-stat .sheet-icon { grid-area: ic; font-size: 12px; text-align: center; }
  #ui .sheet-hero-stat-term { grid-area: term; font-size: 12px; color: var(--oh-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ui .sheet-hero-stat-value { grid-area: val; font: 700 15px/1.1 var(--oh-num); color: var(--oh-bright); white-space: nowrap; }
  #ui .sheet-columns { display: contents; }
  #ui .sheet-columns > .sheet-panel:first-child { grid-area: skills; }
  #ui .sheet-columns > .sheet-panel:last-child { grid-area: prog; }
  #ui .sheet-panel.cyc-combat { grid-area: combat; }
  #ui .sheet-panel { padding: 10px 16px 12px; border-radius: 6px; }
  #ui .sheet-panel h3 { margin-bottom: 10px; padding-bottom: 8px; font-size: 13px; letter-spacing: .14em; }
  #ui .sheet-panel h4 { margin: 8px 0 4px; font-size: 12px; }
  #ui .sheet-panel h4:first-of-type { margin-top: 0; }
  #ui .sheet-skills th, #ui .sheet-skills td { padding: 0 8px 0 0; height: 32px; font-size: 14px; }
  #ui .sheet-skills thead th { height: 26px; font-size: 12px; }
  #ui .sheet-skills tbody th { white-space: nowrap; }
  #ui .sheet-skills td.sheet-skill-level { width: 56px; font: 700 16px/1 var(--oh-num); }
  #ui .sheet-notches { grid-template-columns: repeat(10, 11px); gap: 2px; min-width: 0; }
  #ui .sheet-notches span { height: 12px; }
  #ui .sheet-skills td.sheet-skill-percent { width: 46px; font-size: 13px; }
  #ui .sheet-progress-block p { margin: 0 0 4px; font-size: 14px; }
  #ui .sheet-progress-row span { font: 700 13px/1 var(--oh-num); }
  #ui .sheet-bonus-row { min-height: 24px; gap: 10px; font-size: 14px; }
  #ui .sheet-bonus-row strong { font: 700 14px/1 var(--oh-num); }
  #ui .sheet-bonus-row.total { margin-top: 4px; padding-top: 6px; }
  #ui .sheet-bonus-row.total strong { font-size: 18px; }
  #ui .sheet-combat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  #ui .sheet-combat-tile { gap: 10px; padding: 8px 12px; }
  #ui .sheet-combat-term { font-size: 12px; }
  #ui .sheet-combat-value { font: 700 19px/1.2 var(--oh-num); }
  #ui .sheet-combat-note { font-size: 11px; }
  #ui .sheet-protection { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  #ui .sheet-protection-cell { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "ic lb" "ic vl"; align-items: center; column-gap: 8px; row-gap: 2px; min-height: 48px; padding: 6px 10px; font-size: 12.5px; }
  #ui .sheet-protection-cell .sheet-icon { grid-area: ic; }
  #ui .sheet-protection-label { grid-area: lb; }
  #ui .sheet-protection-value { grid-area: vl; margin: 0; font: 700 15px/1 var(--oh-num); }
  #ui .char-window.outfit-window { --outfit-doll: 224px; --outfit-card-art: 64px; }
  /* painel de premium (hud.js, dados de /api/me/premium) */
  #oh-sheet-premium { grid-area: premium; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--oh-gline); border-radius: 6px;
    background: radial-gradient(circle at 20% 0%, rgba(224, 175, 104, .18), transparent 60%), #1a1b26; font-family: var(--oh-ui); }
  #oh-sheet-premium[hidden] { display: none; }
  #oh-sheet-premium.off { border-color: var(--oh-line); background: #1a1b26; }
  #oh-sheet-premium .oh-sp-head { display: flex; align-items: center; gap: 8px; }
  #oh-sheet-premium .oh-sp-head i { width: 22px; height: 22px; background: url(/assets/ui/premium-shield.png) center / contain no-repeat; }
  #oh-sheet-premium.off .oh-sp-head i { filter: grayscale(1) opacity(.55); }
  #oh-sheet-premium .oh-sp-head b { font: 700 16px/1 var(--oh-num); color: var(--oh-gold-3); }
  #oh-sheet-premium .oh-sp-state { margin-left: auto; padding: 3px 7px; border-radius: 3px; font: 700 9px/1 var(--oh-ui); letter-spacing: .1em; text-transform: uppercase; }
  #oh-sheet-premium.on .oh-sp-state { background: rgba(125, 207, 138, .14); border: 1px solid rgba(125, 207, 138, .4); color: var(--oh-green-2); }
  #oh-sheet-premium.off .oh-sp-state { background: rgba(255, 255, 255, .05); border: 1px solid var(--oh-line); color: var(--oh-text-3); }
  #oh-sheet-premium .oh-sp-until { font-size: 13px; line-height: 1.4; color: var(--oh-text); }
  #oh-sheet-premium .oh-sp-until b { font-family: var(--oh-num); color: var(--oh-bright); }
  #oh-sheet-premium .oh-sp-perks { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; line-height: 1.3; color: var(--oh-text-2); }
  #oh-sheet-premium .oh-sp-perks li::before { content: "◆"; margin-right: 6px; font-size: 8px; color: var(--oh-gold); vertical-align: 1px; }
  #oh-sheet-premium .oh-sp-buy { margin-top: 2px; height: 34px; border: 1px solid #5a4a2d; border-radius: 4px; cursor: pointer; background: linear-gradient(#f3d383, #cfa93a 55%, #a67a22); color: #1a1408;
    font: 800 12px/1 var(--oh-ui); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); transition: filter .2s, box-shadow .2s; }
  #oh-sheet-premium .oh-sp-buy:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 12px rgba(224, 175, 104, .45); }

  /* ================= F · LOJA: destaque em faixa, categorias com barra dourada, busca no cabeçalho da lista, cards com preço em pílula, detalhe com pedestal ================= */
  #ui .trade-window { width: min(1300px, 96vw) !important; height: min(820px, 92vh) !important; font-size: 14px; }
  #ui .trade-window > header { min-height: 44px; padding: 0 14px; }
  #ui .trade-window #trade-title { font-size: 16px; }
  #ui .trade-header-note, #ui .store-header-note { font-size: 13px; }
  #ui .trade-balance { padding: 3px 10px; font: 700 15px/1 var(--oh-num); font-variant-numeric: tabular-nums; }
  #ui .trade-balance .store-coin, #ui .trade-balance .market-gold { width: 14px; height: 14px; }
  #ui .store-window.embedded { display: flex; flex-direction: column; }
  #ui .store-hero { min-height: 84px; padding: 10px 20px; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; border-bottom: 1px solid rgba(201, 162, 39, .35);
    background: radial-gradient(380px 90px at 0% 50%, rgba(224, 175, 104, .22), transparent 70%), linear-gradient(90deg, #1f1a11, #14151f 60%); }
  #ui .store-hero-art { width: 64px; height: 64px; border-radius: 8px; border-color: rgba(224, 175, 104, .35); background: rgba(22, 22, 30, .85); box-shadow: inset 0 0 18px rgba(224, 175, 104, .14); }
  #ui .store-hero-art .store-icon { width: 52px; height: 52px; }
  #ui .store-hero-copy small { font-size: 11px; letter-spacing: .14em; }
  #ui .store-hero-copy strong { font: 700 18px/1.15 var(--oh-num); color: var(--oh-bright); }
  #ui .store-hero-copy > span { font-size: 13px; }
  #ui .store-hero-action { height: 36px; padding: 0 16px; font-size: 13px; border-color: var(--oh-gline); background: rgba(224, 175, 104, .1); }
  #ui .store-body { grid-template-columns: 250px minmax(0, 1fr) 340px; }
  #ui .store-window.history-open .store-body { grid-template-columns: 250px minmax(0, 1fr); }
  #ui .store-categories { gap: 3px; padding: 10px 8px; }
  #ui .store-category { min-height: 42px; padding: 0 8px; border-radius: 4px; font-size: 14px; transition: background .16s; }
  #ui .store-category:hover:not(.active) { background: rgba(255, 255, 255, .03); border-color: transparent !important; }
  #ui .store-category.active { background: linear-gradient(90deg, rgba(224, 175, 104, .16), rgba(224, 175, 104, .04)); border-color: transparent !important; box-shadow: inset 3px 0 0 var(--oh-gold); }
  #ui .store-category-label { gap: 10px; }
  #ui .store-category-label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ui .store-category-mark { width: 30px; height: 30px; border-color: transparent; background: transparent; }
  #ui .store-category.active .store-category-mark { border-color: transparent !important; }
  #ui .store-category-count { min-width: 22px; height: 20px; padding: 0 6px; font-size: 12px; line-height: 20px; }
  #ui .store-category-topup { min-height: 38px; margin-bottom: 2px; justify-content: center; background: linear-gradient(#f3d383, #cfa93a 55%, #a67a22) !important; border-color: #5a4a2d !important; color: #1a1408 !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
  #ui .store-category-topup:hover { filter: brightness(1.08); }
  #ui .store-category-topup .store-category-mark { width: 20px; height: 20px; margin: 0 2px 0 0; background: #1a1408; color: var(--oh-gold-3); font-size: 13px; }
  #ui .store-category-topup .store-category-label { gap: 6px; }
  #ui .store-category-history { min-height: 36px; margin-bottom: 6px; background: transparent !important; border-color: transparent !important; color: var(--oh-text-2) !important; font-weight: 500; }
  #ui .store-category-history .store-category-mark { width: 22px; height: 22px; margin: 0 4px; border-color: var(--oh-line) !important; background: #16161e; }
  /* cabeçalho da lista: nome e descrição da categoria à esquerda, busca (movida pelo hud.js) à direita */
  #ui .store-list-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "name search" "blurb search"; align-items: center; gap: 4px 18px; padding: 12px 16px; }
  #ui .store-list-head > strong { grid-area: name; font: 700 20px/1.1 var(--oh-num); color: var(--oh-gold-3); }
  #ui .store-list-head > span { grid-area: blurb; max-width: 80ch; font-size: 13px; line-height: 1.45; }
  #ui .store-list-head > .store-search { grid-area: search; padding: 0; border: 0; background: none; }
  #ui .store-list-head > .store-search input { height: 36px; padding: 0 12px 0 32px; border-radius: 18px; font-size: 14px; background: #1a1b26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa5ce' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 11px 50% no-repeat; }
  #ui .store-window.embedded > .store-search { display: none; }   /* se ainda não foi movida (ou <1001px, devolvida), a busca antiga do rodapé some no desktop */
  #ui #store-offers { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 12px; padding: 14px 16px; }
  #ui .store-offer { position: relative; min-height: 214px; gap: 8px; padding: 18px 12px 12px; border-radius: 8px; background: linear-gradient(#232838, #1b1e2c); transition: transform .16s var(--oh-ease), box-shadow .2s, border-color .2s; }
  #ui .store-offer::after { content: none; }
  #ui .store-offer:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
  #ui .store-offer.selected { background: linear-gradient(#2a2c40, #1e2130); box-shadow: 0 0 0 1px rgba(224, 175, 104, .55) !important, 0 0 18px rgba(224, 175, 104, .18); }
  #ui .store-offer .store-icon { width: 64px; height: 64px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
  #ui .store-offer-info { gap: 4px; }
  #ui .store-offer-info strong { font-size: 15px; }
  #ui .store-offer-desc { font-size: 13px; line-height: 1.35; }
  #ui .store-badge { position: absolute; left: 8px; top: 8px; margin: 0; padding: 2px 7px; border-radius: 3px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
  #ui .store-price { padding: 4px 12px; border-radius: 14px; background: rgba(224, 175, 104, .12); border: 1px solid rgba(224, 175, 104, .3); font: 600 14px/1 var(--oh-num); color: var(--oh-gold-3); gap: 6px; }
  #ui .store-price .store-coin { width: 13px; height: 13px; margin: 0; }
  #ui .store-history-table { font-size: 13.5px; }
  #ui .store-detail { gap: 12px; padding: 18px; background: linear-gradient(180deg, #16171f, #12131b); }
  #ui .store-detail-eyebrow { font-size: 11px; }
  #ui .store-detail-name { font: 700 20px/1.15 var(--oh-num); color: var(--oh-bright); }
  #ui .store-preview { min-width: 140px; height: 140px; border-radius: 10px; border-color: rgba(224, 175, 104, .25); background: radial-gradient(circle at 50% 62%, #2f3550, #14151d 74%); box-shadow: 0 0 26px rgba(224, 175, 104, .12), inset 0 0 30px rgba(0, 0, 0, .4); }
  #ui .store-preview .store-icon { width: 84px; height: 84px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
  #ui .store-preview.set .store-icon { width: 44px; height: 44px; }
  #ui .store-count { right: 8px; bottom: 6px; font-size: 12px; }
  #ui .store-description { font-size: 14px; line-height: 1.55; }
  #ui .store-detail-actions { gap: 10px; padding-top: 12px; }
  #ui .store-detail-price { padding: 0; border: 0; background: none; font-size: 22px; }
  #ui .store-notice { font-size: 13px; }
  #ui .store-checkout-head { font-size: 11px; }
  #ui .store-checkout-math { font-size: 13px; }
  #ui .store-buy { min-height: 48px; font: 800 14px/1 var(--oh-ui); letter-spacing: .1em; text-transform: uppercase; color: #1a1408 !important; background: linear-gradient(#f3d383, #cfa93a 55%, #a67a22); border-color: #5a4a2d !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 14px rgba(224, 175, 104, .3); text-shadow: 0 1px 0 rgba(255, 255, 255, .25); transition: filter .2s; }
  #ui .store-buy:hover:not(:disabled) { filter: brightness(1.08); }
  #ui .store-buy:disabled { background: #24283b; color: var(--oh-text-3) !important; box-shadow: none; text-shadow: none; }
  #ui .store-checkout-cancel { min-height: 44px; }
  #ui .store-footer { padding: 8px 16px; }
  #ui .store-balance { font-size: 15px; }
  #ui .store-footer button { height: 34px; padding: 0 14px; font-size: 13px; }
}

/* ============================================================================================
   Faixa 1001–1250px: tudo um pouco menor para chat, dock e canto não se tocarem
   ============================================================================================ */
/* a identidade (agora um botão) precisa caber entre o menu (~310px) e o cartão "Ações do local"/"Caçada" (~441px):
   vai perdendo o que é decoração conforme a tela estreita — vocação escrita e prazo do premium (≤1540), texto do
   chip de premium (≤1366), chip inteiro e linha de online (≤1250) */
@media (min-width: 1001px) and (max-width: 1540px) {
  #ombria-ident .header-character-vocation > span { display: none; }
  #ombria-ident .header-online .release-phase { display: none; }
}
@media (min-width: 1001px) and (max-width: 1250px) {
  #ombria-ident .header-online { display: none; }
  #ombria-ident { left: calc(50% - 16px); }   /* o cartão da direita é mais largo que o menu: centro do vão livre fica um pouco à esquerda */
}
@media (min-width: 1001px) and (max-width: 1250px) {
  :root { --d-slot: 42px; --d-mini: 24px; --d-core: 120px; --d-ring: 112px; --d-orb: 92px; --d-h: 138px; }
  .chat-panel:not([style*="width"]) { width: 236px; }
  #ombria-right { width: 150px; }
  #ombria-local .hud-city-action { padding: 0 8px; font-size: 10px; }
  .hud-bar-panel .hud-bar.hud-hp > span b { font-size: 20px; }
  .hud-bar-panel .hud-bar.hud-mp { width: calc(var(--d-side) - 26px - 82px); }
  .hud-bar-panel .hud-stamina { left: calc(var(--d-ring) + (var(--d-core) - var(--d-ring)) / 2 + 70px); width: calc(var(--d-side) - 70px - 44px); }
  .hud-bar-panel .hud-stamina::before { left: -70px; } .hud-bar-panel .hud-stamina::after { left: -52px; font-size: 8px; }
  .hud-slot:not(.assigned) { font-size: 16px; }
  .hud-slot .action-item-icon { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
}

/* Em telas menores, descrição e loot compartilham uma coluna com rolagem vertical. */
@media (max-width: 1279px) {
  #ui .hunt-detail { flex-direction: column; overflow-y: auto; }
  #ui .hunt-detail-info { flex: 0 0 auto; overflow: visible; }
  #ui .hunt-detail-loot { flex: 0 0 auto; width: auto; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--oh-line); }
  #ui .hunt-loot { flex: 0 0 auto; overflow: visible; }
}
@media (min-width: 1001px) and (max-width: 1279px) {
  #ui .hunt-browser { width: 260px; flex-basis: 260px; }
}

/* ============================================================================================
   Animações
   ============================================================================================ */
@keyframes oh-wave { 0%, 100% { transform: translateX(-6%) scaleY(1); } 50% { transform: translateX(6%) scaleY(.7); } }
@keyframes oh-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes oh-alert { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes oh-low { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35) saturate(1.3); } }
@keyframes oh-hit { 0% { filter: brightness(2.2) saturate(.4); } 100% { filter: brightness(1); } }
@keyframes oh-heal { 0% { filter: brightness(1.6) hue-rotate(-30deg); } 100% { filter: brightness(1); } }
@keyframes oh-pop { from { opacity: 0; filter: brightness(1.4); } to { opacity: 1; filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) {
  .hud-bar-panel .hud-bar.hud-hp .fill::before, .header-online .players-online i, .hud-slot .slot-missing, #ombria-local .hud-temple.has-blessings .hud-chase,
  #ombria-local[data-mode="hunt"] .ol-hunt::before, .hud-bar-panel .hud-bar.hud-hp.low, .hud-bar-panel .hud-bar.hud-hp.crit { animation: none !important; }
  #ui section.ui-scaled:not([hidden]), #game > section.ui-scaled:not([hidden]), #oc-box > .hunt-analyzer-window { animation: none !important; }
  .hud-bar-panel .hud-bar.hud-hp .fill, .hud-bar-panel .hud-exp, .hud-bar-panel .hud-bar.hud-mp .fill, .hud-bar-panel .hud-stamina .fill, .hud-slot, .hud-bag-button, #top-nav .nav-labeled { transition: none !important; }
}

/* ============================================================================================
   MOBILE (< 1001px) — port do tema (02/09): base comum (vidro, dourado, safe-areas, toque) +
   RETRATO com o Globo central desenhado com a MESMA receita do desktop (nós do cliente, só CSS,
   geometria --m-*). A fila .hud-city-actions só é POSICIONADA/estilizada — reestruturar o
   interior dela dispara o loop de ResizeObserver do cliente (medido, NOTES-hud.md).
   ============================================================================================ */
@media (max-width: 1000px) {
  :root { --m-ring: 100px; --m-orb: 82px; --m-slot: 44px; --m-gap: 5px; }
  /* 641–1000 (tablet): o cliente escala header/footer/janelas com `zoom` (0,73–0,81) e deixa um
     `transform` identidade no footer, que vira containing block dos nossos position:fixed (os orbes
     empilhavam no centro). O layout de orbes é em px: zoom 1 e transform none em tudo isso. */
  app-game-shell > header, .footer-hud, .vitals-panel, #ui section.ui-scaled, #game > section.ui-scaled, #game > .action-editor, .daily-reward-window,
  .text-prompt-dialog, .move-amount-dialog, .solo-hunt-confirm-window { zoom: 1 !important; }
  .footer-hud, .hud-bar-panel, .hud-bar-vitals, .hud-bar-vitals-tracks { transform: none !important; filter: none !important; will-change: auto !important; }
  /* tablet: o cliente mostra o #top-nav inline no header (≥~700px) e ele transborda a tela — vira fileira rolável.
     Sem tocar em display: no telefone ele é a gaveta (display:none até .open) e continua assim. */
  app-game-shell > header #top-nav.top-nav:not(.open) { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-end; gap: 4px; }
  app-game-shell > header #top-nav.top-nav:not(.open)::-webkit-scrollbar { display: none; }
  app-game-shell > header .header-purse { flex: 0 0 auto; }
  /* chat legível no toque: o cliente dimensiona em rem e a raiz cai para 12px no celular (tudo em 8,6px) */
  .chat-panel .chat-tab { font-size: 13px !important; line-height: 1.2 !important; padding: 9px 10px !important; }
  .chat-panel .chat-messages, .chat-panel .chat-messages .chat-line, .chat-panel .chat-messages [class*="chat-"] { font-size: 14px !important; line-height: 1.4 !important; }
  .chat-panel .chat-messages { padding: 8px 12px !important; }
  .chat-panel .chat-compose { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important; gap: 8px !important; }
  .chat-panel .chat-compose input, .chat-panel .chat-compose textarea { font-size: 16px !important; min-height: 44px !important; padding: 0 12px !important; }
  .chat-panel .chat-compose button { font-size: 14px !important; min-height: 44px !important; padding: 0 16px !important; }
  #game > section.chat-panel:not(.folded), #ui > section.chat-panel:not(.folded) { background: #0f1017 !important; max-width: none !important; min-width: 0 !important; }
  /* ⛶ do cliente = classe .expanded no painel: vira sheet de tela cheia (o − devolve à altura normal) */
  #game > section.chat-panel.expanded:not(.folded), #ui > section.chat-panel.expanded:not(.folded) { position: fixed !important; top: env(safe-area-inset-top) !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; height: auto !important; max-height: none !important; transform: none !important; border-radius: 0 !important; z-index: 60 !important; }
  /* topo: vidro + filete dourado + safe-area do notch */
  app-game-shell > header { background: linear-gradient(180deg, rgba(14, 15, 22, .96), rgba(14, 15, 22, .88)); border-bottom: 1px solid rgba(201, 162, 39, .35); box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    padding-top: env(safe-area-inset-top); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  #oh-premium, #oh-ident-go, #ombria-cta, #oh-sheet-premium { display: none !important; }   /* peças do desktop que ficam no DOM se a janela for redimensionada */
  .header-coins-count, .header-gold-count, .players-online-count { font-family: var(--oh-num); color: var(--oh-gold-3); }
  #nav-store .nav-label { color: var(--oh-gold-3); }
  .nav-labeled { border-radius: 5px; }
  /* toasts do sistema descem para baixo do topo (mesma razão do desktop: não cobrir a identidade) */
  .system-toasts { top: calc(env(safe-area-inset-top) + 52px) !important; }
  /* toque: sem double-tap-zoom nos controles do HUD */
  .hud-city-action, .hud-slot, .hud-bag-button, .hud-stance, .hud-distance-step, .nav-labeled, .chat-tab, .hud-preset-select, .hud-target-strategy { touch-action: manipulation; }
  /* fila de ações do local: pílulas em rolagem natural (estilo/altura apenas — nunca reestruturar por dentro) */
  .hud-city-actions { flex-wrap: nowrap; gap: 6px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom) * 0); overflow-x: auto; scrollbar-width: none; }
  .hud-city-action { flex: 0 0 auto; min-width: 0; min-height: 38px; padding: 0 16px; font: 700 10px/1 var(--oh-ui); letter-spacing: .05em; text-transform: uppercase;
    white-space: nowrap; border-radius: 19px; background: rgba(22, 22, 30, .92); border: 1px solid rgba(224, 175, 104, .35); color: var(--oh-gold-3); }
  .hud-city-action:active { transform: scale(.96); }
  .hud-city-action.hud-temple.has-blessings .hud-chase { display: block !important; position: absolute; inset: -4px -4px auto auto !important; width: 12px; height: 12px; border-radius: 50%; background: var(--oh-red); box-shadow: 0 0 0 1px #000; z-index: 5; }
  .hud-city-action.hud-temple.has-blessings .hud-chase::before, .hud-city-action.hud-temple.has-blessings .hud-chase::after { content: none; }
  .hud-status-strip .hud-status { border-radius: 5px; }
  /* controles/selects do dock no tema */
  .hud-bag-button, .hud-stance, .hud-distance-step { border-radius: 5px; }
  .hud-stance.active { color: var(--oh-gold-3); }
  .hud-preset-select, .hud-target-strategy { border-radius: 5px; background: var(--oh-ink-1); border: 1px solid var(--oh-line); color: var(--oh-bright); font-family: var(--oh-num); }
  .hud-slot { border-radius: 5px; }
  .hud-slot .slot-count { font-family: var(--oh-num); font-weight: 700; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
  .hud-slot .slot-count.slot-mana { color: var(--oh-cyan); }
  /* painel de vitais flutuante (paisagem) e chat dobrado */
  .vitals-panel { background: var(--oh-stone) !important; border: 1px solid rgba(255, 255, 255, .06); border-top-color: var(--oh-gline); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); padding: 6px; }
  .chat-panel { background: rgba(13, 14, 20, .88) !important; border: 1px solid rgba(255, 255, 255, .06); border-radius: 6px; }
  .chat-panel::after { content: none; }
  .chat-panel > header { background: transparent; font: 600 9px/1 var(--oh-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--oh-text-3); }
  .chat-tab.active { color: var(--oh-gold-3); border-bottom-color: var(--oh-gold); }
  .chat-compose button { color: var(--oh-gold-3); border-color: var(--oh-gold-dark); background: rgba(224, 175, 104, .12); }
  .chat-panel.folded .chat-line { font-family: var(--oh-ui); color: var(--oh-text-2); }
}

/* ---- RETRATO (≤1000px em pé — telefone E tablet): ORBES NOS CANTOS (Mobile Lab, 03/09) — o mapa é 100% da tela
   (canvas destravado pelo hud.js, fullMap). Vida no canto inferior esquerdo com anel de XP, mana no
   direito com selo de stamina, ponte 2×5 de slots entre os orbes, ações de contexto como chips no
   topo, loot e analisador-mini como pílulas do topo, CAÇAR em placa dourada central, rail de combate
   completo num cartão aberto pelo botão-mira. ---- */
@media (max-width: 1000px) and (orientation: portrait) {
  .viewport-host { background: #000 !important; align-items: start !important; }
  .vitals-panel { display: none !important; }   /* tablet em pé: o cliente monta o painel de vitais dele; os orbes usam os do footer */

  /* topo do cliente vira faixa translúcida sobre o mapa (nada é removido: retrato abre a ficha,
     moedas/loja/menu continuam os botões reais) */
  app-game-shell > header { position: fixed; left: 0; right: 0; top: 0; z-index: 30; box-sizing: border-box;
    display: flex; align-items: center; gap: 8px; min-height: 0; padding: calc(4px + env(safe-area-inset-top)) 8px 6px;
    background: linear-gradient(rgba(8, 9, 14, .92), rgba(8, 9, 14, .5) 72%, transparent); border: 0; box-shadow: none; }
  app-game-shell > header .header-brand { display: none; }
  app-game-shell > header .header-online { display: none; }   /* leitura, não ação: vive no desktop/ficha */
  .header-character { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .header-character-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .header-character-name { font: 700 12px/1.1 var(--oh-ui); color: var(--oh-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
  .header-character-vocation { display: flex; align-items: center; gap: 5px; font: 500 9px/1 var(--oh-ui); color: var(--oh-text-3); }
  .header-character-vocation em { font-style: normal; color: var(--oh-gold-3); }
  #header-portrait { width: 32px; height: 32px; border-radius: 5px; overflow: hidden; background: #0d0e14; box-shadow: 0 0 0 1px var(--oh-gold-dark); flex: 0 0 auto; }
  #header-exp-rate { font-size: 8px; }
  .header-purse { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
  .header-purse .header-coin-group, .header-purse #header-gold { display: flex; align-items: center; gap: 4px; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; white-space: nowrap; }
  .header-purse .header-coins-count, .header-purse .header-gold-count { font: 700 11px/1 var(--oh-num); color: var(--oh-gold-3); font-variant-numeric: tabular-nums; }
  .header-purse .store-coin, .header-purse #header-gold canvas { width: 13px; height: 13px; }
  .header-purse #nav-store { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border-radius: 4px;
    background: linear-gradient(#f3d383, #cfa93a 55%, #a67a22); border: 1px solid #5a4a2d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .25); }
  .header-purse #nav-store::after { content: none; }
  .header-purse #nav-store .nav-glyph { width: 18px; height: 18px; }
  .header-purse #nav-store .nav-glyph-art { max-width: 18px; max-height: 18px; }
  .header-purse #nav-store .nav-label { display: none !important; }

  /* faixa do jogo cheia: header e footer saem do fluxo para o viewport ocupar 100dvh */
  .footer-hud { position: fixed; left: 0; right: 0; bottom: 0; height: 0; padding: 0; margin: 0; border: 0;
    background: none !important; box-shadow: none; overflow: visible; z-index: 20; }
  .hud-bar-panel { position: static; height: 0; padding: 0; margin: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
  .hud-bar-panel::after, .hud-bar-panel::before { content: none !important; }
  .hud-bar-vitals { display: contents !important; padding: 0; border: 0; background: none !important; }
  .hud-bar-vitals-tracks, .hud-bar-vitals .hud-bars, .hud-bar-vitals .hud-exp-group { display: contents; }

  /* chips de contexto no topo, sob o header: cidade = Depot/Venda/Imbui/Bless; caçada = Detalhes/
     Despachar/Sair (os grupos com "…" de regras vêm juntos) */
  .hud-city-actions { position: fixed; left: 8px; right: 8px; top: calc(env(safe-area-inset-top) + 46px); z-index: 25;
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: none; padding: 0 0 2px; border: 0; }
  .hud-city-actions::-webkit-scrollbar { display: none; }
  .hud-city-action { flex: 0 0 auto; white-space: nowrap; }
  .hud-dispatch-group, .hud-leave-group { display: flex; gap: 2px; }
  .hud-city-action { min-height: 30px; padding: 0 11px; border-radius: 15px; box-sizing: border-box;
    background: var(--oh-stone); border: 1px solid rgba(255, 255, 255, .08); border-top-color: var(--oh-gline);
    color: var(--oh-gold-3); font: 700 10px/1 var(--oh-ui); letter-spacing: .07em; text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45); }
  .hud-city-action:active { transform: scale(.96); }
  .hud-dispatch-more, .hud-leave-more { min-width: 26px; padding: 0 6px; }
  .hud-leave-hunt { color: var(--oh-red); border-color: rgba(247, 118, 142, .45); background: rgba(60, 18, 26, .82); }

  /* efeitos ativos (Haste, timers) perto da vida */
  .hud-status-strip { position: fixed; left: 10px; bottom: 138px; z-index: 22; }

  /* ---- orbe de VIDA (canto esquerdo) — receita do globo do tema ---- */
  .hud-bar-panel .hud-bar.hud-hp { position: fixed; left: 14px; bottom: 20px; width: 86px; height: 86px; z-index: 23;
    flex: none; border: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2a1017, #0a0509 70%) !important;
    box-shadow: inset 0 0 0 3px #2a2f45, inset 0 0 22px rgba(0, 0, 0, .9), 0 0 0 2px #0d0e14, 0 0 0 3px var(--oh-gold-dark), 0 0 18px rgba(0, 0, 0, .8); }
  .hud-bar-panel .hud-bar.hud-hp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .14), transparent 45%), radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, .5) 100%); }
  .hud-bar-panel .hud-bar.hud-hp .fill { position: absolute; left: 0; right: 0; bottom: 0; width: 100% !important; height: var(--hud-hp, 100%);
    background: radial-gradient(circle at 50% 115%, #ff7f7f, #a8202e 45%, #4d0a14 80%) !important; transition: height .45s var(--oh-ease); }
  .hud-bar-panel .hud-bar.hud-hp .fill::before { content: ""; position: absolute; left: -30%; right: -30%; top: -6px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .2); animation: oh-wave 3.2s ease-in-out infinite; }
  .hud-bar-panel .hud-bar.hud-hp > span:not(.hud-regen):not(.hud-shield) { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding-top: 2px;
    font-family: var(--oh-num); color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000; font-variant-numeric: tabular-nums; }
  .hud-bar-panel .hud-bar.hud-hp > span b { font: 700 15px/1 var(--oh-num); letter-spacing: .01em; }
  .hud-bar-panel .hud-bar.hud-hp > span small { font: 500 8px/1 var(--oh-num); color: rgba(255, 255, 255, .72); }
  .hud-bar-panel .hud-bar.hud-hp .hud-regen, .hud-bar-panel .hud-bar.hud-mp .hud-regen { display: none; }
  .hud-bar-panel .hud-bar.hud-hp.low { animation: oh-low 1.4s ease-in-out infinite; }
  .hud-bar-panel .hud-bar.hud-hp.crit { animation: oh-low .7s ease-in-out infinite; }
  .hud-bar-panel .hud-bar.hud-hp.hit .fill { animation: oh-hit .5s var(--oh-ease); }
  .hud-bar-panel .hud-bar.hud-hp.heal .fill { animation: oh-heal .5s var(--oh-ease); }

  /* anel de XP em volta do orbe de vida + medalha de nível (abre a ficha) + selo de % */
  .hud-bar-panel .hud-exp { position: fixed; left: 5px; bottom: 11px; width: 104px; height: 104px; z-index: 22;
    flex: none; border: 0; border-radius: 50%; background: none !important; overflow: visible; transition: --hud-xp .8s var(--oh-ease); }
  .hud-bar-panel .hud-exp::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(8, 9, 14, .9);
    -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 8px), #000 calc(100% - 7px), #000 calc(100% - 1.5px), transparent calc(100% - .5px));
    mask: radial-gradient(circle closest-side, transparent calc(100% - 8px), #000 calc(100% - 7px), #000 calc(100% - 1.5px), transparent calc(100% - .5px)); }
  .hud-bar-panel .hud-exp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0; z-index: 1; pointer-events: none;
    background: conic-gradient(from 0deg, var(--oh-gold-3) 0%, var(--oh-gold) var(--hud-xp, 0%), transparent var(--hud-xp, 0%));
    -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 3px), transparent calc(100% - 2px));
    mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 3px), transparent calc(100% - 2px));
    filter: drop-shadow(0 0 3px rgba(224, 175, 104, .9)); transition: inherit; }
  .hud-bar-panel .hud-exp .fill { display: none; }
  .hud-bar-panel .hud-exp .hud-level { position: absolute; z-index: 4; left: calc(50% - 13px); top: -10px; bottom: auto; right: auto; width: 26px; height: 26px; padding: 0; border-radius: 50%;
    display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #3a3320, #15120b 70%);
    box-shadow: 0 0 0 1px #0d0e14, 0 0 0 2px var(--oh-gold-2), 0 0 10px rgba(201, 162, 39, .55); font: 700 10px/1 var(--oh-num); color: var(--oh-gold-3); }
  .hud-bar-panel .hud-exp .hud-level b { font: inherit; color: inherit; }
  .hud-bar-panel .hud-exp .hud-exp-percent { position: absolute; z-index: 4; left: 50%; top: auto; bottom: -7px; right: auto; transform: translateX(-50%); height: 15px; padding: 0 7px;
    display: grid; place-items: center; border-radius: 8px; background: #0d0e14; border: 1px solid var(--oh-gold-dark); white-space: nowrap; font: 700 9px/1 var(--oh-num); color: var(--oh-gold-3); }

  /* ---- orbe de MANA (canto direito) ---- */
  .hud-bar-panel .hud-bar.hud-mp { position: fixed; right: 14px; left: auto; top: auto; bottom: 20px; width: 86px; height: 86px; z-index: 23;
    flex: none; border: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #101a2e, #05070c 70%) !important;
    box-shadow: inset 0 0 0 3px #2a2f45, inset 0 0 22px rgba(0, 0, 0, .9), 0 0 0 2px #0d0e14, 0 0 0 3px var(--oh-gold-dark), 0 0 18px rgba(0, 0, 0, .8); }
  .hud-bar-panel .hud-bar.hud-mp::before { content: none; }
  .hud-bar-panel .hud-bar.hud-mp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .14), transparent 45%), radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, .5) 100%); }
  .hud-bar-panel .hud-bar.hud-mp .fill { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100% !important; height: var(--hud-mp, 100%); border-radius: 0;
    background: radial-gradient(circle at 50% 115%, #8fb4ff, #2e55c4 45%, #0d1c4d 80%) !important; box-shadow: none; transition: height .35s var(--oh-ease); }
  .hud-bar-panel .hud-bar.hud-mp .fill::before { content: ""; position: absolute; left: -30%; right: -30%; top: -6px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .18); animation: oh-wave 3.6s ease-in-out infinite; }
  .hud-bar-panel .hud-bar.hud-mp .hud-shield-fill { display: none; }
  .hud-bar-panel .hud-bar.hud-mp > span:not(.hud-regen):not(.hud-shield) { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding-top: 2px;
    width: auto; height: auto; font-family: var(--oh-num); color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000; white-space: nowrap; }
  .hud-bar-panel .hud-bar.hud-mp > span b { font: 700 15px/1 var(--oh-num); }
  .hud-bar-panel .hud-bar.hud-mp > span small { font: 500 8px/1 var(--oh-num); color: rgba(255, 255, 255, .72); }
  .hud-bar-panel .hud-bar.hud-mp .hud-shield { position: absolute; inset: auto auto 100% 50%; transform: translateX(-50%); width: auto; margin-bottom: 4px; font: 700 9px/1 var(--oh-num); color: var(--oh-cyan); z-index: 4; }

  /* stamina = selo sobre o orbe de mana (barrinha + relógio), com o + de comprar ao lado */
  .hud-bar-panel .hud-stamina { position: fixed; right: 20px; bottom: 112px; left: auto; top: auto; width: 74px; height: 15px; z-index: 24;
    border: 1px solid rgba(53, 184, 166, .4); border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, .78) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
  .hud-bar-panel .hud-stamina::before, .hud-bar-panel .hud-stamina::after { content: none; }
  .hud-bar-panel .hud-stamina .fill { position: absolute; inset: 0; width: var(--hud-stam, 100%) !important; height: 100%;
    background: linear-gradient(rgba(127, 224, 210, .5), rgba(31, 122, 110, .5)) !important; transition: width .35s var(--oh-ease); }
  .hud-bar-panel .hud-stamina .hud-session-fill { border-radius: 8px; }
  .hud-bar-panel .hud-stamina .hud-stamina-clock { position: absolute !important; inset: 0 !important; width: auto; height: auto; display: grid; place-items: center; padding: 0;
    font: 700 9px/1 var(--oh-num); color: #d9fff8; text-shadow: 0 1px 2px #000; z-index: 2; }
  .hud-bar-panel .hud-stamina-buy { position: fixed; right: 2px; bottom: 112px; left: auto; top: auto; width: 15px; height: 15px; font-size: 10px; z-index: 24; }
  .hud-bar-panel .hud-capacity { display: none !important; }   /* capacidade vive na ficha/inventário no retrato */

  /* ---- ponte de slots 2×5 entre os orbes (leve curvatura: pontas descem) ---- */
  .hud-slots { position: fixed; z-index: 21; left: 50%; transform: translateX(-50%); top: auto; bottom: 122px;
    display: grid !important; grid-template-columns: repeat(5, 38px); gap: 5px 4px; width: max-content; max-width: none !important;
    height: auto !important; max-height: none !important; overflow: visible !important; margin: 0; padding: 0; }
  /* relative, nunca static: o ícone absoluto do slot resolveria no .hud-slots (que tem transform) e estica pela grade inteira */
  .hud-slot { position: relative; width: 38px !important; height: 38px !important; box-sizing: border-box; border: 1px solid transparent;
    background: var(--frame-slot) center / 100% 100% no-repeat, rgba(22, 22, 30, .85); border-radius: 5px; }
  .hud-slot.active-rule, .hud-slot.selected { background-image: var(--frame-slot-active); }
  .hud-slot:nth-child(5n + 1), .hud-slot:nth-child(5n) { translate: 0 9px; }
  .hud-slot:nth-child(5n + 2), .hud-slot:nth-child(5n + 4) { translate: 0 3px; }
  .hud-slot:nth-child(n + 11) { display: none; }
  .hud-slot:active { transform: scale(.94); }
  .hud-slot.assigned.missing-item { box-shadow: inset 0 0 0 1px rgba(247, 118, 142, .9); }
  .hud-slot:not(.assigned) { color: var(--oh-line-2); font: 500 14px/1 var(--oh-ui); }
  .hud-slot .action-item-icon { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); image-rendering: pixelated; }
  .hud-slot .action-spell-icon { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 4px; }
  .hud-slot .slot-count { top: auto; left: auto; right: 4px; bottom: 3px; font: 700 9px/1 var(--oh-num); color: #fff; }
  .hud-slot .slot-missing { top: -4px; right: -4px; width: 13px; height: 13px; box-shadow: 0 0 0 1px #000; animation: oh-alert 1.4s ease-in-out infinite; }

  /* bolsa (inventário) pendurada na ponta direita da ponte */
  .hud-bar-panel > .hud-bag-buttons { position: fixed; z-index: 21; left: calc(50% + 108px); bottom: 131px; top: auto;
    display: grid; grid-auto-flow: row; gap: 5px; }
  .hud-bar-panel .hud-bag-button { width: 40px; height: 40px; border-radius: 5px; border: 0; background: var(--frame-icon-button) center / 100% 100% no-repeat, rgba(22, 22, 30, .9); }
  .hud-bar-panel .hud-bag-button::after { content: none; }
  .hud-bar-panel .hud-bag-button.open { box-shadow: inset 0 0 0 1px rgba(224, 175, 104, .8); }
  .hud-bar-panel .hud-bag-button canvas { image-rendering: pixelated; }

  /* CAÇAR: placa dourada central entre os orbes (só na cidade — hud.js esconde na caçada) */
  #ohm-cta { position: fixed; z-index: 24; left: 50%; transform: translateX(-50%); bottom: 34px; height: 52px; min-width: 150px; padding: 0 20px;
    border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-sizing: border-box;
    background: linear-gradient(#f3d383, #cfa93a 55%, #a67a22); border: 1px solid #5a4a2d;
    font: 800 13px/1 var(--oh-ui); letter-spacing: .13em; text-transform: uppercase; color: #1a1408; text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 4px 16px rgba(0, 0, 0, .6), 0 0 22px rgba(224, 175, 104, .4); }
  #ohm-cta img { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
  #ohm-cta:active { transform: translateX(-50%) scale(.96); filter: brightness(.95); }

  /* botão-mira: abre o cartão Combate (rail completo) — canto direito, acima da bolsa */
  #ohm-comb-btn { position: fixed; z-index: 24; left: auto; right: 6px; bottom: 182px; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; background: var(--oh-stone); border: 1px solid rgba(255, 255, 255, .08); border-top-color: var(--oh-gline);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
  #ohm-comb-btn img { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
  #ohm-comb-btn:active { transform: scale(.94); }
  #ohm-combat { position: fixed; z-index: 41; left: 50%; transform: translateX(-50%); bottom: 276px; width: min(330px, calc(100vw - 20px)); box-sizing: border-box;
    padding: 12px; border-radius: 8px; background: var(--oh-glass); border: 1px solid rgba(255, 255, 255, .08); border-top-color: var(--oh-gline);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
  #ohm-combat .oc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  #ohm-combat .oc-head b { font: 600 11px/1 var(--oh-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--oh-gold-3); }
  #ohm-combat .oc-head button { width: 34px; height: 34px; margin: -8px -8px -8px 0; border: 0; background: none; color: var(--oh-text-2); font: 500 16px/1 var(--oh-ui); cursor: pointer; }
  #ohm-combat .hud-preset-rail { display: grid !important; grid-template-columns: 1fr; gap: 6px; padding: 0; margin: 0; background: none; border: 0; }
  #ohm-combat .hud-preset-label { display: block !important; margin-top: 4px; font: 600 9px/1 var(--oh-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--oh-text-3); }
  #ohm-combat .hud-preset-label:first-child { margin-top: 0; }
  #ohm-combat select { display: block; position: static !important; inset: auto !important; transform: none !important; width: 100% !important; min-height: 40px; box-sizing: border-box; margin: 0; }
  #ohm-combat .hud-rail-controls { margin-top: 6px; }
  #ohm-combat .hud-rail-controls { display: flex; flex-wrap: wrap; gap: 8px; }
  #ohm-combat .hud-rail-controls button, #ohm-combat .hud-distance-value { min-height: 40px; min-width: 40px; }

  /* chat: pílula fina acima da ponte; aberto vira sheet do meio da tela */
  .chat-panel { position: fixed !important; left: 8px !important; right: 8px !important; width: auto !important;
    top: auto !important; bottom: 224px !important; height: 38px !important; transform: none !important; z-index: 26; border-radius: 19px;
    background: var(--oh-stone) !important; border: 1px solid rgba(255, 255, 255, .08); border-top-color: var(--oh-gline);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45); overflow: hidden; }
  .chat-panel:not(.folded) { background: var(--oh-glass) !important; }
  .chat-panel.folded { background: var(--oh-stone) !important; }
  .chat-panel.folded::before { content: "Chat"; position: absolute; left: 16px; top: 0; bottom: 0; display: flex; align-items: center;
    font: 600 9px/1 var(--oh-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--oh-gold-3); pointer-events: none; z-index: 2; }
  .chat-panel.folded .chat-line { padding-left: 58px; display: flex; align-items: center; height: 36px; font: 500 11px/1.2 var(--oh-ui); color: var(--oh-text-2); }
  .chat-panel:not(.folded) { top: calc(env(safe-area-inset-top) + 92px) !important; bottom: 236px !important; height: auto !important; border-radius: 8px; z-index: 42; }
  .chat-panel .resize-handle { display: none !important; }

  /* pílulas do topo: loot à esquerda, analisador minimizado à direita; analisador expandido = sheet */
  .loot-window { position: fixed !important; left: 8px !important; right: auto !important; width: calc(50vw - 12px) !important; transform: none !important; box-sizing: border-box;
    top: calc(env(safe-area-inset-top) + 88px) !important; bottom: auto !important; height: auto !important; max-height: 168px; overflow: hidden; z-index: 27; }
  .loot-window .loot-grid { max-height: 92px; overflow-y: auto; }
  .loot-window > header { min-height: 30px; padding: 4px 8px; }
  .loot-window > header span { font-size: 11px; }
  .loot-window .loot-overflow, .loot-window footer { font-size: 9px; padding: 3px 8px; }
  .hunt-analyzer-window { position: fixed !important; left: 8px !important; right: 8px !important; width: auto !important; transform: none !important;
    top: calc(env(safe-area-inset-top) + 88px) !important; bottom: 240px !important; height: auto !important; max-height: none !important; z-index: 28; }
  .hunt-analyzer-window .analyzer-body { overflow-y: auto; }
  .hunt-analyzer-window.minimized { left: auto !important; right: 8px !important; bottom: auto !important; width: calc(50vw - 12px) !important; height: auto !important; box-sizing: border-box; }
  .hunt-analyzer-window.minimized header { min-height: 30px; padding: 4px 8px; }
  .hunt-analyzer-window.minimized header span { font-size: 11px; }

}

/* ---- SHEETS DE JANELA (F3) — valem em TUDO ≤1000px (telefone e tablet, qualquer orientação; antes retrato ≤640 e paisagem
   deitada ≤520 de altura): sem isso a paisagem caía nas janelas soltas do cliente (recompensa de
   672px numa tela de 390). ---- */
@media (max-width: 1000px) {
  /* ---- F3: TODAS as janelas viram sheets de tela cheia (exceto chat/analisador/loot, tratadas acima,
     e os diálogos de confirmação, que ficam cartões centrais). Corpo rola; header fixo com fechar 44px. */
  #ui section.ui-scaled:not(.chat-panel):not(.hunt-analyzer-window):not(.loot-window):not(.vitals-panel):not(.solo-hunt-confirm-window):not(.daily-reward-window):not(.bestiary-tracker),
  #game > section.ui-scaled:not(.chat-panel):not(.hunt-analyzer-window):not(.loot-window):not(.vitals-panel):not(.solo-hunt-confirm-window):not(.daily-reward-window):not(.bestiary-tracker),
  #game > .action-editor {
    position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100dvh !important;
    max-width: none !important; max-height: none !important; min-width: 0 !important; transform: none !important; margin: 0 !important;
    border-radius: 0 !important; border: 0 !important; box-sizing: border-box; display: flex; flex-direction: column; z-index: 60;
    background: linear-gradient(#12131b, #0b0c13) !important;
    padding-top: env(safe-area-inset-top) !important; padding-bottom: env(safe-area-inset-bottom) !important; overflow: hidden !important; }
  #ui section.ui-scaled > header, #game > section.ui-scaled > header, #game > .action-editor > header {
    flex: 0 0 auto; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; }
  #ui section.ui-scaled > header button, #game > section.ui-scaled > header button, #game > .action-editor > header button {
    min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; line-height: 1; }
  /* chat: a caixa .window-actions (44×44) guarda o botão de dobrar com fonte 9px — glifo centrado e legível */
  .chat-panel > header .window-actions { display: flex; align-items: center; gap: 2px; }
  .chat-panel > header .window-actions button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0;
    font: 500 20px/1 var(--oh-ui); }
  /* loja: o "+" de comprar coins vira um botão redondo de 34px com o glifo no centro (a regra genérica esticava para 44 sem centrar) */
  #trade-topup { width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; margin-left: 6px; border-radius: 50%; display: grid; place-items: center; line-height: 1; }
  #trade-topup > span { display: none; }
  #trade-topup::before { transform: scale(1.5); }
  /* corpo principal de cada janela: ocupa o resto e rola */
  .hunt-window .hunt-body, .hunt-window .hunt-training, .hunt-window .hunt-bosses, .hunt-window .hunt-finder,
  .char-window .char-sheet-body, .char-window .outfit-columns, .trade-window .trade-panes,
  .inventory-window .inventory-body, .depot-window .depot-body, .guild-window .guild-body,
  .cyclopedia-window .cyc-body, .highscores-window .hs-body, .ticket-window .ticket-body,
  .friends-window .friends-groups, .prey-window .prey-slots, .blessings-window .blessings-list,
  .quick-sell-window .quick-sell-list, .imbuement-window .imbue-columns, .party-window .party-members,
  .report-window .report-body, .trade-session-window .trade-session-scroll {
    flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; }
  /* rodapés/abas fixos e tocáveis */
  #ui section.ui-scaled > footer, #game > section.ui-scaled > footer { flex: 0 0 auto; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  #ui section.ui-scaled > footer button, #ui section.ui-scaled > nav button { min-height: 42px; }
  #ui section.ui-scaled > nav { flex: 0 0 auto; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  /* diálogos de confirmação/prompt PEQUENOS: cartão central. O z-index fica com o CLIENTE — ele
     pareia janela (1801) com o backdrop (1800); forçar um z baixo jogava a janela para trás do
     próprio backdrop (tela toda apagada no aparelho). */
  .text-prompt-dialog, .move-amount-dialog, .solo-hunt-confirm-window {
    position: fixed !important; inset: auto !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important;
    width: min(92vw, 420px) !important; max-height: 86dvh !important; overflow-y: auto !important; border-radius: 8px !important; }
  .text-prompt-dialog button, .move-amount-dialog button, .solo-hunt-confirm-window button { min-height: 44px; }
  /* recompensa diária é GRANDE (grid de 7 armas): sheet de tela cheia própria — ela vive sob
     app-game-shell (fora de #ui/#game), então a regra genérica de sheet não a pega */
  .daily-reward-window {
    position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important; transform: none !important; margin: 0 !important;
    width: 100vw !important; max-width: none !important; height: 100dvh !important; max-height: none !important;
    border-radius: 0 !important; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden !important;
    background: linear-gradient(#12131b, #0b0c13) !important;
    padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 8px) !important; }
  .daily-reward-window .daily-reward-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .daily-reward-window > header, .daily-reward-window .daily-reward-expiry, .daily-reward-window .daily-reward-note, .daily-reward-window .daily-reward-footer { flex: 0 0 auto; }
  .daily-reward-window .daily-reward-footer button { min-height: 46px; }
  .daily-reward-window .daily-reward-close { min-width: 44px; min-height: 44px; }
}

/* ---- TABLET EM PÉ (≥700px de largura, retrato): mesma anatomia, um degrau maior — orbes de 100px,
   ponte de 44px, CAÇAR mais largo. ---- */
@media (min-width: 700px) and (max-width: 1000px) and (orientation: portrait) {
  .hud-bar-panel .hud-bar.hud-hp { left: 20px; bottom: 24px; width: 100px; height: 100px; }
  .hud-bar-panel .hud-bar.hud-hp > span b { font-size: 17px; }
  .hud-bar-panel .hud-exp { left: 10px; bottom: 14px; width: 120px; height: 120px; }
  .hud-bar-panel .hud-exp .hud-level { width: 28px; height: 28px; left: calc(50% - 14px); top: -11px; font-size: 11px; }
  .hud-bar-panel .hud-bar.hud-mp { right: 20px; bottom: 24px; width: 100px; height: 100px; }
  .hud-bar-panel .hud-bar.hud-mp > span b { font-size: 17px; }
  .hud-bar-panel .hud-stamina { right: 30px; bottom: 130px; width: 80px; height: 16px; }
  .hud-bar-panel .hud-stamina .hud-stamina-clock { font-size: 10px; }
  .hud-bar-panel .hud-stamina-buy { bottom: 130px; right: 10px; }
  .hud-status-strip { bottom: 156px; left: 16px; }
  .hud-slots { bottom: 132px; grid-template-columns: repeat(5, 44px); gap: 6px 5px; }
  .hud-slot { width: 44px !important; height: 44px !important; }
  .hud-slot:nth-child(5n + 1), .hud-slot:nth-child(5n) { translate: 0 10px; }
  .hud-slot:nth-child(5n + 2), .hud-slot:nth-child(5n + 4) { translate: 0 4px; }
  .hud-slot .action-item-icon { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .hud-slot .slot-count { right: 5px; bottom: 4px; font-size: 10px; }
  .hud-bar-panel > .hud-bag-buttons { left: calc(50% + 126px); bottom: 142px; }
  .hud-bar-panel .hud-bag-button { width: 44px; height: 44px; }
  #ohm-cta { bottom: 40px; height: 56px; min-width: 180px; font-size: 14px; }
  #ohm-cta img { width: 26px; height: 26px; }
  #ohm-comb-btn { right: 12px; bottom: 200px; width: 48px; height: 48px; }
  #ohm-combat { bottom: 300px; }
  .chat-panel { bottom: 246px !important; height: 40px !important; left: 16px !important; right: 16px !important; }
  .chat-panel:not(.folded) { bottom: 260px !important; left: 16px !important; right: 16px !important; }
  .hud-city-actions { left: 16px; right: 16px; }
  .hud-city-action { min-height: 34px; padding: 0 14px; font-size: 11px; }
  .loot-window { left: 16px !important; width: calc(50vw - 20px) !important; max-height: 200px; }
  .loot-window .loot-grid { max-height: 120px; }
  .hunt-analyzer-window { left: 16px !important; right: 16px !important; bottom: 260px !important; }
  .hunt-analyzer-window.minimized { right: 16px !important; width: calc(50vw - 20px) !important; }
}

/* ---- RETRATO ESTREITO OU BAIXO (iPhone SE 375×667 e afins): orbes de 74px, CAÇAR mais curto, ponte de 34px,
   pílulas mais rasas — mesma anatomia, um degrau menor. ---- */
@media (max-width: 1000px) and (orientation: portrait) and ((max-width: 380px) or (max-height: 700px)) {
  .hud-bar-panel .hud-bar.hud-hp { left: 10px; bottom: 14px; width: 74px; height: 74px; }
  .hud-bar-panel .hud-bar.hud-hp > span b { font-size: 13px; }
  .hud-bar-panel .hud-exp { left: 2px; bottom: 6px; width: 90px; height: 90px; }
  .hud-bar-panel .hud-exp .hud-level { width: 24px; height: 24px; left: calc(50% - 12px); top: -8px; font-size: 9px; }
  .hud-bar-panel .hud-bar.hud-mp { right: 10px; bottom: 14px; width: 74px; height: 74px; }
  .hud-bar-panel .hud-bar.hud-mp > span b { font-size: 13px; }
  .hud-bar-panel .hud-stamina { right: 14px; bottom: 96px; width: 66px; height: 14px; }
  .hud-bar-panel .hud-stamina-buy { bottom: 96px; }
  .hud-status-strip { bottom: 118px; }
  .hud-slots { bottom: 104px; grid-template-columns: repeat(5, 34px); gap: 4px 3px; }
  .hud-slot { width: 34px !important; height: 34px !important; }
  .hud-slot:nth-child(5n + 1), .hud-slot:nth-child(5n) { translate: 0 7px; }
  .hud-slot:nth-child(5n + 2), .hud-slot:nth-child(5n + 4) { translate: 0 2px; }
  .hud-slot .action-item-icon { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
  .hud-bar-panel > .hud-bag-buttons { left: calc(50% + 96px); bottom: 110px; }
  .hud-bar-panel .hud-bag-button { width: 36px; height: 36px; }
  #ohm-cta { bottom: 26px; height: 46px; min-width: 118px; padding: 0 14px; font-size: 12px; letter-spacing: .1em; }
  #ohm-cta img { width: 20px; height: 20px; }
  #ohm-comb-btn { right: 4px; bottom: 156px; width: 40px; height: 40px; }
  #ohm-comb-btn img { width: 22px; height: 22px; }
  #ohm-combat { bottom: 240px; }
  .chat-panel { bottom: 194px !important; height: 34px !important; }
  .chat-panel:not(.folded) { top: calc(env(safe-area-inset-top) + 84px) !important; bottom: 206px !important; }
  .chat-panel.folded .chat-line { height: 32px; }
  .hud-city-actions { top: calc(env(safe-area-inset-top) + 44px); }
  .hud-city-action { min-height: 28px; padding: 0 9px; font-size: 9px; }
  .loot-window, .hunt-analyzer-window { top: calc(env(safe-area-inset-top) + 80px) !important; }
  .loot-window { max-height: 140px; }
  .loot-window .loot-grid { max-height: 70px; }
  .hunt-analyzer-window { bottom: 206px !important; }
}

/* ---- TABLET DEITADO (≤1000px de largura com altura ≥560px, ex. 1000×700): a receita da paisagem com
   orbes de 86px e slots de 44px — o telefone deitado (≤520px de altura) fica com a geometria menor. ---- */
@media (max-width: 1000px) and (orientation: landscape) and (min-height: 560px) {
  .hud-bar-panel .hud-bar.hud-hp { left: 16px; bottom: 18px; width: 86px; height: 86px; }
  .hud-bar-panel .hud-bar.hud-hp > span b { font-size: 15px; }
  .hud-bar-panel .hud-bar.hud-hp > span small { display: block; font: 500 8px/1 var(--oh-num); color: rgba(255, 255, 255, .72); }
  .hud-bar-panel .hud-exp { left: 7px; bottom: 9px; width: 104px; height: 104px; }
  .hud-bar-panel .hud-exp .hud-level { width: 26px; height: 26px; left: calc(50% - 13px); top: -10px; font-size: 10px; }
  .hud-bar-panel .hud-exp .hud-exp-percent { display: grid; position: absolute; z-index: 4; left: 50%; top: auto; bottom: -7px; right: auto; transform: translateX(-50%); height: 15px; padding: 0 7px;
    place-items: center; border-radius: 8px; background: #0d0e14; border: 1px solid var(--oh-gold-dark); white-space: nowrap; font: 700 9px/1 var(--oh-num); color: var(--oh-gold-3); }
  .hud-bar-panel .hud-bar.hud-mp { right: 16px; bottom: 18px; width: 86px; height: 86px; }
  .hud-bar-panel .hud-bar.hud-mp > span b { font-size: 15px; }
  .hud-bar-panel .hud-bar.hud-mp > span small { display: block; font: 500 8px/1 var(--oh-num); color: rgba(255, 255, 255, .72); }
  .hud-bar-panel .hud-stamina { right: 22px; bottom: 112px; width: 74px; height: 15px; }
  .hud-bar-panel .hud-stamina .hud-stamina-clock { font-size: 9px; }
  .hud-bar-panel .hud-stamina-buy { bottom: 112px; width: 15px; height: 15px; }
  .hud-status-strip { left: 128px; bottom: 120px; }
  .hud-slots { bottom: 14px; grid-template-columns: repeat(10, 44px); gap: 5px; }
  .hud-slot { width: 44px !important; height: 44px !important; }
  .hud-slot .action-item-icon { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .hud-slot .slot-count { right: 5px; bottom: 4px; font-size: 10px; }
  .hud-bar-panel > .hud-bag-buttons { left: calc(50% + 250px); bottom: 14px; }
  .hud-bar-panel .hud-bag-button { width: 44px; height: 44px; }
  .chat-panel { left: 128px !important; width: 260px !important; bottom: 70px !important; height: 38px !important; }
  #ohm-cta { bottom: 128px; height: 48px; padding: 0 20px; font-size: 12px; }
  #ohm-comb-btn { bottom: 186px; width: 44px; height: 44px; }
  #ohm-combat { bottom: 70px; }
  .loot-window { width: 220px !important; max-height: 200px; }
  .loot-window .loot-grid { max-height: 120px; }
  .hunt-analyzer-window.minimized { width: 240px !important; }
}

/* ---- PAISAGEM TELEFONE (F4): ORBES NOS CANTOS deitado — mapa 100% (hud.js fullMap), orbes de
   64px nos cantos inferiores, fileira única de 10 slots no centro, chips de contexto no topo,
   pílulas loot/analisador nas laterais, CAÇAR e mira à direita. O .vitals-panel do cliente (a
   versão paisagem dele) some: os orbes usam os vitais do footer, como no retrato. ---- */
@media (max-width: 1000px) and (orientation: landscape) {
  .viewport-host { background: #000 !important; }
  .vitals-panel { display: none !important; }

  /* topo fino translúcido (mesma receita do retrato) */
  app-game-shell > header { position: fixed; left: 0; right: 0; top: 0; z-index: 30; box-sizing: border-box;
    display: flex; align-items: center; gap: 8px; min-height: 0;
    padding: 3px calc(8px + env(safe-area-inset-right)) 5px calc(8px + env(safe-area-inset-left));
    background: linear-gradient(rgba(8, 9, 14, .9), rgba(8, 9, 14, .45) 72%, transparent); border: 0; box-shadow: none; }
  app-game-shell > header .header-brand, app-game-shell > header .header-online { display: none; }
  .header-character { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .header-character-name { font: 700 12px/1.1 var(--oh-ui); color: var(--oh-bright); white-space: nowrap; }
  .header-character-vocation { display: flex; align-items: center; gap: 5px; font: 500 9px/1 var(--oh-ui); color: var(--oh-text-3); }
  .header-character-vocation em { font-style: normal; color: var(--oh-gold-3); }
  #header-portrait { width: 28px; height: 28px; border-radius: 5px; overflow: hidden; background: #0d0e14; box-shadow: 0 0 0 1px var(--oh-gold-dark); flex: 0 0 auto; }
  #header-exp-rate { font-size: 8px; }
  .header-purse { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
  .header-purse .header-coin-group, .header-purse #header-gold { display: flex; align-items: center; gap: 4px; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; white-space: nowrap; }
  .header-purse .header-coins-count, .header-purse .header-gold-count { font: 700 11px/1 var(--oh-num); color: var(--oh-gold-3); font-variant-numeric: tabular-nums; }
  .header-purse .store-coin, .header-purse #header-gold canvas { width: 12px; height: 12px; }
  .header-purse #nav-store { display: grid; place-items: center; width: 32px; height: 26px; padding: 0; border-radius: 4px;
    background: linear-gradient(#f3d383, #cfa93a 55%, #a67a22); border: 1px solid #5a4a2d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .25); }
  .header-purse #nav-store::after { content: none; }
  .header-purse #nav-store .nav-glyph { width: 16px; height: 16px; }
  .header-purse #nav-store .nav-glyph-art { max-width: 16px; max-height: 16px; }
  .header-purse #nav-store .nav-label { display: none !important; }

  .footer-hud { position: fixed; left: 0; right: 0; bottom: 0; height: 0; padding: 0; margin: 0; border: 0;
    background: none !important; box-shadow: none; overflow: visible; z-index: 20; display: block; }
  .hud-bar-panel { position: static; height: 0; padding: 0; margin: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
  .hud-bar-panel::after, .hud-bar-panel::before { content: none !important; }
  .hud-bar-vitals { display: contents !important; padding: 0; border: 0; background: none !important; }
  .hud-bar-vitals-tracks, .hud-bar-vitals .hud-bars, .hud-bar-vitals .hud-exp-group { display: contents; }

  /* chips de contexto no topo-centro */
  .hud-city-actions { position: fixed; left: 50%; transform: translateX(-50%); top: 38px; z-index: 25; width: max-content; max-width: calc(100vw - 16px);
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: none; padding: 0; border: 0; }
  .hud-dispatch-group, .hud-leave-group { display: flex; gap: 2px; }
  .hud-city-action { flex: 0 0 auto; min-height: 28px; padding: 0 11px; border-radius: 14px; box-sizing: border-box; white-space: nowrap;
    background: var(--oh-stone); border: 1px solid rgba(255, 255, 255, .08); border-top-color: var(--oh-gline);
    color: var(--oh-gold-3); font: 700 9px/1 var(--oh-ui); letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45); }
  .hud-city-action:active { transform: scale(.96); }
  .hud-leave-hunt { color: var(--oh-red); border-color: rgba(247, 118, 142, .45); background: rgba(60, 18, 26, .82); }
  .hud-status-strip { position: fixed; left: 86px; bottom: 102px; z-index: 22; }

  /* orbes de canto (64px) — mesmas receitas do retrato, geometria menor */
  .hud-bar-panel .hud-bar.hud-hp { position: fixed; left: 12px; bottom: 14px; width: 64px; height: 64px; z-index: 23;
    flex: none; border: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2a1017, #0a0509 70%) !important;
    box-shadow: inset 0 0 0 2px #2a2f45, inset 0 0 16px rgba(0, 0, 0, .9), 0 0 0 2px #0d0e14, 0 0 0 3px var(--oh-gold-dark), 0 0 14px rgba(0, 0, 0, .8); }
  .hud-bar-panel .hud-bar.hud-hp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .14), transparent 45%), radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, .5) 100%); }
  .hud-bar-panel .hud-bar.hud-hp .fill { position: absolute; left: 0; right: 0; bottom: 0; width: 100% !important; height: var(--hud-hp, 100%);
    background: radial-gradient(circle at 50% 115%, #ff7f7f, #a8202e 45%, #4d0a14 80%) !important; transition: height .45s var(--oh-ease); }
  .hud-bar-panel .hud-bar.hud-hp > span:not(.hud-regen):not(.hud-shield) { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--oh-num); color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000; font-variant-numeric: tabular-nums; }
  .hud-bar-panel .hud-bar.hud-hp > span b { font: 700 12px/1 var(--oh-num); }
  .hud-bar-panel .hud-bar.hud-hp > span small { display: none; }
  .hud-bar-panel .hud-bar.hud-hp .hud-regen, .hud-bar-panel .hud-bar.hud-mp .hud-regen { display: none; }
  .hud-bar-panel .hud-exp { position: fixed; left: 5px; bottom: 7px; width: 78px; height: 78px; z-index: 22;
    flex: none; border: 0; border-radius: 50%; background: none !important; overflow: visible; transition: --hud-xp .8s var(--oh-ease); }
  .hud-bar-panel .hud-exp::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(8, 9, 14, .9);
    -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 1.5px), transparent calc(100% - .5px));
    mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 1.5px), transparent calc(100% - .5px)); }
  .hud-bar-panel .hud-exp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0; z-index: 1; pointer-events: none;
    background: conic-gradient(from 0deg, var(--oh-gold-3) 0%, var(--oh-gold) var(--hud-xp, 0%), transparent var(--hud-xp, 0%));
    -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px), #000 calc(100% - 2.5px), transparent calc(100% - 1.5px));
    mask: radial-gradient(circle closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px), #000 calc(100% - 2.5px), transparent calc(100% - 1.5px));
    filter: drop-shadow(0 0 3px rgba(224, 175, 104, .9)); transition: inherit; }
  .hud-bar-panel .hud-exp .fill { display: none; }
  .hud-bar-panel .hud-exp .hud-level { position: absolute; z-index: 4; left: calc(50% - 11px); top: -8px; bottom: auto; right: auto; width: 22px; height: 22px; padding: 0; border-radius: 50%;
    display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #3a3320, #15120b 70%);
    box-shadow: 0 0 0 1px #0d0e14, 0 0 0 2px var(--oh-gold-2), 0 0 8px rgba(201, 162, 39, .55); font: 700 9px/1 var(--oh-num); color: var(--oh-gold-3); }
  .hud-bar-panel .hud-exp .hud-level b { font: inherit; color: inherit; }
  .hud-bar-panel .hud-exp .hud-exp-percent { display: none; }

  .hud-bar-panel .hud-bar.hud-mp { position: fixed; right: 12px; left: auto; top: auto; bottom: 14px; width: 64px; height: 64px; z-index: 23;
    flex: none; border: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #101a2e, #05070c 70%) !important;
    box-shadow: inset 0 0 0 2px #2a2f45, inset 0 0 16px rgba(0, 0, 0, .9), 0 0 0 2px #0d0e14, 0 0 0 3px var(--oh-gold-dark), 0 0 14px rgba(0, 0, 0, .8); }
  .hud-bar-panel .hud-bar.hud-mp::before { content: none; }
  .hud-bar-panel .hud-bar.hud-mp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .14), transparent 45%), radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, .5) 100%); }
  .hud-bar-panel .hud-bar.hud-mp .fill { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100% !important; height: var(--hud-mp, 100%); border-radius: 0;
    background: radial-gradient(circle at 50% 115%, #8fb4ff, #2e55c4 45%, #0d1c4d 80%) !important; box-shadow: none; transition: height .35s var(--oh-ease); }
  .hud-bar-panel .hud-bar.hud-mp .hud-shield-fill { display: none; }
  .hud-bar-panel .hud-bar.hud-mp > span:not(.hud-regen):not(.hud-shield) { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: auto; height: auto; font-family: var(--oh-num); color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000; white-space: nowrap; }
  .hud-bar-panel .hud-bar.hud-mp > span b { font: 700 12px/1 var(--oh-num); }
  .hud-bar-panel .hud-bar.hud-mp > span small { display: none; }
  .hud-bar-panel .hud-bar.hud-mp .hud-shield { position: absolute; inset: auto auto 100% 50%; transform: translateX(-50%); width: auto; margin-bottom: 3px; font: 700 8px/1 var(--oh-num); color: var(--oh-cyan); z-index: 4; }

  .hud-bar-panel .hud-stamina { position: fixed; right: 16px; bottom: 84px; left: auto; top: auto; width: 58px; height: 13px; z-index: 24;
    border: 1px solid rgba(53, 184, 166, .4); border-radius: 7px; overflow: hidden; background: rgba(0, 0, 0, .78) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
  .hud-bar-panel .hud-stamina::before, .hud-bar-panel .hud-stamina::after { content: none; }
  .hud-bar-panel .hud-stamina .fill { position: absolute; inset: 0; width: var(--hud-stam, 100%) !important; height: 100%;
    background: linear-gradient(rgba(127, 224, 210, .5), rgba(31, 122, 110, .5)) !important; transition: width .35s var(--oh-ease); }
  .hud-bar-panel .hud-stamina .hud-stamina-clock { position: absolute !important; inset: 0 !important; width: auto; height: auto; display: grid; place-items: center; padding: 0;
    font: 700 8px/1 var(--oh-num); color: #d9fff8; text-shadow: 0 1px 2px #000; z-index: 2; }
  .hud-bar-panel .hud-stamina-buy { position: fixed; right: 2px; bottom: 84px; left: auto; top: auto; width: 13px; height: 13px; font-size: 9px; z-index: 24; }
  .hud-bar-panel .hud-capacity { display: none !important; }

  /* fileira única de 10 slots no centro do rodapé */
  .hud-slots { position: fixed; z-index: 21; left: 50%; transform: translateX(-50%); top: auto; bottom: 8px;
    display: grid !important; grid-template-columns: repeat(10, 36px); gap: 4px; width: max-content; max-width: none !important;
    height: auto !important; max-height: none !important; overflow: visible !important; margin: 0; padding: 0; }
  .hud-slot { position: relative; width: 36px !important; height: 36px !important; box-sizing: border-box; border: 1px solid transparent;
    background: var(--frame-slot) center / 100% 100% no-repeat, rgba(22, 22, 30, .85); border-radius: 5px; }
  .hud-slot:nth-child(n + 11) { display: none; }
  .hud-slot:active { transform: scale(.94); }
  .hud-slot.assigned.missing-item { box-shadow: inset 0 0 0 1px rgba(247, 118, 142, .9); }
  .hud-slot:not(.assigned) { color: var(--oh-line-2); font: 500 13px/1 var(--oh-ui); }
  .hud-slot .action-item-icon { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); image-rendering: pixelated; }
  .hud-slot .action-spell-icon { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 4px; }
  .hud-slot .slot-count { top: auto; left: auto; right: 3px; bottom: 2px; font: 700 8px/1 var(--oh-num); color: #fff; }
  .hud-slot .slot-missing { top: -4px; right: -4px; width: 12px; height: 12px; box-shadow: 0 0 0 1px #000; animation: oh-alert 1.4s ease-in-out infinite; }

  /* bolsa colada na fileira */
  .hud-bar-panel > .hud-bag-buttons { position: fixed; z-index: 21; left: calc(50% + 202px); bottom: 8px; top: auto;
    display: grid; grid-auto-flow: column; gap: 4px; }
  .hud-bar-panel .hud-bag-button { width: 36px; height: 36px; border-radius: 5px; border: 0; background: var(--frame-icon-button) center / 100% 100% no-repeat, rgba(22, 22, 30, .9); }
  .hud-bar-panel .hud-bag-button::after { content: none; }
  .hud-bar-panel .hud-bag-button.open { box-shadow: inset 0 0 0 1px rgba(224, 175, 104, .8); }
  .hud-bar-panel .hud-bag-button canvas { image-rendering: pixelated; }

  /* rail do rodapé vive no cartão Combate (hud.js); o CAÇAR e a mira ficam à direita */
  #ohm-cta { position: fixed; right: calc(10px + env(safe-area-inset-right)); bottom: 116px; height: 42px; min-width: 0; padding: 0 16px;
    border-radius: 21px; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; z-index: 24; box-sizing: border-box;
    background: linear-gradient(#f3d383, #cfa93a 55%, #a67a22); border: 1px solid #5a4a2d;
    font: 800 11px/1 var(--oh-ui); letter-spacing: .11em; text-transform: uppercase; color: #1a1408; text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 10px rgba(0, 0, 0, .6), 0 0 16px rgba(224, 175, 104, .38); }
  #ohm-cta img { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
  #ohm-cta:active { transform: scale(.96); filter: brightness(.95); }
  #ohm-comb-btn { position: fixed; z-index: 24; left: auto; right: calc(10px + env(safe-area-inset-right)); bottom: 166px; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; background: var(--oh-stone); border: 1px solid rgba(255, 255, 255, .08); border-top-color: var(--oh-gline);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
  #ohm-comb-btn img { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
  #ohm-comb-btn:active { transform: scale(.94); }
  #ohm-combat { position: fixed; z-index: 41; right: 8px; left: auto; transform: none; bottom: 56px; width: min(300px, calc(100vw - 100px)); box-sizing: border-box;
    padding: 12px; border-radius: 8px; background: var(--oh-glass); border: 1px solid rgba(255, 255, 255, .08); border-top-color: var(--oh-gline);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
  #ohm-combat .oc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  #ohm-combat .oc-head b { font: 600 11px/1 var(--oh-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--oh-gold-3); }
  #ohm-combat .oc-head button { width: 34px; height: 34px; margin: -8px -8px -8px 0; border: 0; background: none; color: var(--oh-text-2); font: 500 16px/1 var(--oh-ui); cursor: pointer; }
  #ohm-combat .hud-preset-rail { display: grid !important; grid-template-columns: 1fr; gap: 6px; padding: 0; margin: 0; background: none; border: 0; }
  #ohm-combat .hud-preset-label { display: block !important; margin-top: 4px; font: 600 9px/1 var(--oh-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--oh-text-3); }
  #ohm-combat .hud-preset-label:first-child { margin-top: 0; }
  #ohm-combat select { display: block; position: static !important; inset: auto !important; transform: none !important; width: 100% !important; min-height: 36px; box-sizing: border-box; margin: 0; }
  #ohm-combat .hud-rail-controls { margin-top: 6px; }
  #ohm-combat .hud-rail-controls { display: flex; flex-wrap: wrap; gap: 8px; }
  #ohm-combat .hud-rail-controls button, #ohm-combat .hud-distance-value { min-height: 36px; min-width: 36px; }

  /* chat pílula à esquerda; loot e analisador-mini pendurados no topo; analisador aberto = cartão central */
  .chat-panel { position: fixed !important; left: 86px !important; right: auto !important; width: 200px !important;
    top: auto !important; bottom: 58px !important; height: 34px !important; transform: none !important; z-index: 26; border-radius: 17px;
    background: var(--oh-stone) !important; border: 1px solid rgba(255, 255, 255, .08); border-top-color: var(--oh-gline);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45); overflow: hidden; }
  .chat-panel.folded { background: var(--oh-stone) !important; }
  .chat-panel.folded::before { content: "Chat"; position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center;
    font: 600 8px/1 var(--oh-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--oh-gold-3); pointer-events: none; z-index: 2; }
  .chat-panel.folded .chat-line { padding-left: 46px; display: flex; align-items: center; height: 32px; font: 500 10px/1.2 var(--oh-ui); color: var(--oh-text-2); }
  .chat-panel:not(.folded) { left: 50% !important; transform: translateX(-50%) !important; width: min(480px, calc(100vw - 32px)) !important;
    top: 42px !important; bottom: 56px !important; height: auto !important; border-radius: 8px; z-index: 42; background: var(--oh-glass) !important; }
  .chat-panel .resize-handle { display: none !important; }
  .loot-window { position: fixed !important; left: 8px !important; right: auto !important; top: 72px !important; bottom: auto !important;
    width: 184px !important; height: auto !important; max-height: 156px; overflow: hidden; transform: none !important; z-index: 27; }
  .loot-window .loot-grid { max-height: 86px; overflow-y: auto; }
  .loot-window > header { min-height: 28px; padding: 4px 8px; }
  .loot-window > header span { font-size: 10px; }
  .loot-window .loot-overflow, .loot-window footer { font-size: 9px; padding: 3px 8px; }
  .hunt-analyzer-window { position: fixed !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
    top: 42px !important; bottom: 56px !important; width: min(480px, calc(100vw - 32px)) !important; height: auto !important; max-height: none !important; z-index: 28; }
  .hunt-analyzer-window .analyzer-body { overflow-y: auto; }
  .hunt-analyzer-window.minimized { left: auto !important; right: 8px !important; top: 72px !important; bottom: auto !important; transform: none !important;
    width: 200px !important; height: auto !important; box-sizing: border-box; }
  .hunt-analyzer-window.minimized header { min-height: 28px; padding: 4px 8px; }
  .hunt-analyzer-window.minimized header span { font-size: 10px; }
}

/* ============================================================================================
   PALETA — gerado de styles-3OMAGUEN.css: tudo que o cliente pinta com o azul #7aa2f7 (texto,
   bordas, preenchimentos) passa para o dourado do tema. Regenerar: hud-lab/src… gen na NOTES-hud.
   ============================================================================================ */
.action-editor header strong,
.action-slot-popup strong,
.alerts-bot-link,
.alerts-code,
.alerts-web-link,
.analyzer-locked-cell b,
.analyzer-tab.active,
.analyzer-timer-value,
.analyzer-wide:hover,
.arena-pip,
.bestiary-tracker header,
.bestiary-tracker-add:hover,
.bestiary-tracker-body:focus-visible .bestiary-tracker-label,
.bestiary-tracker-body:hover:not(:disabled) .bestiary-tracker-label,
.bestiary-tracker-row:hover .bestiary-tracker-label,
.blessings-protection em,
.blessings-window #blessings-title,
.chat-compose button,
.chat-filter-button.open,
.chat-panel header,
.coin-terms a,
.coin-terms-links button,
.context-menu strong,
.cyc-coming-soon strong,
.cyc-entry-count,
.cyc-entry-ident small,
.cyc-item-ident small,
.cyc-loot-band[data-band="2"] .cyc-loot-band-name i,
.cyc-monster-class,
.cyc-note-tag.improved,
.cyclopedia-window header>span:first-child,
.daily-reward-crest,
.daily-reward-expiry svg,
.daily-reward-window h2,
.debug-window header,
.depot-window header,
.expedition-tracker header,
.finder-card.picked .hunt-entry-meta,
.finder-count,
.finder-info,
.friends-window header,
.guild-back:hover,
.guild-board-row.mine .guild-board-name,
.guild-card-name,
.guild-rank.leader,
.guild-window header,
.highscores-window header>span:first-child,
.hs-row.mine .hs-col-name,
.hs-soon strong,
.hunt-analyzer-window header,
.hunt-bosses .boss-section h3,
.hunt-detail h3,
.hunt-soon strong,
.hunt-tier.selected strong,
.hunt-training .train-mode h3,
.hunt-window #hunt-title,
.hunt-window .hunt-help-toggle.active,
.imbuement-window #imbue-title,
.inventory-window header,
.item-tooltip strong,
.loot-window header,
.market-back,
.market-book-create.active,
.market-category-option.selected,
.market-create h4,
.market-list-filter label:has(input:checked),
.market-offers-block h4,
.market-offers-block>.market-accept>.market-accept-lead,
.market-offers-block>.market-create h4,
.market-tab.active,
.market-take.active,
.market-window #market-title,
.nav-drawer-head span,
.options-menu .options-title,
.party-match-vocation,
.party-window header,
.prey-window #prey-title,
.promotion-note .daily-reward-note-icon,
.promotion-to,
.quick-sell-window #quick-sell-title,
.report-window header,
.sandbox-item-tabs button[aria-pressed=true],
.sandbox-section h3,
.sandbox-tabs button[aria-selected=true],
.sandbox-window header,
.sheet-hero-sub,
.sheet-panel h4,
.shop-detail-name,
.shop-window #shop-title,
.slot-count.slot-charges,
.solo-hunt-confirm-window>header strong,
.spell-unlock-info strong,
.store-category-history,
.store-window #store-title,
.system-toast.private-toast,
.ticket-field>span,
.ticket-where-label,
.ticket-window header,
.trade-session-window header,
.trade-window #trade-title,
.vocation-card strong,
header a {
  color: var(--oh-gold-3) !important;
}

#blessings-buy-all:active:not(:disabled),
#blessings-buy-all:hover:not(:disabled),
#market-category-button:active,
#market-category-button:hover,
#market-category-button[aria-expanded=true],
#market-search:focus,
#sandbox-spawn:active:not(:disabled),
#sandbox-spawn:hover:not(:disabled),
.action-editor .action-add-condition:active:not(:disabled),
.action-editor .action-add-condition:hover:not(:disabled),
.action-editor .action-choice.selected,
.action-editor .action-choice:focus-visible,
.action-editor .action-choice:hover,
.action-editor .action-detail-tabs .tab.active,
.action-editor .action-remove:active:not(:disabled),
.action-editor .action-remove:hover:not(:disabled),
.action-editor .action-save:active:not(:disabled),
.action-editor .action-save:hover:not(:disabled),
.action-editor .action-tabs .tab.active,
.action-ignore-search:focus,
.ammo-picker .ammo-option.selected,
.ammo-picker .ammo-option:hover:not(:disabled),
.ammo-picker-dismiss:active,
.ammo-picker-dismiss:hover,
.analyzer-locked-buy,
.analyzer-reset-confirm .analyzer-reset-no:hover,
.arena-entry.selected .arena-pip,
.bestiary-tracker-art:focus-visible canvas,
.bestiary-tracker-art:hover:not(:disabled) canvas,
.bestiary-tracker-option.selected,
.bestiary-tracker-search:focus,
.blessing-row button:active:not(:disabled),
.blessing-row button:hover:not(:disabled),
.blessings-protection.free,
.char-main-tabs button.active,
.char-main-tabs button:hover,
.character-filters .character-search:focus,
.character-filters select:focus,
.character-list article.selected,
.character-list article:hover,
.chat-compose button:active,
.chat-compose button:hover,
.chat-compose input:focus,
.coin-cancel:hover:not(:disabled),
.cyc-back:active,
.cyc-back:hover,
.cyc-cat-search:focus,
.cyc-detach:hover,
.cyc-done:active,
.cyc-done:hover,
.cyc-drop-source:hover,
.cyc-entry-card:hover,
.cyc-entry-row:hover,
.cyc-item-card:hover,
.cyc-item-row:hover,
.cyc-loot-chip:hover,
.cyc-page-number.active,
.cyc-pager button:hover,
.cyc-search:focus,
.cyc-sort-select:focus,
.cyc-tab.active,
.cyc-tab:hover,
.cyc-track:hover,
.cyc-view-toggle button:hover,
.daily-reward-card button:active:not(:disabled),
.daily-reward-card button:hover:not(:disabled),
.daily-reward-card.selected,
.daily-reward-card:hover,
.daily-reward-claim,
.daily-reward-close:hover,
.daily-reward-later:hover,
.depot-category.active,
.depot-category:hover,
.depot-search input:focus,
.depot-window .slot.drag-over,
.expedition-tracker-slot:focus-visible .expedition-tracker-portrait,
.expedition-tracker-slot:hover:not(:disabled) .expedition-tracker-portrait,
.finder-card.picked .finder-card-main,
.finder-card.picked .finder-check,
.finder-size.selected,
.finder-size:hover:not(:disabled),
.finder-tier.selected,
.finder-tier:hover:not(:disabled),
.friends-dismiss:active,
.friends-dismiss:hover,
.friends-search button:active:not(:disabled),
.friends-search button:hover,
.friends-search button:hover:not(:disabled),
.friends-search-field:focus-within,
.guild-create-form button:hover,
.guild-create-form input:focus,
.guild-detach:hover,
.guild-field input:focus,
.guild-footer-actions button:active:not(:disabled),
.guild-footer-actions button:hover,
.guild-footer-actions button:hover:not(:disabled),
.guild-found-submit:hover,
.guild-invite-actions button:active:not(:disabled),
.guild-invite-actions button:hover,
.guild-invite-actions button:hover:not(:disabled),
.guild-invite-form button:hover,
.guild-invite-form input:focus,
.guild-pager button:hover:not(:disabled),
.guild-rename-form button:hover,
.guild-rename-form input:focus,
.guild-roster-invite:active:not(:disabled),
.guild-roster-invite:hover:not(:disabled),
.guild-side-detach:hover,
.guild-species-card:focus-visible .guild-species-hunts,
.guild-species-card:focus-visible .guild-species-preview,
.guild-species-card:hover:not(:disabled) .guild-species-hunts,
.guild-species-card:hover:not(:disabled) .guild-species-preview,
.guild-subtab.active,
.guild-tab.active,
.guild-tab:hover:not(:disabled),
.guild-window form button:active:not(:disabled),
.guild-window form button:hover:not(:disabled),
.hs-board.active,
.hs-done:hover,
.hs-filter.active,
.hs-filter:hover,
.hs-pager button:hover:not(:disabled),
.hs-tab.active,
.hs-tab:hover,
.hunt-entry.selected,
.hunt-entry:hover,
.hunt-loot-entry:has(.hunt-loot-auto:focus-visible),
.hunt-monster:focus-visible .hunt-monster-details,
.hunt-monster:focus-visible .hunt-monster-preview,
.hunt-monster:hover .hunt-monster-details,
.hunt-monster:hover .hunt-monster-preview,
.hunt-search:focus-within,
.hunt-tab.active,
.hunt-tab:hover,
.hunt-tier.selected,
.hunt-tier:hover,
.hunt-training .train-skill.active,
.hunt-training .train-skill:hover,
.hunt-training .train-start:hover:not(:disabled),
.hunt-window .hunt-help-toggle.active,
.hunt-window .hunt-help-toggle:hover,
.hunt-window footer button:active:not(:disabled),
.hunt-window footer button:hover:not(:disabled),
.imbue-apply:active:not(:disabled),
.imbue-apply:hover:not(:disabled),
.imbue-line.selected .imbue-icon,
.imbue-protect input:checked,
.imbue-protect.on,
.imbue-protect:hover,
.imbue-remove:hover:not(:disabled),
.imbue-slot.selected,
.imbue-slot.selected .imbue-slot-mark,
.imbue-slot:hover,
.imbue-slot:hover .imbue-slot-mark,
.inventory-window .slot.drag-over,
.loot-window .slot:hover,
.market-book-create.active,
.market-book-create:hover:not(:disabled),
.market-footer button:active:not(:disabled),
.market-footer button:hover,
.market-footer button:hover:not(:disabled),
.market-item.selected .market-icon,
.market-list-filter label:has(input:focus-visible),
.market-primary:active:not(:disabled),
.market-primary:hover:not(:disabled),
.market-tab.active,
.market-take.active,
.market-take:hover:not(:disabled),
.move-amount-buttons button:active:not(:disabled),
.move-amount-buttons button:hover,
.move-amount-buttons button:hover:not(:disabled),
.nav-icon:hover,
.nav-labeled:hover,
.nav-menu-toggle.open,
.nav-menu-toggle:hover,
.nav-named:hover,
.num-field-input:focus,
.num-field-max:hover:not(:disabled),
.num-field-step:hover:not(:disabled),
.options-entries button:active,
.options-entries button:hover,
.outfit-card.selected,
.outfit-card:hover,
.outfit-confirm-no:active,
.outfit-confirm-no:hover,
.outfit-filter:hover,
.outfit-gender label:hover,
.outfit-palette .swatch.selected,
.outfit-parts button.active,
.outfit-rotate:hover,
.outfit-save:active:not(:disabled),
.outfit-save:hover:not(:disabled),
.outfit-tabs button.active,
.party-invite button:active:not(:disabled),
.party-invite button:hover,
.party-invite button:hover:not(:disabled),
.party-window footer button:active:not(:disabled),
.party-window footer button:hover,
.party-window footer button:hover:not(:disabled),
.prey-action-btn:active:not(:disabled),
.prey-action-btn:hover:not(:disabled),
.prey-candidate.selected,
.prey-candidate:hover,
.prey-filter:focus,
.prey-footer button:active:not(:disabled),
.prey-footer button:hover,
.prey-footer button:hover:not(:disabled),
.quick-sell-confirm:hover:not(:disabled),
.quick-sell-row.marked,
.report-line.active,
.review-comment textarea:focus,
.review-platform:focus-visible,
.review-platform:hover,
.review-star:focus-visible,
.sandbox-equipment-slot:hover,
.sandbox-item-tabs button[aria-pressed=true],
.sandbox-tabs button[aria-selected=true],
.sandbox-window footer button:active:not(:disabled),
.sandbox-window footer button:hover:not(:disabled),
.shop-amount-input:focus,
.shop-buy:active:not(:disabled),
.shop-buy:hover:not(:disabled),
.shop-category.active,
.shop-category:hover,
.shop-offer.selected,
.shop-offer:focus-visible,
.shop-offer:hover,
.shop-qty-step:hover:not(:disabled),
.shop-search input:focus,
.shop-window .tab.active,
.solo-hunt-confirm-window>footer button:active:not(:disabled),
.solo-hunt-confirm-window>footer button:hover,
.solo-hunt-confirm-window>footer button:hover:not(:disabled),
.spell-unlock-card button:active:not(:disabled),
.spell-unlock-card button:hover:not(:disabled),
.spell-unlock-close:active,
.spell-unlock-close:hover,
.store-buy:active:not(:disabled),
.store-buy:hover:not(:disabled),
.store-category-history .store-category-mark,
.store-category-history .store-category-mark:before,
.store-category-history.active,
.store-category-history:hover,
.store-category.active,
.store-category.active .store-category-mark,
.store-checkout-cancel:hover,
.store-footer button:active:not(:disabled),
.store-footer button:hover,
.store-footer button:hover:not(:disabled),
.store-hero-action:active:not(:disabled),
.store-hero-action:hover:not(:disabled),
.store-history-pager button:hover:not(:disabled),
.store-offer.selected,
.store-offer:hover,
.store-qty-input:focus,
.store-qty-step:hover:not(:disabled),
.text-prompt-buttons button:active:not(:disabled),
.text-prompt-buttons button:hover:not(:disabled),
.text-prompt-input:focus,
.ticket-field input:focus,
.ticket-field textarea:focus,
.ticket-kind:hover,
.ticket-platform:hover,
.ticket-refresh:active:not(:disabled),
.ticket-refresh:hover:not(:disabled),
.ticket-send:active:not(:disabled),
.ticket-send:hover:not(:disabled),
.ticket-tab:hover,
.touch-drag-ghost,
.touch-lifted,
.trade-session-actions button:hover:not(:disabled),
.trade-tab.active,
.trade-tab:hover:not(:disabled),
.vocation-card button:active:not(:disabled),
.vocation-card button:hover:not(:disabled),
.vocation-card.selected,
.vocation-card:hover,
.vocation-confirm,
.vocation-wip-actions .vocation-wip-back,
button.guild-board-details:active,
button.guild-board-details:hover {
  border-color: rgba(224, 175, 104, .7) !important; outline-color: rgba(224, 175, 104, .7) !important;
}

.ammo-picker .ammo-option.selected,
.drop-choice-menu button:focus-visible,
.hs-row.mine,
.hunt-loot-entry:has(.hunt-loot-auto:focus-visible),
.hunt-tier.selected,
.imbue-line.selected,
.market-item.selected,
.market-table tbody tr.selected,
.shop-offer.selected,
.vocation-card.selected {
  box-shadow: 0 0 0 1px rgba(224, 175, 104, .55) !important;
}

.ammo-option-tag,
.bestiary-tracker-fill,
.equip-flyout-satchel:after,
.expedition-tracker-fill,
.finder-card.picked .finder-check,
.guild-expedition-fill,
.guild-side-task-bar>div,
.imbue-protect input:checked,
.inventory-resize.dragging:after,
.inventory-resize:focus-visible:after,
.inventory-resize:hover:after,
.inventory-split.dragging:after,
.inventory-split:focus-visible:after,
.inventory-split:hover:after,
.options-language-choices button.active,
.sandbox-resize-handle:focus-visible:after,
.sandbox-resize-handle:hover:after,
.sandbox-window.is-resizing .sandbox-resize-handle:after,
.slot-duration.slot-charge span {
  background-color: var(--oh-gold-2) !important; background-image: none !important;
}

.cyc-element-bar i,
.cyc-entry-bar i,
.cyc-progress-bar i,
.daily-reward-card.selected:after,
.daily-reward-crest:before,
.invite-timebar {
  background: linear-gradient(90deg, #8a6a24, var(--oh-gold-3)) !important;
}

#ui input[type="checkbox"], #ui input[type="radio"], #game input[type="checkbox"], #game input[type="radio"] { accent-color: var(--oh-gold); }

#ui progress, #game progress { accent-color: var(--oh-gold); }

/* ============================================================================================
   Fonte maior (pedido: +2px para ler com facilidade): escala rem do cliente ×1.125 no desktop,
   multiplicando a escala escolhida pelo jogador nas opções (--ui-font-scale)
   ============================================================================================ */
@media (min-width: 1001px) {
  html { font-size: calc(100% * var(--ui-font-scale, 1) * 1.125) !important; }
}

/* ============================================================================================
   PASSO 8 (02/09) — Portal: login, cadastro e seleção de personagem no tema do HUD.
   Mesmo vocabulário das janelas: vidro escuro, filete dourado, títulos em serifa, moldura 9-slice
   (que já vem do cliente via .account-card/.character-card::after). O CSS do componente Gate é
   scoped (_ngcontent) — onde ele pinta azul, precisa de !important. Telas inteiras, sem media
   query de largura: valem no celular também.
   ============================================================================================ */

/* ---- fundo: mapa (canvas do cliente) + scrim com respiração dourada, lenta ---- */
.world-scrim {
  background:
    radial-gradient(900px 640px at 50% 46%, rgba(10, 11, 16, .82), rgba(10, 11, 16, .48) 58%, rgba(10, 11, 16, .74)),
    linear-gradient(rgba(10, 11, 16, .28), rgba(10, 11, 16, .28));
}
.world-scrim::before, .world-scrim::after { content: ""; position: absolute; inset: -20%; pointer-events: none; }
.world-scrim::before {   /* brasa quente varrendo por baixo */
  background: radial-gradient(46% 38% at 30% 78%, rgba(201, 162, 39, .10), transparent 70%);
}
.world-scrim::after {    /* luar frio no alto, em contraponto */
  background: radial-gradient(42% 34% at 74% 16%, rgba(122, 162, 247, .07), transparent 70%);
}

/* ---- entrada: cartão sobe do vapor, conteúdo em cascata ---- */
.gate-stage .world-card, .account-page .world-card { animation: oh-portal-card .55s var(--oh-ease) both; }
.gate-card > *, .character-card > * { animation: oh-portal-rise .5s var(--oh-ease) both; }
.gate-card > :nth-child(1), .character-card > :nth-child(1) { animation-delay: .05s; }
.gate-card > :nth-child(2), .character-card > :nth-child(2) { animation-delay: .1s; }
.gate-card > :nth-child(3), .character-card > :nth-child(3) { animation-delay: .15s; }
.gate-card > :nth-child(4), .character-card > :nth-child(4) { animation-delay: .2s; }
.gate-card > :nth-child(5), .character-card > :nth-child(5) { animation-delay: .25s; }
.gate-card > :nth-child(6), .character-card > :nth-child(6) { animation-delay: .3s; }
.gate-card > :nth-child(n+7), .character-card > :nth-child(n+7) { animation-delay: .35s; }
@keyframes oh-portal-card {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes oh-portal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---- o cartão em si: vidro do tema + filete dourado no topo ---- */
.account-card, .character-card {
  border-color: #2c3149; border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(201, 162, 39, .05), transparent 90px),
    var(--oh-glass);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .72), 0 0 0 1px rgba(201, 162, 39, .07);
}
.account-card::before, .character-card::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; z-index: 31; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--oh-gline), transparent);
}

/* ---- tipografia: títulos em serifa dourada, olho-de-página em ouro velho ---- */
.account-card h1, .character-card h1 {
  font-family: var(--oh-num); font-weight: 600; letter-spacing: .015em; color: var(--oh-gold-3);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 22px rgba(224, 175, 104, .16);
}
.account-eyebrow { color: var(--oh-gold-2); }
.character-head small, .account-address { color: var(--oh-text-3); }

/* ---- gate (login/cadastro/senha): eixo central, logo respirando ---- */
.gate-logo {
  animation: oh-portal-rise .5s var(--oh-ease) both, oh-logo-idle 7s ease-in-out .6s infinite;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(201, 162, 39, .18));
}
@keyframes oh-logo-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.gate-card h1 { text-align: center; margin-bottom: .35rem; font-size: 1.6rem;
  background: linear-gradient(100deg, var(--oh-gold-3) 42%, #f6e3b4 50%, var(--oh-gold-3) 58%) 100% 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: oh-portal-rise .5s var(--oh-ease) both, oh-title-sheen 7s ease-in-out 1.4s infinite; }
@keyframes oh-title-sheen {
  0%, 76% { background-position: 100% 0; }
  92%, 100% { background-position: 0 0; }
}
.gate-tagline { text-align: center; margin: 0 0 1.4rem !important; color: var(--oh-text-2) !important; }
.gate-card > small { display: block; margin: .2rem 0 0; color: var(--oh-text-3); font-size: .78rem; }

/* ---- campos: rótulo pequeno em caixa alta, campo de pedra escura, foco dourado ---- */
.account-card label, .create-character label {
  gap: .45rem; color: var(--oh-text-3); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
}
.account-card input, .create-character input {
  padding: .7rem .8rem; border: 1px solid #2c3149; border-radius: 6px;
  background: rgba(11, 12, 18, .92); color: var(--oh-bright);
  font: 1rem var(--oh-ui); text-transform: none; letter-spacing: normal;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
  transition: border-color .18s ease, box-shadow .22s ease, background-color .18s ease;
}
.account-card input:hover, .create-character input:hover { border-color: #3b4261; }
.account-card input:focus, .create-character input:focus {
  border-color: var(--oh-gold); background: rgba(13, 14, 20, .98);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4), 0 0 0 3px rgba(224, 175, 104, .12), 0 0 20px rgba(224, 175, 104, .07);
}

/* ---- botões: primário aceso em ouro com leve levantar; textos-link viram dourado ---- */
.account-card button, .character-card button {
  font-family: var(--oh-ui); letter-spacing: .02em;
  transition: background-color .2s ease, border-color .14s ease, transform .16s var(--oh-ease), box-shadow .2s ease;
}
.account-card button:not(.secondary):not(.gate-swap):not(.account-address-change),
.character-card button:not(.secondary):not(.gate-swap):not(.account-address-change) { color: var(--oh-gold-3); font-weight: 700; }
.account-card button:hover:not(:disabled):not(.gate-swap):not(.account-address-change),
.character-card button:hover:not(:disabled):not(.gate-swap):not(.account-address-change) {
  border-color: var(--oh-gold); transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .45), 0 0 16px rgba(224, 175, 104, .14);
}
.account-card button:active:not(:disabled):not(.gate-swap):not(.account-address-change),
.character-card button:active:not(:disabled):not(.gate-swap):not(.account-address-change) {
  background-color: #4a3b1d; border-color: var(--oh-gold); color: #ffe9c4; transform: translateY(0) scale(.985); box-shadow: none; transition: none;
}
.gate-card .gate-swap, .account-link .gate-swap { color: var(--oh-gold) !important; }
.gate-card .gate-swap:hover, .account-link .gate-swap:hover { color: var(--oh-gold-3) !important; }
.account-link a { color: var(--oh-gold); }
.account-link a:hover, .account-link.muted a:hover { color: var(--oh-gold-3); }
.character-card .account-address-change, .character-card .verify-notice button { color: var(--oh-gold); }
.character-card .account-address-change:hover, .character-card .verify-notice button:hover:not(:disabled) { color: var(--oh-gold-3); }
.gate-or::before, .gate-or::after { background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .4)) !important; }
.gate-or::after { background: linear-gradient(90deg, rgba(201, 162, 39, .4), transparent) !important; }

/* ---- seletor de idioma: pílula de vidro, ativa em ouro ---- */
.lang-switch {
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(13, 14, 20, .82); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(4px);
}
.lang-switch button {
  margin: 0 !important; padding: .34rem .8rem !important; border: 0 !important; border-radius: 999px !important;
  background: none !important; box-shadow: none !important;
  font: 600 11px/1 var(--oh-ui) !important; letter-spacing: .06em; color: var(--oh-text-3) !important;
  transition: color .16s ease, background-color .16s ease;
}
.lang-switch button::after { content: none !important; }
.lang-switch button:hover:not(.active) { color: var(--oh-text) !important; }
.lang-switch button.active {
  background: linear-gradient(180deg, rgba(224, 175, 104, .26), rgba(224, 175, 104, .1)) !important;
  color: var(--oh-gold-3) !important; box-shadow: inset 0 0 0 1px rgba(224, 175, 104, .35) !important;
}

/* ---- seleção de personagem: cabeçalho com hierarquia, fileira de heróis com vida ---- */
.character-card { padding: 1.9rem 1.9rem 1.6rem; }
.character-card h1 { font-size: 1.55rem; }
.character-head { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--oh-gline), transparent 75%) 1; }
.character-head .account-address { font-size: .82rem; }
.character-list { gap: .7rem; margin: 1.35rem 0; }
.character-list article {
  position: relative; padding: .9rem 1rem; border-radius: 6px; border: 1px solid #2c3149;
  background: linear-gradient(180deg, rgba(31, 35, 53, .85), rgba(24, 25, 36, .85));
  transition: border-color .18s ease, background-color .18s ease, box-shadow .22s ease;
  animation: oh-portal-rise .45s var(--oh-ease) both;
}
.character-list article:nth-child(1) { animation-delay: .22s; }
.character-list article:nth-child(2) { animation-delay: .28s; }
.character-list article:nth-child(3) { animation-delay: .34s; }
.character-list article:nth-child(n+4) { animation-delay: .4s; }
.character-list article:hover { border-color: rgba(224, 175, 104, .45); box-shadow: 0 8px 22px rgba(0, 0, 0, .38), 0 0 0 1px rgba(224, 175, 104, .1); }
.character-list article.selected {
  border-color: rgba(224, 175, 104, .7); background: linear-gradient(180deg, rgba(38, 40, 59, .92), rgba(28, 29, 42, .92));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .42), 0 0 0 1px rgba(224, 175, 104, .16), inset 0 0 34px rgba(224, 175, 104, .05);
}
.character-list article.selected .character-meta strong { color: var(--oh-gold-3); }
.character-portrait { width: 72px; height: 72px; border-radius: 6px; border-color: #2c3149; background: radial-gradient(70% 70% at 50% 38%, #1b1d2b, #101118); overflow: hidden; }
.character-list article.selected .character-portrait { border-color: rgba(224, 175, 104, .5); box-shadow: inset 0 0 16px rgba(224, 175, 104, .12); }
.character-portrait::after {   /* lâmina de luz cruzando o retrato do escolhido */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(246, 227, 180, .16), transparent);
}
.character-list article.selected .character-portrait::after { animation: oh-portrait-sheen 3.6s var(--oh-ease) .8s infinite; }
@keyframes oh-portrait-sheen {
  0% { transform: translateX(-120%) skewX(-18deg); }
  34%, 100% { transform: translateX(130%) skewX(-18deg); }
}
.character-portrait { position: relative; }
.character-meta strong { font-family: var(--oh-num); font-size: 1.12rem; letter-spacing: .01em; transition: color .18s ease; }
.character-meta span { font-size: .86rem; }
.character-list article button { padding: .55rem 1.35rem; }
.character-list .empty { border-color: rgba(201, 162, 39, .25); color: var(--oh-text-3); }

/* ---- criar personagem: forja no rodapé ---- */
.create-character { border-top: 1px solid transparent; border-image: linear-gradient(90deg, var(--oh-gline), transparent 75%) 1; padding-top: 1.2rem; }

/* ---- avisos: mesmos tons das janelas do jogo ---- */
.account-error {
  border: 1px solid rgba(247, 118, 142, .45); border-radius: 6px; background: rgba(247, 118, 142, .08);
  color: #f3a0b0; font-size: .9rem; line-height: 1.5; padding: .75rem .85rem;
}
.verify-notice { border-color: rgba(201, 162, 39, .35); border-radius: 6px; background: rgba(224, 175, 104, .07); color: var(--oh-gold-3); }

/* ---- sossego para quem pediu menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  .gate-stage .world-card, .account-page .world-card, .gate-card > *, .character-card > *, .gate-logo, .gate-card h1,
  .character-list article, .character-list article.selected .character-portrait::after { animation: none !important; }
}

/* ---- afinações do passo 8 (medidas na tela real) ---- */
/* identidade à esquerda, comandos empilhados à direita — sem quebrar para baixo do título */
.character-head { display: flex; justify-content: space-between; }
.character-head-actions { flex-direction: column; align-items: flex-end; gap: .55rem; }
.character-card .character-head-actions > button.secondary { padding: .42rem .85rem; font-size: .85rem; color: var(--oh-text-2); }
/* o retrato ocupa o quadro inteiro (o canvas vem 64px e o sprite fica perdido) */
.character-portrait canvas { width: 100%; height: 100%; }
/* Excluir some no fundo até precisarem dele */
.character-card button.character-delete { border-color: transparent; background: transparent; color: var(--oh-text-3); }
.character-card button.character-delete::after { opacity: .45; }
.character-card button.character-delete:hover:not(:disabled)::after { opacity: 1; }
/* zoom no retrato: o canvas da vocação tem margem transparente ao redor do sprite */
.character-portrait canvas { width: 175%; height: 175%; margin: -37.5%; }
/* autofill do navegador: mantém o campo na pedra escura em vez do azul-clarinho do Chrome */
.account-card input:-webkit-autofill, .create-character input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #0d0e14 !important;
  -webkit-text-fill-color: var(--oh-bright) !important;
  caret-color: var(--oh-bright); border-color: #3b4261; transition: background-color 99999s;
}

/* ---- tutorial (04/09): espelhos visíveis dos botões que o guia destaca (ver navProxy no hud.js) ----
   .oh-nav-icon = botão-ícone no fim da identidade (no lugar do "›"); .oh-nav-overlay = camada invisível
   que cobre o cartão Caçar (desktop), o botão redondo e o badge de nível (mobile). Os botões reais seguem
   escondidos no #top-nav (regra "#top-nav #nav-character"). */
.oh-nav-proxy { -webkit-appearance: none; appearance: none; font: inherit; }
.oh-nav-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #0d0e14; box-shadow: 0 0 0 1px #0d0e14, 0 0 0 2px var(--oh-gold-dark); transition: box-shadow .16s, transform .16s var(--oh-ease); }
.oh-nav-icon img { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
#ombria-ident:hover .oh-nav-icon, .oh-nav-icon:hover, .oh-nav-icon:focus-visible { outline: none; transform: translateX(2px); box-shadow: 0 0 0 1px #0d0e14, 0 0 0 2px var(--oh-gold), 0 0 10px rgba(224, 175, 104, .5); }
.oh-nav-icon[hidden] { display: none; }
.oh-nav-overlay { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; opacity: 0; cursor: pointer; z-index: 3; display: block; }
.oh-nav-overlay[hidden] { display: none; }
.oh-nav-overlay:disabled { cursor: default; }
/* #ohm-cta (fixed) e .hud-level (absolute) já são containing block da .oh-nav-overlay em todos os
   layouts — NÃO forçar position:relative neles aqui: mesma especificidade e mais tarde na cascata,
   vencia as regras dos media queries e desancorava a placa CAÇAR e a medalha de nível (04/09). */

/* Refino no shop nativo: lote limitado pelo inventário recebido pelo sidecar. */
.shop-window .oh-refine-max { flex: 0 0 auto; width: auto; padding-inline: 8px; font-size: .72rem; }
.shop-window .oh-refine .shop-detail-eyebrow { color: var(--oh-gold, #e0af68); }
.shop-window .oh-refine-processing { opacity: .8; }
.shop-window .oh-refine-processing .shop-buy { cursor: wait; }
/* Caçadas (23/09): o cliente 21/09 troca a lista PELO detalhe; esta coluna é do sidecar (hud.js huntPainel)
   e devolve a tela do 14/09 — lista à esquerda, detalhe e loot à direita, troca de caçada em um clique. */
.hunt-window.hunt-selection-view .hunt-body { flex-direction: row; }
.hunt-window.hunt-selection-view .hunt-detail { flex: 1 1 auto; min-width: 0; }
.oh-hunt-side { display: none; }
.hunt-window.hunt-selection-view .oh-hunt-side {
  display: flex; flex: 0 0 300px; flex-direction: column; gap: 4px;
  min-width: 0; overflow-y: auto; padding: 10px 8px; border-right: 1px solid #303650;
}
.oh-hunt-item {
  display: flex; align-items: center; gap: 10px; padding: 8px; cursor: pointer;
  border: 1px solid #303650; border-radius: 6px; background: #1f2335; color: inherit;
}
.oh-hunt-item:hover { border-color: #7aa2f7; background: #24283b; }
.oh-hunt-item.selected { border-color: #c9a227; background: #24283b; }
.oh-hunt-item img { flex: 0 0 auto; }
.oh-hunt-ico { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.oh-hunt-txt, .oh-hunt-item .hunt-entry-copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.oh-hunt-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c0caf5; }
.oh-hunt-item .hunt-entry-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85em; }
.oh-hunt-item .hunt-entry-monster { color: #9aa5ce; }

/* Mesma arte GPT nos pacotes, destaque e detalhe das cartas de Prey. */
.store-window img.store-icon[src$="/prey-wildcard.png"],
.trade-window img.trade-holding-card[src$="/prey-wildcard.png"] {
  content: url("/ombria/icons/prey-wildcard-gpt-69d160dede0e.webp");
  object-fit: contain;
  image-rendering: auto;
}