/* =====================================================================
   Hogwarts Idle — HUD "Tinta e ouro" (inspirada na interface do Hogwarts Legacy).
   Painéis de tinta azul-escura com filete duplo: contorno escuro, filete de ouro
   envelhecido, um vão e um filete de ouro apagado por dentro. As caixas grandes
   têm um losango de ouro em cada canto. Títulos curtos numa gótica pixelada;
   destaques (hover, seleção, rótulos) na cor da casa do jogador (--house, que
   ui.js grava no <html>). Por cima de tudo, o filtro CRT opcional (#crt).
   ===================================================================== */

/* Fontes (assets/fonts, SIL Open Font License; textos das licenças na mesma pasta). Latin cobre o português;
   latin-ext só baixa se aparecer um caractere dela. Jersey 10: texto e rótulos. Grenze Gotisch (semibold, 600): títulos
   curtos, uma gótica feita para ser lida (a Jacquarda Bastarda 9, pixelada, ficava difícil de ler). Press Start 2P: só
   o "z" da Creche no mapa (world.js). */
@font-face { font-family: "Jersey 10"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/jersey-10-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jersey 10"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/jersey-10-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/press-start-2p-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/press-start-2p-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Grenze Gotisch"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/grenze-gotisch-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Grenze Gotisch"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/grenze-gotisch-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
  /* fundo e painéis: tinta azul-escura morna (os nomes --navy-* ficaram do template) */
  --night: #050609;
  --navy-0: #0a0c12;
  --navy-1: #10131b;
  --navy-2: #171b25;
  --navy-3: #1f2430;
  --navy-4: #303544;
  --rail: #4a3d26;
  /* filetes: ouro envelhecido por fora, bronze apagado por dentro */
  --edge-base: #b8975a;
  --edge-dim: #5e4e31;
  --outline: #030304;
  /* ouro (moeda, recompensa, botão principal) */
  --gold: #e6c477;
  --gold-hi: #f6e4ae;
  --gold-2: #c29a52;
  --gold-3: #7d5d28;
  --gold-ink: #241706;
  /* Cor da casa do jogador: ui.js grava --house e data-casa no <html> (cores de HOUSES, shared/casas.js).
     Sem casa (login, criação), carmim de lacre. Os destaques saem dela, clareados para ler no fundo escuro. */
  --house: #a3282e;
  --accent: color-mix(in srgb, var(--house) 68%, #f1e3c4);
  --accent-2: color-mix(in srgb, var(--house) 72%, #000);
  --accent-soft: color-mix(in srgb, var(--house) 22%, transparent);
  --hover: color-mix(in srgb, var(--house) 80%, #fff);
  --house-face: color-mix(in srgb, var(--house) 26%, var(--navy-1));
  --house-glow: color-mix(in srgb, var(--house) 45%, transparent);
  --warn: #e0a050;
  --silver: #d9d2bf;
  --silver-2: #9d9480;
  --red: #e2564a;
  --green: #6be27f;
  --blue: #5fb4ff;
  /* texto: pergaminho */
  --text: #efe6cf;
  --muted: #a59b84;
  --dim: #6b6350;
  --ink: #1a1206;
  /* ornamentos em pixel (SVG no fundo: não mexem no layout). Losango de canto (9 e 5 px) e o enfeite do meio das barras. */
  --stud: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'><path fill='%23120c04' d='M4 0h1v1H4zM3 1h1v1H3zM5 1h1v1H5zM2 2h1v1H2zM6 2h1v1H6zM1 3h1v1H1zM7 3h1v1H7zM0 4h1v1H0zM8 4h1v1H8zM1 5h1v1H1zM7 5h1v1H7zM2 6h1v1H2zM6 6h1v1H6zM3 7h1v1H3zM5 7h1v1H5zM4 8h1v1H4z'/><path fill='%23f3dda0' d='M4 1h1v1H4zM3 2h1v1H3zM2 3h1v1H2zM1 4h1v1H1z'/><path fill='%23cfa95f' d='M4 2h2v1H4zM3 3h3v1H3zM2 4h2v1H2zM5 4h2v1H5zM2 5h4v1H2zM4 6h1v1H4z'/><path fill='%2386642c' d='M6 3h1v1H6zM7 4h1v1H7zM6 5h1v1H6zM3 6h1v1H3zM5 6h1v1H5zM4 7h1v1H4z'/><path fill='%23fff4cc' d='M4 4h1v1H4z'/></svg>");
  --stud-sm: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'><path fill='%23120c04' d='M2 0h1v1H2zM1 1h1v1H1zM3 1h1v1H3zM0 2h1v1H0zM4 2h1v1H4zM1 3h1v1H1zM3 3h1v1H3zM2 4h1v1H2z'/><path fill='%23f3dda0' d='M2 1h1v1H2zM1 2h1v1H1z'/><path fill='%23cfa95f' d='M2 2h1v1H2z'/><path fill='%2386642c' d='M3 2h1v1H3zM2 3h1v1H2z'/></svg>");
  --orn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='9' shape-rendering='crispEdges'><path fill='%23120c04' d='M11 0h1v1H11zM10 1h1v1H10zM12 1h1v1H12zM4 2h1v1H4zM9 2h1v1H9zM13 2h1v1H13zM18 2h1v1H18zM3 3h1v1H3zM5 3h1v1H5zM8 3h1v1H8zM14 3h1v1H14zM17 3h1v1H17zM19 3h1v1H19zM2 4h1v1H2zM6 4h2v1H6zM15 4h2v1H15zM20 4h1v1H20zM3 5h1v1H3zM5 5h1v1H5zM8 5h1v1H8zM14 5h1v1H14zM17 5h1v1H17zM19 5h1v1H19zM4 6h1v1H4zM9 6h1v1H9zM13 6h1v1H13zM18 6h1v1H18zM10 7h1v1H10zM12 7h1v1H12zM11 8h1v1H11z'/><path fill='%23f3dda0' d='M11 1h1v1H11zM10 2h1v1H10zM4 3h1v1H4zM9 3h1v1H9zM18 3h1v1H18zM3 4h1v1H3zM8 4h1v1H8zM17 4h1v1H17z'/><path fill='%23cfa95f' d='M11 2h2v1H11zM10 3h3v1H10zM4 4h1v1H4zM9 4h2v1H9zM12 4h2v1H12zM18 4h1v1H18zM9 5h4v1H9zM11 6h1v1H11z'/><path fill='%2386642c' d='M13 3h1v1H13zM5 4h1v1H5zM14 4h1v1H14zM19 4h1v1H19zM4 5h1v1H4zM13 5h1v1H13zM18 5h1v1H18zM10 6h1v1H10zM12 6h1v1H12zM11 7h1v1H11z'/><path fill='%23fff4cc' d='M11 4h1v1H11z'/></svg>");
  /* leve degradê de luz por dentro das caixas */
  --sheen: linear-gradient(180deg, #ffffff0a, #ffffff00 42%, #00000026);

  --top-h: 52px;
  --dock-h: 76px;
  --bottom-h: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  --side-w: 220px;
  /* Escala do HUD em telas grandes (o canvas do mapa não usa zoom: só desconta a altura das barras). */
  --hud-zoom: 1;
  /* Largura/altura da tela já descontado o zoom (para usar dentro de elementos com zoom). */
  --vw: calc(100vw / var(--hud-zoom));
  --vh: calc(100dvh / var(--hud-zoom));
  /* Altura livre entre as barras, em unidades do HUD. */
  --free-h: calc(var(--vh) - var(--top-h) - var(--bottom-h));
  --ease: cubic-bezier(.2, .8, .3, 1);
  --font-ui: "Jersey 10", "Pixelify Sans", system-ui, sans-serif;
  /* títulos curtos: gótica legível (Grenze Gotisch, peso 600; quem usa põe font-weight: 600) */
  --font-title: "Grenze Gotisch", "Jersey 10", serif;
  /* os rótulos miúdos eram Press Start 2P; agora são Jersey 10 em versalete (caixa-alta pequena e espaçada) */
  --font-px: var(--font-ui);
  --font-pixel: var(--font-ui);
  --dither: radial-gradient(#ffffff06 1px, transparent 1.2px) 0 0 / 4px 4px;
  font-family: var(--font-ui);
  font-size: 20px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--text); overflow: hidden; -webkit-tap-highlight-color: transparent; }
body { line-height: 1.25; -webkit-font-smoothing: none; font-synthesis: none; }
/* a gótica dos títulos é vetorial: vai com suavização (o resto do texto é pixelado e fica sem) */
.quest-titles small, .mm-head b, .drawer-title b, .dlg-name, #panel:not([data-panel="perfil"], [data-panel="ficha"]) .p-head h2, .cr-logo { -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [data-open]:focus-visible { outline: 2px dashed var(--gold); outline-offset: 5px; }
img { image-rendering: pixelated; }
.hidden { display: none !important; }
::selection { background: var(--gold); color: var(--gold-ink); }
.muted { color: var(--muted); }

/* Barras de rolagem: trilho de tinta e puxador de bronze, que acende em ouro */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--navy-0); box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #ffffff08; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--gold-3), var(--edge-dim)); border: 3px solid var(--navy-0); box-shadow: inset 1px 1px 0 #ffffff22; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-2); }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--edge-dim) var(--navy-0); } }

#app { position: fixed; inset: 0; }
#game {
  position: absolute; left: 0; right: 0; top: calc(var(--top-h) * var(--hud-zoom)); bottom: calc(var(--bottom-h) * var(--hud-zoom));
  width: 100%; height: calc(100% - (var(--top-h) + var(--bottom-h)) * var(--hud-zoom));
  image-rendering: pixelated; cursor: pointer; background: #05080c;
}

.hud { position: absolute; z-index: 5; }
#topbar, #bottombar, #quest-card, #analyzer, #minimap-box, #battle-bar, #toasts, #chat-peek, #dialog, #capture-pop, #menu-drawer, #panel, #offer-pop { zoom: var(--hud-zoom); }

/* ---------- Ícones (assets/ui/icons, 64×64) ---------- */
.ico { width: var(--s, 32px); height: var(--s, 32px); display: inline-block; vertical-align: middle; flex: none; image-rendering: pixelated; object-fit: contain; }
.ico.emo {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: calc(var(--s, 32px) * .78);
  line-height: var(--s, 32px); text-align: center; font-style: normal; font-weight: 400;
}
[data-ico] { display: inline-block; }

/* =====================================================================
   CAIXA DE TINTA — a peça base de toda a interface.
   Filete duplo por fora da caixa (não mexe no layout; ocupa os mesmos 4–5 px da
   borda antiga): de dentro para fora, filete apagado (--edge-in), um vão da cor
   do painel (--gap), filete de ouro (--edge) e contorno escuro. Sombra suave
   embaixo e um degradê leve por dentro. --lift levanta.
   :where() deixa a especificidade zerada: qualquer regra comum sobrescreve.
   ===================================================================== */
:where(.fbox, #panel, #dialog, #capture-pop, #offer-pop, .cr-wrap, #quest-card, #analyzer, #minimap-box, #battle-bar,
  .tb-player, .tb-auto, .coin, .icon-btn, .lead-card, .team-slot, .hot-slot, #hotbar, .card, .list-item, .toast,
  .an-big, .an-grid > div, .empty-note, .log, .menu-card, .menu-chip, .menu-toggle, .tab, .seg, .day-cell,
  select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, .cr-name,
  .cr-starter, .cr-identity, .auth-save, .dlg-name, .p-ico) {
  --gap: 1px;
  --edge: var(--edge-base);
  /* o filete de dentro acompanha o de fora (raridade, hover da casa), só mais apagado */
  --edge-in: color-mix(in srgb, var(--edge) 48%, var(--face));
  --ol: var(--outline);
  --face: var(--navy-1);
  --drop: #000000a0;
  --glow: 0 0 0 0 transparent;
  background-color: var(--face);
  background-image: var(--sheen);
  box-shadow:
    0 0 0 1px var(--edge-in),
    0 0 0 calc(1px + var(--gap)) var(--face),
    0 0 0 calc(2px + var(--gap)) var(--edge),
    0 0 0 calc(3px + var(--gap)) var(--ol),
    0 calc(5px + var(--lift)) calc(10px + var(--lift) * 2) 0 var(--drop),
    var(--glow);
}
.fbox-3, #panel, #dialog, #capture-pop, .cr-wrap, .menu-card, .cr-starter { --gap: 2px; }
/* Caixas grandes: um losango de ouro em cada canto, encostado no filete de dentro. Vai no fundo (SVG), sem
   ::before/::after (muitas dessas caixas já usam) e sem mexer no layout. */
:where(#panel, #dialog, #quest-card, #minimap-box, .menu-card, #capture-pop, #offer-pop, .cr-wrap) {
  --studs: var(--stud), var(--stud), var(--stud), var(--stud);
  background-image: var(--studs), var(--sheen);
  background-position: left top, right top, left bottom, right bottom, 0 0;
  background-repeat: no-repeat;
}
.menu-card { --studs: var(--stud-sm), var(--stud-sm), var(--stud-sm), var(--stud-sm); }
/* Interativa: levanta 2–3 px no hover e o filete de ouro troca pela cor da casa. */
.lift, .card[data-act], .menu-card, .menu-chip, .lead-card, .team-slot, .hot-slot, .tb-player, .icon-btn, .cr-starter, .tab, .day-cell.today {
  transition: transform .14s var(--ease), --lift .14s var(--ease), filter .15s;
}
.lift:hover, .card[data-act]:hover, .menu-chip:hover, .lead-card:hover, .team-slot:hover, .hot-slot:not(.empty):hover, .tb-player:hover, .icon-btn:hover, .tab:not(.on):hover {
  transform: translateY(-2px); --lift: 2px; --edge: var(--hover);
}
.lift:active, .card[data-act]:active, .menu-chip:active, .lead-card:active, .team-slot:active, .hot-slot:active, .tb-player:active, .icon-btn:active { transform: translateY(1px); --lift: -1px; }
.panel-float { --gap: 1px; }

/* ---------- Peças básicas ---------- */
/* Barra fina com ponteiras de ouro nas pontas (HP verde, EXP azul; as cores de preenchimento não mudam). */
.bar {
  position: relative; display: block; height: 8px; background: #06070a; overflow: hidden;
  box-shadow: inset 0 1px 0 #000a, 0 -1px 0 #000, 0 1px 0 #000, -2px 0 0 var(--gold-2), 2px 0 0 var(--gold-2), -3px 0 0 #000, 3px 0 0 #000;
}
.bar > span {
  position: absolute; inset: 1px auto 1px 1px; width: 0; max-width: calc(100% - 2px);
  background: linear-gradient(180deg, #b8ffc4 0 1px, var(--green) 1px 60%, #2f9e4c 60%);
  transition: width .35s var(--ease);
}
.bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, #00000040 7px 8px); pointer-events: none; }
.bar.thin { height: 5px; }
.bar.thin > span { background: linear-gradient(180deg, #b8ffc4 0 1px, var(--green) 1px 60%, #2f9e4c 60%); }
.bar.thin::after { background: repeating-linear-gradient(90deg, transparent 0 6px, #00000040 6px 7px); }
.bar.xp > span { background: linear-gradient(180deg, #c9e6ff 0 1px, var(--blue) 1px 60%, #2c6fd0 60%); }
.bar.hp-mid > span { background: linear-gradient(180deg, #fff2a8 0 1px, #f5c242 1px 60%, #c98f1c 60%); }
.bar.hp-low > span { background: linear-gradient(180deg, #ffc0b4 0 1px, #ff5a48 1px 60%, #b02a1c 60%); animation: lowHp 1s steps(2) infinite; }

/* Badge de nível: plaquinha de latão. */
.lvl-badge {
  font-style: normal; font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 15px; white-space: nowrap; display: inline-block;
  background: linear-gradient(180deg, #ead39c 0 1px, #c9a868 1px 52%, #9c7c42 52% calc(100% - 1px), #6c5126 calc(100% - 1px)); color: #1c1205; padding: 0 5px;
  box-shadow: 0 0 0 1px #2a1d0a, 0 2px 0 1px #0007; letter-spacing: .3px; text-shadow: 0 1px 0 #f3e1b04d;
}

/* Botões: tinta com filete de ouro (secundário), ouro envelhecido (principal), lacre carmim (perigo). Sem degrau embaixo. */
.btn {
  --bf: var(--navy-3); --bf-hi: #2b3141; --bf-lo: var(--navy-1); --bink: var(--text); --bedge: var(--edge-base); --bsheen: #ffffff14;
  position: relative; border: 0; background: linear-gradient(180deg, var(--bf-hi), var(--bf) 50%, var(--bf-lo));
  color: var(--bink); padding: 8px 14px 9px; font-family: var(--font-ui); font-weight: 700; font-size: 17px; letter-spacing: .6px; text-transform: uppercase;
  line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 2px;
  box-shadow: inset 0 1px 0 var(--bsheen), 0 0 0 1px var(--bedge), 0 0 0 2px #000, 0 3px 8px #000000a0;
  transition: transform .1s var(--ease), filter .15s, box-shadow .1s;
  text-shadow: 0 1px 0 #000;
}
.btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 var(--bsheen), 0 0 0 1px var(--bedge), 0 0 0 2px #000, 0 1px 3px #000000a0; }
.btn.primary, .btn.gold { --bf: #c8a262; --bf-hi: #e9d096; --bf-lo: #94733a; --bink: #1f1405; --bedge: #ecd497; --bsheen: #fff6d880; text-shadow: 0 1px 0 #f6e4b45c; }
.btn.gold { overflow: hidden; }
.btn.gold::before { content: ""; position: absolute; top: 0; bottom: 0; width: 10px; left: -20px; background: #fff8e070; transform: skewX(-20deg); animation: shine 2.6s steps(14) infinite; }
.btn.danger { --bf: #8f2228; --bf-hi: #b4393b; --bf-lo: #5e1418; --bink: #f6e6cc; --bedge: #c9675a; --bsheen: #ffffff26; text-shadow: 0 1px 0 #0008; }
.btn.small { padding: 6px 10px 7px; font-size: 16px; }
.btn:disabled { filter: grayscale(.9) brightness(.7); cursor: not-allowed; }
.btn .ico { margin: -4px 0; }

.icon-btn {
  --face: var(--navy-2); --edge: var(--edge-dim); border: 0; padding: 4px 8px; line-height: 1; color: var(--text); margin: 2px;
  display: inline-grid; place-items: center;
}
.icon-btn.square { width: 38px; height: 38px; font-size: 23px; padding: 0; flex: none; }
.icon-btn.mini { padding: 0; width: 24px; height: 24px; font-size: 17px; flex: none; }

/* ---------- Topo ---------- */
/* As duas barras são uma faixa de tinta com um filete de ouro na beira e um enfeite de losangos no meio. */
#topbar, #bottombar { background: linear-gradient(180deg, #141822, #0b0d13 70%, #08090e); }
#topbar::after, #bottombar::before {
  content: ""; position: absolute; left: 50%; width: 23px; height: 9px; margin-left: -11px; background: var(--orn); pointer-events: none;
}
#topbar::after { bottom: -6px; }
#bottombar::before { top: -6px; }
#topbar {
  left: 0; right: 0; top: 0; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 6px 12px;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  box-shadow: 0 1px 0 #000, 0 2px 0 var(--edge-base), 0 3px 0 #000, 0 6px 14px #000a;
}
.tb-player { position: relative; display: flex; align-items: center; gap: 8px; border: 0; padding: 2px 10px 2px 2px; min-width: 170px; height: 38px; margin-left: 4px; color: var(--text); }
.tb-player img { width: 34px; height: 34px; background: radial-gradient(color-mix(in srgb, var(--house) 30%, #1a1f2a), #07080c 80%); box-shadow: inset 0 0 0 1px #000; }
.tb-lvl-mini { display: none; }
.tb-player-info { display: flex; flex-direction: column; gap: 5px; flex: 1; text-align: left; min-width: 0; }
.tb-name { font-size: 18px; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.tb-name b { overflow: hidden; text-overflow: ellipsis; letter-spacing: .5px; text-shadow: 1px 1px 0 #000; }
.tb-auto { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 6px; height: 38px; transition: background .2s; }
.tb-auto.on { --edge: var(--green); --face: #0d2618; --glow: 0 0 16px 0 #6be27f40; }
.tb-auto.on .auto-icon { animation: spin 2.4s steps(12) infinite; }
.tb-auto.warn { --edge: var(--warn); }
.tb-auto.warn #auto-hint { color: var(--warn); }
.auto-icon { display: inline-grid; place-items: center; }
.auto-label { display: flex; flex-direction: column; line-height: 1.05; min-width: 82px; padding-top: 2px; }
.auto-label small { font-family: var(--font-px); font-size: 13px; line-height: 11px; color: var(--muted); letter-spacing: 1px; white-space: nowrap; margin-bottom: 1px; }
.auto-label b { font-size: 18px; letter-spacing: .5px; }
.tb-auto.on .auto-label b { color: var(--green); }
.auto-cfg { width: 28px; height: 28px; padding: 0; }
/* Interruptor: trilho de tinta com filete, botão de lacre (desligado) ou verde (ligado) que desliza. */
.switch {
  width: 44px; height: 22px; border: 0; background: #241013; position: relative; padding: 0; flex: none; margin: 0 2px;
  box-shadow: inset 0 2px 0 #0009, 0 0 0 1px var(--edge-dim), 0 0 0 2px #000; transition: background .2s, box-shadow .2s;
}
.switch span { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: linear-gradient(180deg, #d77a6c, #92362f); box-shadow: inset 0 1px 0 #fff5, inset 0 -1px 0 #0005, 0 0 0 1px #000; transition: left .18s steps(4), background .2s; }
.switch[aria-checked="true"] { background: #0f3a20; box-shadow: inset 0 2px 0 #0009, 0 0 0 1px var(--gold-2), 0 0 0 2px #000; }
.switch[aria-checked="true"] span { left: 25px; background: linear-gradient(180deg, #c6f7cf, #5fbf74); }
.tb-spacer { flex: 1; min-width: 0; }
/* Moedas: ícone e número soltos na faixa, separados por losangos pequenos (sem caixa). */
.tb-currency { --sep: 18px; display: flex; gap: var(--sep); align-items: center; }
.coin { --face: transparent; background: none; box-shadow: none; position: relative; padding: 0 2px; height: 32px; display: inline-flex; align-items: center; gap: 6px; font-size: 21px; white-space: nowrap; }
.tb-currency > .coin + .coin::before {
  content: ""; position: absolute; left: calc(var(--sep) / -2 - 3px); top: calc(50% - 3px); width: 5px; height: 5px; transform: rotate(45deg);
  background: var(--gold-2); box-shadow: 0 0 0 1px #000; pointer-events: none;
}
.coin b { font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 #000; }
#tb-ryo-chip b { color: var(--gold); }
#tb-selos-chip b { color: var(--accent); }
.coin.boost { font-size: 17px; color: var(--accent); gap: 10px; padding: 0 2px; }
.coin.boost:empty { display: none; }
.boost-item { display: inline-flex; align-items: center; gap: 4px; }
.boost-item .bt-short { display: none; }
/* botões de liga/desliga da barra: ligados, acendem na cor da casa */
#btn-analyzer[aria-pressed="true"], #btn-crt[aria-pressed="true"], #btn-music[aria-pressed="true"] { --edge: var(--hover); --face: var(--house-face); }
.tb-crt { flex: none; }
.tb-music { flex: none; }
.tb-vote, .tb-invite, .tb-discord { flex: none; position: relative; }
.tb-discord { --edge: var(--gold); --face: #2a2210; }
.tb-discord::after { content: "+💎"; position: absolute; top: -6px; right: -10px; font-size: 11px; line-height: 14px; padding: 0 3px; background: var(--red); color: #fff; box-shadow: 0 0 0 1px #000; animation: pulse 1.2s steps(2) infinite; pointer-events: none; }
.tb-invite.evento { --edge: var(--gold); --face: #2a2210; }
.tb-invite.evento::after { content: "VIP"; position: absolute; top: -6px; right: -10px; font-size: 11px; line-height: 14px; padding: 0 3px; background: var(--red); color: #fff; box-shadow: 0 0 0 1px #000; animation: pulse 1.2s steps(2) infinite; pointer-events: none; }
/* Convidar amigos (invite_ui.js) */
.inv-box { display: grid; gap: 12px; justify-items: start; }
.inv-box .vote-art, .inv-box > .btn { justify-self: center; }
.inv-gift { justify-self: stretch; margin: 0; padding: 10px 14px; border: 2px solid var(--gold); border-radius: 6px; line-height: 1.6; }
.inv-link { justify-self: stretch; display: flex; gap: 8px; }
.inv-link input { flex: 1; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text); background: rgba(0, 0, 0, .35); border: 2px solid var(--outline); border-radius: 6px; }
.inv-share { justify-self: center; display: flex; gap: 8px; flex-wrap: wrap; }
.inv-share .btn { text-decoration: none; }
.inv-title { margin: 6px 0 0; font-size: inherit; color: var(--gold-hi); }
.inv-friends { justify-self: stretch; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inv-friend { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.inv-bar { grid-column: 1 / -1; height: 8px; background: rgba(0, 0, 0, .4); border-radius: 4px; overflow: hidden; }
.inv-bar i { display: block; height: 100%; background: var(--gold); }
.inv-ready { color: var(--gold); font-weight: bold; }
.inv-done { color: var(--muted); }
.inv-event { position: relative; justify-self: stretch; display: grid; gap: 6px; padding: 12px 14px 10px; border: 2px solid var(--gold); border-radius: 6px; background: rgba(242, 193, 78, .1); }
.inv-event h3 { margin: 0; font-size: inherit; color: var(--gold-hi); }
.inv-event p { margin: 0; }
.inv-event-tag { position: absolute; top: -10px; right: 10px; padding: 0 6px; font-size: 11px; line-height: 16px; background: var(--red); color: #fff; box-shadow: 0 0 0 1px #000; }
.auth-invite { display: grid; gap: 4px; justify-items: center; text-align: center; margin: 0 0 12px; padding: 10px 14px; border: 2px solid var(--gold); border-radius: 6px; background: rgba(0, 0, 0, .3); }
.auth-invite b { color: var(--gold); }
.auth-invite-items { line-height: 1.6; }
.tb-vote.ready { --edge: var(--gold); --face: #2a2312; }
.tb-vote.ready::after { content: "+💎"; position: absolute; top: -6px; right: -10px; font-size: 11px; line-height: 14px; padding: 0 3px; background: var(--red); color: #fff; box-shadow: 0 0 0 1px #000; animation: pulse 1.2s steps(2) infinite; pointer-events: none; }
.vote-box { display: grid; gap: 12px; justify-items: start; }
.vote-box .vote-art { justify-self: center; }
.vote-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
/* código da conta (Discord): grande para copiar e digitar */
.vote-number { justify-self: stretch; display: grid; justify-items: center; gap: 4px; padding: 12px 16px; text-align: center;
  border: 2px solid var(--gold); background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 2px var(--outline); }
.vote-number small { color: var(--gold-hi); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.vote-number b { color: var(--gold); font-size: 34px; line-height: 1.2; letter-spacing: 3px; text-shadow: 2px 2px 0 var(--outline); user-select: all; }
.vote-box .btn { justify-self: center; text-decoration: none; }
.vote-wait { justify-self: center; }

/* ---------- Missão ---------- */
#quest-card {
  --edge: var(--edge-base); --face: var(--navy-1);
  top: calc(var(--top-h) + 12px); left: 50%; transform: translateX(-50%);
  width: min(440px, calc(var(--vw) - 2 * var(--side-w) - 56px)); padding: 6px 8px 8px 10px;
}
/* Minimizada (clique no cartão): vira um quadradinho colado no minimapa, para não cobrir a saída no alto do mapa.
   Clicar nele volta. Os avisos, que ficam nesse mesmo canto, descem para baixo dele. */
#quest-card.mini { left: auto; right: calc(var(--side-w) + 28px); transform: none; width: auto; padding: 5px; }
html:has(#quest-card.mini) #toasts { top: calc(var(--top-h) + 66px); }
#quest-card.mini :is(.quest-titles, .quest-pct, #quest-guide, #quest-more, .quest-bar, .quest-body) { display: none; }
.quest-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.quest-icon { display: inline-grid; place-items: center; }
.quest-titles { display: flex; flex-direction: column; flex: 1; line-height: 1.15; min-width: 0; }
/* "ATO 1 · MISSÃO PRINCIPAL" na gótica: caixa-alta gótica não se lê, então vai em minúsculas com a inicial maiúscula */
.quest-titles small { color: var(--accent); font-family: var(--font-title); font-weight: 600; font-size: 15px; line-height: 15px; letter-spacing: .3px; text-transform: lowercase; margin-bottom: 2px; }
.quest-titles small::first-letter { text-transform: uppercase; }
.quest-titles b { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; }
.quest-pct { color: var(--gold); font-weight: 700; font-size: 21px; font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 #000; }
#quest-guide.on { --edge: var(--hover); --face: var(--house-face); }
.quest-bar { margin-top: 6px; }
.quest-bar > span { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 50%, #fff) 0 1px, var(--accent) 1px 60%, var(--accent-2) 60%) !important; }
.quest-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease), margin .25s; font-size: 17px; color: var(--muted); }
.quest-body > * { overflow: hidden; }
#quest-card.open .quest-body { grid-template-rows: 1fr; margin-top: 6px; }
.quest-body-inner { min-height: 0; }
.objective { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 2px dotted #c29a5226; color: var(--text); }
.objective b { color: var(--gold); }
.objective.done { color: var(--green); text-decoration: line-through; }

/* ---------- Hunt Analyzer ---------- */
#analyzer {
  left: 12px; top: calc(var(--top-h) + 12px); width: 270px; z-index: 6;
  max-height: calc(var(--free-h) - 24px); overflow: auto; transition: width .2s var(--ease);
}
#analyzer.min { width: auto; min-width: var(--side-w); max-width: calc(50% - 240px); overflow: hidden; }
#analyzer.min .an-body { display: none; }
.float-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 10px; cursor: pointer; user-select: none; background: var(--navy-0); box-shadow: 0 1px 0 var(--edge-dim); }
#analyzer.min .float-head { box-shadow: none; background: none; }
.float-title { flex: 1; display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.float-head small { font-family: var(--font-px); font-size: 13px; line-height: 12px; color: var(--accent); letter-spacing: 1px; margin-bottom: 2px; }
.float-head b { font-size: 20px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.an-summary { display: none; flex: 1; font-size: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-summary b { color: #a6f5b4; font-variant-numeric: tabular-nums; font-size: 20px; text-shadow: 1px 1px 0 #000; }
.an-summary small { font-size: 14px; color: var(--muted); letter-spacing: 0; margin: 0 8px 0 3px; font-family: var(--font-ui); }
.an-summary .an-ico { font-style: normal; margin-right: 6px; vertical-align: -3px; }
.an-summary b.gold { color: var(--gold); }
#analyzer.min .float-title { display: none; }
#analyzer.min .an-summary { display: block; }
#analyzer.min #an-reset, #analyzer.min #an-close { display: none; }
#an-min { transition: transform .2s; }
#analyzer:not(.min) #an-min { transform: rotate(180deg); }
.an-body { padding: 10px; }
.an-rates { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.an-big { --face: var(--navy-0); --edge: var(--edge-dim); padding: 5px 8px; display: flex; flex-direction: column; }
.an-big small { color: var(--muted); font-size: 14px; }
.an-big b { font-size: 27px; color: #a6f5b4; font-variant-numeric: tabular-nums; text-shadow: 2px 2px 0 #000; }
/* Hunt Analyzer e barra de cima: XP reduzida pelos inimigos fracos (ui.js, xpLowPct); com área melhor já visitada, o
   toque leva até ela */
.an-low { display: block; width: 100%; margin: 8px 0 2px; white-space: normal; text-align: left; color: #ffc48a; }
.an-low.go { color: var(--gold); }
.an-low.hidden { display: none; }
/* Hunt Analyzer: atalho para os Elixires da loja de Gemas */
.an-turbo { display: block; width: 100%; margin: 6px 0 2px; }
.an-turbo.hidden { display: none; }
.boost-item.xp-low { color: #ffb070; cursor: pointer; }
/* Caçada em Sequência (ui.js, chainHudHtml): o contador; dourado quando já multiplica o brilhante */
.boost-item.chain { cursor: pointer; }
.boost-item.chain.hot { color: var(--gold); font-weight: 700; }
.chain-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.chain-steps .card { text-align: center; opacity: .6; }
.chain-steps .card.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--gold); }
/* Total de XP a mais (ui.js, xpTotalHudHtml): poção, VIP e equipamentos multiplicados; toca e mostra a conta */
.boost-item.xp-total { color: #9dff8a; cursor: pointer; font-weight: 700; }
.boost-item.xp-total .xt-ico { font-size: .8em; padding: 0 3px; border: 1px solid currentColor; border-radius: 3px; line-height: 1.2; }
.an-big.gold b { color: var(--gold); }
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.an-grid > div { --face: var(--navy-2); --edge: var(--edge-dim); --drop: transparent; padding: 4px 8px; display: flex; flex-direction: column; }
.an-grid b { font-size: 20px; font-variant-numeric: tabular-nums; }
.an-grid small { font-size: 14px; color: var(--muted); }
.feed-title { margin: 14px 2px 6px; font-family: var(--font-px); font-size: 14px; color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.feed li { display: flex; align-items: center; gap: 6px; background: var(--navy-2); padding: 2px 6px; font-size: 16px; animation: fadeIn .3s var(--ease); box-shadow: inset 2px 0 0 var(--edge-dim); }
.feed img { width: 26px; height: 26px; }
.feed .res { margin-left: auto; font-weight: 700; font-size: 14px; text-transform: uppercase; }
.res.vitória { color: var(--green); } .res.derrota, .res.escapou { color: var(--red); } .res.recrutado, .res[class*="recrutado"] { color: var(--gold); }

/* ---------- Minimapa ---------- */
#minimap-box { right: 12px; top: calc(var(--top-h) + 12px); width: var(--side-w); z-index: 6; overflow: hidden; }
.mm-head { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 6px 8px 6px 8px; text-align: left; min-height: 36px; }
/* nome do mapa na gótica, em pergaminho, numa linha só dele embaixo do relógio (na gótica ele é mais largo) */
.mm-head { flex-wrap: wrap; row-gap: 0; }
.mm-head b {
  order: 2; flex: 1 0 100%; min-width: 0; font-family: var(--font-title); font-weight: 600; font-size: 26px; line-height: 27px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000;
}
.mm-head .mm-caret { margin-left: auto; }
.mm-clock { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--gold); font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 #000; }
#mm-daynight { display: inline-flex; font-style: normal; }
.mm-caret { color: var(--muted); font-size: 14px; transition: transform .2s; }
#minimap-box.min .mm-caret { transform: rotate(-90deg); }
#minimap-box.min .mm-body { display: none; }
.mm-body { padding: 0 8px 8px; }
/* moldura de pergaminho com filete de ouro, como o mapa do Hogwarts Legacy */
#minimap {
  display: block; width: 100%; height: auto; aspect-ratio: 196 / 120; background: #000; image-rendering: pixelated; margin-top: 6px;
  box-shadow: 0 0 0 1px #2b1d0c, 0 0 0 3px #d6c49a, 0 0 0 4px #b39d6e, 0 0 0 5px var(--edge-base), 0 0 0 6px #000;
}
.mm-info { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; font-size: 16px; }
.mm-info small { color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-info small:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-switch { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }

/* ---------- Combate ---------- */
#battle-bar {
  --edge: #b0453c; --face: #22100f;
  bottom: calc(var(--bottom-h) + 16px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; max-width: calc(var(--vw) - 24px);
  padding: 3px 4px 3px 8px; font-weight: 700; font-size: 18px; white-space: nowrap; animation: popIn .2s var(--ease); text-shadow: 1px 1px 0 #000;
}
.battle-ico { display: inline-grid; place-items: center; }
#battle-text { overflow: hidden; text-overflow: ellipsis; letter-spacing: .3px; }

/* ---------- Dock (barra inferior) ---------- */
#bottombar {
  left: 0; right: 0; bottom: 0; height: var(--bottom-h); display: flex; align-items: center; gap: 12px;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  box-shadow: 0 -1px 0 #000, 0 -2px 0 var(--edge-base), 0 -3px 0 #000, 0 -6px 14px #000a;
}
.lead-card { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; width: 250px; height: 60px; cursor: pointer; flex: none; margin-left: 4px; }
.lead-card img { width: 52px; height: 52px; background: radial-gradient(color-mix(in srgb, var(--house) 30%, #1a1f2a), #07080c 78%); flex: none; box-shadow: inset 0 0 0 1px #000; }
.lead-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lead-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lead-title b { font-size: 18px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .4px; text-shadow: 1px 1px 0 #000; }
.lead-bar { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--muted); }
.lead-bar small:first-child { font-family: var(--font-px); font-size: 13px; letter-spacing: 1px; font-weight: 400; color: var(--gold-2); }
.lead-bar small:last-child { font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; color: var(--text); }
.team-box { position: relative; display: flex; align-items: center; flex: none; }
.team-slots { display: grid; grid-template-columns: repeat(5, 46px); gap: 10px; }
.team-slot {
  --face: var(--navy-0); --edge: var(--edge-dim); position: relative; height: 60px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; font-size: 13px; font-weight: 700; color: var(--muted); padding: 2px 3px 4px; cursor: pointer;
}
.team-slot img { width: 38px; height: 38px; }
.team-slot .bar { width: 100%; height: 5px; margin-top: 2px; box-shadow: 0 0 0 1px #000; }
.team-slot .bar::after { display: none; }
.team-slot.ko img { filter: grayscale(1) brightness(.6); }
.team-slot.ko::after { content: "KO"; position: absolute; top: 2px; right: 3px; color: var(--red); font-family: var(--font-px); font-size: 13px; line-height: 12px; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; }
.team-slot.empty { justify-content: center; font-size: 23px; color: var(--dim); --face: transparent; --drop: transparent; --edge: #3a3326; }
.team-count {
  position: absolute; top: -12px; right: -6px; font-family: var(--font-px); font-size: 13px; letter-spacing: .5px; color: #1c1205; padding: 1px 4px 0; line-height: 11px;
  background: linear-gradient(180deg, #ead39c 0 1px, #c9a868 1px 55%, #9c7c42 55%);
  pointer-events: none; box-shadow: 0 0 0 1px #2a1d0a, 0 2px 0 1px #0008; z-index: 1;
}
#hotbar { --face: var(--navy-0); --edge: var(--edge-dim); --drop: transparent; display: flex; gap: 8px; padding: 5px; flex: none; }
.hot-slot {
  --face: var(--navy-2); --edge: var(--edge-dim); --drop: transparent; position: relative; width: 44px; height: 46px; border: 0;
  display: grid; place-items: center; padding: 0; color: var(--text);
}
.hot-slot .k { position: absolute; left: 3px; top: 2px; font-family: var(--font-px); font-size: 13px; line-height: 12px; color: var(--gold-2); text-shadow: 1px 1px 0 #000; }
.hot-slot .n { position: absolute; right: 2px; bottom: 1px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.hot-slot .n.zero { color: var(--red); }
.hot-slot.empty { color: var(--dim); font-size: 23px; --face: transparent; --edge: #302b22; }
.quick-menu { flex: 1; display: flex; justify-content: flex-end; gap: 4px; min-width: 0; overflow: hidden; padding: 6px 6px 8px; margin: -6px -6px -8px; }
.menu-btn {
  position: relative; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text);
  font-size: 14px; font-weight: 700; text-transform: uppercase; gap: 3px; padding: 4px 2px; min-height: 44px; transition: transform .12s var(--ease), background .12s;
  white-space: nowrap; letter-spacing: .4px; text-shadow: 1px 1px 0 #000;
}
.menu-btn b { font-weight: 700; }
/* item do dock em foco: acende na cor da casa */
.menu-btn:hover { background: radial-gradient(ellipse at 50% 60%, var(--house-glow), transparent 70%); transform: translateY(-2px); }
.menu-btn:hover b { color: var(--gold-hi); }
.menu-btn:hover .ico { filter: drop-shadow(0 0 5px var(--house-glow)); }
.menu-btn:active { transform: translateY(1px); }
.menu-btn.off { opacity: .5; filter: grayscale(.8); }
.menu-btn.off::after { content: "EM BREVE"; position: absolute; top: 2px; left: 2px; font-family: var(--font-px); font-size: 12px; line-height: 11px; letter-spacing: .5px; background: #000a; padding: 1px 2px; }
.dot {
  position: absolute; top: 0; right: 2px; background: var(--red); color: #fff; font-size: 13px; font-style: normal; font-weight: 700; padding: 0 4px; line-height: 14px;
  box-shadow: 0 0 0 1px #000, 0 2px 0 1px #0008; animation: pulse 1.2s steps(2) infinite; text-shadow: none; z-index: 2;
}
.quick-menu .menu-btn { width: 60px; flex: none; }
/* botões que não couberam na barra (fitQuickMenu em ui.js esconde do menos importante para o mais) */
.quick-menu .menu-btn.qm-fit { display: none; }
.quick-menu .menu-toggle { --edge: var(--edge-base); --face: var(--navy-2); margin: 0 2px 0 6px; }
.quick-menu .menu-toggle b { color: var(--gold); }
.quick-menu .menu-toggle:hover { background: var(--face); --edge: var(--hover); --glow: 0 0 14px 1px var(--house-glow); }
/* menu aberto: o botão fica aceso na cor da casa */
.quick-menu .menu-toggle[aria-expanded="true"] { --face: var(--house-face); --edge: var(--hover); --glow: 0 0 16px 2px var(--house-glow); }
.quick-menu .menu-toggle[aria-expanded="true"] b { color: var(--gold-hi); }

/* ---------- Menu principal (tela cheia, fundo pintado + cartões) ---------- */
#drawer-backdrop { display: none !important; }
#menu-drawer {
  position: absolute; z-index: 23; left: 0; right: 0; top: var(--top-h); bottom: 0; overflow: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #06080c40, #06080cb8 70%, #06080ce0), url("assets/ui/bg/menu_bg.webp") center / cover no-repeat, radial-gradient(ellipse at 50% 0%, #1f2431, #06080c 70%);
  image-rendering: pixelated; animation: fadeIn .18s;
}
.drawer-inner { width: min(1120px, 100%); margin: 0 auto; padding: 18px 22px 26px; min-height: 100%; animation: drawerIn .22s var(--ease); }
.drawer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.drawer-title { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.drawer-title small { font-family: var(--font-px); font-size: 15px; line-height: 13px; color: var(--accent); letter-spacing: 3px; text-shadow: 1px 1px 0 #000; }
/* "MENU" na gótica, em minúsculas com a inicial maiúscula (caixa-alta gótica não se lê) */
.drawer-title b { font-family: var(--font-title); font-size: 39px; line-height: 38px; color: var(--gold); text-transform: lowercase; text-shadow: 2px 2px 0 #000, 0 0 14px #e6c47733; font-weight: 600; }
.drawer-title b::first-letter { text-transform: uppercase; }
.drawer-hint { color: var(--muted); font-size: 17px; text-shadow: 1px 1px 0 #000; }
.menu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 22px 20px; padding: 6px; }
.menu-card {
  --face: var(--navy-1); position: relative; border: 0; padding: 6px 6px 0; display: flex; flex-direction: column; color: var(--text); text-align: center;
  animation: cardIn .3s var(--ease) both;
}
.menu-card:nth-child(2) { animation-delay: .03s; } .menu-card:nth-child(3) { animation-delay: .06s; } .menu-card:nth-child(4) { animation-delay: .09s; }
.menu-card:nth-child(5) { animation-delay: .12s; } .menu-card:nth-child(6) { animation-delay: .15s; } .menu-card:nth-child(n+7) { animation-delay: .18s; }
.mc-art { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #050609; box-shadow: 0 0 0 1px var(--edge-dim), 0 0 0 2px #000; }
.card-art { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .25s var(--ease); }
.card-art.emo {
  display: grid; place-items: center;
  background: var(--dither), repeating-linear-gradient(45deg, #ffffff05 0 6px, transparent 6px 12px), radial-gradient(circle at 50% 40%, #2c3346, #08090e 75%);
}
.mc-label {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px 9px; font-size: 20px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; text-shadow: 1px 2px 0 #000; white-space: nowrap; overflow: hidden;
}
.menu-card:hover, .menu-card:focus-visible { transform: translateY(-4px); --lift: 4px; --edge: var(--hover); --glow: 0 0 22px 2px var(--house-glow); outline: none; }
.menu-card:hover .card-art, .menu-card:focus-visible .card-art { transform: scale(1.04); }
.menu-card:hover .mc-label, .menu-card:focus-visible .mc-label { color: var(--gold-hi); }
.menu-card:hover::after, .menu-card:focus-visible::after {
  content: ""; position: absolute; inset: -9px; pointer-events: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--hover) 55%, transparent);
}
.menu-card:active { transform: translateY(0); --lift: 0px; }
.menu-card.off .mc-art { filter: grayscale(1) brightness(.55); }
.menu-card.off { --edge: var(--edge-dim); }
.mc-soon {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--font-px); font-size: 13px; line-height: 12px; letter-spacing: 1px; font-style: normal; color: #1c1205;
  background: linear-gradient(180deg, #ead39c 0 1px, #c9a868 1px 55%, #9c7c42 55%); padding: 3px 6px 2px; box-shadow: 0 0 0 1px #2a1d0a, 0 3px 6px #0008; white-space: nowrap;
}
.menu-card .dot { top: -8px; right: -8px; font-size: 16px; line-height: 18px; padding: 0 6px; }
.menu-grid { display: flex; flex-wrap: wrap; gap: 14px 14px; padding: 26px 6px 6px; }
.menu-chip {
  --face: var(--navy-2); --edge: var(--edge-dim); flex-direction: row; min-height: 46px; padding: 4px 14px 4px 6px; gap: 8px; font-size: 17px;
  transition: transform .14s var(--ease), --lift .14s var(--ease);
}
.menu-chip:hover { background-color: var(--navy-3); }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 6px 0; }
.drawer-actions .btn { min-height: 38px; }

/* ---------- Diálogo de NPC ---------- */
#dialog {
  --edge: var(--edge-base); --face: var(--navy-1);
  position: absolute; z-index: 20; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom-h) + 18px); width: min(660px, calc(var(--vw) - 24px));
  padding: 14px 20px 10px; cursor: pointer; animation: popIn .18s var(--ease);
  background-image: var(--studs), linear-gradient(180deg, #191d28, var(--navy-1) 60%, #0c0e14);
}
#dialog::after { content: "▼"; position: absolute; right: 14px; bottom: 8px; color: var(--gold); font-size: 17px; text-shadow: 1px 1px 0 #000; animation: arrowBob .8s steps(2) infinite; }
#dialog:has(.dlg-choices:not(:empty))::after { display: none; }
/* placa do nome: tinta com filete de ouro, nome na gótica e uma faixa na cor da casa do jogador */
.dlg-name {
  --face: var(--navy-0); --edge: var(--edge-base); --glow: inset 4px 0 0 var(--house);
  position: absolute; top: -18px; left: 16px; display: inline-block; font-family: var(--font-title); font-weight: 600; color: var(--gold-hi);
  padding: 2px 14px 3px 16px; font-size: 26px; line-height: 26px; text-shadow: 1px 1px 0 #000;
}
.dlg-name:empty { display: none; }
.dlg-text { font-size: 23px; margin: 10px 0 6px; min-height: 2.6em; line-height: 1.4; text-shadow: 1px 1px 0 #000; }
.dlg-choices { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0 2px; }
.dlg-choices:empty { display: none; }
.dlg-hint { font-family: var(--font-px); font-size: 15px; letter-spacing: 1px; color: var(--dim); text-align: right; padding-right: 22px; margin-top: 2px; }
/* no celular não há teclado: a dica fala de tocar */
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .hint-kb { display: none; } .hint-touch { display: inline; } }

/* ---------- Toasts ---------- */
#toasts { position: absolute; z-index: 30; top: calc(var(--top-h) + 12px); right: calc(var(--side-w) + 28px); display: flex; flex-direction: column; gap: 12px; align-items: flex-end; pointer-events: none; }
.toast {
  --edge: var(--edge-dim); --face: var(--navy-1); border-left: 6px solid var(--accent); padding: 7px 12px; font-size: 18px; font-weight: 600; max-width: 360px;
  animation: toastIn .25s var(--ease); text-shadow: 1px 1px 0 #000;
}
.toast.gold { border-left-color: var(--gold); --edge: var(--gold-2); }
.toast.warn { border-left-color: var(--red); --edge: #8e3a34; }
/* aviso que abre uma tela (anúncio no mercado, compra de outro jogador; live_ui.js) */
.toast.clickable { pointer-events: auto; cursor: pointer; }
.toast.clickable:hover { filter: brightness(1.15); }
.toast.market { border-left-color: #4fd0a0; --edge: #2f7a62; font-size: 17px; }
.toast.market.gold { border-left-color: var(--gold); --edge: #b89a48; }
.toast.shout { --glow: 0 0 18px 0 #ffd04050; }
.toast .ico, .toast img.ico { vertical-align: -5px; }
.toast .vip-badge { font-size: 13px; line-height: 15px; vertical-align: 2px; margin-right: 4px; }
.toast b.gold { color: var(--gold); }
/* ---------- Chat no canto (live_ui.js): a mensagem nova do global aparece e some ---------- */
#chat-peek {
  position: absolute; z-index: 15; right: 16px; bottom: calc(var(--bottom-h) + 16px); width: min(340px, calc(var(--vw) - 32px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none;
}
.peek-line {
  pointer-events: auto; cursor: pointer; max-width: 100%; text-align: left; border: 0; font: inherit; color: var(--text, #fff);
  background: #070a15d0; box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #ffffff18; padding: 4px 10px; font-size: 16px; line-height: 1.25;
  text-shadow: 1px 1px 0 #000; animation: toastIn .25s var(--ease); transition: opacity .5s, transform .5s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.peek-line b { margin-right: 6px; color: #9fd2ff; }
.peek-line .vip-badge, .chat-line .vip-badge { font-size: 13px; line-height: 15px; margin-right: 5px; vertical-align: 1px; }
.peek-line:hover { background: #10183ae0; }
.peek-line.out { opacity: 0; transform: translateX(16px); }
/* a oferta do canto ocupa o mesmo lugar: o chat sobe; com o chat aberto, some */
html:has(#offer-pop:not(.hidden)) #chat-peek { bottom: calc(var(--bottom-h) + 120px); }
html:has(#panel-wrap:not(.hidden) #panel[data-panel="social"]) #chat-peek { display: none; }
@media (max-width: 760px) {
  #chat-peek { right: 8px; bottom: calc(var(--bottom-h) + 8px); width: min(300px, calc(var(--vw) - 16px)); }
  .peek-line { font-size: 15px; }
}
.chat-opt { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; font-size: 15px; color: var(--muted); cursor: pointer; }
.mk-alert { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; font-size: 15px; color: var(--muted); }

/* ---------- Captura ---------- */
#capture-pop {
  --edge: var(--gold-2); --face: var(--navy-1); --glow: 0 0 28px 0 #e6c47733;
  /* acima dos painéis (25): o recrutamento tem prazo e não pode ficar escondido atrás da loja */
  position: absolute; z-index: 27; left: 50%; top: calc(var(--top-h) + 84px); transform: translateX(-50%); width: min(440px, calc(var(--vw) - 24px));
  padding: 14px; text-align: center; animation: popIn .2s var(--ease);
}
.cap-title { font-family: var(--font-px); font-size: 21px; line-height: 20px; letter-spacing: 2px; color: var(--gold); text-shadow: 1px 2px 0 #000; margin-bottom: 8px; animation: blink 1.2s steps(2) infinite; }
#capture-pop img:not(.ico) { width: 72px; height: 72px; }
.cap-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.cap-timer { height: 5px; background: linear-gradient(180deg, var(--gold-hi) 0 1px, var(--gold) 1px 60%, var(--gold-2) 60%); margin-top: 12px; transition: width .2s linear; box-shadow: 0 0 0 1px #000; }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 40; transition: opacity .18s; }
#fade.on { opacity: 1; transition: none; }

/* ---------- Painéis (modal) ---------- */
#panel-wrap {
  position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: 20px; animation: fadeIn .15s;
  background: radial-gradient(ellipse at center, #0a0c12cc, #030406f0);
}
#panel {
  --face: var(--navy-1);
  width: min(920px, calc(var(--vw) - 40px)); max-height: calc(100vh - 40px); max-height: calc(var(--vh) - 40px); overflow: auto; overscroll-behavior: contain;
  animation: popIn .2s var(--ease);
}
/* cabeçalho fixo: cobre o alto do painel, então repete os losangos dos cantos de cima */
.p-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; color: var(--gold-hi);
  background: var(--stud) left top no-repeat, var(--stud) right top no-repeat, linear-gradient(180deg, #1b202c, #10131b);
  box-shadow: 0 1px 0 #000, 0 2px 0 var(--edge-dim), 0 3px 0 #000;
}
.p-ico { --face: var(--navy-0); --edge: var(--edge-dim); --drop: transparent; width: 42px; height: 42px; display: grid; place-items: center; flex: none; margin: 4px; }
/* título do painel na gótica */
.p-head h2 { margin: 0; font-family: var(--font-title); font-weight: 600; font-size: 39px; flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1; text-shadow: 2px 2px 0 #000; }
/* o título do Perfil e da Ficha é o nome do jogador, em caixa-alta: na gótica não se lê, então fica na Jersey 10 */
#panel:is([data-panel="perfil"], [data-panel="ficha"]) .p-head h2 { font-family: var(--font-ui); font-size: 34px; line-height: 1.05; letter-spacing: .8px; }
.p-head small { display: block; font-family: var(--font-px); color: var(--accent); font-weight: 400; font-size: 14px; line-height: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; text-shadow: 1px 1px 0 #000; }
.p-body { padding: 16px 20px 24px; }
.p-body h3 {
  margin: 22px 0 12px; font-family: var(--font-px); font-weight: 400; font-size: 17px; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 10px; text-shadow: 1px 1px 0 #000;
}
.p-body h3::before { content: ""; width: 6px; height: 6px; margin: 0 2px; background: var(--gold-2); transform: rotate(45deg); box-shadow: 0 0 0 1px #000; flex: none; }
.p-body h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge-dim), #5e4e3100); }
.p-body p { color: var(--muted); line-height: 1.45; }
.p-body p b { color: var(--text); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 4px; }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { --face: var(--navy-2); padding: 10px; position: relative; }
.card.sel { --edge: var(--hover); --glow: 0 0 14px 0 var(--house-glow); }
.card.lock, .list-item.lock { opacity: .55; filter: grayscale(.6); }
.card img.sprite { width: 64px; height: 64px; display: block; margin: 0 auto; }
.card .name { font-weight: 700; text-align: center; font-size: 20px; text-shadow: 1px 1px 0 #000; margin-top: 2px; }
.card .sub { text-align: center; font-size: 16px; color: var(--muted); line-height: 1.35; }
.card .actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 10px; }
.card small { color: var(--muted); }
.item-card { text-align: center; }
.item-ico { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: 2px auto 6px; background: radial-gradient(circle, #2a3040, #0b0d13 70%); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #ffffff14; flex: none; }
.item-ico .qty { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 16px; font-weight: 700; background: var(--navy-0); color: var(--gold); padding: 0 4px; box-shadow: 0 0 0 2px #000; }
.shop-card .row { align-items: flex-start; }
.shop-card .item-ico { margin: 0; }
.shop-card .owned { color: var(--text); }
/* Loja de Galeões: quantidade com barrinha (dist/src/ui.js, shopQtyHtml) */
.shop-qty { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--edge-dim); }
.shop-qty .custom-row { display: flex; }
.shop-qty .custom-row input[type="number"] { width: 84px; }
.shop-qty #shop-qty-total { font-size: 18px; color: var(--gold); }
.shop-qty #shop-qty-total.short { color: var(--red); }
.price { color: var(--gold); margin-right: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 21px; text-shadow: 1px 1px 0 #000; }
.stat-card b { display: block; font-size: 29px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.stat-card small { font-size: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.list { display: flex; flex-direction: column; gap: 14px; padding: 4px; }
.list-item { --face: var(--navy-2); display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.list-item > img { width: 48px; height: 48px; flex: none; background: radial-gradient(circle, #2a3040, #0b0d13 70%); box-shadow: 0 0 0 2px #000; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item b { text-shadow: 1px 1px 0 #000; }
.list-item small { color: var(--muted); }
.list-item > .row { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tag {
  display: inline-block; font-size: 14px; font-weight: 700; padding: 1px 6px; background: #ffffff12; margin: 1px 3px 1px 0; text-transform: uppercase;
  letter-spacing: .4px; box-shadow: inset 0 0 0 1px #ffffff1c, 0 0 0 1px #000; line-height: 1.35;
}
.tag.ok { color: var(--green); }
/* Ficha do aliado e Monstruário: quem é, linha evolutiva (a forma atual em dourado) e onde aparece */
.lore { margin: 10px 0 2px; line-height: 1.45; }
.evo-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.evo-chain small { color: var(--muted); }
.tag.atual { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 1px #000; }
.sources { margin: 6px 0 0; padding-left: 18px; }
.sources li { margin: 3px 0; line-height: 1.4; }
.stars { color: var(--gold); }
.boost-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.elem-gem { width: 22px; height: 22px; flex: none; background: var(--c); transform: rotate(45deg); box-shadow: inset 3px 3px 0 #ffffff66, inset -3px -3px 0 #0006, 0 0 0 2px #000; margin: 0 6px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 18px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--edge-dim), 0 0 0 3px #000; }
.stat-table td, .stat-table th { padding: 6px 9px; text-align: left; }
/* moldura do nome pelo nível da conta (amostra na tabela do Perfil; no mapa é desenhada em world.js) */
.nameplate-swatch { display: inline-block; padding: 0 8px; border: 2px solid; border-radius: 4px; background: rgba(10, 12, 20, 0.62); color: #fff; line-height: 1.3; }
.stat-table th { color: var(--gold); font-family: var(--font-px); font-weight: 400; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; background: var(--navy-0); }
.stat-table tr:nth-child(odd) td { background: #ffffff06; }
.empty-note { --face: var(--navy-0); --edge: var(--edge-dim); --drop: transparent; padding: 20px; text-align: center; color: var(--muted); }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 2px dotted #c29a521f; min-height: 50px; }
.form-row label { font-weight: 600; }
.form-row label small { font-weight: 400; }
select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, .cr-name {
  --face: var(--navy-0); --edge: var(--edge-dim); --drop: transparent; border: 0; color: var(--text); padding: 7px 10px; min-height: 36px; margin: 4px; border-radius: 0;
}
select:focus, input:focus, textarea:focus { --edge: var(--hover); outline: none; }
select { cursor: pointer; }
option { background: var(--navy-1); }
textarea { width: calc(100% - 8px); min-height: 90px; resize: vertical; }
/* Caixa de marcar: tinta com filete; marcada, um losango de ouro */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: none; margin: 4px; cursor: pointer; background: var(--navy-0);
  box-shadow: 0 0 0 1px var(--edge-dim), 0 0 0 2px #000, inset 0 2px 0 #0008;
}
input[type="checkbox"]:checked {
  background: var(--stud) center no-repeat, var(--navy-0);
  box-shadow: 0 0 0 1px var(--gold-2), 0 0 0 2px #000, inset 0 2px 0 #0008;
}
input[type="checkbox"]:focus-visible { outline: 2px dashed var(--gold); outline-offset: 4px; }
/* Controle deslizante pixel */
input[type="range"] { appearance: none; -webkit-appearance: none; width: 160px; height: 22px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--navy-0); box-shadow: 0 0 0 1px var(--edge-dim), 0 0 0 2px #000; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 18px; margin-top: -6px; background: linear-gradient(180deg, #ead39c, #c9a868 50%, #9c7c42); box-shadow: inset 0 1px 0 #fff6d880, 0 0 0 1px #2a1d0a, 0 2px 4px #0009; }
input[type="range"]::-moz-range-track { height: 6px; background: var(--navy-0); box-shadow: 0 0 0 1px var(--edge-dim), 0 0 0 2px #000; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 20px; border: 0; border-radius: 0; background: var(--gold); box-shadow: 0 0 0 2px #000; }
/* Abas e seletor segmentado */
.tabs { display: flex; gap: 12px; padding: 4px; flex-wrap: wrap; }
.tab, .seg-btn { border: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; cursor: pointer; }
.tab { --face: var(--navy-2); --edge: var(--edge-dim); padding: 7px 14px; font-size: 18px; color: var(--muted); text-shadow: 1px 1px 0 #000; }
/* aba e opção escolhidas: na cor da casa */
.tab.on { --face: var(--house-face); --edge: var(--hover); color: var(--gold-hi); transform: translateY(-2px); --lift: 2px; }
.seg { --face: var(--navy-0); --edge: var(--edge-dim); --drop: transparent; display: inline-flex; padding: 3px; gap: 3px; margin: 4px; }
.seg-btn { background: none; padding: 5px 10px; font-size: 17px; color: var(--muted); }
.seg-btn:hover { color: var(--text); background: #ffffff0c; }
.seg-btn.on { background: linear-gradient(180deg, color-mix(in srgb, var(--house) 55%, var(--navy-2)), color-mix(in srgb, var(--house) 35%, var(--navy-0))); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--hover), 0 0 0 1px #000; text-shadow: 1px 1px 0 #000; }
/* Arquivo: filtro por raridade e ordem */
.box-ctls { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
.box-ctl { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.box-ctl > small { margin: 0 4px; }
.box-ctl .seg { flex-wrap: wrap; }
.boss-bar { height: 18px; }
.boss-bar > span { background: linear-gradient(180deg, #ffd0a0 0 3px, #ff8040 3px 60%, #c8402c 60%) !important; }
/* fila dos chefes: o atual em destaque, os próximos apagados */
.boss-roster { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.boss-next { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; background: #0b0d13; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--edge-dim); opacity: .55; }
.boss-next.now { opacity: 1; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--gold); }
.boss-next small { font-size: 14px; color: var(--muted); }
.boss-next.now small { color: var(--gold); }
.log { --face: var(--navy-0); --edge: var(--edge-dim); --drop: transparent; padding: 10px; font-size: 17px; color: var(--muted); max-height: 200px; overflow: auto; }
.chart-cycle { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Bônus diário: fileira da semana (hoje em dourado) e missões com botão de resgate. */
.day-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; padding: 6px 4px 4px; }
.day-cell { --face: var(--navy-2); --edge: var(--edge-dim); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px 8px; text-align: center; }
.day-cell small { font-family: var(--font-px); font-size: 13px; line-height: 12px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.day-cell b { font-size: 18px; text-shadow: 1px 1px 0 #000; }
.day-cell.past { opacity: .5; }

.day-cell.next { --face: var(--navy-0); }
.day-cell.next .ico { filter: grayscale(1) brightness(.6); }
.day-cell.today {
  --edge: var(--gold); --face: #2a2312; --glow: 0 0 18px 2px #e6c47740; transform: translateY(-3px); --lift: 3px;
  background-image: linear-gradient(180deg, #3f3319, #221b0c);
}
.day-cell.today small { color: var(--gold); }
.day-cell.today b { color: var(--gold); }
.daily-task.ready { --edge: var(--gold); }
.daily-task.claimed { opacity: .6; }
.daily-check {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 20px; color: var(--muted); background: var(--navy-0);
  box-shadow: 0 0 0 1px var(--edge-dim), 0 0 0 2px #000;
}
.daily-task.claimed .daily-check { color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 0 2px #000; }
.daily-task.ready .daily-check { color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 0 2px #000, 0 0 10px #e6c47740; }

/* ---------- Criação e telas de conta ---------- */
#creation {
  position: absolute; inset: 0; z-index: 50; overflow: auto;
  background: url("assets/ui/bg/menu_bg.webp") center / cover no-repeat fixed, #0a0c12 url("assets/hogsmeade.webp") center / cover fixed;
  image-rendering: pixelated;
}
#creation::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, #0a0c1255, #040508d8 80%); }
.cr-wrap {
  --face: var(--navy-1);
  position: relative; width: min(1000px, calc(100% - 32px)); margin: 28px auto; color: var(--text); padding: 22px 26px 26px;
  background-image: var(--studs), linear-gradient(180deg, #181c27, var(--navy-1) 200px); animation: popIn .3s var(--ease);
}
.cr-logo-img { display: block; width: min(440px, 80%); height: auto; margin: -6px auto 4px; image-rendering: pixelated; animation: float 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 0 #000a); }
/* nome do jogo em texto, quando o logo não carrega */
.cr-logo {
  text-align: center; font-family: var(--font-title); font-weight: 600; font-size: 39px; line-height: 1.1; color: var(--gold);
  text-shadow: 2px 3px 0 #000; animation: float 3.2s ease-in-out infinite;
}
.cr-kicker { text-align: center; color: var(--accent); font-family: var(--font-px); letter-spacing: 3px; font-size: 16px; line-height: 14px; margin-top: 16px; text-shadow: 1px 1px 0 #000; }
.load-bar { width: min(320px, 80vw); height: 14px; margin: 8px auto 0; }
.load-bar > span { transition: width 0.15s steps(4); }
.cr-title { text-align: center; font-weight: 700; font-size: 42px; margin: 6px 0 12px; line-height: 1.1; letter-spacing: 1px; text-shadow: 2px 3px 0 #000, 0 0 18px #e6c47722; }
.cr-text, .cr-wrap > p { color: var(--muted); text-align: center; margin: 4px 0 16px; }
.cr-identity { --face: var(--navy-0); --edge: var(--edge-base); padding: 16px; text-align: center; margin-top: 22px; }
.cr-label { display: block; font-family: var(--font-px); font-size: 15px; line-height: 13px; letter-spacing: 3px; color: var(--accent); margin-bottom: 4px; }
.cr-name {
  width: min(560px, calc(100% - 8px)); text-align: center; font-weight: 700; font-size: 29px; letter-spacing: 3px; padding: 12px; margin: 10px 4px 6px;
  text-transform: uppercase;
}
.cr-name::placeholder { color: var(--dim); }
.cr-looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 14px; }
.cr-section { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 2px 8px; }
.cr-section b { font-weight: 700; font-size: 26px; }
.cr-section small { color: var(--accent); }
.cr-starters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 6px; }
.cr-starter { --face: var(--navy-2); border: 0; color: var(--text); padding: 6px 6px 0; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; transition: transform .15s var(--ease), --lift .15s var(--ease); }
.cr-starter:hover { transform: translateY(-3px); --lift: 3px; --edge: var(--hover); }
.cr-starter .art {
  height: 170px; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--edge-dim), 0 0 0 2px #000;
  background: var(--dither), repeating-linear-gradient(45deg, #ffffff05 0 8px, transparent 8px 16px), radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--el, #4a5068) 50%, #0b0d13), #07080c 78%);
}
.cr-starter img { width: 140px; height: 140px; filter: drop-shadow(0 4px 0 #0008); }
.cr-starter b { display: block; font-family: var(--font-px); font-weight: 400; font-size: 23px; line-height: 20px; padding-top: 12px; letter-spacing: 3px; text-shadow: 1px 2px 0 #000; }
.cr-starter small { display: block; font-size: 16px; color: var(--accent); padding: 6px 0 4px; font-weight: 700; letter-spacing: .5px; }
.cr-starter.sel { --edge: var(--gold); --glow: 0 0 24px 2px #e6c47750; transform: translateY(-5px); --lift: 5px; }
.cr-starter.sel b { color: var(--gold); }
.cr-starter.sel .art img { animation: float 1.6s ease-in-out infinite; }
.cr-confirm { margin-top: 20px; width: calc(100% - 4px); padding: 14px; font-size: 22px; min-height: 52px; letter-spacing: 1.5px; }
.cr-heroes { grid-template-columns: repeat(4, 1fr); }
.cr-blurb { display: block; font-size: 16px; color: var(--muted); padding: 0 8px 12px; line-height: 1.35; }
.cr-chosen { text-align: center; margin-top: 12px; font-weight: 700; color: var(--gold); text-shadow: 1px 1px 0 #000; }

.auth-wrap { width: min(470px, calc(100% - 32px)); margin-top: max(24px, 8vh); }
.auth-form { display: grid; gap: 12px; margin-top: 8px; }
.auth-form label { display: grid; gap: 4px; font-family: var(--font-px); font-size: 15px; line-height: 13px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
.auth-form input { font-family: var(--font-ui); font-weight: 600; font-size: 22px; padding: 10px 12px; min-height: 46px; letter-spacing: .5px; }
.auth-form .cr-confirm { margin-top: 6px; }
.auth-form label.auth-show { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.auth-form .auth-show input { min-height: 0; width: 18px; height: 18px; padding: 0; margin: 0; }
.auth-error { min-height: 1.2em; color: var(--red); font-weight: 700; font-size: 18px; text-shadow: 1px 1px 0 #000; }
.auth-switch { display: block; width: 100%; margin-top: 14px; background: none; border: 0; color: var(--muted); font-weight: 600; cursor: pointer; padding: 10px 6px; min-height: 44px; }
.auth-switch b { color: var(--gold); }
.auth-switch:hover { color: var(--text); }
.auth-text { text-align: center; margin: 6px 0 14px; color: var(--muted); }
.auth-small { font-size: 19px; margin: 4px 0 10px; }
.auth-text a, .auth-legal a { color: var(--gold); }
.auth-legal { text-align: center; margin: 18px 0 0; font-size: 19px; color: var(--muted); }
.p-body a:not(.btn) { color: var(--gold); }
.auth-save { --face: var(--navy-0); --edge: var(--gold); text-align: center; padding: 12px; font-weight: 600; margin: 4px; }

/* =====================================================================
   FILTRO CRT (TV antiga): scanlines + grade RGB, vinheta com cantos
   arredondados, ruído e cintilação. Só CSS; nenhum canvas extra por quadro.
   Leve sobre o mapa; mais forte com menu, painel ou tela de entrada abertos.
   ===================================================================== */
/* Filtro de TV de tubo. Camadas (todas sem clique, só CSS + um filtro SVG):
   - .crt-scan: linhas de varredura suaves (sombra em onda, não risco duro) e um brilho leve no meio da tela;
   - .crt-roll: a faixa clara que desce devagar, como a varredura de uma TV velha;
   - .crt-glass: o vidro abaulado (reflexo no alto à esquerda e a borda que escurece em curva);
   - ::after: a moldura com cantos bem arredondados e a vinheta que segue a curva do tubo;
   - as linhas são desenhadas curvas (abrem para as bordas, como num vidro abaulado), uma vez por tamanho de
     tela, em ui.js (drawCrtLines). Curvar o conteúdo de verdade (filtro SVG) custava ~300 ms por quadro animado.
   --scan/--vig/--round/--glass sobem com menu aberto; o mapa durante o jogo fica sempre mais leve. */
#crt { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; display: none; --scan: .1; --vig: .3; --round: 10px; --glass: .5; --noise: 0; --roll: .03; }
html.crt-1 #crt, html.crt-2 #crt { display: block; }
/* durante o jogo (nenhum menu aberto) o filtro sobre o mapa é opcional: botão da TV na barra de cima */
html:not(.crt-game):not(:has(#menu-drawer:not(.hidden), #panel-wrap:not(.hidden), #creation:not(.hidden))) #crt { display: none; }
html.crt-1 #crt { --scan: .08; --vig: .28; --round: 12px; --glass: .35; }
html.crt-2 #crt { --scan: .13; --vig: .4; --round: 18px; --glass: .55; }
html.crt-1:has(#menu-drawer:not(.hidden), #panel-wrap:not(.hidden), #creation:not(.hidden)) #crt { --scan: .14; --vig: .55; --round: 26px; --glass: .7; --noise: .03; --roll: .04; }
html.crt-2:has(#menu-drawer:not(.hidden), #panel-wrap:not(.hidden), #creation:not(.hidden)) #crt { --scan: .2; --vig: .72; --round: 38px; --glass: 1; --noise: .045; --roll: .06; }
#crt > * { position: absolute; inset: 0; display: block; }
.crt-scan { width: 100%; height: 100%; opacity: calc(var(--scan) * 3.2); mix-blend-mode: multiply; }
.crt-roll {
  bottom: auto !important; height: 22%;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / var(--roll)) 45%, rgb(255 255 255 / calc(var(--roll) * 1.4)) 50%, rgb(255 255 255 / var(--roll)) 55%, transparent);
  animation: crtRoll 7s linear infinite; will-change: transform;
}
.crt-glass {
  border-radius: var(--round);
  background:
    /* fósforo mais aceso no meio do tubo */
    radial-gradient(ellipse 60% 52% at 50% 46%, rgb(255 236 200 / calc(var(--glass) * .05)), transparent 72%),
    /* reflexo do vidro: mancha clara no alto à esquerda e um filete curvo perto da borda de cima */
    radial-gradient(ellipse 55% 38% at 22% 8%, rgb(255 255 255 / calc(var(--glass) * .07)), transparent 70%),
    radial-gradient(ellipse 120% 18% at 50% -6%, transparent 78%, rgb(255 255 255 / calc(var(--glass) * .06)) 86%, transparent 94%),
    /* a borda do tubo escurece em curva (mais nos cantos), como uma tela abaulada */
    radial-gradient(ellipse 140% 125% at 50% 50%, transparent 52%, rgb(0 0 0 / calc(var(--vig) * .55)) 74%, rgb(0 0 0 / var(--vig)) 100%);
}
#crt::after {
  /* moldura: cantos arredondados (fora deles, preto) e sombra interna larga que dá volume ao vidro */
  content: ""; position: absolute; inset: 0; border-radius: var(--round);
  box-shadow: 0 0 0 100vmax #000, inset 0 0 0 2px rgb(0 0 0 / .9), inset 0 0 calc(var(--round) * 2.2 + 24px) rgb(0 0 0 / calc(var(--vig) * .8)), inset 0 0 6px 2px rgb(255 255 255 / calc(var(--glass) * .04));
}
.crt-noise {
  inset: -50% !important; opacity: var(--noise); will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: crtNoise .6s steps(6) infinite;
}
html:has(#menu-drawer:not(.hidden), #panel-wrap:not(.hidden), #creation:not(.hidden)) .crt-glass { animation: crtFlicker 6s steps(1) infinite; }
html:not(:has(#menu-drawer:not(.hidden), #panel-wrap:not(.hidden), #creation:not(.hidden))) :is(.crt-noise, .crt-roll) { display: none; }
/* Leve aberração cromática e brilho nos títulos quando o filtro está ligado. */
html:not(.crt-0) .p-head h2, html:not(.crt-0) .cr-title { text-shadow: 2px 2px 0 #000, -1px 0 0 #ff3d6e80, 1px 0 0 #3dd6ff80, 0 0 10px #ffffff30; }
html:not(.crt-0) .drawer-title b { text-shadow: 3px 3px 0 #000, -2px 0 0 #ff3d6e88, 2px 0 0 #3dd6ff88, 0 0 14px #e6c47766; }
html.crt-0 .drawer-title b, html.crt-0 .cr-logo { text-shadow: 3px 3px 0 #000; }

/* ---------- Animações ---------- */
@keyframes toastIn { from { transform: translateX(30px); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; scale: .96; } }
@keyframes drawerIn { from { opacity: 0; translate: 0 14px; } }
@keyframes cardIn { from { opacity: 0; translate: 0 18px; } }
@keyframes sheetIn { from { translate: 0 40px; opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.15); } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes float { 50% { translate: 0 -4px; } }
@keyframes arrowBob { 50% { translate: 0 3px; } }
@keyframes lowHp { 50% { filter: brightness(1.5); } }
@keyframes shine { 0% { left: -20px; } 40%, 100% { left: calc(100% + 20px); } }
@keyframes crtNoise { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(-5%, -4%); } }
@keyframes crtRoll { from { transform: translateY(-110%); } to { transform: translateY(560%); } }
@keyframes crtFlicker { 0% { opacity: 1; } 31% { opacity: .82; } 32% { opacity: 1; } 67% { opacity: .9; } 68% { opacity: 1; } 93% { opacity: .85; } 94% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .crt-noise { display: none; }
}

/* ---------- Toque: alvos de pelo menos 40 px ---------- */
@media (pointer: coarse) {
  .btn, .btn.small { min-height: 40px; }
  .btn.small { padding: 8px 12px; }
  .icon-btn.mini { width: 34px; height: 34px; font-size: 20px; }
  #quest-guide { width: 34px; height: 34px; }
  select { min-height: 40px; }
  .seg-btn { min-height: 38px; }
}

/* ---------- Responsivo ---------- */
/* Monitores grandes: HUD um pouco maior para continuar legível. */
@media (min-width: 1800px) and (min-height: 950px) { :root { --hud-zoom: 1.2; } }
@media (min-width: 2300px) and (min-height: 1300px) { :root { --hud-zoom: 1.5; } }
@media (max-width: 1140px) {
  :root { --side-w: 200px; }
  #topbar, #bottombar { gap: 10px; }
  .lead-card { width: 210px; }
  .team-slots { grid-template-columns: repeat(5, 40px); gap: 8px; }
  .team-slot img { width: 32px; height: 32px; }
  .hot-slot { width: 40px; }
  #hotbar { gap: 6px; }
  .quick-menu .menu-btn { width: 54px; }
}
@media (max-width: 960px) {
  .lead-card { width: 172px; position: relative; }
  /* o nível vai para o canto do retrato e o nome usa a largura toda (senão "NARUTO GENIN" vira "NARU…") */
  .lead-title .lvl-badge { position: absolute; left: 3px; bottom: 3px; }
  .lead-title b { font-size: 17px; letter-spacing: 0; }
  .team-slots { grid-template-columns: repeat(5, 36px); gap: 8px; }
  .team-slot img { width: 30px; height: 30px; }
  .hot-slot { width: 36px; }
  .hot-slot .ico { --s: 28px !important; width: 28px; height: 28px; }
  .tb-player { min-width: 0; }
  .tb-currency .hide-md { display: none; }
  /* bônus na barra de cima como no celular (ícone em cima, texto curto embaixo): com o total de XP e as poções
     juntos não cabia */
  .coin.boost { padding: 0 5px; gap: 6px; }
  .boost-item { flex-direction: column; gap: 1px; font-size: 12px; line-height: 11px; }
  .boost-item .bt-full { display: none; }
  .boost-item .bt-short { display: inline; }
  .quick-menu .menu-btn:not(.menu-toggle) { display: none; }
  .menu-cards { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 16px; }
}

/* Tela baixa (notebook de 720 px, janela não maximizada): cartões do menu menores para a última fileira caber. */
@media (min-width: 761px) and (max-height: 800px) {
  .drawer-inner { padding-top: 10px; padding-bottom: 14px; }
  .drawer-head { margin-bottom: 8px; }
  .menu-cards { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px; }
  .mc-label { font-size: 17px; padding: 6px 4px 7px; }
}

/* Celular e janelas estreitas: dock em duas linhas, topo enxuto, painéis como folha inferior. */
@media (max-width: 760px) {
  :root { --top-h: 50px; --dock-h: 120px; --side-w: 170px; }
  .hide-sm { display: none !important; }
  #topbar { gap: 10px; padding-top: 5px; padding-bottom: 5px; }
  .tb-player { padding: 2px; width: 40px; min-width: 40px; height: 38px; justify-content: center; }
  .tb-player-info { display: none; }
  .tb-lvl-mini { display: block; position: absolute; right: -6px; bottom: -6px; font-size: 13px; padding: 0 3px; line-height: 13px; }
  .tb-spacer { display: none; }
  /* o interruptor nunca pode vazar por cima das moedas: o Auto Hunt para de encolher nele (mín. 60 px) */
  .tb-auto { flex: 1; min-width: 60px; container-type: inline-size; }
  .auto-label { min-width: 0; flex: 1; overflow: hidden; }
  .auto-label b, .auto-label small { overflow: hidden; text-overflow: ellipsis; }
  .coin { padding: 0 1px; }
  .tb-currency { --sep: 14px; }
  /* bônus ativo (incenso etc.): ícone em cima e tempo curto embaixo, para sobrar espaço ao Auto Hunt */
  .coin.boost { padding: 0 5px; gap: 6px; }
  .boost-item { flex-direction: column; gap: 1px; font-size: 12px; line-height: 11px; }
  .boost-item .bt-full { display: none; }
  .boost-item .bt-short { display: inline; }

  #quest-card { left: 10px; right: 10px; width: auto; transform: none; top: calc(var(--top-h) + 10px); padding: 5px 8px 6px; }
  /* aberta, a missão fica por cima do analisador e do minimapa (que começam logo abaixo dela) */
  #quest-card.open { z-index: 8; }
  #quest-card.mini { right: 10px; }
  .quest-titles b { font-size: 18px; }
  #analyzer, #minimap-box { top: calc(var(--top-h) + 82px); }
  #analyzer { left: 10px; }
  #analyzer:not(.min) { width: min(300px, calc(100vw - 20px)); z-index: 7; max-height: calc(var(--free-h) - 90px); }
  #minimap-box { right: 10px; }
  #analyzer.min .an-summary .an-ico { display: none; }
  #analyzer.min .an-summary b { font-size: 17px; }
  #analyzer.min .an-summary small { margin: 0 4px 0 2px; }
  #analyzer.min { min-width: 0; max-width: calc(100% - var(--side-w) - 34px); }
  #analyzer.min #an-min { display: none; }
  #analyzer.min .float-head { padding: 0 8px; min-height: 36px; }
  #analyzer.min .an-summary::after { content: " ▾"; color: var(--muted); }
  #toasts, html:has(#quest-card.mini) #toasts { left: 10px; right: 10px; top: calc(var(--top-h) + 10px); align-items: center; }
  .toast { max-width: 100%; }

  /* Linha 1: líder | equipe. Linha 2: itens | botão Menu. A coluna do meio completa a largura da equipe. */
  #bottombar {
    display: grid; grid-template-columns: minmax(0, 1fr) 100px 74px; grid-template-rows: 54px 46px; gap: 10px 10px; align-items: stretch;
    grid-template-areas: "lead team team" "hot hot menu";
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .lead-card { grid-area: lead; }
  .team-box { grid-area: team; justify-self: end; }
  #hotbar { grid-area: hot; }
  .quick-menu { grid-area: menu; overflow: visible; padding: 0; margin: 0; }
  .lead-card { width: auto; height: 54px; padding: 3px 8px 3px 3px; min-width: 0; margin-left: 0; }
  .lead-title b { font-size: 17px; }
  .lead-card img { width: 46px; height: 46px; }
  .lead-bar { grid-template-columns: 24px 1fr auto; }
  .team-box { align-self: stretch; }
  .team-slots { grid-template-columns: repeat(5, 30px); gap: 7px; }
  .team-slot { height: 54px; padding: 1px 2px 3px; }
  .team-slot img { width: 26px; height: 26px; }
  .team-slot span:not(.bar) { font-size: 12px; }
  #hotbar { padding: 4px; gap: 6px; min-width: 0; }
  .hot-slot { flex: 1; width: auto; min-width: 34px; height: 38px; }
  .quick-menu { flex: none; }
  .quick-menu .menu-btn.menu-toggle { width: 70px; height: 46px; min-height: 0; flex-direction: row; gap: 4px; font-size: 16px; margin: 0 0 0 4px; }
  .quick-menu .menu-btn.menu-toggle .ico { --s: 24px; width: 24px; height: 24px; }

  #menu-drawer { top: var(--top-h); }
  .drawer-inner { padding: 14px 14px 22px; }
  .drawer-title b { font-size: 39px; }
  .drawer-hint { display: none; }
  .menu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
  .mc-label { font-size: 16px; padding: 6px 2px 7px; gap: 4px; letter-spacing: .3px; }
  .mc-label .ico { display: none; }
  .menu-grid { gap: 12px; padding-top: 22px; }
  .menu-chip { flex: 1 1 140px; }

  #panel-wrap { padding: 0; place-items: end stretch; }
  #panel { width: 100%; max-height: calc(100dvh - 24px); animation: sheetIn .25s var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .p-head { padding: 8px 8px 8px 10px; gap: 8px; }
  .p-ico { width: 36px; height: 36px; }
  .p-head h2 { font-size: 26px; line-height: 26px; }
  #panel:is([data-panel="perfil"], [data-panel="ficha"]) .p-head h2 { font-size: 27px; }
  .p-body { padding: 12px 12px 20px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .grid.wide { grid-template-columns: 1fr; }
  .list-item { flex-wrap: wrap; }
  .list-item > .row { width: 100%; }
  .stat-table { display: block; overflow-x: auto; white-space: nowrap; }
  .form-row { flex-wrap: wrap; }
  .day-row { gap: 8px; }
  .day-cell .ico { --s: 24px !important; width: 24px; height: 24px; }
  #dialog { padding: 14px 14px 8px; bottom: calc(var(--bottom-h) + 16px); }
  .dlg-text { font-size: 21px; }

  .cr-wrap { padding: 18px 14px 20px; margin: 16px auto; }
  .cr-logo { font-size: 39px; }
  .cr-title { font-size: 34px; }
  .cr-looks { grid-template-columns: repeat(2, 1fr); } .cr-starters { grid-template-columns: 1fr 1fr 1fr; } .cr-heroes { grid-template-columns: 1fr 1fr; }
  .cr-starter img { width: 96px; height: 96px; } .cr-starter .art { height: 112px; }
}
/* celular: música e voto saem da barra de cima (ficam na Config e no Menu), senão cobrem o Auto Hunt */
@media (max-width: 520px) {
  .tb-music, .tb-vote, .tb-invite, .tb-discord { display: none; }
  /* o filtro de TV continua na Config: aqui o espaço é do Auto Hunt e do bônus ativo (incenso etc.) */
  .tb-crt { display: none; }
  /* moedas mais enxutas: com um incenso ligado, "115,5 mil" + diamantes + bônus ainda cabem em 360 px */
  #topbar { gap: 8px; }
  .tb-currency { --sep: 12px; }
  .coin { font-size: 18px; gap: 4px; padding: 0 1px; }
  .coin .ico { --s: 20px !important; width: 20px; height: 20px; }
  .coin.boost { padding: 0 4px; }
}
@media (max-width: 400px) {
  /* com bônus ativo não cabe o atalho do chat: ele continua no Menu (as não lidas somam na bolinha do Menu) */
  #topbar:has(.coin.boost:not(:empty)) .tb-chat { display: none; }
  .tb-auto { padding-left: 8px; gap: 6px; }
  /* moedas mais juntas: em 360 px sobram os 2 px que faltavam para o texto do Auto Hunt aparecer */
  .tb-currency { --sep: 10px; }
  .auto-label small { letter-spacing: 0; font-size: 12px; }
  .auto-label b { font-size: 15px; letter-spacing: 0; }
  #bottombar { grid-template-columns: minmax(0, 1fr) 82px 70px; }
  .team-slots { grid-template-columns: repeat(5, 26px); gap: 6px; }
  .team-slot img { width: 24px; height: 24px; }
  .menu-cards { gap: 14px 12px; }
  .mc-label { font-size: 14px; }
  .day-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .day-cell { padding: 5px 0 6px; }
  .day-cell small { font-size: 12px; letter-spacing: 0; }
}
/* Auto Hunt no celular: conforme a caixa encolhe (incenso, chat, tela estreita), sai primeiro o ⚙ (os filtros
   estão na Config), depois o ícone, depois o texto — aí volta um ícone pequeno, e com 2+ bônus fica só o
   interruptor, que já mostra o estado. Medidas: ícone 32, texto ≥ 46, interruptor 48, ⚙ 28, espaços 8. */
@container (max-width: 185px) { .tb-auto .auto-cfg { display: none; } }
@container (max-width: 149px) { .tb-auto .auto-icon { display: none; } }
@container (max-width: 99px) {
  .tb-auto .auto-label { display: none; }
  .tb-auto .auto-icon { display: inline-grid; }
  .tb-auto .auto-icon .ico { --s: 22px !important; width: 22px; height: 22px; }
}
@container (max-width: 77px) { .tb-auto .auto-icon { display: none; } }
/* Telas baixas (paisagem no celular): dock em uma linha só. */
@media (max-height: 520px) and (min-width: 600px) {
  :root { --top-h: 46px; --dock-h: 64px; }
  .tb-player, .tb-auto, .icon-btn.square { height: 34px; }
  .icon-btn.square { width: 34px; }
  .lead-card, .team-slot { height: 50px; }
  .lead-card img { width: 42px; height: 42px; }
  .hot-slot { height: 42px; }
  #hotbar { padding: 3px; }
  #minimap-box:not(.min) .mm-body { display: none; }
  .menu-cards { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 14px; }
  .drawer-inner { padding-top: 12px; }
  .drawer-head { margin-bottom: 10px; }
  /* Celular deitado (largura <= 760): volta o dock para uma linha e a missão para o centro. */
  #bottombar { display: flex; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  #bottombar .lead-card { width: 172px; height: 50px; }
  #bottombar .team-box { justify-self: auto; }
  #bottombar .quick-menu { flex: 1; }
  #bottombar .quick-menu .menu-btn.menu-toggle { width: 58px; height: 48px; flex-direction: column; gap: 1px; font-size: 13px; }
  #bottombar .quick-menu .menu-btn.menu-toggle .ico { --s: 24px; width: 24px; height: 24px; }
  #bottombar #hotbar { flex: none; }
  #bottombar .hot-slot { flex: none; width: 36px; height: 40px; }
  #quest-card { left: 50%; right: auto; transform: translateX(-50%); width: min(400px, calc(var(--vw) - 2 * var(--side-w) - 56px)); }
  #quest-card.mini { right: calc(var(--side-w) + 28px); }
  #analyzer, #minimap-box, #toasts { top: calc(var(--top-h) + 10px); }
}
@media (max-height: 520px) and (min-width: 600px) and (max-width: 700px) {
  #bottombar .lead-card { width: 150px; }
  #bottombar .team-slots { grid-template-columns: repeat(5, 28px); gap: 6px; }
  #bottombar .hot-slot { width: 32px; }
}
.portrait { width: 96px; height: 96px; flex: none; background: radial-gradient(circle, #2a3040, #0b0d13 70%); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--edge-dim), 0 0 0 3px #000, 0 0 0 4px var(--edge-base), 0 0 0 5px #000, 0 6px 12px #0009; margin: 6px; }

/* ==============================================================
   Diamantes, VIP e ofertas (premium.js)
   ===================================================================== */
/* Chip de diamantes na barra de cima, com o "+" dourado brilhando. */
.coin-diamond { border: 0; cursor: pointer; color: var(--text); padding-right: 4px; transition: transform .14s var(--ease); }
.coin-diamond:hover { transform: translateY(-2px); }
.coin-diamond:hover b { color: #c4f3ff; }
.coin-diamond b { color: #8fe8ff; }
.coin-plus {
  font-style: normal; font-weight: 700; font-size: 18px; line-height: 18px; width: 20px; height: 20px; display: grid; place-items: center; margin-left: 2px;
  background: linear-gradient(180deg, #ead39c 0 1px, #c9a868 1px 55%, #9c7c42 55%); color: #1c1205;
  box-shadow: 0 0 0 1px #2a1d0a, 0 0 0 2px #000; position: relative; overflow: hidden; animation: plusGlow 1.6s steps(4) infinite;
}
.coin-plus::before { content: ""; position: absolute; top: 0; bottom: 0; width: 5px; left: -10px; background: #ffffffc0; transform: skewX(-20deg); animation: shine 2.2s steps(10) infinite; }
.coin-diamond.has-offer { --edge: var(--gold); --glow: 0 0 12px 0 #e6c47770; }
@keyframes plusGlow { 50% { box-shadow: 0 0 0 1px #2a1d0a, 0 0 0 2px #000, 0 0 10px 2px #e6c47790; } }

/* Selo VIP: plaquinha dourada ao lado do nome (só aparece com VIP ativo). */
.vip-badge {
  display: none; font-style: normal; font-weight: 700; font-size: 13px; line-height: 15px; padding: 0 4px; letter-spacing: .6px;
  background: linear-gradient(180deg, #fff6c0 0 2px, #ffcf3a 2px 60%, #d98a0a 60%); color: #3a1c00;
  box-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 0 8px #e6c47780;
}
html.is-vip .vip-badge, .vip-badge.on { display: inline-block; }
/* nos painéis (loja, perfil, Monumento) o selo acompanha o texto de 18px da fonte pixel */
#panel .vip-badge { font-size: 16px; line-height: 18px; padding: 0 5px; vertical-align: 1px; }
/* Níveis do VIP: Monitor bronze, Ordem da Lanterna prata, Auror ouro com brilho, Patrono azul-prateado (a luz de um
   patrono) com letras douradas. A barra de cima usa html[data-vip]. */
.vip-badge.t-monitor, html[data-vip="monitor"] #tb-vip {
  background: linear-gradient(180deg, #ffd2a8 0 2px, #d08a4a 2px 60%, #8a4a1e 60%); color: #2a1004;
  box-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 0 8px #d08a4a80;
}
.vip-badge.t-lanterna, html[data-vip="lanterna"] #tb-vip {
  background: linear-gradient(180deg, #ffffff 0 2px, #dfe8f0 2px 60%, #8a9aaa 60%); color: #14202c;
  box-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 0 8px #c8d4e080;
}
.vip-badge.t-auror, html[data-vip="auror"] #tb-vip {
  background: linear-gradient(180deg, #fff6c0 0 2px, #ffcf3a 2px 60%, #d98a0a 60%); color: #3a1c00;
  box-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 0 10px #ffd040a0;
  animation: aurorGlow 2.4s ease-in-out infinite;
}
@keyframes aurorGlow { 50% { box-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 0 16px #ffd040e0; } }
.vip-badge.t-patrono, html[data-vip="patrono"] #tb-vip {
  background: linear-gradient(180deg, #e8f8ff 0 2px, #7cc8f0 2px 60%, #2a6a9e 60%); color: #fff2b0; text-shadow: 1px 1px 0 #0a1a2e;
  box-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 0 12px #9fdcffc0;
}
@media (prefers-reduced-motion: reduce) { .vip-badge.t-auror, html[data-vip="auror"] #tb-vip { animation: none; } }
/* Aba VIP: os três níveis mensais lado a lado, o Patrono à parte e a tabela com a coluna do seu nível em destaque. */
.vip-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vip-card .row { align-items: center; gap: 6px; }
.vip-card .vip-price, .vip-patrono .vip-price { font-size: 20px; color: var(--gold); margin: 6px 0 2px; }
.vip-card .vip-price small, .vip-patrono .vip-price small { font-size: 12px; color: var(--muted, #9aa4ae); }
.vip-card.t-monitor { --edge: #b0703a; }
.vip-card.t-lanterna { --edge: #a8b8c8; }
.vip-card.t-auror { --edge: var(--gold); }
.vip-card.on { --glow: 0 0 14px 0 #ffd04050; }
.vip-patrono { --edge: #7cc8f0; --glow: 0 0 16px 0 #9fdcff50; position: relative; margin: 18px 0 14px; padding-top: 18px; }
.vip-patrono .ribbon { background: linear-gradient(180deg, #4a8ac0, #2a5a8a); }
.vip-patrono .grow > p { margin: 6px 0; }
.table-scroll { overflow-x: auto; }
.vip-table td.mine { background: #ffd04018; }
.vip-trial { --edge: #ff8a3a; }
.supporter-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 10px 0; }
.supporter-name { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #00000040; box-shadow: inset 0 0 0 1px #ffffff14; }
.tag.vip-tag { color: var(--gold-ink); background: linear-gradient(180deg, #fff6c0, #ffcf3a 60%, #d98a0a); }
/* Cor de nome e moldura compradas (premium.js só liga se a conta tiver o desbloqueio). */
#tb-name, #panel[data-panel="perfil"] .p-head h2 { color: var(--name-color, inherit); }
html[data-frame="dourada"] #tb-avatar, html[data-frame="dourada"] #panel[data-panel="perfil"] .portrait { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 0 6px #000, 0 0 12px 2px #e6c47780; }
html[data-frame="chakra"] #tb-avatar, html[data-frame="chakra"] #panel[data-panel="perfil"] .portrait { box-shadow: 0 0 0 2px #000, 0 0 0 4px #5fd4ff, 0 0 0 6px #000, 0 0 14px 3px #5fb4ffa0; }

/* Loja de diamantes */
.premium-body { margin-top: 12px; }
.premium-off { margin-bottom: 14px; --edge: var(--gold); }
.premium-off .ico { margin-bottom: 6px; }
.pack-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.pack-card { text-align: center; padding-top: 18px; }
.pack-card.hot { --edge: var(--gold); --glow: 0 0 14px 0 #e6c47740; }
.pack-amount { font-size: 26px; font-weight: 700; color: #8fe8ff; text-shadow: 2px 2px 0 #000; display: inline-flex; align-items: center; gap: 4px; }
.pack-amount s { color: var(--dim); font-size: 18px; text-shadow: none; }
.ribbon {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-family: var(--font-px); font-size: 14px; line-height: 12px; letter-spacing: 1.5px;
  padding: 3px 7px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 80%, #fff), var(--accent-2)); color: var(--text); box-shadow: 0 0 0 1px var(--gold-2), 0 0 0 2px #000; text-shadow: 1px 1px 0 #000; z-index: 1;
}
.ribbon.soft { background: var(--navy-4); }
.starter-card, .deal-banner, .vip-status.on, .vip-hint { --edge: var(--gold); --face: #221c0c; margin-bottom: 14px; }
.starter-card .tag { margin-top: 4px; }
.vip-col { color: var(--gold); font-weight: 700; }
.odds { color: var(--accent) !important; }
.block-why { display: block; width: 100%; text-align: center; color: var(--muted); font-size: 14px; }
.legal { font-size: 15px; color: var(--dim) !important; margin-top: 18px; }
.legal b { color: var(--muted) !important; }
.pix-qr { display: block; width: 220px; height: 220px; margin: 10px auto; image-rendering: auto; background: #fff; padding: 8px; }

/* Oferta (estilo do Bônus diário): arte grande, fileira de cartas e botão dourado enorme. */
.offer-hero { text-align: center; }
.offer-hero .ico { animation: float 2.6s ease-in-out infinite; }
.offer-hero p { margin: 6px auto 14px; max-width: 560px; }
.offer-cells { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.offer-cells .day-cell b { font-size: 20px; }
.offer-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.btn.offer-buy { font-size: 24px; padding: 14px 34px 15px; min-width: min(420px, 100%); }

/* Oferta contextual: cartão pequeno no canto, acima do dock; some sozinho. */
#offer-pop {
  --edge: var(--gold); --face: var(--navy-1); --glow: 0 0 18px 0 #e6c47740;
  position: absolute; z-index: 16; right: 16px; bottom: calc(var(--bottom-h) + 16px); width: min(360px, calc(var(--vw) - 32px));
  display: flex; align-items: center; gap: 10px; padding: 10px; animation: toastIn .25s var(--ease); font-size: 17px; line-height: 1.25;
}
#offer-pop small { color: var(--muted); }
.offer-pop-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; }
@media (max-width: 760px) {
  .coin-diamond .coin-plus { width: 16px; height: 16px; font-size: 15px; }
  .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .btn.offer-buy { font-size: 20px; padding: 12px 18px; }
  #offer-pop { right: 8px; left: 8px; width: auto; bottom: calc(var(--bottom-h) + 8px); }
}
/* ---------- Itens de drop (items_ui.js) ---------- */
.gear-card { text-align: center; }
.eq-bonus { color: #7dff9a !important; }
.gear-stats { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; font-size: 16px; line-height: 1.2; }
.gear-stats b { color: var(--gold); text-shadow: 1px 1px 0 #000; }
.gear-stats span { color: #bfe8ff; }
.gear-head .gear-stats { align-items: flex-start; margin: 6px 0; }
.item-ico.big { width: 112px; height: 112px; display: grid; place-items: center; background: radial-gradient(circle, #2a3040, #0b0d13 70%); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--edge, transparent); }
.lock-ico { position: absolute; left: -6px; top: -6px; font-style: normal; font-size: 14px; }
.rar-tag { font-weight: 700; }
.chips { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.costs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0; justify-content: center; }
.list-item .costs { justify-content: flex-start; }
.cost { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; }
.cost.miss { color: var(--red, #ef5a4a); }
.cost small { color: var(--muted); }
.gear-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
.gear-slot {
  --face: var(--navy-2); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 0; color: var(--text); font: inherit; cursor: pointer;
  background: var(--sheen), var(--face); box-shadow: 0 0 0 1px var(--edge, var(--edge-base)), 0 0 0 2px #000, 0 4px 8px #0009;
  transition: transform .14s var(--ease);
}
.gear-slot:hover { transform: translateY(-2px); --edge: var(--hover); }
.gear-slot.empty { opacity: .7; }
.gear-slot.empty span { font-size: 28px; line-height: 40px; filter: grayscale(.6); }
.gear-slot small { font-size: 14px; color: var(--muted); }
.btn[disabled] { filter: grayscale(.8) brightness(.8); cursor: not-allowed; }

/* ---------- Arena do Estádio (arena_ui.js) ---------- */
.ar-tickets { --face: var(--navy-2); --edge: var(--gold-2); display: flex; align-items: center; gap: 14px; padding: 10px 12px; margin: 4px 4px 0; flex-wrap: wrap; }
.ar-tickets .grow { flex: 1; min-width: 140px; }
.ar-tickets b { color: var(--gold); font-size: 21px; text-shadow: 1px 1px 0 #000; }
.ar-ticket-row { display: flex; gap: 4px; }
.ar-ticket { display: grid; place-items: center; width: 40px; height: 40px; background: radial-gradient(circle, #2a3040, #0b0d13 70%); box-shadow: 0 0 0 2px #000; }
.ar-ticket.empty .ico { filter: grayscale(1) brightness(.45); opacity: .6; }
.ar-ticket.more { color: var(--gold); font-weight: 700; font-size: 17px; }
.ar-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 4px; }
.ar-step {
  --edge: var(--edge-base); --face: var(--navy-2); position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 2px 6px; border: 0; color: var(--text); cursor: pointer; font: inherit; background: var(--sheen), var(--face);
  box-shadow: 0 0 0 1px var(--edge), 0 0 0 2px #000, 0 4px 8px #0009;
  transition: transform .14s var(--ease);
}
.ar-step b { font-family: var(--font-px); font-size: 19px; line-height: 18px; letter-spacing: 1px; font-weight: 400; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.ar-step small { color: var(--muted); font-size: 15px; }
.ar-step i { font-style: normal; font-size: 15px; line-height: 1; }
.ar-step.done i { color: var(--green); }
.ar-step.lock { opacity: .5; filter: grayscale(.7); }
.ar-step:hover { transform: translateY(-2px); --edge: var(--hover); }
.ar-step.on { --edge: var(--hover); --face: var(--house-face); }
.ar-detail { --face: var(--navy-2); --edge: var(--gold-2); margin: 16px 4px 0; padding: 12px 14px; }
.ar-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-detail-head small { font-family: var(--font-px); font-size: 14px; line-height: 12px; color: var(--accent); letter-spacing: 1.5px; }
.ar-name { font-size: 26px; text-shadow: 2px 2px 0 #000; }
.ar-team { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.ar-foe { display: flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; background: #0b0d13; box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #ffffff14; }
.ar-foe img { width: 48px; height: 48px; image-rendering: pixelated; }
.ar-foe small { line-height: 1.15; color: var(--muted); }
.ar-foe b { color: #ffd9d0; }
.ar-first { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #2a221066; box-shadow: inset 0 0 0 1px #e6c47744; color: var(--text); }
.ar-first.got { opacity: .6; }
.ar-first b { color: var(--gold); }
.ar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ar-actions .btn[disabled] { filter: grayscale(.8) brightness(.8); cursor: not-allowed; }
.ar-why { color: var(--accent); }
.ar-odds td { vertical-align: middle; }
.ar-odds-item { display: flex; align-items: center; gap: 8px; line-height: 1.1; }
.ar-pct { width: 120px; }
.ar-pct b { color: var(--gold); font-size: 21px; text-shadow: 1px 1px 0 #000; }
.ar-pct .bar { margin-top: 3px; }
#arena-pop {
  --edge: var(--rc, var(--gold)); --face: var(--navy-1); --glow: 0 0 34px 2px color-mix(in srgb, var(--rc, #e6c477) 45%, transparent);
  position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(var(--vw) - 24px));
  padding: 16px 16px 14px; text-align: center; animation: popIn .25s var(--ease); zoom: var(--hud-zoom);
}
#arena-pop .ap-sub { color: var(--muted); font-size: 18px; margin-top: -2px; }
#arena-pop .ap-first { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 6px 8px; background: #2a221066; box-shadow: inset 0 0 0 1px #e6c47744; font-size: 17px; }
#arena-pop .ap-first b { color: var(--gold); }
.ap-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 6px; padding: 12px 8px 8px; overflow: hidden; background: #0b0d13; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px color-mix(in srgb, var(--rc, #e6c477) 55%, transparent); }
.ap-rays {
  position: absolute; left: 50%; top: 56px; width: 340px; height: 340px; margin: -170px 0 0 -170px; pointer-events: none; opacity: .28;
  background: repeating-conic-gradient(from 0deg, var(--rc, #e6c477) 0 10deg, transparent 10deg 30deg); animation: spin 14s linear infinite;
}
.ap-ico { position: relative; width: 88px; height: 88px; animation: float 1.6s steps(4) infinite; }
.ap-name { position: relative; font-size: 24px; color: var(--rc, var(--gold)); text-shadow: 2px 2px 0 #000; }
.ap-drop .tag, .ap-drop small { position: relative; }
.ap-drop small { color: var(--text); font-size: 17px; }
.ap-note { color: var(--muted); font-size: 16px; }
.ap-note b { color: var(--gold); }
@media (max-width: 760px) {
  .ar-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ar-pct { width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .ap-rays, .ap-ico { animation: none; } }

/* ---------- Relíquias ---------- */
.relic-name { color: #ff3b3b; text-shadow: 0 0 6px #ff3b3b66, 1px 1px 0 #000; }
.relic-row .tag { margin-top: 4px; }
.tag.relic-open { color: #ffd0c8; border-color: #ff3b3b; box-shadow: 0 0 6px #ff3b3b66; }
.relic-found { margin-top: 6px; display: grid; gap: 2px; font-size: 13px; color: var(--muted, #b9c2d6); }
.relic-effect { color: #ff8a7a; margin: 6px 0; }

/* ---------- Mercado ---------- */
.mk-filters select { min-width: 150px; }
.mk-price { margin: 4px 0; }
.mk-locked { opacity: .9; border-color: var(--red, #ef5a4a); }

/* ---------- Pix ---------- */
.pix-box { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.pix-box .pix-qr { width: 200px; height: 200px; image-rendering: auto; background: #fff; padding: 6px; }
.pix-box textarea { width: 100%; min-height: 90px; font-family: monospace; font-size: 12px; word-break: break-all; }

/* ---------- Colecionáveis: lendários, títulos, ranking e Ficha Ninja ---------- */
.legend-name { color: #ffcf4a; text-shadow: 0 0 6px #ffb03066, 1px 1px 0 #000; }
#capture-pop.legend { --edge: #ffcf4a; box-shadow: 0 0 24px 4px #ffb03055; }
.legend-marks { display: flex; gap: 6px; justify-content: center; margin: 8px 0 4px; }
.legend-marks i { width: 14px; height: 14px; transform: rotate(45deg); background: #2a2418; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #6a5a2a; }
.legend-marks i.on { background: #ffcf4a; box-shadow: 0 0 0 2px #000, 0 0 8px #ffcf4a; }
.legend-hint { --edge: #ffcf4a; }
.player-link { color: var(--gold); text-decoration: none; font-weight: 700; }
.player-link:hover, .player-link:focus-visible { text-decoration: underline; }
.player-title { color: #ffd9a0; font-style: italic; }
.player-title.big { font-size: 18px; margin-bottom: 4px; }
.relic-sale { color: #9ff0b0; }
.rank-row { align-items: center; cursor: pointer; }
.rank-row:hover { border-color: var(--gold); }
.rank-pos { min-width: 2.2em; text-align: center; font-family: var(--font-px); font-size: 20px; color: var(--muted); }
.rank-row.top1 .rank-pos { color: #e6c477; } .rank-row.top2 .rank-pos { color: #d8e0ea; } .rank-row.top3 .rank-pos { color: #e09a5a; }
.rank-score { white-space: nowrap; color: var(--gold); }
/* Taça das Casas: as ampulhetas do Saguão (a barra na cor da casa) e o painel da sua casa */
.cup-row { box-shadow: inset 4px 0 0 var(--house); }
.cup-row.mine { background: color-mix(in srgb, var(--house) 16%, transparent); }
.cup-bar { height: 10px; margin: 5px 0 3px; background: #0008; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #ffffff14; }
.cup-bar > i { display: block; height: 100%; background: var(--house); box-shadow: inset 0 -3px 0 #0005, inset 0 2px 0 #ffffff40; }
/* o nome na cor da casa, clareado para ler no fundo escuro (o azul da Corvinal sumia) */
.house-name { color: color-mix(in srgb, var(--house) 62%, #fff); text-shadow: 1px 1px 0 #000; }
.house-hero { align-items: center; gap: 12px; padding: 8px; margin-bottom: 8px; box-shadow: inset 0 0 0 2px var(--house), 0 0 0 1px #000; background: color-mix(in srgb, var(--house) 12%, transparent); }
.house-hero p { margin: 6px 0 0; }
.tag.house-tag { color: color-mix(in srgb, var(--house) 62%, #fff); box-shadow: inset 0 0 0 1px var(--house), 0 0 0 1px #000; }
.tag.house-tag .ico { vertical-align: -3px; }
.cup-week, .cup-last { margin: 6px 0; }
.relic-card .name { font-size: 14px; }

/* segurar o atalho no celular abre a troca: sem menu de texto/imagem do sistema */
.hot-slot { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* luta em andamento: a oferta do canto sobe para não cobrir a barra da luta (e o "Fugir") */
html:has(#battle-bar:not(.hidden)) #offer-pop { bottom: calc(var(--bottom-h) + 76px); }
/* com painel aberto os avisos descem: no topo cobriam o X de fechar */
html:has(#panel-wrap:not(.hidden)) #toasts { top: auto; bottom: calc(var(--bottom-h) + 16px); flex-direction: column-reverse; }

/* ---------- Chat (chat_ui.js) ---------- */
.tb-chat { flex: none; position: relative; }
.tb-chat .dot { top: -6px; right: -6px; }
.chat-log {
  --face: var(--navy-0); --edge: var(--edge-dim); --drop: transparent;
  height: min(52vh, 420px); height: min(calc(var(--vh) * .52), 420px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 10px; margin: 10px 4px 6px; display: flex; flex-direction: column; gap: 4px;
}
.chat-log .empty-note { margin: auto 0; }
.chat-line { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; padding: 2px 4px; }
.chat-line.mine { background: #ffffff0a; }
.chat-time { color: var(--muted); font-size: 13px; margin-right: 2px; }
.chat-name { color: var(--gold); font-weight: 700; text-decoration: none; }
.chat-name::after { content: ":"; color: var(--muted); margin-right: 6px; }
.chat-lvl { color: var(--muted); font-size: 12px; margin: 0 6px 0 -2px; }
.chat-lvl + .chat-text { margin-left: 0; }
.chat-text { color: var(--text); }
.chat-form { display: flex; gap: 6px; align-items: center; }
.chat-form input { flex: 1; min-width: 0; font-size: 17px; }
.chat-err { color: #ff9a8a !important; margin: 2px 6px; font-size: 15px; }
.chat-rules { margin: 6px 4px 0; }
.chat-who { --edge: var(--gold); margin: 10px 4px 0; align-items: center; flex-wrap: wrap; }
.chat-who .row { flex-wrap: wrap; gap: 6px; }
.chat-conv { cursor: pointer; align-items: center; }
.chat-conv:hover { border-color: var(--gold); }
.chat-badge { background: var(--red); color: #fff; min-width: 26px; text-align: center; padding: 0 6px; box-shadow: 0 0 0 1px #000; }
.chat-thread-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 4px 0; }
.chat-thread-head b { font-size: 20px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .chat-log { height: calc(var(--vh) - 300px); min-height: 200px; }
  .chat-line { font-size: 16px; }
}

/* ---------- Dicas do guia, o monitor da casa (guia.js) ---------- */
/* Balão de fala na caixa de tinta da HUD: em cima da cabeça do monitor no mapa; com painel, menu ou diálogo aberto,
   encaixado no canto de baixo com o rosto dele. O nome vai na gótica, com a faixa da cor da casa (--house). */
#guia-balao {
  position: fixed; z-index: 29; left: -999px; top: 0; width: min(340px, calc(100vw - 16px)); display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px 9px; cursor: pointer; color: var(--text); text-shadow: 1px 1px 0 #000;
  background: linear-gradient(180deg, #191d28, var(--navy-1) 60%, #0c0e14);
  box-shadow: 0 0 0 1px var(--edge-dim), 0 0 0 3px var(--navy-1), 0 0 0 4px var(--edge-base), 0 0 0 5px var(--outline), 0 7px 12px 0 #000000a0;
  animation: guiaIn .22s var(--ease); --tail: 50%;
}
#guia-balao.hidden { display: none; }
/* a ponta do balão, apontando para a cabeça dele: o canto de um losango com o mesmo filete de ouro */
#guia-balao::after {
  content: ""; position: absolute; left: var(--tail); bottom: -11px; width: 14px; height: 14px; translate: -50% 0; rotate: 45deg;
  background: #0c0e14; box-shadow: 2px 2px 0 0 var(--edge-base), 3px 3px 0 0 var(--outline); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
#guia-balao .guia-face { display: none; }
#guia-balao.docked {
  left: 14px !important; top: auto !important; bottom: calc(var(--bottom-h) * var(--hud-zoom) + 18px); width: min(390px, calc(100vw - 28px));
}
#guia-balao.docked.docked-right { left: auto !important; right: 14px; }
#guia-balao.docked::after { display: none; }
#guia-balao.docked .guia-face {
  display: block; flex: none; width: 58px; height: 58px; margin: -2px 0 0 -2px; background: var(--house-face);
  box-shadow: 0 0 0 1px var(--edge-dim), 0 0 0 2px var(--edge-base), 0 0 0 3px var(--outline); overflow: hidden;
}
#guia-balao .guia-face img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: cover; object-position: top; }
.guia-body { min-width: 0; flex: 1; }
.guia-name {
  font-family: var(--font-title); font-weight: 600; font-size: 20px; line-height: 1; color: var(--gold-hi);
  margin-bottom: 5px; padding-left: 7px; box-shadow: inset 3px 0 0 var(--house);
}
.guia-text { font-size: 21px; line-height: 1.22; overflow-wrap: anywhere; }
.guia-rest { visibility: hidden; }
.guia-foot { display: flex; align-items: flex-end; gap: 8px; margin-top: 7px; }
.guia-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-left: auto; }
.guia-more { height: 14px; margin-left: auto; font-size: 13px; color: var(--gold); animation: arrowBob .8s steps(2) infinite; }
.guia-quit {
  padding: 2px 0; font: inherit; font-size: 16px; color: var(--muted); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; text-shadow: 1px 1px 0 #000;
}
.guia-quit:hover { color: var(--gold-hi); }
#guia-balao.collapsed { width: auto; padding: 0; background: none; box-shadow: none; animation: guiaBounce .9s steps(3) infinite; }
#guia-balao.collapsed::after { display: none; }
.guia-alert {
  display: grid; place-items: center; width: 30px; height: 30px; font-size: 26px; color: var(--gold-ink); background: var(--gold); text-shadow: none;
  box-shadow: 0 0 0 2px var(--gold-3), 0 0 0 3px var(--outline), 0 4px 0 2px #0008, 0 0 14px 4px var(--house-glow);
}
@keyframes guiaIn { from { opacity: 0; translate: 0 8px; scale: .92; } }
@keyframes guiaBounce { 50% { translate: 0 -4px; } }

/* Brilho no botão da vez: filete de ouro girando com um toque da cor da casa, luz pulsando e faíscas de varinha
   subindo. */
@property --brilho-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
#guia-brilho { position: fixed; z-index: 28; pointer-events: none; border-radius: 6px; }
#guia-brilho.hidden { display: none; }
#guia-brilho::before {
  content: ""; position: absolute; inset: -6px; border-radius: 8px; padding: 3px;
  background: conic-gradient(from var(--brilho-a), var(--gold-3), var(--gold), var(--gold-hi), var(--house), var(--gold), var(--gold-hi), var(--gold-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: brilhoGira 1.6s linear infinite;
}
#guia-brilho::after {
  content: ""; position: absolute; inset: -9px; border-radius: 11px;
  box-shadow: 0 0 16px 5px #e6c47799, inset 0 0 12px 3px #f6e4ae55; animation: brilhoPulsa 1.1s ease-in-out infinite;
}
#guia-brilho i {
  position: absolute; bottom: -4px; left: calc(6% + var(--i) * 9.5%); width: 5px; height: 5px; background: var(--gold-hi);
  box-shadow: 0 0 6px 2px #e6c477; opacity: 0; animation: brilhoFaisca 1.5s steps(6) infinite; animation-delay: calc(var(--i) * -0.37s);
}
#guia-brilho i:nth-child(3n) { width: 3px; height: 3px; background: #fff8e2; }
#guia-brilho i:nth-child(even) { bottom: auto; top: 30%; animation-name: brilhoFaiscaAlta; }
@keyframes brilhoGira { to { --brilho-a: 360deg; } }
@keyframes brilhoPulsa { 50% { box-shadow: 0 0 28px 10px #e6c477cc, inset 0 0 16px 5px #f6e4ae88; } }
@keyframes brilhoFaisca { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 0 -40px; } }
@keyframes brilhoFaiscaAlta { 0% { opacity: 0; translate: 0 0; } 20% { opacity: .9; } 100% { opacity: 0; translate: 0 -54px; } }
@media (prefers-reduced-motion: reduce) { #guia-brilho::before, #guia-brilho::after, #guia-brilho i, #guia-balao.collapsed { animation: none; } }

/* ---------- Loja de Gemas: barra lateral de abas (dist/src/premium.js, premiumPanel) ---------- */
.shop-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; }
.shop-side { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.shop-side .tab { width: 100%; text-align: left; justify-content: flex-start; }
.shop-card { position: relative; }
.shop-card .price s { color: var(--muted); font-weight: normal; margin-right: 2px; }
@media (max-width: 760px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-side { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; }
  .shop-side .tab { width: auto; flex: 0 0 auto; }
}
/* Mesada de Gringotes e "Quantas quiser" (aba Gemas) */
.bolsa-card.on { box-shadow: inset 0 0 0 1px var(--gold); }
.custom-row { align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.custom-row input { width: 90px; text-align: center; }

/* ---------- Clube (clan_ui.js) ---------- */
/* nome do clube em dourado e a sigla pequena ao lado (no cabeçalho, na lista e no ranking) */
.clan-title { color: var(--gold); }
.clan-tag-sm { margin-left: 8px; font-size: 13px; font-weight: 400; letter-spacing: 1px; color: var(--muted); text-shadow: none; vertical-align: 2px; white-space: nowrap; }
.p-head .clan-tag-sm { font-size: 15px; vertical-align: 4px; }
.emblem-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.emblem-opt { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; font: inherit; color: var(--text); background: rgba(0, 0, 0, .3); border: 2px solid transparent; border-radius: 6px; cursor: pointer; }
.emblem-opt small { font-size: 13px; color: var(--muted); text-align: center; }
.emblem-opt:hover { border-color: #ffffff30; }
.emblem-opt.on { border-color: var(--gold); background: #ffd04018; }
.emblem-opt.on small { color: var(--gold); }
.clan-head { display: flex; gap: 12px; align-items: flex-start; }
.clan-head p { margin: 0 0 4px; }
.clan-bonus { display: grid; gap: 4px; margin: 12px 0; padding: 10px 14px; border: 2px solid #ffffff22; border-radius: 6px; background: rgba(0, 0, 0, .25); }
.clan-bonus.on { border-color: var(--gold); background: #ffd04014; }
.clan-bonus > b { font-size: 1.15em; color: var(--gold-hi); }
.clan-bonus.on > b { color: var(--gold); }
.clan-bonus.intro { margin-top: 0; }
.clan-row { gap: 8px; flex-wrap: wrap; }
.clan-status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.clan-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #5a6370; box-shadow: 0 0 0 1px #000; margin-right: 4px; vertical-align: 0; }
.clan-dot.on { background: #4cd964; }
.clan-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.clan-field { display: grid; gap: 6px; margin: 10px 0; }
.clan-field label { font-weight: 600; }
.clan-input { width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; color: var(--text); background: rgba(0, 0, 0, .35); border: 2px solid var(--outline); border-radius: 6px; }
.clan-input.short { max-width: 140px; text-transform: uppercase; }
.clan-tabbody { margin-top: 12px; }
.clan-tabbody > .inv-link { margin-bottom: 12px; }
.boost-item.clan { color: var(--gold); cursor: pointer; }
.clan-shop .btn { white-space: nowrap; }
.clan-shop.on { --edge: var(--gold); }
.chat-line.system { color: var(--muted); font-style: italic; }
.chat-line.system b { color: var(--gold-hi); font-style: normal; }
/* Baú do clube (clan_ui.js) e o botão dele no canto do chat do clube (chat_ui.js) */
.clan-chest { display: grid; gap: 8px; margin: 12px 0; padding: 10px 14px; border: 2px solid var(--gold); border-radius: 6px; background: rgba(0, 0, 0, .25); }
.clan-chest p { margin: 0; }
.chest-count { margin-left: auto; white-space: nowrap; color: var(--gold); font-size: 1.1em; }
.chest-bar { display: block; height: 10px; background: rgba(0, 0, 0, .45); border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px #000; }
.chest-bar i { display: block; height: 100%; background: var(--gold); }
.chest-who { line-height: 1.6; }
.clan-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.chest-btn { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; font: inherit; color: var(--text); background: #1d2340; border: 2px solid var(--gold); border-radius: 6px; cursor: pointer; box-shadow: 0 2px 0 #000; }
.chest-btn span { display: grid; line-height: 1.1; text-align: left; }
.chest-btn small { color: var(--muted); font-size: 13px; }
.chest-btn.full { box-shadow: 0 0 0 2px var(--gold), 0 0 12px var(--gold); }