* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* Accents are the master-palette values so the HUD shares pixels with the world art; panel
     and border are the docs/UI_UX.md CRT chrome. Energy owns cyan, shield goes white. */
  --bg: #0a0a12; --panel: #0c1018; --panel2: #121826; --border: #1e3a4a;
  --text: #c9cdd6; --dim: #6b7280; --neon: #FF2EC8; --magenta: #FF2EC8; --cyan: #00E5FF;
  --hp: #FF3B4E; --en: #00E5FF; --sh: #F2EDE0; --xp: #FF2EC8; --stam: #C4891E; --stamgain: #8CFF3A;
  /* A2.1 Fatia 1 — glass / neon helpers */
  --glass: rgba(8, 12, 20, 0.82);
  --glass2: rgba(12, 18, 28, 0.92);
  --glow-cyan: 0 0 0 1px rgba(0, 229, 255, 0.35), 0 0 12px rgba(0, 229, 255, 0.22), 0 0 28px rgba(255, 46, 200, 0.10);
  --glow-mag: 0 0 0 1px rgba(255, 46, 200, 0.40), 0 0 14px rgba(255, 46, 200, 0.20);
  --edge-cyan: #00E5FF;
  --edge-mag: #FF2EC8;
  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 400ms;
  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-glare-opacity: 0.32;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dockw: 348px;   /* full-height right sidebar width — fitViewport reads the same value */
  --barh: 158px;    /* Fatia 1: strip more compact → playfield taller (was 174px) */
  --vh: 100vh;      /* 100dvh when the browser knows it — mobile chrome stops eating the HUD */
  --pixelfont: 'Pixelify Sans', var(--uifont, 'Courier New', monospace);
  --logofont: 'Jersey 15', 'Pixelify Sans', var(--uifont, 'Courier New', monospace);
}
@font-face {
  font-family: 'Jersey 15';
  src: url('assets/fonts/Jersey15-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('assets/fonts/PixelifySans.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}
html, body {
  height: 100vh; height: var(--vh);
}
body {
  background: var(--bg); color: var(--text);
  font-family: var(--uifont, 'Courier New', monospace); font-size: calc(13px * var(--fontscale, 1));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; user-select: none;
  transition: padding .18s ease;   /* the game slides over smoothly when the dock takes the edge */
}
/* Scrollbars hidden game-wide: the panels still scroll by wheel/drag, the bar just isn't drawn
   (it was cluttering the deck apps, chat and lists). */
* { scrollbar-width: none; }             /* Firefox */
*::-webkit-scrollbar { display: none; }  /* Chromium / WebKit */

/* Game shell: left column (world + bottom strip/hunt) | right dock (full-height phone).
   They share the window as siblings — the deck never overlays the hunt panel. */
#app { display: none; }
#app.on {
  display: flex; flex-direction: row; align-items: stretch;
  width: 100%; height: 100%; max-height: var(--vh); overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  isolation: isolate; /* trap raiseWin's inline z-index so the deck cannot cover #tooltip */
}
body:has(#app.on) {
  display: block; padding: 0; margin: 0;
  overflow: hidden;
}

#left {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; justify-content: flex-start;
  padding: 2px 4px 0; overflow: hidden;
  position: relative;
}
/* Toma tudo que sobra acima da faixa. O canvas é medido contra este box e
   desenhado no tamanho ganho, centralizado — a sobra fica nesta cor, sem esticar. */
#viewwrap {
  flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%;
  position: relative; overflow: hidden;
  background: #050508;
  /* Border lives here, not on the canvas: global border-box plus a 2px border on #viewport
     squeezed the bitmap into wrap-4px and slightly downscaled the whole frame. */
  border: 2px solid var(--border);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.35),
    0 0 0 2px rgba(255, 46, 200, 0.18),
    0 0 18px rgba(0, 229, 255, 0.18),
    0 0 42px rgba(255, 46, 200, 0.12);
}
#viewwrap #viewport,
#viewwrap #glass {
  position: absolute;
  /* fitViewport writes the earned box. A 100% stretch smears pixel art
     whenever that box is shorter than the wrap (notebook height, ultrawide). */
}
/* HUD scale. `zoom` (not transform) because it re-lays-out: every hardcoded px in this file grows
   together and the flex row still reserves the right space. The CANVAS is deliberately excluded —
   pixel art only survives whole-number scaling, and the world already has its own zoom control.
   fitViewport divides the widths it hands these boxes by --ui so the rendered box still matches
   the canvas, and multiplies --dockw / the reserved strip height by it. */
#bottom, #chatbox, #hotbar, #coach, #phone, .appmodal, #tooltip, #tutpanel { zoom: var(--ui, 1); }
#viewport {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  background: #050508;
  cursor: crosshair;
  /* O acabamento do vidro. Vive no CSS e não no laço de render de propósito: são pixels que a GPU
     compõe uma vez, contra um custo por quadro em cima de um canvas que já desenha o mundo todo.
     Nada aqui pode escurecer o miolo — é onde o jogo acontece —, então a vinheta some antes dos
     60% e o brilho de borda é de fora pra dentro. A moldura saiu daqui (está no #viewwrap) pra o
     bitmap do canvas preencher o box 1:1. */
  box-shadow: inset 0 0 22px rgba(4,4,12,.55);
}
/* Sobreposição do tubo: varredura + brilho de canto, num pseudo-elemento do PAI porque canvas é
   elemento substituído e não aceita ::after. `pointer-events: none` é obrigatório, senão a camada
   engole todo clique de mover e atacar. A varredura é de 3px e alfa .045: a essa força ela lê como
   textura de tela e não como listra — acima disso come a arte, que é o oposto do objetivo. */
#glass {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3;
  /* Scanline SO. A vinheta daqui saiu: o canvas ja desenha a dele em drawAtmosphere (`vig`/`vigA`,
     autoravel por mapa no studio), e as duas multiplicavam uma na outra — ~50% da luz comida nos
     cantos, que e a "pelicula escura" por cima do frame. Um efeito, um knob. */
  background: repeating-linear-gradient(rgba(0,0,0,.045) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
/* Quem não quer efeito de tubo desliga em Opções: a classe cai no body e a camada some inteira. */
body.noscan #glass { display: none; }
#viewport.aim { cursor: cell; }

/* Global presence, independent of the camera's visible entities. */
#onlinecounter {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  display: flex; align-items: center; gap: 5px;
  max-width: 48%; padding: 4px 7px;
  pointer-events: none;
  background: rgba(7, 16, 25, .65);
  border: 1px solid rgba(0, 229, 255, .16); border-left: 2px solid rgba(0, 229, 255, .4);
  border-bottom-color: rgba(255, 45, 149, .16);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
#onlinecounter[hidden] { display: none; }

/* Contador de manutenção: mesma família visual do contador de presença, no centro do topo.
   `.soon` acende vermelho no último minuto — aviso de perigo tem de ler nítido. */
#maintbanner {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 4;
  max-width: 62%; padding: 4px 10px;
  pointer-events: none;
  background: rgba(7, 16, 25, .7);
  border: 1px solid rgba(255, 179, 71, .35); border-left: 2px solid rgba(255, 179, 71, .6);
  border-bottom-color: rgba(255, 45, 149, .16);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  color: #ffd9a0; font-size: 11px; line-height: 1.35; text-align: center;
  font-variant-numeric: tabular-nums;
}
#maintbanner[hidden] { display: none; }
/* Faixa de premiações: o texto rola da direita para a esquerda (duração proporcional ao texto, em
   --tkdur). Desce uma linha quando o contador de manutenção está no ar. */
#ticker {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 4;
  width: min(560px, 52%); display: flex; align-items: center; gap: 4px;
  pointer-events: none;
  background: rgba(7, 16, 25, .78);
  border: 1px solid rgba(255, 210, 62, .4); border-left: 2px solid rgba(255, 210, 62, .75);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  color: #ffe08a; font-size: 11px; line-height: 1.35;
}
#ticker[hidden] { display: none; }
#maintbanner:not([hidden]) ~ #ticker { top: 36px; }
#ticker .tk-track { flex: 1; overflow: hidden; white-space: nowrap; padding: 4px 0 4px 8px; }
#ticker #tickertext {
  display: inline-block; padding-left: 100%;
  animation: tickerroll var(--tkdur, 40s) linear infinite;
}
@keyframes tickerroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
#tickerclose {
  pointer-events: auto; flex: none; margin-right: 6px; padding: 0 4px;
  background: none; border: 0; color: #ffe08a; font-size: 14px; line-height: 1; cursor: pointer;
}
#tickerclose:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  #ticker .tk-track { white-space: normal; padding-right: 4px; }
  #ticker #tickertext { padding-left: 0; animation: none; }
}
@media (max-width: 560px) { #ticker { width: 70%; top: 44px; } }
#maintbanner.soon {
  color: #ffb0b0;
  border-color: rgba(255, 82, 82, .55); border-left-color: rgba(255, 82, 82, .85);
}
#perfhud {
  display: none;
  position: absolute; top: 8px; right: 8px; z-index: 4;
  margin: 0; padding: 6px 8px;
  pointer-events: none;
  background: rgba(7, 16, 25, .72);
  border: 1px solid rgba(0, 229, 255, .2);
  color: #9fe8ff;
  font: 11px/1.35 var(--uifont, monospace);
  white-space: pre;
}
#perfhud.on { display: block; }
#onlinecount {
  color: #b5ced3; font-size: 11px; line-height: 1; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.online-label { color: #78969e; font-size: 9px; line-height: 1.3; letter-spacing: .5px; text-transform: uppercase; }
.online-dot { flex: 0 0 3px; height: 3px; background: #6dbba5; }

/* Base da placa global de telemetria; a dimensão A2.1 é definida no bloco global ao fim do arquivo.
   Ciano dos menus sobre painel azul — não é janela do layout livre. */
#huntrun {
  position: absolute; top: 6px; left: 6px; right: auto; z-index: 4;
  width: 210px; max-width: min(210px, 40%);
  pointer-events: none;
  padding: 5px 7px 4px;
  background: linear-gradient(165deg, rgba(10, 18, 28, 0.92), rgba(6, 8, 14, 0.94));
  border: 1px solid var(--edge-cyan);
  box-shadow: var(--glow-cyan), 0 6px 18px rgba(0, 0, 0, .55);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  color: #c4d6b0;
  font-size: calc(10px * var(--fontscale, 1));
  letter-spacing: 0.4px;
  backdrop-filter: blur(6px);
}
#huntrun[hidden] { display: none !important; }
/* Granulado de tubo por cima do painel inteiro. */
#huntrun::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
}
/* Checklist de primeira entrada: canto superior esquerdo da vista, abaixo da telemetria global.
   O servidor
   é quem valida e avança os passos (server/tutorial.js); o botão × pede pra pular.
   z-index 9500: fica ACIMA da camada de foco (#tutspot, 9000) — o checklist não é escurecido. */
#tutpanel {
  position: absolute; top: 34px; left: 8px; z-index: 9500;
  width: 228px; max-width: min(228px, 46%);
  pointer-events: auto;
  padding: 7px 9px 8px;
  background: linear-gradient(180deg, rgba(19, 24, 41, 0.94), rgba(8, 10, 18, 0.94));
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .08), 0 0 14px rgba(0, 229, 255, .10), 0 6px 18px rgba(0, 0, 0, .5);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  color: #c4d6b0;
  font-size: calc(11px * var(--fontscale, 1));
  letter-spacing: 0.4px;
}
#tutpanel header { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
#tutpanel h4 {
  margin: 0; color: #00e5ff; font-weight: 600;
  font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 1.4px; text-transform: uppercase;
}
#tutpanel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#tutpanel li { display: flex; gap: 6px; align-items: baseline; }
.tut-mark { flex: 0 0 10px; text-align: center; }
#tutpanel b { font-weight: 600; }
#tutpanel small { display: block; margin-top: 1px; color: #93a7bd; letter-spacing: 0.2px; }
.tut-done { color: #6fcf8f; }
.tut-done .tut-mark { color: #6fcf8f; }
.tut-now b { color: #ffd23e; }
.tut-now .tut-mark { color: #ffd23e; }
.tut-next { opacity: .45; }
/* Foco do passo (coach mark): anel âmbar + cursor falso que "clica" no alvo. Layer fixed
   no body acima de HUD/deck/mortos (9000; tooltip 10000 e Mara 20000 continuam por cima).
   O ESCURECIMENTO só existe para alvo de MUNDO (.tut-dim): apontar um botão do HUD com a
   tela toda apagada parecia bug — o jogo segue legível. pointer-events none sempre. */
#tutspot { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.tut-ring {
  position: absolute; border: 2px solid #ffd23e; border-radius: 10px;
  box-shadow: 0 0 18px rgba(255, 210, 62, .4), inset 0 0 16px rgba(255, 210, 62, .28);
}
.tut-ring.tut-dim {
  box-shadow: 0 0 0 200vmax rgba(3, 7, 14, 0.55), 0 0 18px rgba(255, 210, 62, .4), inset 0 0 16px rgba(255, 210, 62, .28);
}
/* Halo que respira: anima só o pseudo-elemento, nunca o anel — mover o anel moveria o buraco. */
.tut-ring::after {
  content: ''; position: absolute; inset: -6px; border: 1px solid rgba(255, 210, 62, .8); border-radius: 13px;
  animation: tutHalo 1.6s ease-out infinite;
}
@keyframes tutHalo { 0% { transform: scale(.97); opacity: .9; } 70% { transform: scale(1.06); opacity: 0; } 100% { opacity: 0; } }
/* Alvo de tile fora da tela: anel redondo colado na borda, vira seta de rumo. */
.tut-ring.tut-edge { border-radius: 50%; border-style: dashed; }
.tut-cursor {
  position: absolute; width: 22px; height: 22px; margin: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65));
  animation: tutPress 1.8s ease-in-out infinite;
}
.tut-cursor svg { display: block; width: 100%; height: 100%; }
@keyframes tutPress { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-2px, 2px) scale(.82); } 22% { transform: translate(0, 0); } }
/* Ondas de clique na PONTA do cursor (canto noroeste da caixa), duas por ciclo. */
.tut-ripple {
  position: absolute; left: -8px; top: -8px; width: 22px; height: 22px; margin: 0;
  border: 2px solid #ffd23e; border-radius: 50%; opacity: 0;
  animation: tutRipple 1.8s ease-out infinite;
}
@keyframes tutRipple { 0% { transform: scale(.35); opacity: .95; } 45% { transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } }
.tut-clicklabel {
  position: absolute; padding: 2px 7px; border-radius: 8px; white-space: nowrap;
  background: rgba(8, 10, 18, .92); border: 1px solid var(--border); color: #ffd23e;
  font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .8px;
}
#huntrun .hrtop {
  display: flex; align-items: center; gap: 6px;
  color: var(--dim); text-transform: uppercase; letter-spacing: 2px;
  font-size: calc(9px * var(--fontscale, 1));
  border-bottom: 1px solid rgba(0, 229, 255, .18);
  padding-bottom: 4px; margin-bottom: 5px;
}
#huntrun .hrdot {
  width: 6px; height: 6px; flex: none;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan);
  animation: hrblink 1.6s steps(2) infinite;
}
#huntrun .hrlive { margin-left: auto; color: var(--magenta); letter-spacing: 2px; text-shadow: 0 0 8px rgba(255,46,200,.45); }
@keyframes hrblink { 50% { opacity: .25; } }
#huntrun .hrrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  line-height: 1.35;
}
#huntrun .hrrow span { color: var(--dim); text-transform: uppercase; letter-spacing: 1px; font-size: calc(9px * var(--fontscale, 1)); }
#huntrun .hrrow b { color: var(--cyan); font-variant-numeric: tabular-nums; text-shadow: 0 0 7px rgba(0, 229, 255, .4); }
/* A tela: bezel afundado com o canvas do osciloscópio dentro. */
#huntrun .hrscreen {
  position: relative;
  background: #05070c;
  border: 1px solid rgba(0, 229, 255, .28);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .85), inset 0 0 4px rgba(0, 229, 255, .12);
  padding: 2px; margin: 2px 0 6px;
}
#huntrun .hrscreen::after {
  content: ''; position: absolute; inset: 2px; pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
#hrgraph {
  display: block; width: 100%; height: 44px;
  image-rendering: auto;
}
#huntrun .hrgrid { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(0, 229, 255, .18); }
#huntrun .hrgrid .hrrow b { color: var(--text); text-shadow: none; }
#huntrun .hrfoot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 5px; padding-top: 4px;
  border-top: 1px dashed rgba(0, 229, 255, .22);
  font-size: calc(9px * var(--fontscale, 1));
  letter-spacing: 2px; text-transform: uppercase; color: var(--dim);
}
#huntrun .hrfoot #hrtrend.up { color: var(--cyan); }
#huntrun .hrfoot #hrtrend.dn { color: var(--cyan); opacity: .55; }
#huntrun .hrfoot #hrtrend.flat { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  #huntrun .hrdot { animation: none; }
}

/* The strip has a FIXED height so changes in panel content never shrink the view. Its children
   stretch to the dock and long panels scroll inside their own bounds. */
/* No wrapping here on purpose: a wrapped flex line sizes itself to its tallest item and the
   fixed height stops clamping anything — which is how the chat escaped the strip again. Narrow
   windows get the wrap back in the media query at the end of the file, with height: auto. */
/* Hotbar and hunt share the remaining dock width around the vitals. The minimap floats over the
   view and no longer consumes a flex column here. */
#bottom {
  display: flex; gap: 6px; align-items: stretch;
  height: var(--barh); flex: none; min-width: 0;
  /* A2.1 Fatia 2 — dock strip hairline; no padding so --barh still fits two hot rows. */
  box-shadow: 0 -1px 0 rgba(0, 229, 255, .38), 0 -10px 22px rgba(0, 229, 255, .08);
}
/* Layout personalizado: cada janela sai da faixa e fica onde o jogador largou (game.js escreve
   left/top; a faixa vira um contêiner de altura 0 — `display:none` levaria os filhos fixos junto).
   A alça de arrasto só aparece neste modo; o corpo da janela continua clicável. */
body.freelayout #bottom { height: 0; }
body.freelayout #chatbox, body.freelayout #vitals, body.freelayout #currencies,
body.freelayout #mmpanel, body.freelayout #hunt, body.freelayout #hotbar,
body.freelayout #phonetab, body.freelayout #decktab {
  /* auto nos dois eixos: fora da faixa não há o que esticar (o #phonetab pedia `height: 100%`,
     que fora do fluxo vira a tela inteira). placeBox reescreve por inline quem tem tamanho salvo. */
  position: fixed; flex: none; z-index: 6; width: auto; height: auto;
  /* Tamanho é o resizer NATIVO (canto inferior direito) — ele já escreve width/height inline, que
     é o mesmo lugar de onde placeBox lê. `overflow: auto` é o que liga o resize (e a barra de
     rolagem já é escondida no topo do arquivo); o conteúdo rola em vez de vazar quando aperta. */
  resize: var(--lyresize, both); overflow: auto; min-width: 56px; min-height: 32px;
  opacity: var(--hudalpha, 1);   /* transparência das janelas (Esc → Tela) */
}
/* A mochila herda o selo fixo que era da loja: em modo livre ela não entra na lista
   arrastável e pousa no canto, ao lado de onde o #phonetab costuma ficar. */
body.freelayout #chatbox {
  width: 306px; height: 188px;
  min-width: 240px; min-height: 120px;
  overflow: hidden; resize: both;
}
body.freelayout #bagtab {
  position: fixed; right: 158px; bottom: 10px; z-index: 6;
  flex: none; width: 84px; height: auto; padding: 5px 4px;
  opacity: var(--hudalpha, 1);
}
/* O minimapa preenche a caixa: o canvas cresce e drawMinimap redimensiona o buffer junto, então
   uma janela maior mostra mais mundo em vez de esticar os mesmos pixels. */
body.freelayout #mmpanel { display: flex; flex-direction: column; }
body.freelayout #minimap { flex: 1 1 0; width: 100%; height: auto; min-height: 0; }
/* Trava: ajeitou, fecha. Some a alça e o resizer — a posição continua valendo. Uma variável em vez
   de repetir a lista de sete seletores. */
body.layoutlocked { --lyresize: none; }
body.layoutlocked .lygrip { display: none !important; }
.lygrip { display: none; }
body.freelayout .lygrip {
  display: block; position: absolute; top: 2px; right: 2px; z-index: 3;
  width: 14px; height: 14px; line-height: 13px; text-align: center;
  font-size: calc(11px * var(--fontscale, 1)); color: var(--neon);
  background: rgba(10,10,18,.75); border: 1px solid var(--neon);
  cursor: move; touch-action: none;   /* o toque arrasta a janela em vez de rolar a página */
}
body.freelayout .lygrip:hover { background: var(--neon); color: #0a0a12; }
#vitals { width: 208px; flex: none; }
#mmpanel { width: 210px; flex: none; }
/* The hidden state during map loading also wins over the custom layout's display:flex. */
#mmpanel[hidden] { display: none !important; }
#hotbar, #hunt { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Floating chat window above the bottom bar. Closed until the flip in the hunt bar opens it. */
#chatbox {
  position: absolute;
  width: 360px; height: 188px;
  min-width: 220px; min-height: 110px;
  max-width: calc(100% - 24px); max-height: calc(var(--vh) - var(--barh) - 36px);
  z-index: 5;
  background: var(--glass);
  border: 1px solid var(--edge-cyan);
  backdrop-filter: blur(8px);
  box-shadow: var(--glow-cyan), 0 4px 18px rgba(0, 0, 0, 0.65);
  display: none; flex-direction: column;
  overflow: hidden;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
#chatbox.open { display: flex; }
/* Phone launcher sits in the bottom bar (right end), bar-height, never floating. */
/* min-height:0 is what lets a flex child actually shrink and scroll — the default `auto` makes
   it grow to fit its content, which is exactly the bug this replaced. */
/* flex column + spacer ::before: poucas linhas sentam no fundo, em cima do campo;
   cheio, o spacer some e o overflow rola do mais velho. Sem o log no HTML as linhas
   não existem e o placeholder do input sobe pro topo da janela. */
#chathint {
  padding: 4px 8px 0; font-size: calc(11px * var(--fontscale, 1)); color: var(--dim);
}
#chathint[hidden] { display: none; }
#huntrecruiting.on { color: var(--cyan); }
#huntq.recruiting { box-shadow: inset 0 0 0 1px var(--cyan); }
#chatlog {
  flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px;
  font-size: calc(12px * var(--fontscale, 1)); line-height: 1.35;
  display: flex; flex-direction: column;
}
#chatlog::before { content: ''; margin-top: auto; }
#chatlog .sys { color: #8a93a6; } #chatlog .death { color: var(--hp); }
#chatlog .xp { color: #b45cf5; } #chatlog .loot { color: #ffd23e; }
#chatlog .quest { color: #2fe58a; } #chatlog .say { color: #e8ecf2; }
#chatlog .chat { color: #23e5ff; } #chatlog .levelup { color: #ffd23e; font-weight: bold; }
#chatlog .whisper { color: #ff8ad8; font-style: italic; }
#chatlog .gang { color: #7dff8a; } #chatlog .party { color: #8ad8ff; }
/* Anúncio da equipe: âmbar de aviso, peso maior — tem de se destacar de qualquer conversa. */
#chatlog .announce { color: #ffb347; font-weight: bold; }
#chatinputrow {
  display: flex; align-items: stretch; position: relative; flex: none;
  background: var(--panel2); border-top: 1px solid var(--border);
}
#chatin {
  flex: 1; min-width: 0; background: transparent; border: 0;
  color: var(--text); font: inherit; padding: 5px 6px; outline: none;
}
/* Edge + corner grips: the old ◢ sat on the input and nobody found it. */
.chat-rh {
  position: absolute; z-index: 11; touch-action: none; user-select: none;
}
.chat-rh[data-edge="e"] {
  top: 18px; right: 0; width: 8px; bottom: 16px; cursor: ew-resize;
}
.chat-rh[data-edge="s"] {
  left: 16px; right: 16px; bottom: 0; height: 8px; cursor: ns-resize;
}
.chat-rh[data-edge="se"] {
  right: 0; bottom: 0; width: 16px; height: 16px; cursor: se-resize;
  background:
    linear-gradient(135deg,
      transparent 46%, var(--dim) 46%, var(--dim) 50%, transparent 50%,
      transparent 58%, var(--dim) 58%, var(--dim) 62%, transparent 62%,
      transparent 70%, var(--dim) 70%, var(--dim) 74%, transparent 74%);
}
.chat-rh[data-edge="e"]:hover, .chat-rh[data-edge="s"]:hover { background: rgba(0, 229, 255, .14); }
.chat-rh[data-edge="se"]:hover {
  background:
    linear-gradient(135deg,
      transparent 46%, var(--cyan) 46%, var(--cyan) 50%, transparent 50%,
      transparent 58%, var(--cyan) 58%, var(--cyan) 62%, transparent 62%,
      transparent 70%, var(--cyan) 70%, var(--cyan) 74%, transparent 74%);
}

/* Reading filters and outgoing channel are independent. */
#chathead {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel2); border-bottom: 1px solid var(--border);
  cursor: move; user-select: none; touch-action: none; flex: none;
}
#chathead > .chatgrip, #chathead > .chatclose { align-self: flex-start; margin-top: 4px; }
#chatfilters { flex: 1; min-width: 0; }
#chatfiltersummary { padding: 6px 8px; color: var(--cyan); cursor: pointer; font-size: 11px; }
#chattabs { max-height: 140px; overflow-y: auto; touch-action: pan-y; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 2px 6px 6px; }
#chatsend { max-width: 100px; min-width: 0; color: var(--cyan); background: var(--panel2); border: 0; border-right: 1px solid var(--border); font: inherit; font-size: 11px; }
#chatlog > div[hidden] { display: none; }
.chatgrip {
  padding: 2px 6px; font-size: calc(12px * var(--fontscale, 1));
  color: var(--dim); cursor: move; line-height: 1; user-select: none; flex: none;
}
.chatgrip:hover { color: var(--cyan); }
.chatclose {
  flex: none; width: 22px; height: 20px; margin: 0 4px 0 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(30, 15, 22, 0.7); border: 1px solid #732a3d;
  color: var(--hp); font-size: 16px; font-weight: bold; line-height: 1;
  cursor: pointer; border-radius: 2px;
}
.chatclose:hover {
  background: var(--hp); border-color: var(--neon); color: #fff;
  box-shadow: 0 0 8px rgba(255, 46, 200, 0.5);
}
.ctab { display: flex; align-items: center; gap: 5px; min-height: 26px;
  font-size: calc(11px * var(--fontscale, 1)); color: var(--text); cursor: pointer; }
.ctab input { margin: 0; accent-color: var(--cyan); cursor: pointer; }
.ctab:has(input:not(:checked)) { color: var(--dim); }
#chatfiltersummary:focus-visible, .ctab:focus-within, #chatsend:focus-visible { outline: 1px solid var(--cyan); outline-offset: -1px; }

/* hunt: launch + flip phone side by side; the picker is a modal. */
#hunt { padding: 0; flex-direction: row; align-items: stretch; gap: 0;
  border: 1px solid var(--edge-mag);
  background: var(--glass2);
  box-shadow: var(--glow-mag);
  backdrop-filter: blur(8px);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
#huntmain {
  flex: 1 1 0; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
#huntlaunch {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 0; color: var(--dim); cursor: pointer;
  font: inherit; text-transform: uppercase; letter-spacing: 2px;
}
#huntlaunch:hover { color: var(--cyan); background: rgba(0, 229, 255, .06); }
#huntlaunch.on { color: var(--cyan); }
#huntlaunch .hunticon { width: 36px; height: 36px; display: block; filter: drop-shadow(0 0 6px rgba(255, 46, 200, .45)); }
#huntlaunch .huntname {
  font-size: calc(16px * var(--fontscale, 1)); font-weight: bold;
  color: var(--magenta); letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(255, 46, 200, .45);
}
#huntlaunch.on .huntname { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, .45); }
#huntlaunch .huntband {
  font-size: calc(11px * var(--fontscale, 1)); letter-spacing: 1px;
  color: var(--dim); text-transform: none;
}
#huntlaunch.on .huntband { color: var(--cyan); }
#hunt.steering { gap: 0; }
#hunt.steering #huntmain {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
#hunt.steering #huntlaunch {
  display: flex; align-items: flex-start;
  gap: 2px; padding: 5px 8px; text-align: left;
}
#hunt.steering #huntlaunch .hunticon { display: none; }
#hunt.steering #huntgroups { align-self: center; justify-self: end; max-width: 110px; }
#hunt.steering #huntlaunch .huntname {
  font-size: calc(12px * var(--fontscale, 1)); letter-spacing: 2px;
}
#huntsteer {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 0; flex: 1; overflow: auto;
  padding: 6px 8px 8px;
  border-top: 1px solid rgba(255, 46, 200, .28);
}
#huntsteer[hidden] { display: none !important; }
#huntsteer .huntdist { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; }
#huntsteer .huntfocus { flex-direction: row; align-items: center; }
#huntsteer .huntsegs { flex: 1; min-width: 0; }
/* Keep overflow discoverable when font scaling or a small panel needs scrolling. */
#huntsteer { scrollbar-width: thin; scrollbar-color: var(--border) var(--panel); }
#huntsteer::-webkit-scrollbar { display: block; width: 5px; }
#huntsteer::-webkit-scrollbar-thumb { background: var(--border); }
#huntsteer > .hint {
  margin: 0; color: var(--dim);
  font-size: calc(10px * var(--fontscale, 1)); line-height: 1.3;
}
#huntsetup {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 12px;
  flex: none;
  padding: 8px 0 2px;
  border-top: 1px solid var(--border);
  max-height: 132px;
  overflow: auto;
}
#huntsetup .huntsetupcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#huntsetup .dhead {
  color: var(--dim); font-size: calc(10px * var(--fontscale, 1));
  letter-spacing: 1px; text-transform: uppercase;
}
#huntsetup .dhead { display: flex; align-items: center; gap: 6px; margin: 0; }
#huntsetup .dhead .sidebtn {
  margin-left: auto; font-size: calc(9px * var(--fontscale, 1));
  padding: 1px 6px; background: #12151d; color: var(--text);
  border: 1px solid var(--border); cursor: pointer;
}
#huntsetup .dhead .sidebtn + .sidebtn { margin-left: 0; }
#huntsetup .dhead .sidebtn:hover { border-color: var(--cyan); color: var(--cyan); }
#huntsetup .ablist { display: flex; flex-wrap: wrap; gap: 4px; }
/* Slot de ícone: a arte da skill no lugar do nome; a leitura completa fica no tooltip. */
#huntsetup .abpick {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: transparent; color: var(--dim);
  cursor: pointer; border-radius: 2px;
}
#huntsetup .abpick canvas.glyph { width: 22px; height: 22px; image-rendering: pixelated; }
#huntsetup .abpick .glyph { font-size: calc(15px * var(--fontscale, 1)); line-height: 1; }
#huntsetup .abpick.on { border-color: var(--neon); color: var(--neon); }
#huntsetup .abpick.locked { opacity: .45; }
/* Razr-style clamshell docked in the hunt bar. Closed until the chat is open. */
#chatflip {
  flex: 0 0 56px; width: 56px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 0;
  background: linear-gradient(180deg, rgba(12, 18, 28, 0.92), rgba(6, 8, 14, 0.94));
  border: 0; border-left: 1px solid rgba(255, 46, 200, .35);
  cursor: pointer; color: inherit;
  overflow: hidden;
}
#chatflip:hover { background: linear-gradient(180deg, rgba(0, 229, 255, .08), rgba(6, 8, 14, 0.94)); }
#chatflip .flipphone {
  width: 30px;
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
#chatflip .fliplid,
#chatflip .flipbase {
  width: 30px; position: relative;
  background: linear-gradient(180deg, #2a3144 0%, #141820 100%);
  border: 1px solid #3a4258;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
/* Closed: lid sits on top of the base (one clamshell). Open: lid lifts, screen shows. */
#chatflip .fliplid {
  height: 38px; border-radius: 9px 9px 10px 10px;
  margin-bottom: -41px; z-index: 2;
  transition: margin-bottom .28s ease, border-radius .28s ease;
}
#chatflip .fliplid::after {
  content: ''; position: absolute; top: 7px; left: 50%;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: #0a0c12; box-shadow: 0 0 0 1px #4a5368;
}
#chatflip .fliphinge {
  width: 26px; height: 5px; flex: none; z-index: 3;
  background: linear-gradient(180deg, #4a5368, #1c2230);
  border-radius: 1px;
  display: flex; align-items: center; justify-content: center;
}
#chatflip .fliphinge i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #2a3247; box-shadow: 0 0 0 1px #111;
}
#chatflip .flipbase {
  height: 36px; border-radius: 3px 3px 10px 10px; border-top: 0;
  display: flex; align-items: center; justify-content: center;
}
#chatflip .flipscreen {
  width: 20px; height: 22px; border-radius: 3px;
  background: #07090e;
  box-shadow: inset 0 0 0 1px #111;
  transition: background .2s, box-shadow .2s;
}
#chatflip.open .fliplid {
  margin-bottom: 0;
  border-radius: 9px 9px 3px 3px;
  border-bottom: 0;
}
#chatflip.open .flipscreen {
  background: linear-gradient(180deg, #033844, #00b8cc);
  box-shadow: 0 0 8px rgba(0,229,255,.55), inset 0 0 0 1px rgba(0,229,255,.35);
}
#chatflip.open .fliphinge i,
#chatflip.unread .fliphinge i {
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan);
}
#chatflip.unread:not(.open) { animation: flipunread 1.6s ease-in-out infinite; }
@keyframes flipunread {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 12px rgba(0,229,255,.25); }
}
#chatflip.open { border-left-color: var(--edge-cyan); box-shadow: inset 0 0 10px rgba(0, 229, 255, .12); }
#huntmodal {
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 920px; height: 780px;   /* o elenco de criaturas nos detalhes pede corpo maior que o 640 antigo */
  max-width: 96vw; max-height: 86vh;
  padding: 12px 14px 10px;
  border-color: var(--cyan);
  overflow: hidden;
  display: none;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(0,229,255,.12), 0 18px 40px rgba(0,0,0,.55), 0 0 28px rgba(255,46,200,.08);
}
#huntmodal.on { display: flex; }
#huntmodal h3 {
  color: var(--cyan); letter-spacing: 2px; font-size: calc(13px * var(--fontscale, 1));
  margin: 0 18px 8px 0; text-transform: uppercase;
}
#huntui { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; overflow: hidden; }
#hunttabs, #huntsearch, #huntcount, #huntsetup, #huntfoot { flex: none; }
#hunttabs { display: flex; gap: 6px; }
#hunttabs button {
  flex: 0 0 auto; padding: 5px 12px; letter-spacing: 1.5px; text-transform: uppercase;
  font-size: calc(10px * var(--fontscale, 1)); color: var(--dim);
}
#hunttabs button.on { color: var(--cyan); border-color: var(--cyan); box-shadow: inset 0 -2px 0 var(--cyan); }
.huntdirectoryfilters, .huntdirectoryfoot, .huntdirectoryheading, .huntdirectorynumbers, .huntdirectoryactions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.huntdirectoryfilters, .huntdirectoryfoot { flex: none; justify-content: space-between; }
.huntdirectoryfilters .huntdiff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.huntdirectoryhint { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
#huntdirectorylist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding-right: 4px;
}
#huntdirectorylist section { min-width: 0; }
#huntdirectorylist h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
#huntdirectorylist h4 > span { color: var(--cyan); }
.huntdirectorycard { border: 1px solid var(--border); background: var(--panel2); padding: 14px; margin-bottom: 10px; }
.huntdirectorycard.queued, .huntdirectorycard.open { border-left: 3px solid var(--cyan); }
.huntdirectorycard h5 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.huntdirectorycard p { margin: 8px 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.huntdirectorymembers, .huntdirectorynumbers { color: var(--dim); font-size: 12px; line-height: 1.5; }
.huntdirectorynumbers { margin-top: 10px; gap: 8px 16px; }
.huntdirectorynumbers span:first-child, .huntdirectorystatus { color: var(--cyan); }
.huntdirectoryheading { justify-content: space-between; align-items: flex-start; }
.huntdirectorybadge { padding: 3px 6px; border: 1px solid var(--border); color: var(--dim); font-size: 10px; white-space: nowrap; }
.open .huntdirectorybadge { color: var(--cyan); border-color: var(--cyan); }
.reserved .huntdirectorybadge { color: #ffd23e; }
.huntdirectoryactions { margin-top: 12px; }
.huntdirectoryactions button { flex: 1; min-height: 36px; white-space: normal; }
.huntdirectoryempty { padding: 20px; border: 1px dashed var(--border); color: var(--dim); font-size: 12px; line-height: 1.7; }
.huntdirectoryfoot { padding-top: 8px; border-top: 1px solid var(--border); }
/* Keep the directory's own scroll area in every planner layout, including touch landscape. */
#huntplanner #huntui[data-tab="groups"] { display: flex !important; flex-direction: column; }
@media (max-width: 700px) {
  #huntdirectorylist { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .huntdirectoryfilters .hint { display: none; }
  .huntdirectoryfilters .huntdiff > span { display: none; }
  .huntdirectoryfilters .huntdiff { width: 100%; }
  .huntdirectoryfilters button { flex: 1; min-height: 44px; padding: 5px; }
  .huntdirectoryfoot button, .huntdirectoryactions button { min-height: 44px; }
  .huntdirectoryfoot #huntbrowse { flex: 1; }
}
#huntsearch {
  width: 100%; background: #0a0c14; color: var(--text); border: 1px solid var(--border);
  font: inherit; padding: 6px 10px; letter-spacing: 0;
}
#huntsearch:focus { outline: none; border-color: var(--cyan); }
#huntcount { color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 1px; text-transform: uppercase; }
#huntbody {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 0.95fr);
  gap: 12px; min-height: 0; flex: 1; overflow: hidden;
}
#huntpicks {
  display: flex; flex-direction: column; gap: 6px; margin: 0;
  min-width: 0; min-height: 0; overflow-y: auto; padding-right: 2px;
}
#huntpicks .huntpick {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; text-align: left; color: var(--text);
  background: var(--panel2); border: 1px solid var(--border);
}
#huntpicks .huntpick canvas { width: 40px; height: 40px; image-rendering: pixelated; background: #08080f; }
#huntpicks .huntpick b {
  color: var(--text); font-size: calc(13px * var(--fontscale, 1));
  letter-spacing: 0.5px; display: block; text-transform: none;
}
#huntpicks .huntpick span { color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); text-transform: none; letter-spacing: 0; }
#huntpicks .huntpick.on { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(0,229,255,.25); }
#huntpicks .huntpick.on b { color: var(--cyan); }
#huntpicks .huntpick.soon {
  opacity: .72; filter: grayscale(1); cursor: not-allowed;
}
#huntpicks .huntlock { font-size: 28px; text-align: center; color: var(--dim); }
#huntcount span { color: var(--dim); font-size: 10px; }
#huntpicks .huntpick i.tag, #huntstage h4 i.tag, #huntroster .rnm i.tag {
  display: inline-block; margin-top: 4px; padding: 1px 6px;
  font-style: normal; font-size: calc(8px * var(--fontscale, 1));
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--border); background: #0a0c14;
}
#huntpicks .huntpick i.tag.wip, #huntstage h4 i.tag.wip {
  color: #ffd23e; border-color: #c9a227;
}
#huntpicks .huntpick i.tag.soon, #huntstage h4 i.tag.soon { color: var(--dim); }
/* Nível recomendado (ADR 0153): aceso quando o jogador está na faixa. */
.huntrec, #huntpicks .huntpick span.huntrec {
  display: block; margin: 2px 0; color: var(--dim);
  font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .5px; text-transform: none;
}
.huntrec.fit, #huntpicks .huntpick span.huntrec.fit { color: #7dff9a; }
#huntstage h4 i.tag { margin: 0 0 0 8px; vertical-align: middle; }
#huntstage.soon { opacity: .62; filter: grayscale(.4); }
#huntstage {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border); background: #0c101c; padding: 10px 12px;
}
#huntstage h4 {
  margin: 0; color: var(--text); font-size: calc(16px * var(--fontscale, 1));
  letter-spacing: 1px; text-transform: none;
}
.tankwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.tankwrap .tankpip {
  font-size: calc(8px * var(--fontscale, 1)); letter-spacing: 2px;
  color: var(--neon); text-transform: uppercase;
}
.tankwrap .tankcap {
  font-size: calc(9px * var(--fontscale, 1)); letter-spacing: 2px; text-transform: uppercase;
  color: var(--cyan); text-align: center;
}
#hunttank {
  position: relative; width: 160px; height: 128px; padding: 0;
  border: 1px solid var(--cyan); background:
    linear-gradient(180deg, rgba(0,229,255,.06), rgba(255,46,200,.05) 40%, #07080f 100%);
  box-shadow: inset 0 0 22px rgba(0,229,255,.12), 0 0 16px rgba(0,229,255,.12);
  cursor: default; overflow: hidden;
}
#hunttank::before {
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid rgba(0,229,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,46,200,.12);
}
#hunttank canvas { display: block; width: 160px; height: 128px; image-rendering: pixelated; }
#huntstage .huntdesc {
  color: var(--text); font-size: calc(11px * var(--fontscale, 1)); line-height: 1.45;
  text-transform: none; letter-spacing: 0; min-height: 2.8em;
}
#huntstage .huntmob { color: var(--cyan); font-size: calc(11px * var(--fontscale, 1)); letter-spacing: 1px; }
#huntroster {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 0; flex: 1; overflow-y: auto; padding-right: 2px;
}
#huntroster h5 {
  margin: 2px 0 0; color: var(--text); font-size: calc(11px * var(--fontscale, 1));
  letter-spacing: 1.5px; text-transform: uppercase;
}
#huntroster .rosrow {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 6px;
  padding: 4px 5px; border: 1px solid var(--border); background: #0a0c14;
  cursor: pointer;
}
#huntroster .rosrow:hover { border-color: var(--cyan); }
#huntroster .rosrow.on { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(0,229,255,.25); }
#huntroster .rosrow.on .rnm { color: var(--cyan); }
#huntroster .rosrow.boss { border-color: rgba(255,210,62,.4); }
#huntroster .rosrow canvas { width: 32px; height: 32px; image-rendering: pixelated; }
#huntroster .rnm {
  color: var(--text); font-size: calc(11px * var(--fontscale, 1)); letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#huntroster .rnm i.tag.boss { color: #ffd23e; border-color: #c9a227; margin-left: 4px; }
#huntroster .rchips {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; align-items: center;
}
#huntroster .rlv {
  color: var(--dim); font-size: calc(9px * var(--fontscale, 1));
  border: 1px solid var(--border); padding: 0 4px;
}
#huntstage .rchip {
  font-style: normal; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .3px;
  padding: 0 4px; border: 1px solid var(--border); background: #070a12;
  white-space: nowrap; text-transform: none;
}
#huntstage .rchip.res { color: #7ddf8f; border-color: rgba(125,223,143,.35); }
#huntstage .rchip.weak { color: #ff7a6e; border-color: rgba(255,122,110,.35); }
#huntstage .rchip.deal { border-color: currentColor; }
.gforge { padding: 2px 6px 4px; display: flex; flex-direction: column; gap: 2px; }
.gforge .gremain { color: var(--cyan); }
.gforge .grecipe { color: var(--dim); }
.gforge .grecipe .rhave { font-style: normal; color: #7ddf8f; }
.gforge .grecipe .rhave.short { color: #ff7a6e; }
#huntloot {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; min-height: 0; overflow: hidden;
  border-left: 1px solid var(--border); padding-left: 12px;
}
#huntloot h4 {
  margin: 0; color: var(--text); font-size: calc(12px * var(--fontscale, 1));
  letter-spacing: 1.5px; text-transform: uppercase;
}
#huntloot .hint { margin: 0; }
#huntloot .lootlist { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; flex: 1; }
#huntloot .lootrow {
  display: grid; grid-template-columns: 16px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 5px 6px; border: 1px solid var(--border); background: #0a0c14;
  cursor: pointer;
}
#huntloot .lootrow.cr {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  cursor: default;
}
#huntloot .lootrow canvas { width: 24px; height: 24px; image-rendering: pixelated; }
#huntloot .lootrow .crpip {
  width: 24px; height: 24px; display: grid; place-items: center;
  color: #ffd23e; font-size: 10px; font-weight: bold; letter-spacing: 0;
  border: 1px solid #c9a227; background: #1a1408;
}
#huntloot .lootrow input[type=checkbox] { accent-color: var(--cyan); margin: 0; width: 14px; height: 14px; }
#huntloot .lootmeta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#huntloot .lootmeta em {
  font-style: normal; color: var(--dim);
  font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 0;
}
#huntloot .lootrow b { font-size: calc(11px * var(--fontscale, 1)); letter-spacing: 0; text-transform: none; }
#huntloot .lootrow i { color: var(--dim); font-style: normal; font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 1px; text-transform: uppercase; }
#huntloot .lootrow.cr i { color: var(--cyan); }
#huntloot .lootrow.off, #huntloot .lootrow.locked { opacity: .42; filter: grayscale(1); }
#huntloot .lootrow.off b, #huntloot .lootrow.locked b { color: #7a8190 !important; }
.huntfocus, .huntdist, .huntdiff {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  flex: none;
}
.huntfocus > span, .huntdist > span, .huntdiff > span {
  color: var(--dim); font-size: calc(10px * var(--fontscale, 1));
  letter-spacing: 1px; text-transform: uppercase; margin-right: 2px;
}
.huntfocus button, .huntdist button, .huntdiff button {
  background: rgba(8, 12, 20, 0.82); color: var(--dim); border: 1px solid rgba(0, 229, 255, .28);
  font: inherit; padding: 3px 6px; letter-spacing: 0.5px; text-transform: none;
  font-size: calc(10px * var(--fontscale, 1)); cursor: pointer;
}
.huntfocus button.on, .huntdist b, .huntdist button:hover, .huntdiff button.on { color: var(--cyan); }
.huntfocus button.on, .huntfocus button:hover, .huntdist button:hover,
.huntdiff button.on, .huntdiff button:hover { border-color: var(--cyan); box-shadow: 0 0 8px rgba(0, 229, 255, .22); }
#hunt .huntfocus button.on {
  color: #041018; background: var(--cyan); font-weight: bold;
  box-shadow: 0 0 10px rgba(0, 229, 255, .35);
}
.huntfocus {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px;
}
.huntfocus > span { margin-right: 0; }
.huntfocus .huntsegs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--border); background: #0a0c14;
}
.huntfocus .huntsegs button {
  margin: 0; min-width: 0; padding: 5px 0;
  border: 0; border-right: 1px solid var(--border); border-radius: 0;
  background: transparent; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.huntfocus .huntsegs button:last-child { border-right: 0; }
.huntfocus .huntsegs button.on {
  color: #041018; background: var(--cyan); font-weight: bold;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.huntfocus .huntsegs button:hover:not(.on) {
  color: var(--cyan); background: rgba(0, 229, 255, .08); border-color: var(--border);
}
.huntdist b { min-width: 14px; text-align: center; font-size: calc(12px * var(--fontscale, 1)); }
.huntdist button { padding: 3px 8px; }
.huntdist button:disabled { opacity: .4; cursor: default; }
#huntfoot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 4px; }
#huntfoot .huntdiffwrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#huntfoot .huntdiffwrap .hint { margin: 0; }
#huntfoot .huntfootbtns { display: flex; gap: 8px; margin-left: auto; }
#huntfoot button { padding: 6px 14px; letter-spacing: 1px; text-transform: uppercase; }
#huntfoot .huntdiff button { padding: 4px 8px; letter-spacing: 0.5px; text-transform: none; }
#huntfoot #huntgo { border-color: var(--cyan); color: #041018; background: var(--cyan); font-weight: bold; }
#huntfoot .huntdestination { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--fontscale, 1)); }
#huntfoot .huntdestination b { color: var(--cyan); border: 1px solid var(--border); padding: 2px 5px; }
#huntfoot .huntactions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 8px; }
#huntfoot .huntaction { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); background: var(--panel2); min-width: 0; }
#huntfoot .huntaction[hidden] { display: none; }
#huntfoot .huntaction.primary { border-color: #276273; background: #10212a; }
#huntfoot .huntaction button { width: 100%; min-height: 36px; padding: 7px 8px; letter-spacing: .3px; text-transform: none; }
#huntfoot .huntaction .hint { margin: 0; line-height: 1.4; font-size: calc(11px * var(--fontscale, 1)); }
#huntfoot #huntq.queued { color: var(--text); border-color: var(--border); }
#huntfoot .huntaction:has(#huntq.queued) { border-color: #276273; }
#huntfoot #huntq.queued + .hint { color: var(--cyan); }
#huntfoot button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* The picker shows queue status inline; offers still need their accept/decline panel. */
body:has(#huntmodal.on) #matchq.hunt-queue:not(:has(#huntaccept)) { display: none; }
@media (max-width: 720px), (max-height: 700px) {
  #huntui { overflow-y: auto; }
  #huntbody { flex: none; min-height: 260px; max-height: 42vh; }
}
@media (max-width: 480px) {
  #huntfoot .huntactions { grid-template-columns: 1fr; }
}
#huntfoot #huntgo:disabled { opacity: .4; cursor: default; color: var(--dim); border-color: var(--border); }
#huntmodal button.danger { color: var(--hp); border-color: var(--hp); }
@media (max-width: 720px) {
  #huntmodal { width: 96vw; height: 90vh; max-height: 90vh; top: 50%; }
  #huntbody { grid-template-columns: 1fr; }
  #huntpicks { max-height: 28vh; }
  #huntloot { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 8px; }
  #huntsetup { grid-template-columns: 1fr; max-height: 28vh; }
}

/* sidebar */
/* collapsible panels: click the header to fold everything but the title. !important beats the
   ID-level display rules on #invgrid/#eqgrid/#hotbar (grid/flex) — this is a state override. */
.panel[data-panel] h3 { cursor: pointer; }
.panel.closed > *:not(h3) { display: none !important; }
/* 3px chamfered corners — the CRT-terminal signature from the art bible */
.panel, .modal {
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.panel { background: var(--panel); border: 2px solid var(--border); padding: 5px; }
/* A2.1 Fatia 2 — vitals dock module. Fatia 3 — #mmpanel cyan/magenta glass. */
#vitals, #mmpanel {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--edge-cyan);
  box-shadow: var(--glow-cyan);
  backdrop-filter: blur(8px);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
/* Chamfer on the panel, not the canvas — clip-path on <canvas> would shrink the buffer. */
#mmpanel { overflow: hidden; }
.panel h3 {
  font-size: calc(11px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px;
  color: var(--text); margin-bottom: 4px; border-bottom: 1px solid var(--border); padding-bottom: 2px;   /* neon is information, not furniture — panel headers are plain */
}
#mmpanel h3 {
  font-size: calc(10px * var(--fontscale, 1)); font-weight: bold;
  color: var(--cyan); letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(0, 229, 255, .35);
  border-bottom: 1px solid rgba(0, 229, 255, .18);
  margin-bottom: 4px; padding: 0 2px 3px;
}
#minimap {
  width: 196px; height: 140px; image-rendering: pixelated; display: block;
  /* Dark map texture — JS paints opaque tiles over this; inset chrome does not change clientWidth. */
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0, 229, 255, .08), transparent 58%),
    repeating-linear-gradient(180deg, rgba(0, 229, 255, .04) 0 1px, transparent 1px 3px),
    #05070c;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, .32),
    inset 0 0 0 2px rgba(255, 46, 200, .16),
    inset 0 0 18px rgba(0, 0, 0, .72);
}
#minimap:hover {
  box-shadow:
    inset 0 0 0 1px var(--cyan),
    inset 0 0 0 2px rgba(255, 46, 200, .22),
    inset 0 0 18px rgba(0, 0, 0, .72),
    0 0 10px rgba(0, 229, 255, .28);
}

.bar { position: relative; height: 14px; background: #0e0f16; border: 1px solid var(--border); margin: 2px 0; }
#vitals .bar {
  background: #05070c;
  border: 1px solid rgba(0, 229, 255, .28);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .85), inset 0 0 4px rgba(0, 229, 255, .10);
}
/* 8px pixel ticks make HP loss readable in units and stop the bars looking like CSS */
.bar > div { height: 100%; transition: width .15s; background-image: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,.28) 7px 8px); }
/* trail atrasado: a fatia que some fica pra trás e alcança depois. Sobe = snap (o JS tira a transition). */
.bar > .ghost { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; opacity: .4; z-index: 0; transition: width .5s ease .22s; }
.bar span {
  position: absolute; inset: 0; text-align: center; font-size: calc(10px * var(--fontscale, 1)); line-height: 13px;
  color: #fff; text-shadow: 1px 1px 0 #000;
  white-space: nowrap; overflow: hidden;
}
/* background-COLOR, not the shorthand — the shorthand would wipe the .bar>div tick gradient */
#hpbar > div { background-color: var(--hp); box-shadow: 0 0 8px rgba(255, 59, 78, .45); }
#enbar > div { background-color: var(--en); box-shadow: 0 0 8px rgba(0, 229, 255, .45); }
#shbar > div { background-color: var(--sh); box-shadow: 0 0 8px rgba(242, 237, 224, .35); }
#xpbar > div { background-color: var(--xp); box-shadow: 0 0 8px rgba(255, 46, 200, .45); }
/* gunslinger magazine: 12 pips read at a glance where "Ammo 9/12" never did */
.pips { display: none; gap: 2px; margin: 2px 0; align-items: center; }
.pips span { width: 12px; height: 6px; background: var(--cyan); box-shadow: 0 0 3px rgba(0,229,255,.5); }
.pips span.empty { background: #223; box-shadow: none; }
.pips.reloading { animation: reloadpulse .5s ease-in-out infinite; }
.pips.reloading span { background: var(--xp); box-shadow: none; }
.pips.reloading span.empty { background: #332; }
@keyframes reloadpulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
#statrow { font-size: calc(11px * var(--fontscale, 1)); color: var(--dim); margin-top: 3px; }
#charheading { display: flex; align-items: center; gap: 6px; }
#vitals #charheading {
  border-bottom: 1px solid rgba(0, 229, 255, .18);
  padding-bottom: 3px; margin-bottom: 4px;
}
#charname { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vitals #charname { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, .35); }
#lvltxt { flex: 0 0 auto; min-width: 48px; padding: 2px 4px; border: 1px solid #605078; border-radius: 3px; background: #282039; color: #e1beff; font-size: calc(12px * var(--fontscale, 1)); line-height: 1.1; letter-spacing: 0; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
#vitals #lvltxt {
  border: 1px solid var(--edge-cyan);
  background: rgba(0, 229, 255, .08);
  color: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 229, 255, .18);
}
#hudwallet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.hudcurrency { min-width: 0; padding: 5px 6px; border: 1px solid #34505b; border-radius: 3px; background: #14242d; container-type: inline-size; }
.hudcurrency > span { display: block; font-size: calc(9px * var(--fontscale, 1)); color: #b4c9d3; }
.hudcurrency strong { display: block; margin-top: 3px; font-size: min(calc(15px * var(--fontscale, 1)), calc(150cqi / var(--digits, 1))); line-height: 1.2; color: #7ee5ee; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hudcurrency.coins { border-color: #665334; background: #292318; }
.hudcurrency.coins strong { color: #ffda80; }
#vitals .hudcurrency {
  border: 1px solid var(--edge-cyan);
  border-radius: 0;
  background: linear-gradient(165deg, rgba(10, 18, 28, 0.92), rgba(6, 8, 14, 0.94));
  box-shadow: inset 0 0 10px rgba(0, 229, 255, .08);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
#vitals .hudcurrency > span {
  color: var(--dim); text-transform: uppercase; letter-spacing: 1px;
}
#vitals .hudcurrency strong {
  color: var(--cyan); text-shadow: 0 0 7px rgba(0, 229, 255, .4);
}
#vitals .hudcurrency.coins {
  border-color: var(--edge-mag);
  box-shadow: inset 0 0 10px rgba(255, 46, 200, .10);
}
#vitals .hudcurrency.coins strong {
  color: var(--magenta); text-shadow: 0 0 7px rgba(255, 46, 200, .4);
}
.stico { position: relative; width: 24px; height: 24px; font-size: calc(10px * var(--fontscale, 1)); text-align: center; line-height: 14px; border: 1px solid; font-weight: bold; }
.stico .sttime {
  position: absolute;
  bottom: -5px;
  right: -5px;
  font-size: calc(7.5px * var(--fontscale, 1));
  line-height: 8px;
  padding: 0 1.5px;
  background: rgba(10, 10, 18, 0.94);
  color: #fff;
  border-radius: 2px;
  font-family: monospace;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

/* trained skills (footer of the skills app) */
.statrow2 { display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fontscale, 1)); margin: 2px 0; }
.statrow2 span { flex: 1; color: var(--dim); }
.statrow2 b { color: var(--text); min-width: 18px; text-align: right; }
/* loot window: whole row is the take target (Tibia container click), not only the tiny button */
.lootrow { cursor: pointer; }
.lootrow:hover { background: rgba(0, 229, 255, 0.08); }

/* Stamina: o que resta (1 − p.rad). Amarelo queimado, mais escuro quando a penalidade morde.
   No esgotado a barra está vazia, então o pulso vai no recipiente — pulsar o fill de 0px
   não se vê. */
#stambar > div { background-color: var(--stam); box-shadow: 0 0 8px rgba(196, 137, 30, .4); }
#stambar.warn > div { background-color: #8A6414; }
#stambar.max { animation: stampulse 1.6s ease-in-out infinite; box-shadow: inset 0 0 0 1px var(--stam); }
#stambar.max > div { background-color: #5C4510; }
@keyframes stampulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
/* Sims-style stacked up-chevrons beside the bar while bed/casino recover stamina. */
.stamrow {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 2px 0;
}
#vitals .stamrow .bar, .stamrow .bar { flex: 1; min-width: 0; margin: 0; }
/* Descansar: a lua ao lado da barra. Mesma altura da barra, tom da estamina no hover. */
#restbtn {
  flex: none;
  width: 15px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 20, 0.82);
  border: 1px solid rgba(0, 229, 255, .28);
  border-radius: 2px;
  color: #8f9cb5;
  cursor: pointer;
}
#restbtn svg { width: 10px; height: 10px; fill: currentColor; }
#restbtn:hover, #restbtn:focus-visible { border-color: var(--stam); color: #e8a93a; }
.stamgain {
  display: none;
  position: relative;
  flex: none;
  width: 10px;
  pointer-events: none;
}
.stamrow.gain .stamgain { display: block; }
.stamgain b {
  position: absolute;
  left: 0;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--stamgain);
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 2px rgba(140, 255, 58, .65));
  animation: stamgain .9s ease-in-out infinite;
}
.stamgain b:nth-child(1) { top: -1px; animation-delay: 0s; }
.stamgain b:nth-child(2) { top: 4px; animation-delay: .12s; }
.stamgain b:nth-child(3) { top: 9px; animation-delay: .24s; }
@keyframes stamgain {
  0%, 100% { opacity: .22; transform: translateY(2px); }
  45% { opacity: 1; transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .stamgain b { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .stamrow { margin: 1px 0; }
  .stamgain { width: 8px; }
  .stamgain b {
    border-left-width: 4px;
    border-right-width: 4px;
    border-bottom-width: 4px;
  }
  .stamgain b:nth-child(2) { top: 3px; }
  .stamgain b:nth-child(3) { top: 6px; }
}
@media (max-width: 560px) {
  .stamgain { width: 7px; }
  .stamgain b {
    border-left-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
  }
  .stamgain b:nth-child(1) { top: 0; }
  .stamgain b:nth-child(2) { top: 2px; }
  .stamgain b:nth-child(3) { top: 4px; }
}

/* party frames — deliberately thinner than your own bars: glanceable, never competing with
   the player's own HP for attention. */
#party .empty, #partyfoot .hint { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); }
.pmember { margin: 3px 0 5px; }
.pmember.dead { opacity: .45; }
.pmember.far .pname { color: var(--dim); }
.prow { display: flex; align-items: center; gap: 5px; font-size: calc(12px * var(--fontscale, 1)); }
.pcolor { flex: 0 0 5px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px #0a0a12; }
.pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plv { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); }
.pkick { width: 16px; height: 16px; padding: 0; line-height: 1; font-size: calc(11px * var(--fontscale, 1)); }
.pbar { height: 5px; background: #0e0f16; border: 1px solid var(--border); margin-top: 2px; }
.pbar > div { height: 100%; transition: width .15s; }
.pbar.hp > div { background: var(--hp); }
.pbar.en > div { background: var(--en); }
#partyfoot button { width: 100%; margin-top: 4px; }

/* friends list */
.frow { display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fontscale, 1)); margin: 2px 0; }
.frow .grow { flex: 1; }
.fdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fdot.on { background: #2fe58a; box-shadow: 0 0 4px #2fe58a; }
.fdot.off { background: #4a5568; }

/* gang panel: reuses the friend-row look; the tag is the clan's neon signature */
.ganghead { font-size: calc(13px * var(--fontscale, 1)); font-weight: bold; margin-bottom: 4px; }
.ganghead .gtag { color: var(--neon); }
.gangform { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.gangform input { flex: 1; min-width: 60px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); font: inherit; padding: 3px 5px; }
.gkick { margin-left: auto; padding: 0 5px; font-size: calc(10px * var(--fontscale, 1)); }
.gbank { color: #ffd23e; font-size: calc(12px * var(--fontscale, 1)); margin: 6px 0 2px; }
.gwars { margin: 6px 0; }
.gwar { font-size: calc(11px * var(--fontscale, 1)); color: #ff8a8a; margin: 2px 0; display: flex; align-items: center; gap: 5px; }
.gwar b { color: #2fe58a; }
.gwar button { margin-left: auto; padding: 0 5px; font-size: calc(10px * var(--fontscale, 1)); }

/* auction house: one row per listing, the sell form on top */
.aucsell { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.auclist { flex: 1 1 100%; max-height: 118px; overflow-y: auto; border: 1px solid var(--border); background: var(--panel2); }
.aucpick { padding: 2px 6px; font-size: calc(11px * var(--fontscale, 1)); font-weight: bold; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aucpick:hover { background: rgba(255,255,255,.06); }
.aucpick.sel { background: rgba(0,229,255,.14); box-shadow: inset 2px 0 0 var(--cyan); }
.aucctl { display: flex; gap: 4px; flex: 1 1 100%; }
.aucsell input { flex: 1; min-width: 52px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); font: inherit; padding: 3px 5px; }
.aucrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: calc(11px * var(--fontscale, 1));
  border-top: 1px solid var(--border); padding: 4px 0; }
.aucrow.mine { background: rgba(0,229,255,.05); }
.aucrow .aucname { font-weight: bold; }
.aucrow .aucbid { color: #ffd23e; }
.aucrow .aucleft { color: var(--dim); margin-left: auto; }
.aucrow input { width: 64px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); font: inherit; padding: 2px 4px; }
.aucrow button { padding: 2px 6px; font-size: calc(10px * var(--fontscale, 1)); }
#npcbody button:disabled { opacity: .4; cursor: not-allowed; }   /* can't-afford forge/buy reads as greyed */
#npcbody .npc-buy-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 8px; padding: 10px 0; }
#npcbody .npc-buy-row .grow { grid-column: 2 / -1; min-width: 0; }
#npcbody .npc-buy-quantity { grid-column: 1 / 3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; color: #a2acbf; }
#npcbody .npc-buy-quantity input { width: 76px; min-height: 30px; box-sizing: border-box; background: #101522; color: #dce6ed; border: 1px solid #46546b; border-radius: 3px; padding: 4px 6px; }
#npcbody .npc-buy-total { white-space: nowrap; font-variant-numeric: tabular-nums; }

#npcbody .npcwield { font-size: calc(11px * var(--fontscale, 1)); color: #8a93a6; }
#npcbody .npcwield.no { color: #d9304b; }   /* this class cannot hold it — same red as a short material */
/* RIG refinement: each equipped piece has its own comparison and action. */
#npcbody .refine-section { margin-top: 12px; }
#npcbody .refine-section h3 { margin: 0 0 10px; }
#npcbody .refine-notice, #npcbody .refine-help { font-size: calc(11px * var(--fontscale, 1)); line-height: 1.6; }
#npcbody .refine-notice { padding: 10px 12px; color: #ddbc8c; background: #28231f; border: 1px solid #514333; border-radius: 6px; }
#npcbody .refine-help { color: #a2acbf; margin: 8px 2px 14px; }
#npcbody .refine-list { display: grid; gap: 12px; }
#npcbody .refine-card { min-width: 0; padding: 12px; border: 1px solid #303c50; border-radius: 8px; background: linear-gradient(135deg, #1b2232, #141a27); }
#npcbody .refine-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#npcbody .refine-head > canvas { image-rendering: pixelated; flex: 0 0 auto; padding: 6px; box-sizing: content-box; background: #101522; border: 1px solid #303c50; border-radius: 6px; }
#npcbody .refine-head .grow { flex: 1; min-width: 100px; }
#npcbody .refine-head .tipkind { display: block; margin-top: 3px; color: #8f9aaf; font-size: calc(11px * var(--fontscale, 1)); }
#npcbody .refine-name { font-weight: bold; line-height: 1.4; overflow-wrap: anywhere; }
#npcbody .refine-level { color: #5deab2; }
#npcbody .refine-target { margin-left: auto; padding: 4px 7px; border: 1px solid #36535c; border-radius: 4px; background: #172b33; color: #8de4ed; font-size: calc(11px * var(--fontscale, 1)); white-space: nowrap; }
#npcbody .refine-preview { margin: 12px 0; padding: 9px 10px; border: 1px solid #2c4448; border-radius: 5px; background: #152629; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.6; }
#npcbody .refine-preview b { display: block; color: #a4bac5; font-weight: normal; margin-bottom: 6px; }
#npcbody .refine-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding: 2px 0; }
#npcbody .refine-values { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; color: #b8c6d2; }
#npcbody .refine-preview .pos { color: #5deab2; font-weight: bold; }
#npcbody .refine-preview .neg, #npcbody .refine-cost .short { color: #ff8394; }
#npcbody .refine-protection { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; color: #c4cddd; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.5; cursor: pointer; }
#npcbody .refine-protection input { flex: 0 0 auto; margin: 2px 0 0; accent-color: #53d9e8; }
#npcbody .refine-protection.unavailable { color: #8f9aaf; cursor: default; }
#npcbody .refine-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid #2c3649; margin-top: 10px; }
#npcbody .refine-cost { flex: 1; min-width: 120px; display: grid; gap: 4px; color: #a2acbf; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.4; }
#npcbody .refine-cost strong { color: #f1cd85; font-size: calc(13px * var(--fontscale, 1)); font-weight: normal; }
#npcbody .refine-action { min-height: 34px; padding: 7px 12px; border: 1px solid #397687; border-radius: 4px; color: #9af4ff; background: #193340; white-space: nowrap; }
#npcbody .refine-action:hover:not(:disabled) { background: #224957; border-color: #79d9e5; }
#npcbody .refine-action:focus-visible, #npcbody .refine-protection input:focus-visible { outline: 2px solid #9af4ff; outline-offset: 3px; }

.skread { color: #ffb15c; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.25; margin-top: 3px; }
.frow button { width: 18px; height: 18px; padding: 0; line-height: 1; }
#friendadd { display: flex; gap: 4px; margin-top: 5px; }
#friendadd input { flex: 1; min-width: 0; }
#friendadd button { width: auto; padding: 4px 10px; }
#friends .friend-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#friends .friend-status { font-size: .85em; color: #9ca3af; overflow-wrap: anywhere; }
#friends .frow { padding: 6px 0; }

/* equipment + inventory */
/* ---- paperdoll: slots where the body is, wires in between ---- */
/* 3x3 of 44px slots with 16px gaps = 164, plus 10px of padding on each side = 184 — the same
   184 the SVG viewBox uses, so the cable art lands exactly in the gaps at any zoom. */
#gearrig { position: relative; width: 184px; height: 184px; margin: 0 auto 4px; }
#gearwires { position: absolute; inset: 0; width: 184px; height: 184px; pointer-events: none; }
#gearwires .sheath path { fill: none; stroke: #0a0d14; stroke-width: 5; stroke-linecap: round; }
#gearwires .core path { fill: none; stroke: #17414f; stroke-width: 1.6; stroke-linecap: round; }
/* the centre run is the main bus: brighter, and it breathes */
#gearwires .core .bus { stroke: var(--cyan); stroke-width: 2; opacity: .75; animation: buspulse 2.8s ease-in-out infinite; }
@keyframes buspulse { 0%, 100% { opacity: .75; } 50% { opacity: .3; } }
#gearwires .nodes circle { fill: #1a2330; stroke: #2b6f80; stroke-width: 1; }
#gearwires .nodes .hot { fill: var(--neon); stroke: none; filter: drop-shadow(0 0 3px var(--neon)); }

#eqgrid {
  position: absolute; inset: 10px;
  display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 16px;
}
/* Explicit placement: the grid order is the EQ_SLOTS order, but the BODY decides where each
   one sits. helmet on top, armor at the chest, boots at the feet, hands to the sides. */
#eqgrid .slot:nth-child(1) { grid-area: 1 / 2; }   /* helmet */
#eqgrid .slot:nth-child(2) { grid-area: 1 / 1; }   /* chip    */
#eqgrid .slot:nth-child(3) { grid-area: 2 / 1; }   /* weapon  */
#eqgrid .slot:nth-child(4) { grid-area: 2 / 2; }   /* armor   */
#eqgrid .slot:nth-child(5) { grid-area: 2 / 3; }   /* gloves  */
#eqgrid .slot:nth-child(6) { grid-area: 3 / 2; }   /* boots   */
#eqgrid .slot:nth-child(7) { grid-area: 1 / 3; }   /* bag     */
/* body-part implants: their own row under the paperdoll (head, arms, torso, legs) */
#impgrid { display: flex; gap: 6px; justify-content: center; margin: 0 auto 4px; flex-wrap: wrap; }
/* a filled slot lights its own node in the harness */
#eqgrid .slot { background: #12161f; box-shadow: inset 0 0 12px rgba(0,0,0,.7); }
#eqgrid .slot:has(canvas) { border-color: #2b6f80; box-shadow: inset 0 0 12px rgba(0,0,0,.7), 0 0 9px rgba(0,229,255,.25); }
/* 10 colunas fixas: a mochila de 30 slots se empilha em 3 fileiras de 10. Janela estreita
   (dock) volta ao auto-fill — dez células de 44px não cabem ali. */
#invgrid { display: grid; grid-template-columns: repeat(10, 44px); gap: 3px; justify-content: center; }
@container (max-width: 500px) { #invgrid { grid-template-columns: repeat(auto-fill, 44px); } }
/* cabeçalho da mochila: título à esquerda, botão de organizar à direita */
.invbar { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.invbar .apphead { flex: 1; }
.invsort {
  font: inherit; font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .5px;
  color: var(--dim); background: none; border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 7px; cursor: pointer; text-transform: uppercase;
}
.invsort:hover { color: var(--neon); border-color: var(--neon); }
.slot {
  width: 44px; height: 44px; background: var(--panel2); border: 1px solid var(--border);
  position: relative; cursor: pointer; image-rendering: pixelated;
}
.slot:hover { border-color: var(--cyan); }
.slot canvas { width: 32px; height: 32px; margin: 5px; image-rendering: pixelated; }   /* 16->32 = exact 2x; 32 + 2*5 margin fills the 42px content-box */
/* iconCell with art larger than the cell (booster wrapper): bigger buffer, same display size.
   :where keeps the fallback size below any context rule; filtering beats every pixelated rule. */
:where(canvas.hires) { width: var(--icon); height: var(--icon); }
canvas.hires { image-rendering: auto !important; }
.slot .qty { position: absolute; right: 2px; bottom: 1px; font-size: calc(10px * var(--fontscale, 1)); color: #fff; text-shadow: 1px 1px 0 #000; }
.slot .itemtier { position: absolute; right: 2px; top: 1px; font-size: calc(9px * var(--fontscale, 1)); color: #e0e5ee; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.slot .up { position: absolute; left: 2px; top: 1px; font-size: calc(10px * var(--fontscale, 1)); font-weight: bold; color: #2fe58a; text-shadow: 1px 1px 0 #000; }
.slot .tag { position: absolute; left: 2px; top: 1px; font-size: calc(8px * var(--fontscale, 1)); color: var(--dim); }
.slot.r-uncommon { border-color: #2fe58a; } .slot.r-rare { border-color: #2b9ce5; }
.slot.r-epic { border-color: #b45cf5; } .slot.r-legendary { border-color: #ff9a2d; }
.slot.r-mythic { border-color: #f4e08a; }
.slot.r-mythic.align-dark { border-color: #c45cff; }

/* Tips overlay the world: entering the flex flow shrank the canvas by 52px on every cue. */
#coach {
  display: none; pointer-events: none;
  padding: 6px 10px 6px 8px; margin: 0;
  background:
    linear-gradient(180deg, rgba(0, 229, 255, .06), transparent 55%),
    var(--panel);
  border: 2px solid var(--cyan); color: var(--text);
  font-size: calc(13px * var(--fontscale, 1)); line-height: 1.35;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6;
  align-items: center; gap: 8px;
}
#coach.on { display: flex; }
#coach::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--neon), transparent);
}
#coachface {
  flex: none; width: 28px; height: 28px;
  image-rendering: pixelated;
  background: #07090e; border: 1px solid #1d2432;
}
#coachtext { flex: 1; min-width: 0; }

/* hotbar */
/* Action bar with 2 rows of skills & items inside the bottom strip */
#hotbar {
  display: flex; flex-direction: column; gap: 4px; justify-content: space-between;
  padding: 5px 6px;
  background: var(--glass);
  border: 1px solid var(--edge-cyan);
  box-shadow: var(--glow-cyan);
  backdrop-filter: blur(8px);
  overflow: hidden;
  position: relative;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.hb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 2px; flex: none; border-bottom: 1px solid rgba(0, 229, 255, .18);
}
.hb-title {
  font-size: calc(10px * var(--fontscale, 1)); font-weight: bold;
  color: var(--cyan); letter-spacing: 1.5px; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 229, 255, .35);
}

.hb-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
}
.hot {
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  background: var(--panel2); border: 1px solid var(--border);
  position: relative; cursor: pointer; font-size: calc(9px * var(--fontscale, 1));
  text-align: center; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#hotbar .hot {
  background: rgba(6, 10, 16, 0.92);
  border: 1px solid rgba(0, 229, 255, .32);
  border-radius: 3px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .55);
}
.hot:hover { border-color: var(--cyan); }
#hotbar .hot:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, .35), inset 0 0 8px rgba(0, 229, 255, .08);
}
#hotbar .hot .key { text-shadow: 0 0 6px rgba(0, 229, 255, .55), 1px 1px 0 #000; }
#hotbar::before, #vitals::before, #mmpanel::before {
  content: '';
  position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--neon), transparent);
  pointer-events: none; z-index: 2;
}
.hot .key { position: absolute; left: 2px; top: 1px; color: var(--cyan); font-size: calc(9px * var(--fontscale, 1)); z-index: 1; text-shadow: 1px 1px 0 #000; font-weight: bold; }
.hot .glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(18px * var(--fontscale, 1)); line-height: 1; }
.hot .nm { position: absolute; bottom: 2px; left: 0; right: 0; color: var(--text); }
.hot .cd {
  position: absolute; inset: 0; background: rgba(0,0,0,.75); color: #fff;
  font-size: calc(13px * var(--fontscale, 1)); display: none;
  align-items: center; justify-content: center; font-weight: bold;
}
.hot .qty { position: absolute; right: 2px; bottom: 1px; color: var(--xp); font-size: calc(10px * var(--fontscale, 1)); font-weight: bold; text-shadow: 1px 1px 0 #000; }
.hot .needlv { position: absolute; right: 2px; top: 1px; color: var(--hp); font-size: calc(9px * var(--fontscale, 1)); font-weight: bold; text-shadow: 1px 1px 0 #000; }
.hot.free { border-style: dashed; opacity: .4; }
.hot.draggable { cursor: grab; }
.hot.draggable:active { cursor: grabbing; }
.hot.dragover { border-color: var(--neon); box-shadow: 0 0 10px rgba(255,46,200,.5); }
#hotbar .hot.dragover {
  border-color: var(--neon);
  box-shadow: 0 0 12px rgba(255, 46, 200, .55), inset 0 0 8px rgba(255, 46, 200, .12);
}
#hotbar .hot.free { border-color: rgba(0, 229, 255, .22); }
/* dragging an inventory slot onto the world drops it — inset, so it can't grow the canvas box */
#viewport.dragover { box-shadow: inset 0 0 0 2px var(--neon), inset 0 0 14px rgba(255,46,200,.35); }
/* drag-to-sell target inside the merchant window — a squarish box, not a thin strip */
#npcsellzone { border: 1px dashed var(--cyan); border-radius: 4px; padding: 8px; margin: 4px 0 8px;
  min-height: 72px; display: flex; align-items: center; justify-content: center;
  color: #8a93a6; text-align: center; font-size: calc(11px * var(--fontscale, 1)); }
#npcsellzone.dragover { border-color: var(--neon); box-shadow: 0 0 10px rgba(255,46,200,.5); color: var(--text); }
.npc-sellall {
  width: 100%; margin: 4px 0 8px; padding: 8px;
  background: linear-gradient(180deg, #1a3040, #101820);
  border: 1px solid var(--cyan); color: var(--cyan); font-weight: bold;
}
.npc-sellall:hover { box-shadow: 0 0 10px rgba(0,229,255,.25); }
.npcsellrow span { color: #ffd23e; font-size: calc(11px * var(--fontscale, 1)); margin-right: 6px; }
/* pointer-drag out of the bag: pan-y leaves the vertical flick to the browser until the hold arms */
#invgrid .slot { touch-action: pan-y; }
#invgrid .slot.dragover { border-color: var(--neon); box-shadow: 0 0 10px rgba(255,46,200,.5); }
.dragghost { position: fixed; z-index: 400; pointer-events: none; width: 30px; height: 30px;
  transform: translate(-50%,-50%); opacity: .85; border: 1px solid var(--neon); border-radius: 3px;
  background: rgba(10,10,18,.85); display: flex; align-items: center; justify-content: center; }
.dragghost canvas { width: 24px; height: 24px; image-rendering: pixelated; }
#hotbar::-webkit-scrollbar { display: none; }   /* the action bar scrolls, but hide its bar like the rest */
.hot.locked { opacity: .35; }
/* Cast recusado (skill trancada): um pulso vermelho no slot apertado. Sem flicker — um ciclo só. */
.hot.deny { animation: hotdeny .35s ease-out; }
@keyframes hotdeny {
  0%, 100% { }
  40% { border-color: var(--hp); box-shadow: 0 0 10px var(--hp); }
}
/* Skill that just landed on the bar: gold glow (same as the level-up floater) until the
   player clicks the slot. Outline, not border — the damage-type stripe on the bottom stays. */
.hot.new {
  z-index: 2;
  outline: 1px solid #ffd23e;
  box-shadow: 0 0 8px #ffd23e, 0 0 14px rgba(255, 210, 62, .45);
  animation: hotnew 1.2s ease-in-out infinite;
}
@keyframes hotnew {
  0%, 100% { box-shadow: 0 0 6px #ffd23e, 0 0 10px rgba(255, 210, 62, .35); outline-color: #ffd23e; }
  50% { box-shadow: 0 0 12px #ffd23e, 0 0 20px rgba(255, 210, 62, .75); outline-color: #fff3b0; }
}
.hot .newtag {
  position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
  z-index: 3; pointer-events: none; white-space: nowrap;
  font-size: calc(7px * var(--fontscale, 1)); font-weight: 900; letter-spacing: .4px;
  line-height: 1.25; padding: 0 3px; color: #140e04; background: #ffd23e;
  box-shadow: 0 0 6px #ffd23e;
}
@media (prefers-reduced-motion: reduce) {
  .hot.new { animation: none; }
}

/* hunting contracts: a count and a bar, so progress reads without opening anything */
#tasks { font-size: calc(11px * var(--fontscale, 1)); }
#tasks .q { margin-bottom: 4px; }
#tasks .q b { color: var(--xp); }
.taskpts { color: var(--cyan); font-size: calc(10px * var(--fontscale, 1)); margin-bottom: 4px; }
.taskbar { height: 4px; background: #0e0f16; border: 1px solid var(--border); margin-top: 2px; }
.taskbar > div { height: 100%; transition: width .2s; }
.taskhead { font-size: calc(11px * var(--fontscale, 1)); color: var(--cyan); margin-bottom: 6px; }
#quests { font-size: calc(11px * var(--fontscale, 1)); }
#quests .q { margin-bottom: 3px; }
#quests .q b { color: #2fe58a; display: block; }
#quests .ready { color: #ffd23e; }

/* modals */
.modal {
  position: fixed; background: var(--panel); border: 2px solid var(--neon);
  padding: 10px; min-width: min(300px, calc(100vw - 16px)); max-width: min(420px, calc(100vw - 16px));
  max-height: min(70vh, calc(var(--vh) - 16px)); overflow-y: auto;
  display: none; z-index: 10;   /* no permanent glow — the neon border alone marks the focused window */
}
.modal.on { display: block; }
.modal h3 { color: var(--neon); margin-bottom: 6px; }
.modal .close { position: absolute; right: 6px; top: 4px; cursor: pointer; color: var(--dim); }
.modal .row { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--panel2); }
.modal .row canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.modal .row .grow { flex: 1; }
.modal button, #login button, #lobby button, #charnew button {
  background: var(--panel2); color: var(--cyan); border: 1px solid var(--border);
  font: inherit; padding: 3px 10px; cursor: pointer;
}
.modal button:hover, #login button:hover, #lobby button:hover, #charnew button:hover { border-color: var(--cyan); }
.cardface { position: relative; overflow: hidden; flex: 0 0 auto; background: #0a0a12; }
.cardface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
/* A borda PNG deixa os cantos do quadrado vazios; a arte precisa ocupar a janela interna
   explicitamente. Com width/height auto o navegador usa o tamanho intrínseco da PNG e ela
   escapa da moldura, que era o quadrado gigante visto na revelação. */
.cardface .cardart { inset: 12%; width: 76%; height: 76%; object-fit: cover; }
.cardface .cardborder { z-index: 1; object-fit: fill; pointer-events: none; }
.cardface .cardfx {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.55;
}
.cardface.r-rare { box-shadow: inset 0 0 10px rgba(43, 156, 229, 0.45); }
.cardface.r-legendary { box-shadow: inset 0 0 12px rgba(255, 154, 45, 0.5); }
.cardface.r-mythic.align-divine, .cardface.r-mythic:not(.align-dark) {
  box-shadow: inset 0 0 14px rgba(244, 224, 138, 0.65);
}
.cardface.r-mythic.align-dark { box-shadow: inset 0 0 14px rgba(196, 92, 255, 0.6); }
.cardface.cardfx-on.r-rare .cardfx {
  background:
    radial-gradient(circle at 30% 20%, rgba(120, 210, 255, 0.28), transparent 42%),
    radial-gradient(circle at 80% 80%, rgba(43, 156, 229, 0.22), transparent 50%);
  animation: card-rare-pulse 2.4s ease-in-out infinite;
}
.cardface.cardfx-on.r-legendary .cardfx {
  background: linear-gradient(115deg, transparent 28%, rgba(255, 220, 120, 0.42) 48%, transparent 68%);
  background-size: 220% 100%;
  animation: card-legend-shimmer 2.6s linear infinite;
}
.cardface.cardfx-on.r-legendary .cardfx::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 210, 80, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255, 240, 180, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 80%, rgba(255, 180, 60, 0.45) 0 1px, transparent 2px);
  animation: card-spark 1.8s steps(2) infinite;
}
.cardface.cardfx-on.r-mythic.align-divine .cardfx,
.cardface.cardfx-on.r-mythic:not(.align-dark) .cardfx {
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(255, 245, 180, 0.0), rgba(255, 230, 120, 0.35), rgba(255, 255, 255, 0.15),
      rgba(255, 210, 80, 0.3), rgba(255, 245, 180, 0.0));
  animation: card-mythic-spin 6s linear infinite;
  mix-blend-mode: screen;
}
.cardface.cardfx-on.r-mythic.align-dark .cardfx {
  background:
    radial-gradient(circle at 50% 120%, rgba(160, 20, 80, 0.45), transparent 55%),
    conic-gradient(from 90deg at 50% 50%,
      rgba(80, 0, 40, 0), rgba(180, 40, 255, 0.4), rgba(20, 0, 30, 0.2),
      rgba(255, 40, 90, 0.28), rgba(80, 0, 40, 0));
  animation: card-mythic-spin 7.5s linear infinite reverse;
  mix-blend-mode: screen;
}
.cardface.cardfx-on.r-mythic .cardfx::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 40%, rgba(255, 230, 160, 0.65) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 75%, rgba(255, 200, 255, 0.55) 0 1px, transparent 2px);
  animation: card-spark 1.4s steps(3) infinite;
}
.t-tilt:has(.cardface.cardfx-on.r-rare) { filter: drop-shadow(0 0 5px rgba(43, 156, 229, 0.55)); }
.t-tilt:has(.cardface.cardfx-on.r-legendary) { filter: drop-shadow(0 0 6px rgba(255, 154, 45, 0.6)); }
.t-tilt:has(.cardface.cardfx-on.r-mythic.align-divine),
.t-tilt:has(.cardface.cardfx-on.r-mythic:not(.align-dark)) { filter: drop-shadow(0 0 7px rgba(244, 224, 138, 0.7)); }
.t-tilt:has(.cardface.cardfx-on.r-mythic.align-dark) { filter: drop-shadow(0 0 7px rgba(196, 92, 255, 0.65)); }
@keyframes card-rare-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
@keyframes card-legend-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
@keyframes card-mythic-spin { to { transform: rotate(1turn); } }
@keyframes card-spark {
  0% { opacity: 0.2; transform: translate(0, 0); }
  50% { opacity: 0.9; transform: translate(4%, -3%); }
  100% { opacity: 0.35; transform: translate(-3%, 4%); }
}
.t-tilt { position: relative; flex: 0 0 auto; }
.t-tilt-card > .cardface { width: 100%; height: 100%; }
.t-tilt-card {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}
.t-tilt-card.is-tilting { transition: transform var(--tilt-follow) var(--tilt-follow-ease); }
.t-tilt-glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.48), rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.22), rgba(255,255,255,0.04) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.10), rgba(255,255,255,0) 88%);
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}
.t-tilt.is-hover .t-tilt-glare { opacity: var(--tilt-glare-opacity); }
.slot .t-tilt, .slot .cardface { width: 32px; height: 32px; }
.slot .t-tilt { margin: 5px; z-index: 0; }
.slot:hover .t-tilt { z-index: 4; }
.slot .t-tilt-card canvas { width: 32px; height: 32px; margin: 0; }
.sksockets .t-tilt, .sksockets .cardface, .carddeck .t-tilt, .carddeck .cardface { width: 36px; height: 36px; }
.sksockets .t-tilt, .carddeck .t-tilt { margin: 0; }
#cardreveal.booster-modal {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 16px)); max-width: min(520px, calc(100vw - 16px));
  max-height: min(88vh, calc(var(--vh) - 16px)); padding: 14px 18px 16px; overflow: hidden;
  text-align: center; z-index: 12; isolation: isolate;
  background:
    radial-gradient(circle at 50% 34%, rgba(69, 38, 128, .28), transparent 46%),
    linear-gradient(155deg, rgba(18, 22, 42, .98), rgba(7, 8, 18, .99));
  border-color: #d8b45b;
  box-shadow: 0 0 0 1px rgba(255, 219, 116, .16), 0 0 28px rgba(199, 91, 255, .24), 0 20px 70px rgba(0, 0, 0, .68);
}
#cardreveal.booster-modal::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .48;
  background:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 22%, rgba(122,229,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 17% 78%, rgba(246,166,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 81%, rgba(255,224,135,.7) 0 1px, transparent 2px);
}
#boosterstage {
  position: relative; display: grid; place-items: center; min-height: min(350px, 54vh);
  margin: 2px -4px 0; perspective: 900px; isolation: isolate;
}
#boosterstage::before {
  content: ''; position: absolute; inset: 6%; z-index: 0; opacity: 0; transform: scale(.18) rotate(-8deg);
  background: repeating-conic-gradient(from -8deg, rgba(255,236,151,.0) 0 7deg, rgba(255,236,151,.52) 8deg 10deg, rgba(255,236,151,.0) 11deg 21deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 38%, transparent 74%); mask-image: radial-gradient(circle, #000 0 38%, transparent 74%);
}
#boosterstage::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; z-index: 1;
  border-radius: 50%; background: rgba(255, 236, 158, .95); opacity: 0; transform: translate(-50%, -50%) scale(.2);
  box-shadow: 0 0 18px 8px rgba(255, 223, 107, .72), 0 0 80px 30px rgba(180, 75, 255, .46);
}
.booster-pack {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 174px; height: 246px; padding: 0;
  overflow: hidden; cursor: pointer; appearance: none; border: 1px solid rgba(255, 224, 133, .82);
  border-radius: 9px 9px 6px 6px; transform: translate(-50%, -50%) rotate(-4deg);
  color: #fff3ba; text-align: center; transform-style: preserve-3d;
  background:
    linear-gradient(108deg, transparent 12%, rgba(255,255,255,.24) 20%, transparent 28%, transparent 65%, rgba(255,255,255,.18) 72%, transparent 81%),
    repeating-linear-gradient(168deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px),
    linear-gradient(155deg, #411e77 0%, #101e55 42%, #08172a 100%);
  box-shadow: inset 0 0 0 2px rgba(100, 243, 255, .16), inset 0 -22px 24px rgba(0,0,0,.32), 0 15px 26px rgba(0,0,0,.52), 0 0 18px rgba(110, 213, 255, .34);
  transition: transform .2s ease, filter .2s ease, opacity .22s ease;
}
.booster-pack::before {
  content: ''; position: absolute; inset: 14px 12px 12px; border: 1px solid rgba(255, 227, 142, .38);
  border-radius: 5px; background: radial-gradient(circle at 50% 43%, rgba(246, 101, 255, .32), transparent 36%);
  box-shadow: inset 0 0 24px rgba(90, 213, 255, .18); pointer-events: none;
}
.booster-pack::after {
  content: ''; position: absolute; left: -10%; right: -10%; top: 31px; height: 2px;
  border-top: 1px dashed rgba(255, 229, 147, .82); border-bottom: 1px solid rgba(0,0,0,.3);
  transform: rotate(-1deg); pointer-events: none;
}
.booster-pack:hover, .booster-pack:focus-visible { transform: translate(-50%, -53%) rotate(-1deg) scale(1.035); filter: brightness(1.14); }
.booster-pack:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.booster-packtop { position: absolute; inset: 0 0 auto; height: 17px; background: linear-gradient(90deg, rgba(255,224,128,.14), rgba(255,255,255,.32), rgba(255,224,128,.08)); border-bottom: 1px solid rgba(255, 235, 165, .58); }
.booster-logo { position: absolute; left: 0; right: 0; top: 56px; z-index: 1; font-size: 27px; line-height: .82; letter-spacing: 4px; font-weight: 900; color: #ffe694; text-shadow: 0 2px 0 #33145f, 0 0 11px rgba(255, 220, 103, .7); }
.booster-logo b { color: #7ce9ff; font-size: 20px; letter-spacing: 7px; }
.booster-item-icon { position: absolute; left: 50%; top: 106px; z-index: 1; width: 64px; height: 64px; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(124, 233, 255, .72)); pointer-events: none; }
.booster-copy { position: absolute; left: 0; right: 0; bottom: 42px; z-index: 1; color: rgba(229, 244, 255, .84); font-size: 8px; line-height: 1.7; letter-spacing: 2px; }
.booster-seal { position: absolute; left: 50%; bottom: 13px; z-index: 1; width: 27px; height: 27px; border: 1px solid rgba(255, 223, 111, .85); border-radius: 50%; transform: translateX(-50%); color: #ffe48d; font-size: 9px; line-height: 25px; letter-spacing: 1px; box-shadow: 0 0 8px rgba(255, 224, 126, .42); }
.booster-tear { position: absolute; left: 12px; right: 12px; top: 27px; z-index: 2; height: 7px; border-top: 2px dashed rgba(255, 250, 210, .96); opacity: .86; }
.booster-tear::after { content: ''; position: absolute; left: 50%; top: -6px; width: 28px; height: 12px; background: #101b51; clip-path: polygon(0 50%, 18% 0, 35% 58%, 52% 8%, 71% 68%, 100% 30%, 100% 100%, 0 100%); }
.booster-modal.opening #boosterstage::before { animation: booster-rays .72s cubic-bezier(.12,.8,.18,1) forwards; }
.booster-modal.opening #boosterstage::after { animation: booster-flash .48s ease-out forwards; }
.booster-modal.opening .booster-pack { animation: booster-pack-open .42s cubic-bezier(.12,.8,.18,1) forwards; }
.booster-modal.opening .booster-item-icon { animation: booster-icon-pop .42s cubic-bezier(.12,.8,.18,1) forwards; }
.booster-modal.revealed .booster-pack { opacity: 0; pointer-events: none; transform: translate(-50%, -68%) rotate(13deg) scale(.34); filter: brightness(2) blur(2px); }
.booster-modal.revealed .booster-item-icon { opacity: 0; transform: translate(-50%, -68%) scale(.34); }
#cardrevealmeta:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .t-tilt-card { transform: none !important; transition: none !important; }
  .t-tilt-glare { display: none; }
  .cardface .cardfx { animation: none !important; }
  .t-tilt { filter: none !important; }
  .booster-pack, .booster-item-icon, #cardrevealart, #cardrevealmeta { transition: none !important; animation: none !important; }
  .booster-modal.opening #boosterstage::before, .booster-modal.opening #boosterstage::after { animation: none !important; opacity: 0; }
}
#boosterhint { min-height: 16px; color: var(--dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; transition: opacity .18s ease; }
#cardrevealmeta { min-height: 17px; color: var(--text); font-size: 12px; margin: 2px 0 8px; opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease; }
.booster-modal.revealed #cardrevealmeta { opacity: 1; transform: none; }
#cardrevealok { min-width: 104px; letter-spacing: 1px; }
/* Gacha reveal (ADR 0129): the pack tears, the cards are dealt face down with their backs
   glowing in the colour of what is under them, and each one flips in 3D. */
#cardreveal.booster-modal.revealed { width: min(760px, calc(100vw - 16px)); max-width: min(760px, calc(100vw - 16px)); overflow-y: auto; }
#cardreveal.booster-modal.revealed #boosterstage { min-height: 0; }
#cardreveal.booster-modal.revealed .booster-pack, #cardreveal.booster-modal.revealed .booster-item-icon { display: none; }
#cardrevealart.reveal-spread {
  position: relative; z-index: 3; display: none; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: 100%; margin: 6px auto 4px; perspective: 1100px;
}
.booster-modal.revealed #cardrevealart.reveal-spread { display: flex; }
.booster-modal.sealed #cardrevealmeta { opacity: 1; transform: none; color: #f4e08a; }
.rv-card {
  --rv: rgba(200, 212, 228, .25);
  position: relative; width: clamp(92px, 17vw, 132px); aspect-ratio: 66 / 100; padding: 0; border: 0;
  background: none; cursor: pointer; font: inherit; color: inherit;
  animation: rv-deal .46s cubic-bezier(.16,.9,.22,1) both; animation-delay: calc(var(--i, 0) * 90ms);
}
#cardrevealart.single .rv-card { width: clamp(150px, 40vw, 210px); }
.rv-card.r-uncommon { --rv: rgba(47, 229, 138, .55); }
.rv-card.r-rare { --rv: rgba(43, 156, 229, .8); }
.rv-card.r-legendary { --rv: rgba(255, 154, 45, .95); }
.rv-card.r-mythic { --rv: rgba(244, 224, 138, 1); }
.rv-card.r-mythic.align-dark { --rv: rgba(196, 92, 255, 1); }
.rv-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .56s cubic-bezier(.3,1.35,.45,1); }
.rv-card.flipped .rv-inner { transform: rotateY(180deg); }
.rv-card:not(.flipped):hover .rv-inner { transform: translateY(-4px) rotateZ(-1deg); }
.rv-back, .rv-front {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 9px; overflow: hidden; box-sizing: border-box;
}
.rv-back {
  border: 1px solid rgba(255, 224, 133, .7);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 50% 50%, rgba(246, 101, 255, .28), transparent 55%),
    linear-gradient(160deg, #3a1a6c, #0f1b4d 55%, #07122a);
  box-shadow: inset 0 0 0 3px rgba(8, 10, 24, .8), inset 0 0 0 4px rgba(255, 224, 133, .25), 0 0 14px var(--rv), 0 8px 18px rgba(0,0,0,.55);
}
.rv-logo {
  position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 223, 111, .85);
  color: #ffe48d; font-weight: 900; font-size: clamp(12px, 2.4vw, 18px); letter-spacing: 1px;
  background: radial-gradient(circle, rgba(17, 12, 40, .9), rgba(40, 14, 70, .9));
  box-shadow: 0 0 10px rgba(255, 224, 126, .42);
}
.rv-glow { position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent 0 70%, var(--rv) 85%, transparent 100%); opacity: 0; mix-blend-mode: screen; }
.rv-card.r-rare .rv-glow, .rv-card.r-legendary .rv-glow, .rv-card.r-mythic .rv-glow { opacity: .55; animation: rv-spin 2.6s linear infinite; }
.rv-card.r-legendary .rv-glow { opacity: .75; animation-duration: 1.8s; }
.rv-card.r-mythic .rv-glow { opacity: .8; animation-duration: 1.2s; background: conic-gradient(from 0deg, transparent 0 38%, #ff4fa3 48%, #f4e08a 58%, #7ce9ff 68%, #c45cff 78%, transparent 90%); filter: blur(4px); }
.rv-card.charging .rv-inner { animation: rv-shake .52s linear both; }
.rv-card.charging .rv-back { box-shadow: inset 0 0 0 3px rgba(8, 10, 24, .8), 0 0 28px 6px var(--rv), 0 8px 18px rgba(0,0,0,.55); }
.rv-front {
  transform: rotateY(180deg); display: flex; flex-direction: column; gap: 3px; padding: 5px;
  border: 1px solid var(--rv); text-align: left;
  background: linear-gradient(160deg, #252846, #0c1021 62%, #070913);
  box-shadow: 0 0 16px var(--rv), 0 8px 18px rgba(0,0,0,.55);
}
.rv-card.r-common .rv-front { box-shadow: 0 8px 18px rgba(0,0,0,.55); }
.rv-art { position: relative; width: 100%; aspect-ratio: 1; flex: 0 0 auto; border-radius: 6px; overflow: hidden; background: #050712; }
.rv-art .cardface { width: 100%; height: 100%; }
.rv-name { color: #ffe694; font-size: clamp(9px, 1.5vw, 11px); font-weight: bold; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
.rv-fx { color: var(--cyan); font-size: clamp(8px, 1.3vw, 10px); line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.rv-front .cgrade { left: auto; right: 7px; bottom: auto; top: 7px; }
.rv-new {
  position: absolute; left: 6px; top: 6px; z-index: 6; padding: 1px 5px; border-radius: 3px;
  background: #ff2d8a; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: 1px;
  box-shadow: 0 0 8px rgba(255, 45, 138, .7); animation: rv-new .9s ease-in-out infinite alternate;
}
.rv-card.flipped.r-legendary .rv-front::after, .rv-card.flipped.r-mythic .rv-front::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%);
  background-size: 250% 100%; animation: rv-sheen 2.2s ease-in-out infinite;
}
.reveal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.reveal-actions button { min-width: 104px; letter-spacing: 1px; }
.reveal-actions button[hidden] { display: none; }
#cardrevealnext { color: #ffe694; border-color: #d8b45b; background: linear-gradient(155deg, #411e77, #101e55); }
/* God pack: the sealed pack itself burns before you tear it. */
.booster-modal.god.sealed .booster-pack {
  border-color: #fff3a8;
  box-shadow: 0 0 0 2px rgba(255, 243, 168, .5), 0 0 30px 6px rgba(255, 196, 70, .6), 0 0 60px rgba(196, 92, 255, .5);
  animation: rv-godpack .9s ease-in-out infinite alternate;
}
.booster-modal.fuse #boosterstage::after { animation: booster-flash .5s ease-out forwards; }
/* Tearing by swipe: the dashed seal brightens with the drag. */
.booster-swipe { position: absolute; left: 12px; top: 26px; z-index: 3; height: 3px; width: calc((100% - 24px) * var(--tear, 0)); background: linear-gradient(90deg, #fff6c8, #7ce9ff); box-shadow: 0 0 8px #fff3a8; pointer-events: none; }
/* The WebGL foil pack (card3d.js): the button becomes a bare frame for the 3D wrapper, at card
   proportions, and the painted CSS face underneath steps aside. The tear line sits on the
   wrapper's own dashed strip, just under the top crimp. */
.booster-pack.pack3d {
  width: min(236px, 38vh); height: min(354px, 57vh); overflow: visible; border: 0; border-radius: 0;
  background: none; box-shadow: none; transform: translate(-50%, -50%);
}
.booster-pack.pack3d::before, .booster-pack.pack3d::after,
.booster-pack.pack3d > :not(.booster-pack-host):not(.booster-swipe) { display: none; }
.booster-pack.pack3d:hover, .booster-pack.pack3d:focus-visible { transform: translate(-50%, -52%) scale(1.03); filter: none; }
.booster-pack-host { position: absolute; left: 0; top: 0; display: block; width: min(236px, 38vh); height: min(354px, 57vh); }   /* explicit: inset:0 resolves to zero height inside a <button> */
.booster-pack.pack3d .booster-swipe { top: 9.8%; left: 7%; width: calc(86% * var(--tear, 0)); z-index: 3; }
.booster-modal.sealed #boosterstage:has(.pack3d) { min-height: min(430px, 64vh); }
.booster-modal.god.sealed .booster-pack.pack3d { border: 0; box-shadow: none; animation: none; }
/* Full-modal flash when a legendary or mythic turns. */
#cardreveal.flash-legendary::after, #cardreveal.flash-mythic::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20; border-radius: inherit;
  animation: rv-flash .7s ease-out forwards;
}
#cardreveal.flash-legendary::after { background: radial-gradient(circle, rgba(255, 190, 90, .55), transparent 70%); }
#cardreveal.flash-mythic::after { background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(196, 92, 255, .4) 45%, transparent 75%); }
@keyframes rv-deal { 0% { opacity: 0; transform: translateY(-60px) rotate(-18deg) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes rv-spin { to { transform: rotate(1turn); } }
@keyframes rv-shake {
  0%, 100% { transform: none; } 15% { transform: translateX(-3px) rotate(-2deg); } 30% { transform: translateX(3px) rotate(2deg); }
  45% { transform: translateX(-4px) rotate(-3deg) scale(1.03); } 60% { transform: translateX(4px) rotate(3deg) scale(1.05); }
  80% { transform: translateY(-6px) scale(1.08); }
}
@keyframes rv-new { to { transform: scale(1.1); } }
@keyframes rv-sheen { 0% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
@keyframes rv-godpack { from { filter: brightness(1.05) hue-rotate(0deg); } to { filter: brightness(1.35) hue-rotate(40deg); } }
@keyframes rv-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rv-card, .rv-inner, .rv-glow, .rv-new, .rv-card.charging .rv-inner, .rv-front::after,
  .booster-modal.god.sealed .booster-pack { animation: none !important; transition: none !important; }
  #cardreveal.flash-legendary::after, #cardreveal.flash-mythic::after { display: none; }
}
#cardviewmodal {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 20px)); max-width: min(720px, calc(100vw - 20px));
  max-height: min(86vh, calc(var(--vh) - 20px)); z-index: 50;
  border-color: var(--cyan); background: linear-gradient(155deg, #171b2b, #090d18 72%);
  box-shadow: 0 18px 45px rgba(0,0,0,.62), 0 0 0 1px rgba(0,229,255,.1);
}
#cardviewmodal h3 { padding-right: 24px; color: var(--cyan); text-transform: uppercase; letter-spacing: 1px; }
#cardviewbody .tipcard { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
#cardviewbody .tipcardface { width: min(280px, 34vw); aspect-ratio: 1; perspective: var(--tilt-perspective); background: #07090e; }
#cardviewbody .tipcardface .t-tilt, #cardviewbody .tipcardface .cardface { width: 100%; height: 100%; }
#cardviewbody .tipcardface .t-tilt { touch-action: none; }
#cardviewbody .tipcardface.generic { display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
#cardviewbody .tipcardface.generic canvas { width: 80%; height: 80%; image-rendering: pixelated; }
#cardviewbody .tipcardinfo { min-width: 0; padding-top: 4px; }
#cardviewbody .tipcardtitle b { display: block; font-size: 16px; line-height: 1.25; }
#cardviewbody .tipcardtitle .rar { display: block; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; }
#cardviewbody .tipkind { display: block; color: var(--dim); font-size: 11px; margin-top: 5px; }
#cardviewbody .tipcardsection { margin-top: 14px; padding-top: 7px; border-top: 1px solid rgba(0,229,255,.22); color: var(--cyan); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
#cardviewbody .tipcardstats { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 5px; font-size: 12px; }
#cardviewbody .tipcardstats .tipspan { grid-column: 1 / -1; color: var(--text); }
#cardviewbody .tipcardstats .tipl { color: var(--dim); }
#cardviewbody .tipcardstats .tipv { text-align: right; }
#cardviewbody .tipcardstats .tipv.pos { color: #2fe58a; }
#cardviewbody .tipcardstats .tipv.neg { color: var(--hp); }
#cardviewbody .tipcardstats .tipv.maxed { color: #ffd23e; }
#cardviewbody .tipcardorigin { margin-top: 10px; color: var(--dim); font-size: 11px; }
#cardviewbody .tipcardlore { color: #c2cad8; font-size: 12px; font-style: italic; line-height: 1.5; margin-top: 5px; }
#cardviewbody .tipprice { color: #ffd23e; margin-top: 10px; font-size: 11px; }
#cardviewok { display: block; min-width: 104px; margin: 16px 0 0 auto; letter-spacing: 1px; }
@media (max-width: 600px) {
  #cardviewbody .tipcard { grid-template-columns: 1fr; }
  #cardviewbody .tipcardface { width: min(280px, 76vw); margin: 0 auto; }
}
@keyframes booster-rays { 0% { opacity: 0; transform: scale(.18) rotate(-8deg); } 30% { opacity: .95; } 100% { opacity: 0; transform: scale(1.08) rotate(7deg); } }
@keyframes booster-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 35% { opacity: .95; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(8); } }
@keyframes booster-pack-open { 0% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); } 45% { transform: translate(-50%, -53%) rotate(2deg) scale(1.07); } 100% { opacity: 0; transform: translate(-50%, -70%) rotate(12deg) scale(.32); filter: brightness(2.4) blur(1px); } }
@keyframes booster-icon-pop { 0% { opacity: 1; transform: translate(-50%, 0) scale(1); } 45% { opacity: 1; transform: translate(-50%, -3px) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -30px) scale(.42); filter: brightness(2.3) blur(1px); } }
@keyframes booster-card-in { 0% { filter: brightness(2.7) saturate(.7); } 45% { filter: brightness(1.45) saturate(1.2); } 100% { filter: none; } }
.carddeck { display: flex; gap: 6px; margin: 6px 0 10px; }
.carddeck .slot { width: 40px; height: 40px; }
#npcmodal { left: 60px; top: 60px; }
/* Loot container: Tibia-style floating box anchored above the corpse (JS sets left/top).
   Compact so it sits on the world without covering half the fight. */
#lootmodal {
  left: 0; top: 0;
  min-width: 200px; max-width: 280px; max-height: min(42vh, 320px);
  padding: 8px 8px 8px;
  border-color: #c9a227;
  box-shadow: 0 0 0 1px #1a1408, 0 6px 18px rgba(0, 0, 0, 0.55);
  z-index: 12;
}
#lootmodal h3 {
  color: #ffd23e; font-size: calc(12px * var(--fontscale, 1)); padding-right: 18px;
  margin: 0 0 4px; cursor: grab; user-select: none;
}
#lootmodal .row { padding: 2px 0; }
#lootmodal .row canvas { width: 24px; height: 24px; }
/* Storage and backpack are distinct compartments; indices stay stable while filtering. */
#chestmodal {
  left:20px; top:70px; width:570px; min-width:0; max-width:calc(100vw - 40px);
  max-height:calc(100vh - 110px); box-sizing:border-box; padding:18px;
  background:linear-gradient(145deg,#14222e,#0a111b 65%); border:1px solid #658c91;
  box-shadow:0 16px 48px #0009,inset 0 2px #9dc6bb33; border-radius:8px; z-index:40;
}
#chestmodal h3 { color:#d6e5df; font-size:calc(14px * var(--fontscale,1)); padding-right:18px; margin:0 0 14px; }
#chestfilter { display:flex; gap:8px; margin:0 0 16px; }
#chestsearch,#chesttype { background:#0b131d; color:var(--text); border:1px solid #344b5a; border-radius:4px; font:inherit; padding:7px 8px; }
#chestsearch { flex:1 1 0; min-width:0; }
#chesttype { color:#a4c9c5; max-width:45%; }
#chestsearch:focus,#chesttype:focus { outline:1px solid #8bcbbf; }
#chestbody { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.chest-compartment { min-width:0; padding:10px; background:#060d1599; border:1px solid #344652; border-radius:5px; }
.chest-compartment h4 { display:flex; justify-content:space-between; gap:6px; margin:0; color:#edcf81; font-size:11px; letter-spacing:.6px; }
.chest-compartment:nth-child(2) h4 { color:#8dcfc4; }
.chest-compartment h4 span { color:#a5b4c1; letter-spacing:0; }
.chest-help { font-size:10px; color:#9caebd; line-height:1.5; min-height:30px; margin:8px 0; }
.chest-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
#chestmodal .chest-slot { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; width:100%; padding:0; margin:0; min-width:0; border:1px solid #334653; border-radius:3px; background:linear-gradient(#162432,#0d1520); color:#d6e1ed; cursor:pointer; }
#chestmodal .chest-slot.occupied { border-bottom:2px solid var(--item-color); }
#chestmodal .chest-slot:hover:not(:disabled),#chestmodal .chest-slot:focus-visible { outline:2px solid #9fe0cf; outline-offset:1px; background:#243d47; }
#chestmodal .chest-slot.empty { background:#0b141e; border-color:#263743; cursor:default; }
#chestmodal .chest-slot.filtered { opacity:.22; cursor:default; }
.chest-slot canvas { width:32px; height:32px; max-width:82%; max-height:82%; image-rendering:pixelated; }
.chest-slot-number { position:absolute; top:2px; left:3px; color:#526575; font-size:8px; }
.occupied .chest-slot-number { display:none; }
.chest-slot-badge { position:absolute; bottom:1px; right:2px; font-size:9px; text-shadow:1px 1px #000,-1px -1px #000; }
.chest-slot-up { position:absolute; top:1px; right:2px; font-size:9px; color:#f0d68f; text-shadow:1px 1px #000; }
.chest-equipment-note { grid-column:1/-1; border-top:1px solid #2b3b48; padding-top:10px; color:#91a5b5; margin:0; font-size:10px; line-height:1.5; }
@media(max-width:540px) { #chestmodal { left:10px; top:48px; max-width:calc(100vw - 20px); max-height:calc(100vh - 64px); padding:12px; } #chestbody { grid-template-columns:1fr; } .chest-help { min-height:0; } .chest-slot canvas { width:36px; height:36px; } }

/* reflex check (fishing, gathering): floats over the view, only while one is live */
#minigame {
  position: fixed; display: none; z-index: 30;
  transform: translateX(-50%); cursor: pointer; touch-action: none;
}
#minigame.on { display: block; }

/* right-click context menu (Tibia-style) */
#ctxmenu {
  position: fixed; display: none; z-index: 40;
  background: var(--panel); border: 1px solid var(--neon);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  min-width: 140px; padding: 2px;
}
#ctxmenu.on { display: flex; flex-direction: column; }
#ctxmenu button {
  background: none; border: none; color: var(--cyan); font: inherit;
  text-align: left; padding: 5px 12px; cursor: pointer;
}
#ctxmenu button:hover { background: var(--panel2); color: var(--neon); }

/* options */
#topbar { display: flex; gap: 5px; }
#topbar button {
  flex: 1; background: var(--panel2); color: var(--cyan); border: 1px solid var(--border);
  font: inherit; font-size: calc(11px * var(--fontscale, 1)); padding: 4px 0; cursor: pointer;
}
#topbar button:hover { border-color: var(--cyan); }
#escmenu { left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: min(320px, calc(100vw - 16px)); }
/* Scoped to #escbody, NOT to #escmenu: that node moves into the deck's Options app, and rules
   hung off the modal would stay behind — every section would unfold at once inside the deck. */
#escbody h4 {
  font-size: calc(11px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; color: var(--cyan);
  border-bottom: 1px solid var(--border); padding-bottom: 2px; margin-bottom: 6px;
}
#escbody .escbtn { display: block; width: 100%; margin: 4px 0; text-align: left; padding: 6px 10px; }
#escbody .escbtn.danger { color: var(--hp); border-color: var(--hp); }
#escbody .escback { margin-top: 10px; color: var(--dim); }
#escbody .escsec { display: none; }
#escbody .escsec.on { display: block; }
#escbody .hint { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); margin-top: 4px; }
.optsec { margin-bottom: 14px; }
.optrow { display: flex; align-items: center; gap: 8px; margin: 5px 0; cursor: pointer; }
.optrow > span:first-child { width: 70px; color: var(--text); }
.optrow input[type=range] { flex: 1; accent-color: var(--neon); cursor: pointer; }
.optrow b { width: 38px; text-align: right; color: var(--dim); font-weight: normal; }
.optrow .grow { flex: 1; }
.optrow .stepbtn, .optrow .sidebtn {
  padding: 3px 9px; font-size: calc(11px * var(--fontscale, 1)); background: #12151d; color: var(--text);
  border: 1px solid var(--border); cursor: pointer;
}
.optrow .stepbtn:hover, .optrow .sidebtn:hover { border-color: var(--cyan); color: var(--cyan); }
.optrow .sidebtn.on { border-color: var(--neon); color: var(--neon); }
.optcheck { display: flex; align-items: center; gap: 6px; margin-top: 8px; cursor: pointer; color: var(--text); }
.optcheck input { accent-color: var(--neon); cursor: pointer; }
#langbtns { display: flex; gap: 6px; }
#langbtns button.on { color: var(--neon); border-color: var(--neon); }
#langpick { display: flex; gap: 6px; }
#langpick button { font-size: calc(11px * var(--fontscale, 1)); padding: 2px 12px; }
#langpick button.on { color: var(--neon); border-color: var(--neon); }
#mmhint {
  float: right; color: var(--cyan); opacity: .7;
  font-weight: normal; letter-spacing: .6px; text-shadow: none;
}

/* trade */
#trademodal { left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 0; width: min(420px, calc(100vw - 16px)); }
#trademodal h4, #invitemodal h4 {
  font-size: calc(11px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; color: var(--cyan);
  border-bottom: 1px solid var(--border); padding-bottom: 2px; margin-bottom: 5px;
}
#tradecols { display: flex; gap: 10px; }
.tradeside { flex: 1; }
.offergrid {
  display: grid; grid-template-columns: repeat(4, 44px); gap: 3px;
  min-height: 47px; padding: 3px; background: var(--panel2); border: 1px solid var(--border);
}
#tr_inv { grid-template-columns: repeat(8, 44px); }
#tr_credits { width: 90px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); font: inherit; padding: 2px 4px; }
.tradecr { margin-top: 7px; color: #ffd23e; }
#tradestatus { margin: 8px 0 2px; min-height: 16px; color: #2fe58a; }
#tradebtns, #invitebtns { display: flex; gap: 8px; margin-top: 6px; }
#trademodal button.danger, #invitemodal button.danger { color: var(--hp); border-color: var(--hp); }
#btn_tradeok.on { color: var(--panel); background: #2fe58a; border-color: #2fe58a; }
#trademodal .hint, #invitemodal .hint { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); }
/* in-game confirm: the native confirm() blocks the frame loop, ignores the theme, and on a
   phone opens as an OS alert on top of everything */
/* above the lobby (30) and the bazaar (40): it is asked from both, and a confirm behind the
   screen that raised it is a dead client */
#askmodal { left: 50%; top: 40%; transform: translate(-50%, -50%); border-color: var(--neon); min-width: min(300px, 92vw); max-width: 92vw; z-index: 50; }
#huntusemodal {
  left: 50%; top: 42%; transform: translate(-50%, -50%);
  min-width: 0; width: min(460px, 94vw); max-width: 94vw; z-index: 50;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0,229,255,.12), 0 18px 40px rgba(0,0,0,.55);
}
#huntusemodal h3 {
  color: var(--cyan); letter-spacing: 1px; text-transform: uppercase;
  font-size: calc(12px * var(--fontscale, 1)); margin: 0 18px 4px 0;
}
#huntusesub { margin: 0 0 10px; }
#huntusebody { display: flex; flex-direction: column; gap: 8px; }
.huntuserow {
  display: grid; grid-template-columns: auto minmax(11em, 1fr) 64px 18px;
  align-items: center; gap: 6px;
  font-size: calc(11px * var(--fontscale, 1));
  padding: 5px 4px; margin: 0 -4px; border-radius: 4px;
  cursor: pointer;
}
.huntuserow:hover { background: rgba(0, 229, 255, .05); }
.huntuselab {
  display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text);
  min-width: 92px; min-height: 28px; user-select: none;
}
.huntuselab input[type=checkbox] {
  width: 18px; height: 18px; flex: 0 0 18px; margin: 0;
  accent-color: var(--cyan);
}
.huntuserow select, .huntuserow input[type=number] {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  font: inherit; padding: 5px 6px; min-width: 0; cursor: pointer;
}
.huntuserow select:focus, .huntuserow input:focus { border-color: var(--cyan); outline: none; }
.huntuserow input[type=number] {
  width: 64px; text-align: center; cursor: text;
  appearance: textfield; -moz-appearance: textfield;
}
.huntuserow input[type=number]::-webkit-inner-spin-button,
.huntuserow input[type=number]::-webkit-outer-spin-button {
  appearance: none; -webkit-appearance: none; margin: 0;
}
.huntuserow.is-off select,
.huntuserow.is-off input[type=number],
.huntuserow.is-off .unit { opacity: .45; }
.huntuserow .unit { color: var(--dim); pointer-events: none; }
#huntusebtns { display: flex; gap: 8px; margin-top: 12px; }
#hotbar.huntcfg .hot { cursor: pointer; }
#hotbar.huntcfg .hot .cfg {
  position: absolute; right: 2px; top: 1px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dim); box-shadow: 0 0 0 1px #000; z-index: 2;
}
#hotbar.huntcfg .hot .cfg.on { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
#hotbar.huntcfg .hot .warn,
.sknm .warn {
  position: absolute; right: 1px; top: 1px; z-index: 3;
  width: 13px; height: 13px; pointer-events: none;
  animation: huntwarn 1.15s ease-in-out infinite;
}
.sknm { position: relative; }
.sknm .warn { right: -2px; top: -2px; }
#hotbar.huntcfg .hot .warn::before,
.sknm .warn::before {
  content: ''; position: absolute; inset: 0;
  clip-path: polygon(50% 4%, 100% 96%, 0 96%);
  background: #FFB020;
  filter: drop-shadow(0 0 4px rgba(255, 176, 32, .85));
}
#hotbar.huntcfg .hot .warn::after,
.sknm .warn::after {
  content: '!'; position: absolute; left: 0; right: 0; top: 3px;
  text-align: center; font-size: 8px; font-weight: 900; color: #1a1208; line-height: 1;
}
/* ADR 0154: why an armed skill is not firing (reach / energy / holding energy for the left). */
#hotbar .hot .why {
  position: absolute; left: 1px; bottom: 1px; z-index: 3; pointer-events: none;
  min-width: 11px; height: 11px; padding: 0 1px; border-radius: 3px;
  font-size: 9px; line-height: 11px; text-align: center; font-weight: 900;
  background: rgba(10, 12, 16, .82); color: var(--dim); box-shadow: 0 0 0 1px #000;
}
#hotbar .hot .why[data-w="e"] { color: #6FD3FF; }
#hotbar .hot .why[data-w="r"] { color: #FFB020; }
@keyframes huntwarn {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  #hotbar.huntcfg .hot .warn, .sknm .warn { animation: none; }
}
.huntuserow select[data-f="every"],
.huntuserow select[data-f="foes"] { grid-column: 2 / 5; }
#askbody { margin: 6px 0; color: var(--text); }
#askbtns { display: flex; gap: 8px; margin-top: 8px; }
#askmodal button.danger { color: var(--hp); border-color: var(--hp); }

/* Pixie wiki — same creature as the deck launcher, not a stretched loot tooltip. */
#pixiemodal {
  left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: min(380px, 92vw); min-width: 280px; max-width: 380px; max-height: 78vh;
  padding: 0; overflow: hidden; z-index: 50;
  border: 1px solid #2a3a52;
  background:
    linear-gradient(180deg, rgba(0, 229, 255, .06), transparent 28%),
    linear-gradient(180deg, #161a24 0%, #0b0e14 100%);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .04);
}
#pixiemodal::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--neon), transparent);
  box-shadow: 0 0 12px rgba(0, 229, 255, .45);
}
#pixiemodal .close { right: 8px; top: 8px; z-index: 2; }
#pixiehdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 28px 10px 12px;
  border-bottom: 1px solid #243044;
}
#pixieface {
  flex: none; width: 48px; height: 48px;
  background: #07090e; border: 1px solid #1d2432;
  image-rendering: pixelated;
}
#pixieid { min-width: 0; flex: 1; }
#pixietitle {
  color: var(--cyan); letter-spacing: .5px;
  font-size: calc(12px * var(--fontscale, 1)); line-height: 1.2;
}
#pixietitle i { font-style: normal; color: var(--dim); letter-spacing: 1px; font-size: .85em; }
#pixiesub {
  display: block; margin-top: 2px; color: var(--dim);
  letter-spacing: 1px; text-transform: lowercase;
  font-size: calc(10px * var(--fontscale, 1));
}
#pixievoice {
  margin: 0 12px 8px; padding: 7px 10px;
  color: #c5d0e0; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.4;
  background: rgba(0, 229, 255, .05); border-left: 2px solid var(--cyan);
}
#pixiecard {
  margin: 0 12px 8px; padding: 10px;
  background: rgba(8, 9, 15, .45); border: 1px solid #243044; border-radius: 8px;
}
#pixiecard .tiphead { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
#pixiecard .tipicon {
  flex: none; width: 32px; height: 32px; background: var(--panel2); border: 1px solid var(--border);
}
#pixiecard .tipicon canvas { width: 32px; height: 32px; display: block; image-rendering: pixelated; }
#pixiecard .tipwho { min-width: 0; flex: 1; }
#pixiecard .head b { display: block; margin-bottom: 2px; line-height: 1.2; }
#pixiecard .rar { display: block; font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; opacity: .85; }
#pixiecard .tipkind { display: block; color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); }
#pixiecard .tipstats { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; font-size: calc(11px * var(--fontscale, 1)); margin-top: 4px; }
#pixiecard .tipl { color: var(--dim); }
#pixiecard .tipv { text-align: right; }
#pixiecard .tipv.pos { color: #2fe58a; }
#pixiecard .tipv.neg { color: var(--hp); }
#pixiecard .tipv.maxed { color: #ffd23e; }
#pixiecard .tipspan { grid-column: 1 / -1; color: var(--cyan); margin-top: 2px; }
#pixiecard .tipuniq { margin-top: 6px; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.35; }
#pixiecard .tipuniq b { display: inline; color: #ffd23e; text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(--fontscale, 1)); margin-right: 6px; }
#pixiecard .d {
  color: #8a93a6; font-style: italic; line-height: 1.4;
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border);
}
#pixiecard .tipprice { color: #ffd23e; margin-top: 5px; font-size: calc(10px * var(--fontscale, 1)); }
#pixiebody {
  padding: 0 12px 12px; overflow-y: auto; max-height: 42vh;
}
#pixiebody h4 {
  margin: 10px 0 4px; color: var(--cyan); font-size: calc(10px * var(--fontscale, 1));
  text-transform: uppercase; letter-spacing: 1.4px; font-weight: normal;
}
#pixiebody h4:first-child { margin-top: 0; }
#pixiebody .pixierow {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; border-bottom: 1px solid rgba(36, 48, 68, .7);
  font-size: calc(11px * var(--fontscale, 1));
}
#pixiebody .pixierow .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pixiebody .pixierow .pct { color: var(--cyan); flex: none; font-variant-numeric: tabular-nums; }
#pixiebody .pixieempty, #pixiebody .pixieline { color: var(--text); font-size: calc(11px * var(--fontscale, 1)); line-height: 1.4; padding: 2px 0; }
#pixiebody .pixieempty { color: var(--dim); font-style: italic; }
/* A split can be raised by drag-to-sell while the NPC and the floating inventory are both open.
   The base modal layer (10) leaves it behind the NPC, so the quantity picker exists but cannot
   be seen or clicked. Keep it with the other blocking prompts. */
#splitmodal { left: 50%; top: 40%; transform: translate(-50%, -50%); border-color: var(--cyan); min-width: 300px; z-index: 50; }
#splitbody { margin: 6px 0; }
#splitrow { display: flex; align-items: center; gap: 8px; }
#splitprice { margin-top: 6px; color: var(--cyan); }
#split_range { flex: 1; accent-color: var(--neon); cursor: pointer; }
#split_num { width: 70px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); font: inherit; padding: 2px 4px; }
#splitbtns { display: flex; gap: 8px; margin-top: 8px; }

#invitemodal { left: 50%; top: 30%; transform: translate(-50%, -50%); border-color: var(--cyan); }
#invitemodal #invitebody { margin: 6px 0; }

/* world map — a deck panel now, so it takes the app's width and draws itself to fit */
#minimap { cursor: pointer; }
#wmtitle { font-size: calc(12px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
#wmtabs { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }   /* eight floors do not fit one row on the phone */
#wmtabs button { padding: 2px 12px; font-size: calc(11px * var(--fontscale, 1)); }
#wmtabs button.on { color: var(--neon); border-color: var(--neon); }
#wmcanvas { display: block; margin: 0 auto; image-rendering: pixelated; border: 1px solid var(--border); cursor: crosshair; background: #050508; }
#wmfoot { margin-top: 6px; font-size: calc(11px * var(--fontscale, 1)); }
#wmhover { color: var(--cyan); height: 15px; }
#wmlegend { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--dim); margin: 3px 0; }
#wmlegend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; }
#wmfoot .hint { color: var(--dim); }

/* tooltip
   HUD card, not a browser title. Visibility (not display) so we can measure it while hidden
   and boot the neon scan without a pop-in of unstyled chrome. --tiprar is the rarity / damage
   colour the JS writes: the border, glow and scan all read it, so a new element does not need
   a new rule. */
#tooltip {
  position: fixed; left: 0; top: 0; display: block; opacity: 0; visibility: hidden; pointer-events: none;
  z-index: 10000; max-width: 300px; min-width: 220px; padding: 10px 12px 11px;
  /* Same zoom as the HUD: chrome zoom paints in its own stacking world, so a tooltip
     without it sits behind the inventory window no matter the z-index. 10000 stays
     above raiseWin's inline deckZ. left/top are divided by --ui in JS. */
  font-size: calc(11px * var(--fontscale, 1)); color: var(--text);
  font-variant-numeric: tabular-nums; overflow: visible; clip-path: none;
  transform-origin: 0 0;
  background: linear-gradient(180deg, #171c2a 0%, #0a0c14 100%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tiprar, var(--cyan)) 18%, transparent) 0%, transparent 26%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .11) 2px 3px),
    linear-gradient(180deg, #171c2a 0%, #0a0c14 100%);
  border: 1px solid var(--tiprar, var(--cyan));
  box-shadow:
    0 0 0 1px rgba(5, 6, 14, .85),
    0 14px 32px rgba(0, 0, 0, .55),
    0 0 18px color-mix(in srgb, var(--tiprar, var(--cyan)) 38%, transparent),
    inset 0 1px rgba(255, 255, 255, .06);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
#tooltip.on {
  opacity: 1; visibility: visible;
  transition: opacity .16s ease, transform .22s cubic-bezier(.2, .85, .2, 1), visibility 0s;
}
#tooltip.cursor.on { animation: tipin .2s cubic-bezier(.2, .85, .2, 1) both; }
#tooltip.above { transform-origin: var(--tipcaret, 50%) 100%; }
#tooltip.below { transform-origin: var(--tipcaret, 50%) 0; }
#tooltip.above.on { animation: tiprise .3s cubic-bezier(.16, 1, .3, 1) both; }
#tooltip.below.on { animation: tipdrop .3s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes tipin {
  0% { opacity: 0; transform: translate(4px, 8px) scale(.98); filter: brightness(1.45); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes tiprise {
  0% { opacity: 0; transform: translateY(16px) scale(.96); filter: brightness(1.7) saturate(1.25); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes tipdrop {
  0% { opacity: 0; transform: translateY(-16px) scale(.96); filter: brightness(1.7) saturate(1.25); }
  100% { opacity: 1; transform: none; filter: none; }
}
#tooltip .tipscan {
  position: absolute; left: 8%; right: 8%; top: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--tiprar, var(--cyan)), var(--neon), transparent);
  box-shadow: 0 0 10px var(--tiprar, var(--cyan));
  opacity: 0; pointer-events: none; font-style: normal;
}
#tooltip.on .tipscan { animation: tipscan .38s ease-out; }
@keyframes tipscan {
  0% { top: 0; opacity: 1; }
  70% { opacity: .75; }
  100% { top: calc(100% - 2px); opacity: 0; }
}
#tooltip .tipcaret {
  display: none; position: absolute; left: var(--tipcaret, 50%);
  width: 10px; height: 10px; margin-left: -5px; background: #0a0c14;
  z-index: 2; pointer-events: none; font-style: normal;
}
#tooltip.above .tipcaret {
  display: block; bottom: -6px;
  border-right: 1px solid var(--tiprar, var(--cyan));
  border-bottom: 1px solid var(--tiprar, var(--cyan));
  transform: rotate(45deg);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, .35);
}
#tooltip.below .tipcaret {
  display: block; top: -6px;
  border-left: 1px solid var(--tiprar, var(--cyan));
  border-top: 1px solid var(--tiprar, var(--cyan));
  transform: rotate(45deg);
  box-shadow: -2px -2px 8px rgba(0, 0, 0, .25);
}
#tooltip b { display: block; text-shadow: 0 0 8px rgba(0, 0, 0, .8); }
#tooltip .d {
  color: #8a93a6; font-style: italic; line-height: 1.4;
  margin-top: 8px; padding: 5px 0 2px 8px;
  border-left: 2px solid var(--tiprar, var(--cyan));
  background: linear-gradient(90deg, color-mix(in srgb, var(--tiprar, var(--cyan)) 12%, transparent), transparent 72%);
}
@media (prefers-reduced-motion: reduce) {
  #tooltip, #tooltip.on, #tooltip.cursor.on, #tooltip.above.on, #tooltip.below.on {
    animation: none; transition: opacity .08s ease; transform: none; filter: none;
  }
  #tooltip .tipscan { display: none; }
}

/* login / loading / lobby / charnew */
#login, #lobby, #charnew, #loading {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 30;
  overflow-x: hidden; overflow-y: auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#login, #loading { background: #050508; }
#lobby, #charnew { background: radial-gradient(circle at 50% 30%, #1a1030, #050508 70%); }
/* CRT scanline overlay — a faint horizontal grille sells the terminal fiction */
#login::after, #lobby::after, #charnew::after, #loading::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.12) 3px 4px);
}
#login h1, #lobby h1, #charnew h1, #loading h1 {
  font-family: var(--logofont);
  font-size: calc(44px * var(--fontscale, 1)); font-weight: 400; color: var(--neon); letter-spacing: 4px;
  text-shadow: 0 0 18px var(--neon), 0 0 40px rgba(255,45,149,.4);
}
/* the cyan half buzzes like a failing neon tube — steps() so it flickers, not fades */
#login h1 span, #lobby h1 span, #loading h1 span { color: var(--cyan); text-shadow: 0 0 18px var(--cyan); animation: neonbuzz 3.1s steps(1) infinite; }
@keyframes neonbuzz {
  0%, 42%, 46%, 71%, 100% { opacity: 1; }
  43%, 70% { opacity: .72; }
  44% { opacity: .9; }
}
#login .sub, #lobby .sub, #charnew .sub, #loading .sub { color: var(--dim); margin-top: -10px; }
/* loading: a scanning bar under the title while the art packs and the session resume settle */
#loadbar { width: 100%; height: 6px; background: var(--panel); border: 1px solid var(--border); overflow: hidden; }
#loadbar i { display: block; height: 100%; width: 40%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: loadslide 1.1s ease-in-out infinite; }
@keyframes loadslide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
#login input, #charnew input {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  font: inherit; padding: 7px 10px; width: min(240px, 86vw); outline: none;
}
#login input:focus, #charnew input:focus { border-color: var(--cyan); }

/* Title gate: the hub's own island + plaza monument, not a stock alley. */
.gate > .gatefx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: #050508;
}
.gate > .gatefx .gatecity {
  position: absolute; inset: 0;
  background: url('assets/ui/gate_cover.jpg') center 42% / cover no-repeat;
  image-rendering: pixelated;
}
.gate > .gatefx::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 55% 60% at 50% 48%, rgba(5, 5, 8, .35), rgba(5, 5, 8, .18) 42%, rgba(5, 5, 8, .72) 100%);
}
.gate > .gatefx::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(0, 229, 255, .018) 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(255, 46, 200, .014) 21px 22px);
}
.gatepanel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(420px, 92vw);
  padding: 26px 24px 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(10, 12, 22, .9), rgba(6, 7, 14, .94));
  border: 1px solid rgba(0, 229, 255, .38);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, .62),
    0 0 36px rgba(255, 46, 200, .12),
    inset 0 1px rgba(255, 255, 255, .05);
}
.gatepanel::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--neon), transparent);
  box-shadow: 0 0 10px rgba(0, 229, 255, .55);
}
#login .gatelogo, #loading .gatelogo {
  display: flex; flex-direction: column; align-items: center;
  font-size: 52px; letter-spacing: 2px; line-height: .88;
  margin: 2px 0 0;
}
#login .gatelogo span, #loading .gatelogo span { display: block; }
#login .gatelogo img, #loading .gatelogo img {
  width: 96px; height: auto; display: block;
  margin-bottom: 10px;
  image-rendering: auto;
  filter: drop-shadow(0 0 16px rgba(255, 46, 200, .45));
}
#login .gatepanel .sub, #loading .gatepanel .sub {
  font-family: var(--pixelfont);
  font-size: calc(14px * var(--fontscale, 1));
  line-height: 1.45; max-width: 36ch; margin: 0;
  color: #9aa3b4;
}
.gatepanel .sub::before {
  content: ''; display: block; width: 52px; height: 2px; margin: 0 auto 10px;
  background: linear-gradient(90deg, var(--neon), var(--cyan));
  box-shadow: 0 0 8px rgba(0, 229, 255, .4);
}
#login .gatepanel input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; background: rgba(8, 10, 18, .9);
}
#login .gatepanel button {
  font-family: var(--pixelfont);
  letter-spacing: 1.2px;
}
#login #btn_login, #login #wallet_button {
  width: 100%; min-height: 44px; padding: 10px 18px;
  font-size: 16px; letter-spacing: 2px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #ff2d95, #a3125c);
  border: 1px solid var(--neon);
  box-shadow: 0 0 14px rgba(255, 45, 149, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
#login #btn_login:hover, #login #wallet_button:hover {
  box-shadow: 0 0 22px rgba(255, 45, 149, .6);
}
#login #btn_register {
  width: 100%; min-height: 40px; padding: 8px 14px;
  letter-spacing: 1.6px;
}
#loginbtns { width: 100%; flex-direction: column; }
#google_login, #wallet_login, #legacy_login { width: 100%; }
#login #langpick { margin-top: 4px; }
#login #langpick button {
  font-family: var(--pixelfont); letter-spacing: 1px;
  padding: 4px 12px; background: rgba(8, 10, 18, .8);
}
.discord-join {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 14px; color: #fff; text-decoration: none;
  background: #5865F2; border: 1px solid #7289da; border-radius: 6px;
  font-family: var(--pixelfont); letter-spacing: 1px;
  font-size: calc(13px * var(--fontscale, 1));
}
.discord-join:hover { filter: brightness(1.08); border-color: #9aa4ea; }
.discord-join img { display: block; flex: none; filter: brightness(0) invert(1); }
#login .discord-join { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  #login h1 span, #loading h1 span { animation: none; }
}
body.nouimotion #login h1 span,
body.nouimotion #loading h1 span { animation: none; }
/* ---------- Identity Fab: lobby + criação ---------- */
/* O retrato ilustrado É o card. Texto vai por cima, como pôster. A aparência é uma
   vitrine holográfica (sprite LPC andando), não uma miniatura de 72px embaixo da arte. */
#lobby, #charnew {
  --cls: var(--cyan); --cls-rgb: 0, 229, 255;
  justify-content: flex-start; align-items: center;
  padding: 22px 18px 24px; gap: 14px; overflow-y: auto;
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(var(--cls-rgb), .16), transparent 52%),
    radial-gradient(circle at 18% 8%, rgba(255, 46, 200, .12), transparent 28%),
    linear-gradient(165deg, #07070f 0%, #100b1d 48%, #050508 100%);
}
#lobby[data-class="mercenary"], #charnew[data-class="mercenary"],
.clscard[data-class="mercenary"], #classdetail[data-class="mercenary"],
.charcard[data-class="mercenary"], #cnprev[data-class="mercenary"] { --cls: #ff5067; --cls-rgb: 255, 80, 103; }
#lobby[data-class="gunslinger"], #charnew[data-class="gunslinger"],
.clscard[data-class="gunslinger"], #classdetail[data-class="gunslinger"],
.charcard[data-class="gunslinger"], #cnprev[data-class="gunslinger"] { --cls: #37bfff; --cls-rgb: 55, 191, 255; }
#lobby[data-class="netrunner"], #charnew[data-class="netrunner"],
.clscard[data-class="netrunner"], #classdetail[data-class="netrunner"],
.charcard[data-class="netrunner"], #cnprev[data-class="netrunner"] { --cls: #a66bff; --cls-rgb: 166, 107, 255; }
#lobby[data-class="engineer"], #charnew[data-class="engineer"],
.clscard[data-class="engineer"], #classdetail[data-class="engineer"],
.charcard[data-class="engineer"], #cnprev[data-class="engineer"] { --cls: #ffad3d; --cls-rgb: 255, 173, 61; }
.fabfx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 40% at 50% 108%, rgba(var(--cls-rgb), .22), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(0, 229, 255, .018) 11px 12px);
}
.fabfx::before {
  content: ''; position: absolute; inset: -20% -10% auto; height: 55%;
  background: radial-gradient(ellipse at 50% 0, rgba(var(--cls-rgb), .2), transparent 70%);
  filter: blur(18px);
}
.fabfx::after {
  content: ''; position: absolute; left: -8%; right: -8%; bottom: -2%; height: 34%;
  background:
    linear-gradient(180deg, transparent, rgba(5, 5, 8, .55) 36%, #050508 100%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.015) 18px 19px);
  transform: perspective(220px) rotateX(58deg);
  transform-origin: 50% 100%;
}
.fabtop, #cnhead, #cnclass, #cnlook, #charlist, #lobbybtns, #loginerr2 {
  position: relative; z-index: 1;
}
.fabtop { width: min(1080px, 96vw); }
.fabbrand {
  display: flex; align-items: center; gap: 14px; text-align: left;
}
.fabglyph {
  flex: none; width: 52px; height: 52px; display: block;
  filter: drop-shadow(0 0 10px rgba(255, 46, 200, .35));
}
.fabglyph img { width: 100%; height: 100%; display: block; object-fit: contain; }
.fabkicker {
  font-family: var(--pixelfont);
  color: var(--cls, var(--cyan)); letter-spacing: 3.4px; text-transform: uppercase;
  font-size: calc(11px * var(--fontscale, 1)); margin-bottom: 2px;
}
#lobby h1, #charnew h1 {
  font-size: calc(28px * var(--fontscale, 1)); letter-spacing: 5px; line-height: 1.05;
  text-shadow: 0 0 12px rgba(255, 46, 200, .85), 0 0 34px rgba(255, 46, 200, .22);
}
#lobby .sub, #charnew .sub { margin-top: 4px; }
#cnhead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 18px; width: min(1180px, 96vw); text-align: left;
}
#cnhead::after { display: none; }
.cnsteps {
  display: flex; align-items: center; gap: 8px; margin: 0;
}
#charnew .cnsteps button {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-radius: 0; color: var(--dim); background: rgba(10, 12, 20, .7);
  border: 1px solid var(--border); letter-spacing: 1.6px; text-transform: uppercase;
  font-size: calc(10px * var(--fontscale, 1));
}
#charnew .cnsteps button b {
  color: var(--cls, var(--cyan)); font-size: calc(12px * var(--fontscale, 1));
}
#charnew .cnsteps button.on {
  color: #fff; border-color: var(--cls, var(--cyan));
  box-shadow: 0 0 14px rgba(var(--cls-rgb), .28); background: rgba(var(--cls-rgb), .1);
}
.cnstepbar {
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--cls, var(--cyan)), transparent);
}
#cnhead .sexpick { margin: 0; max-width: 240px; }
#cnclass, #cnlook { margin-top: 2px; }
#charnew.cnclass #cnlook, #charnew.cnlook #cnclass { display: none; }
#cnclass { width: min(1180px, 96vw); }
#cnlook {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px;
  width: min(1180px, 96vw); align-items: start;
}
#charnew.cnlook { padding-top: 14px; }
#charnew.cnlook h1 { font-size: calc(20px * var(--fontscale, 1)); letter-spacing: 3px; }
#charnew.cnlook .sub { display: none; }
#charnew.cnlook .cnsec { display: none; }
#charnew.cnlook #cnlook { margin-top: 0; }
#cnleft {
  position: sticky; top: 4px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, rgba(18, 20, 32, .96), rgba(8, 9, 15, .98));
  border: 1px solid rgba(var(--cls-rgb), .35); padding: 12px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .04), 0 0 24px rgba(var(--cls-rgb), .08);
}
#cnleft::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cls, var(--cyan)), transparent);
  box-shadow: 0 0 12px rgba(var(--cls-rgb), .5);
}
#cnprev {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  height: 420px; padding: 8px 8px 10px; overflow: hidden;
  border: 1px solid rgba(var(--cls-rgb), .28); background: #07080f;
}
#cnprevart {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  color: var(--cls, var(--cyan)); opacity: .16;
  pointer-events: none;
}
#cnprevart .csigil { width: 72%; height: 72%; }
#lookrig {
  position: relative; z-index: 2; flex: 1; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 0;
}
#lookpad {
  position: absolute; left: 12%; right: 12%; bottom: 18%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--cls-rgb), .4), transparent 72%);
  box-shadow: 0 0 28px rgba(var(--cls-rgb), .35);
  animation: padpulse 2.4s ease-in-out infinite;
}
#lookscan {
  position: absolute; left: 16%; right: 16%; height: 2px; top: 14%;
  background: linear-gradient(90deg, transparent, var(--cls, var(--cyan)), transparent);
  box-shadow: 0 0 14px rgba(var(--cls-rgb), .8);
  animation: lookscan 2.8s ease-in-out infinite;
  pointer-events: none;
}
#lookprev {
  position: relative; z-index: 2; width: 220px; height: 220px; margin: 0 0 18px;
  image-rendering: pixelated; cursor: ew-resize; touch-action: none;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .75));
}
#lookspin {
  position: relative; z-index: 3; display: flex; gap: 6px; justify-content: center;
  width: 100%; margin-top: 2px;
}
#charnew #lookspin button {
  min-width: 36px; padding: 5px 10px; border-radius: 4px;
}
#charnew #btn_lookauto.on {
  border-color: var(--cls, var(--cyan)); color: var(--cls, var(--cyan));
  box-shadow: 0 0 10px rgba(var(--cls-rgb), .3);
}
#cnprevcls, .cclsbg {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; user-select: none; overflow: hidden;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cls, var(--cyan)); opacity: .14;
  font-size: clamp(28px, 11vw, 64px); white-space: nowrap;
}
#cnprevcls { z-index: 1; mix-blend-mode: screen; }
#cnid {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: stretch;
}
.cncall {
  grid-column: 1 / -1; color: var(--dim); letter-spacing: 2px; text-transform: uppercase;
  font-size: calc(9px * var(--fontscale, 1));
}
#cnid #c_name { min-width: 0; }
.cnserial {
  grid-column: 1 / -1; color: var(--cls, var(--cyan)); opacity: .7;
  font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 1.6px;
}
#charnew #c_name {
  width: 100%; box-sizing: border-box; text-align: left;
  font-size: calc(15px * var(--fontscale, 1)); padding: 10px 12px;
  border-radius: 0; background: rgba(21, 26, 43, .9);
}
#charnew #c_name:focus { box-shadow: 0 0 0 2px rgba(var(--cls-rgb), .18), 0 0 14px rgba(var(--cls-rgb), .12); }
#cnright { min-width: 0; }
.cnsec {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 8px;
  color: var(--cyan); text-transform: uppercase; letter-spacing: 3px;
  font-size: calc(12px * var(--fontscale, 1));
}
.cnsec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
#charnew.cnclass .cnsec { display: none; }
#classes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 12px; align-items: stretch;
}
.sexpick { display: flex; gap: 8px; }
#charnew .sexpick button {
  flex: 1; padding: 8px 10px; font-weight: bold; border-radius: 0;
  border: 1px solid var(--border); background: #14151c; color: var(--dim); cursor: pointer;
}
#charnew .sexpick button.on { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 10px rgba(255,45,149,.3); }
#charnew .sexpick button:hover { border-color: var(--cyan); color: var(--cyan); }
#charnewbtns, #cnclassbtns { display: flex; gap: 8px; }
#cnclassbtns { margin-top: 8px; }
#charnew #btn_charcreate, #charnew #btn_charnext {
  flex: 1; padding: 12px; font-weight: bold; letter-spacing: 2px; border-radius: 0;
  color: #fff; background: linear-gradient(180deg, #ff2d95, #a3125c);
  border: 1px solid var(--neon); box-shadow: 0 0 14px rgba(255, 45, 149, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
#charnew #btn_charcreate:hover, #charnew #btn_charnext:hover { box-shadow: 0 0 22px rgba(255, 45, 149, .6); }
#charnew #btn_charcancel, #charnew #btn_charback, #charnew #btn_lookrand { padding: 8px 12px; border-radius: 0; }
@keyframes padpulse {
  0%, 100% { opacity: .55; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.06); }
}
@keyframes lookscan {
  0%, 100% { top: 12%; opacity: .15; }
  50% { top: 72%; opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  #lookpad, #lookscan { animation: none; }
  .clscard:hover, .clscard.sel, .charcard:hover { transform: none; }
}
/* ---------- personalização (pele/cabelo/roupa/rosto) ---------- */
.lookpick {
  margin: 0; padding: 14px; min-width: 0;
  background:
    radial-gradient(circle at 90% 0, rgba(var(--cls-rgb), .08), transparent 34%),
    linear-gradient(180deg, rgba(16, 18, 30, .94), rgba(8, 9, 15, .94));
  border: 1px solid rgba(var(--cls-rgb), .28);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.swaxes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; min-width: 0; }
.swrow { display: flex; align-items: center; gap: 8px; }
.swrow > span { width: 52px; color: var(--dim); font-size: calc(12px * var(--fontscale, 1)); text-align: right; }
.sw { display: flex; gap: 5px; }
.sw .swatch { width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 4px; cursor: pointer; padding: 0; }
.sw .swatch.on { border-color: var(--neon); box-shadow: 0 0 8px rgba(255,45,149,.4); }
.sw .swatch:hover { border-color: var(--cyan); }
.pickrow {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px; min-width: 0;
  background: rgba(8, 9, 15, .45); border: 1px solid rgba(255,255,255,.03);
}
.pickrow:has(#eyepick), #chanpick, .palette { grid-column: 1 / -1; }
.pickrow > span { flex: 0 0 64px; font-size: calc(11px * var(--fontscale, 1)); color: var(--dim); text-align: right; }
.lookstep { display: flex; align-items: center; gap: 8px; }
#charnew .lookstep button {
  flex: 0 0 36px; width: 36px; height: 32px; padding: 0;
  font-size: 18px; line-height: 1; border-radius: 0;
}
.lookstep b {
  min-width: 72px; text-align: center; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
.eyepick { display: flex; gap: 7px; margin-bottom: 4px; padding: 3px 0; }
.eyepick .eyeCell {
  flex: 0 0 23px; width: 23px; height: 23px; padding: 0; border: 2px solid var(--border);
  border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.22);
}
.eyepick .eyeCell.on { border-color: #fff; box-shadow: 0 0 8px rgba(255,45,149,.65), inset 0 0 0 2px rgba(0,0,0,.22); }
.eyepick .eyeCell:hover { border-color: var(--cyan); }
.chanpick { display: flex; gap: 6px; margin: 4px 0 2px; }
.chanpick .chan {
  flex: 1; padding: 6px 2px; border: 2px solid var(--border); border-radius: 0;
  cursor: pointer; color: #fff; font-size: calc(10px * var(--fontscale, 1));
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.chanpick .chan.on { border-color: var(--neon); box-shadow: 0 0 8px rgba(255,45,149,.4); }
.chanpick .chan:hover { border-color: var(--cyan); }
.palette { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 2px; width: 100%; }
.palette .pcell { aspect-ratio: 1; border: 1px solid transparent; border-radius: 2px; cursor: pointer; padding: 0; }
.palette .pcell.on { border-color: #fff; box-shadow: 0 0 5px rgba(255,255,255,.7); }
.palette .pcell:hover { border-color: var(--cyan); }
.clscard {
  --cls: var(--cyan); --cls-rgb: 0, 229, 255;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  min-height: 0; height: min(440px, calc(var(--vh) - 300px)); padding: 0; cursor: pointer; text-align: left;
  font-size: calc(11px * var(--fontscale, 1));
  background: #090a12; border: 1px solid #303950;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .34);
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.clscard:hover {
  transform: translateY(-6px); border-color: rgba(var(--cls-rgb), .85);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .5), 0 0 22px rgba(var(--cls-rgb), .2);
}
.clscard:focus-visible { outline: 2px solid var(--cls); outline-offset: 3px; }
.clscard.sel {
  transform: translateY(-4px); border-color: var(--cls);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 28px rgba(var(--cls-rgb), .35);
}
.clscard.sel::after {
  content: '✓'; position: absolute; z-index: 4; right: 10px; top: 10px;
  width: 24px; height: 24px; display: grid; place-items: center;
  color: #08090f; background: var(--cls); font-weight: bold;
  box-shadow: 0 0 14px rgba(var(--cls-rgb), .6);
}
.classhero {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex: 1; min-height: 0; padding: 18px 12px 0; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 46% at 50% 36%, rgba(var(--cls-rgb), .2), transparent 62%),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(var(--cls-rgb), .05) 13px 14px),
    #090a12;
}
.classhero::after {
  content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(8, 9, 15, .55) 78%, rgba(8, 9, 15, .94) 100%);
}
.csigil {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(var(--cls-rgb), .45));
  pointer-events: none;
}
.clscard .csigil {
  position: relative; z-index: 1;
  width: min(70%, 220px); height: auto; max-height: 56%; margin: auto;
  transition: transform .18s ease, filter .18s ease;
}
.clscard:hover .csigil, .clscard.sel .csigil {
  transform: scale(1.07);
  filter: drop-shadow(0 0 18px rgba(var(--cls-rgb), .75));
}
.classtitle { position: relative; z-index: 3; width: 100%; margin-top: auto; padding: 0 14px 14px; text-align: left; }
.classtitle span {
  display: block; color: var(--cls); font-size: calc(9px * var(--fontscale, 1));
  letter-spacing: 1.6px; text-transform: uppercase; text-shadow: 0 1px 4px #000;
}
.classtitle b {
  display: block; margin: 3px 0 6px; color: #fff; font-size: calc(18px * var(--fontscale, 1));
  letter-spacing: 1px; text-shadow: 0 2px 8px #000;
}
.clscard.sel .classtitle b { color: #fff; }
.classtitle .diff { margin: 0 0 6px; letter-spacing: 3px; color: var(--cls); font-size: calc(10px * var(--fontscale, 1)); }
.classtitle .diff i { color: #2f3444; font-style: normal; }
.classtitle .tags { display: flex; gap: 4px; flex-wrap: wrap; min-height: 0; margin: 0; }
.classtitle .tags span {
  font-size: calc(9px * var(--fontscale, 1)); color: #d5dce8;
  border: 1px solid rgba(var(--cls-rgb), .35); background: rgba(var(--cls-rgb), .12);
  padding: 2px 6px; letter-spacing: .4px;
}
.classcopy { display: none; }
#classdetail {
  --cls: var(--cyan); --cls-rgb: 0, 229, 255;
}
#classdetail .cdbars { display: grid; gap: 4px; margin-top: 6px; }
#classdetail .cdbar { display: grid; grid-template-columns: 28px 1fr auto; gap: 6px; align-items: center; }
#classdetail .cdbar span { color: #7d8698; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: 1px; }
#classdetail .cdbar b { color: #c5ccd8; font-size: calc(10px * var(--fontscale, 1)); font-variant-numeric: tabular-nums; }
#classdetail .cdbar i {
  display: block; height: 4px; background: rgba(255,255,255,.06); overflow: hidden;
}
#classdetail .cdbar i em {
  display: block; height: 100%; width: var(--w, 40%); background: var(--cls);
  box-shadow: 0 0 8px rgba(var(--cls-rgb), .55);
}
@media (max-width: 980px) {
  #cnlook { grid-template-columns: 1fr; }
  #cnleft { position: static; }
  #cnprev { height: 340px; }
  #lookprev { width: 160px; height: 160px; }
  .swaxes { grid-template-columns: 1fr; }
  #cnhead { justify-content: center; text-align: center; }
  .fabbrand { justify-content: center; }
  #charlist { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(640px, 96vw); }
}
@media (max-width: 720px) {
  #lobby h1 {
    font-size: calc(28px * var(--fontscale, 1)); letter-spacing: 3px;
  }
  #login .gatelogo, #loading .gatelogo { font-size: 40px; }
  #login .gatelogo img, #loading .gatelogo img { width: 80px; }
  .gatepanel { padding: 22px 16px 16px; }
  #charlist { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(520px, 96vw); }
  #lobbybtns, #loginbtns { flex-wrap: wrap; justify-content: center; }
  #charnew { padding-inline: 10px; }
  #classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clscard { height: min(420px, calc(var(--vh) - 240px)); }
  #cnhead .sexpick { max-width: 100%; width: 100%; }
}
@media (max-width: 520px) {
  #charlist { grid-template-columns: minmax(0, 1fr); width: min(360px, 96vw); }
}
#loginbtns { display: flex; gap: 10px; }
#google_button { display: flex; justify-content: center; margin-top: 4px; }
#google_login { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
#wallet_login { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; text-align: center; }
#login #wallet_button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
#wallet_login .hint, #wallet_status { color: var(--dim); font-size: 12px; line-height: 1.5; margin: 0; }
#wallet_status:empty { display: none; }
#wallet_login a { color: var(--cyan); font-size: 12px; }
#google_status { color: var(--dim); font-size: 12px; }
#google_status:empty { display: none; }
#google_switch_hint { text-align: center; line-height: 1.5; }
#google_switch_hint p { margin: 0 0 8px; }
#google_switch_hint a { color: var(--cyan); }
#legacy_login { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#loginerr { color: var(--hp); min-height: 16px; }

/* death overlay */
#death {
  position: fixed; inset: 0; background: rgba(10,0,0,.82); z-index: 25;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
/* death is a MOMENT: a white flash slams to red, and FLATLINED scales in from a blur of spacing */
#death.on { display: flex; animation: deathslam .55s ease-out; }
@keyframes deathslam { 0% { background: rgba(255,255,255,.92); } 22% { background: rgba(150,0,0,.6); } 100% { background: rgba(10,0,0,.82); } }
#death.on h1 { animation: flatline .6s ease-out; }
@keyframes flatline { 0% { transform: scale(1.7); opacity: 0; letter-spacing: 26px; } 55% { opacity: 1; } 100% { transform: scale(1); letter-spacing: 8px; } }
#death h1 { color: var(--hp); font-size: calc(40px * var(--fontscale, 1)); letter-spacing: 8px; text-shadow: 0 0 20px var(--hp); }
#death button { background: var(--panel); color: var(--text); border: 2px solid var(--hp); font: inherit; padding: 8px 24px; cursor: pointer; }

/* ---------- casino ---------- */
/* The one place in the UI allowed to look expensive: felt green, brass, deep red, neon. */
#casinomodal {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 0; width: min(760px, calc(100vw - 16px)); max-width: calc(100vw - 16px);
  max-height: min(90vh, calc(var(--vh) - 16px));
  border: 2px solid #ffd23e;
  box-shadow:
    0 0 0 1px #6b4530,
    0 0 40px rgba(255, 46, 200, .18),
    0 0 28px rgba(255, 210, 62, .28),
    inset 0 1px 0 rgba(255, 210, 62, .25);
  background:
    linear-gradient(180deg, rgba(255, 46, 200, .06) 0%, transparent 40%),
    linear-gradient(180deg, #1a121c 0%, #120e16 50%, #0e0c12 100%);
  border-radius: 8px;
  overflow: auto;
}
#casinomodal::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: 0; height: 3px;
  background: linear-gradient(90deg, #ff2ec8, #ffd23e, #00e5ff, #ff2ec8);
  background-size: 200% 100%; animation: casMarquee 3s linear infinite;
  border-radius: 0 0 2px 2px; pointer-events: none;
}
@keyframes casMarquee { to { background-position: 200% 0; } }
#casinomodal h3 {
  color: #ffd23e; text-shadow: 0 0 12px rgba(255, 210, 62, .45);
  letter-spacing: 0.04em; text-transform: uppercase; font-size: calc(15px * var(--fontscale, 1));
}
.cas-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; padding-top: 4px; }
.cas-head .grow { flex: 1; }
.cas-cr {
  color: #ffd23e; font-weight: bold; padding: 2px 8px;
  border: 1px solid #6b4530; border-radius: 999px; background: rgba(255, 210, 62, .08);
  font-size: calc(12px * var(--fontscale, 1));
}
.cas-rules { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); margin-bottom: 10px; line-height: 1.45; }
.cas-felt {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(57, 255, 20, .08), transparent 55%),
    linear-gradient(180deg, #1a5c28 0%, #0e4d12 40%, #0a3a0e 100%);
  border: 2px solid #b4835a; border-radius: 10px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .45), 0 2px 0 #6b4530;
  padding: 14px 12px; margin-bottom: 10px; min-height: 110px;
  position: relative;
}
.cas-felt::after {
  content: ''; position: absolute; inset: 6px; border: 1px dashed rgba(255, 210, 62, .22);
  border-radius: 6px; pointer-events: none;
}
.cas-seat { margin-bottom: 10px; position: relative; z-index: 1; }
.cas-seat:last-child { margin-bottom: 0; }
.cas-label { color: #d9c8a8; font-size: calc(11px * var(--fontscale, 1)); margin-bottom: 4px; letter-spacing: 0.03em; }
.cas-cards { display: flex; gap: 5px; flex-wrap: wrap; min-height: 50px; }
.card {
  width: 38px; height: 54px; background:
    linear-gradient(180deg, #fff8ec 0%, #f2ede0 40%, #d9c8a8 100%);
  color: #14151c; border: 1px solid #836d54; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: bold; font-size: calc(13px * var(--fontscale, 1)); line-height: 1.05;
  box-shadow: 1px 3px 0 rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255,255,255,.55);
  letter-spacing: -0.02em;
}
.card.red { color: #c2172f; }
.card.back {
  background: repeating-linear-gradient(45deg, #7a0f66 0 3px, #3a0a32 3px 6px);
  border-color: #ffd23e; box-shadow: 0 0 8px rgba(255, 46, 200, .35);
}
.cas-hand.active {
  outline: 2px solid #ffd23e; outline-offset: 4px; border-radius: 6px;
  box-shadow: 0 0 12px rgba(255, 210, 62, .35);
}
.cas-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cas-btns button {
  background: linear-gradient(180deg, #2a2030, #17151f);
  border-color: #ffd23e; color: #ffd23e; font-weight: bold;
}
.cas-btns button:hover:not(:disabled) {
  background: linear-gradient(180deg, #3a2a40, #25202a);
  box-shadow: 0 0 10px rgba(255, 210, 62, .3);
}
.cas-btns button:disabled { opacity: .35; cursor: not-allowed; border-color: var(--border); }
.cas-chips { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.chip {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px dashed #f2ede0; color: #f2ede0; font-size: calc(11px * var(--fontscale, 1)); font-weight: bold;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ff3b4e, #8a1b2e 70%);
  box-shadow: 0 2px 0 #4a0a12, inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .08s ease;
}
.chip:hover { transform: translateY(-1px); }
.chip.c25 { background: radial-gradient(circle at 35% 30%, #39ff14, #0e4d12 70%); }
.chip.c100 { background: radial-gradient(circle at 35% 30%, #00e5ff, #0e5f74 70%); }
.chip.c500 { background: radial-gradient(circle at 35% 30%, #6c43b8, #3a2470 70%); }
.chip.sel {
  border-style: solid; border-color: #ffd23e; color: #ffd23e;
  box-shadow: 0 0 12px rgba(255, 210, 62, .55), 0 2px 0 #4a0a12;
  transform: scale(1.08);
}
.cas-result { margin-top: 8px; font-weight: bold; min-height: 20px; font-size: calc(14px * var(--fontscale, 1)); letter-spacing: 0.04em; }
.cas-result.win { color: #2fe58a; text-shadow: 0 0 10px rgba(47, 229, 138, .45); }
.cas-result.lose { color: #d9304b; } .cas-result.push { color: #ffd23e; }

/* roulette layout */
.roul-wrap {
  display: flex; gap: 12px; align-items: stretch; margin-bottom: 8px; flex-wrap: wrap;
}
.roul-wheel {
  width: 110px; height: 110px; flex-shrink: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      #1a6b1e 0deg 10deg,
      #8a1b2e 10deg 20deg, #14151c 20deg 30deg,
      #8a1b2e 30deg 40deg, #14151c 40deg 50deg,
      #8a1b2e 50deg 60deg, #14151c 60deg 70deg,
      #8a1b2e 70deg 80deg, #14151c 80deg 90deg,
      #8a1b2e 90deg 100deg, #14151c 100deg 110deg,
      #8a1b2e 110deg 120deg, #14151c 120deg 130deg,
      #8a1b2e 130deg 140deg, #14151c 140deg 150deg,
      #8a1b2e 150deg 160deg, #14151c 160deg 170deg,
      #8a1b2e 170deg 180deg, #14151c 180deg 190deg,
      #8a1b2e 190deg 200deg, #14151c 200deg 210deg,
      #8a1b2e 210deg 220deg, #14151c 220deg 230deg,
      #8a1b2e 230deg 240deg, #14151c 240deg 250deg,
      #8a1b2e 250deg 260deg, #14151c 260deg 270deg,
      #8a1b2e 270deg 280deg, #14151c 280deg 290deg,
      #8a1b2e 290deg 300deg, #14151c 300deg 310deg,
      #8a1b2e 310deg 320deg, #14151c 320deg 330deg,
      #8a1b2e 330deg 340deg, #14151c 340deg 350deg,
      #8a1b2e 350deg 360deg
    );
  border: 4px solid #ffd23e;
  box-shadow: 0 0 16px rgba(255, 210, 62, .35), inset 0 0 12px rgba(0, 0, 0, .5);
  position: relative; margin: auto;
}
.roul-wheel::after {
  content: ''; position: absolute; inset: 32%;
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd23e, #6b4530 70%);
  border: 2px solid #f2ede0; box-shadow: 0 0 6px rgba(0, 0, 0, .5);
}
.roul-wheel.spinning { animation: wheelspin .35s linear infinite; }
@keyframes wheelspin { to { transform: rotate(360deg); } }
.roul-board { flex: 1; min-width: 280px; }
.roul-grid { display: grid; grid-template-columns: 28px repeat(12, 1fr); gap: 2px; margin-bottom: 4px; }
.roul-outside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 6px; }
.rc {
  position: relative; text-align: center; font-size: calc(11px * var(--fontscale, 1)); padding: 5px 0;
  border: 1px solid #2f5c33; cursor: pointer; color: #f2ede0; background: #14401a;
  border-radius: 2px; transition: border-color .1s, box-shadow .1s;
}
.rc:hover { border-color: #ffd23e; box-shadow: inset 0 0 8px rgba(255, 210, 62, .15); }
.rc.red { background: linear-gradient(180deg, #a02035, #8a1b2e); }
.rc.black { background: linear-gradient(180deg, #25202a, #14151c); }
.rc.zero { background: linear-gradient(180deg, #2a8a2e, #1a6b1e); grid-row: span 3; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.rc .stake {
  position: absolute; right: 1px; bottom: 0; font-size: calc(9px * var(--fontscale, 1)); color: #ffd23e;
  background: rgba(0,0,0,.78); padding: 0 2px; border-radius: 2px;
  border: 1px solid rgba(255, 210, 62, .4);
}
.rc.hit { animation: rcflash .8s ease-out; }
@keyframes rcflash { from { background: #ffd23e; color: #14151c; } to {} }
.roul-ball {
  font-size: calc(28px * var(--fontscale, 1)); font-weight: bold; text-align: center; padding: 8px 0; letter-spacing: 2px;
  text-shadow: 0 0 12px currentColor;
}

/* slots */
.slot-cabinet {
  background: linear-gradient(180deg, #2a2430 0%, #17151f 40%, #0b0e1a 100%);
  border: 3px solid #ffd23e; border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 46, 200, .2), inset 0 0 20px rgba(0, 0, 0, .5);
  padding: 12px 16px 14px; margin: 8px 0 12px; position: relative;
}
.slot-cabinet::before {
  content: '★ LUCKY STRIP ★'; display: block; text-align: center;
  font-size: calc(11px * var(--fontscale, 1)); letter-spacing: 0.2em; color: #ff2ec8; margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(255, 46, 200, .6);
  animation: slotSign 1.2s ease-in-out infinite alternate;
}
@keyframes slotSign { from { color: #ff2ec8; } to { color: #00e5ff; } }
.slot-window {
  display: flex; gap: 8px; justify-content: center; margin: 6px 0 4px;
  padding: 8px; background: #05060e; border-radius: 6px;
  border: 2px solid #836d54; box-shadow: inset 0 0 16px rgba(0, 0, 0, .8);
}
.reel {
  width: 74px; height: 82px;
  background: linear-gradient(180deg, #0b0e1a 0%, #17151f 50%, #0b0e1a 100%);
  border: 3px solid #ffd23e; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(34px * var(--fontscale, 1)); font-weight: bold; overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .7), 0 0 8px rgba(255, 210, 62, .2);
  position: relative;
}
.reel::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: rgba(255, 210, 62, .55); pointer-events: none;
}
.reel.spin { animation: reelblur .1s linear infinite; }
@keyframes reelblur {
  0% { opacity: .4; filter: blur(1px); }
  50% { opacity: 1; filter: blur(0); }
  100% { opacity: .4; filter: blur(1px); }
}
.slot-pay {
  font-size: calc(11px * var(--fontscale, 1)); color: var(--dim); width: 100%;
  border-collapse: collapse; margin-top: 4px;
}
.slot-pay td { padding: 2px 10px 2px 0; }
.slot-pay .sym { font-size: calc(16px * var(--fontscale, 1)); text-shadow: 0 0 6px currentColor; }
.slot-pay tr:nth-child(odd) td { background: rgba(255, 255, 255, .02); }
/* the progressive on the glass — one server-wide number, so it gets marquee treatment */
.slot-jackpot {
  text-align: center; margin: 6px 0 2px; padding: 5px 8px;
  border: 2px solid #ff2ec8; border-radius: 6px; background: #05060e;
  color: #d9c8a8; font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 0.24em;
  box-shadow: inset 0 0 14px rgba(255, 46, 200, .18);
}
.slot-jackpot b {
  display: block; letter-spacing: 0.06em; color: #ffd23e;
  font-size: calc(22px * var(--fontscale, 1));
  text-shadow: 0 0 10px rgba(255, 210, 62, .6);
  animation: slotSign 1.2s ease-in-out infinite alternate;
}

.pk-table { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.pk-felt, .bj-felt {
  position: relative;
  min-height: 250px;
  border-radius: 48% / 38%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(57, 255, 20, .1), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.35), transparent 50%),
    linear-gradient(180deg, #1c6b34 0%, #0e4d1c 42%, #0a3514 100%);
  border: 10px solid #6b3a1e;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, .45),
    0 0 0 2px #c4a06a,
    0 8px 24px rgba(0, 0, 0, .45);
  padding: 22px 18px 8px;
  overflow: visible;
}
.pk-felt::before, .bj-felt::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px dashed rgba(255, 210, 62, .22); border-radius: 46% / 36%;
  pointer-events: none;
}
.pk-opps { display: flex; justify-content: space-around; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.pk-board { justify-content: center; min-height: 64px; position: relative; z-index: 1; }
.pk-pot {
  text-align: center; color: #ffd23e; letter-spacing: 0.08em;
  font-size: calc(12px * var(--fontscale, 1)); text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 210, 62, .45);
  position: relative; z-index: 1;
  background: rgba(0,0,0,.28); display: inline-block; align-self: center;
  padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(255,210,62,.28);
}
.pk-seat { flex: 1; min-width: 110px; text-align: center; padding: 6px 4px; border: 1px solid transparent; border-radius: 8px; position: relative; z-index: 1; }
.pk-seat .cas-cards, .cas-seat .cas-cards { justify-content: center; }
.pk-seat.toact, .cas-seat.toact {
  border-color: #00e5ff; box-shadow: 0 0 14px rgba(0, 229, 255, .35);
  background: rgba(0, 229, 255, .06);
}
.pk-seat.folded { opacity: 0.42; }
.pk-seat.allin .cas-label { color: #ff8a00; }
.pk-seat.you, .cas-seat.you {
  background: rgba(255, 210, 62, .06);
  border-color: rgba(255, 210, 62, .28);
  margin-top: 8px;
}
.pk-felt .pk-seat.you, .bj-felt .cas-seat.you {
  position: relative;
  bottom: -8px;
}
.bj-others { display: flex; justify-content: space-around; gap: 6px; flex-wrap: wrap; position: relative; z-index: 1; }
.cas-seat.dealer { text-align: center; }
.cas-turn {
  text-align: center; color: #00e5ff; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: calc(11px * var(--fontscale, 1)); margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(0, 229, 255, .5);
}

.cas-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.cas-modehint { grid-column: 1 / -1; color: var(--dim); font-size: calc(12px * var(--fontscale, 1)); margin: 0 0 4px; }
.cas-mode {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 14px 16px; cursor: pointer;
  background: linear-gradient(180deg, #2a2030, #17151f);
  border: 1px solid #ffd23e; color: #f2ede0; border-radius: 8px;
  font: inherit;
}
.cas-mode b { color: #ffd23e; letter-spacing: 0.04em; text-transform: uppercase; font-size: calc(14px * var(--fontscale, 1)); }
.cas-mode span { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); line-height: 1.4; }
.cas-mode:hover { box-shadow: 0 0 14px rgba(255, 210, 62, .28); background: linear-gradient(180deg, #3a2a40, #25202a); }
.cas-mode.pvp { border-color: #00e5ff; }
.cas-mode.pvp b { color: #00e5ff; }
.cas-mode.pvp:hover { box-shadow: 0 0 14px rgba(0, 229, 255, .28); }

.q-slots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.q-slot {
  width: 92px; min-height: 88px; padding: 8px 6px;
  border: 1px dashed rgba(0, 229, 255, .35); border-radius: 8px;
  background: rgba(8, 10, 18, .7); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.q-slot b { font-size: calc(12px * var(--fontscale, 1)); color: #f2ede0; word-break: break-word; }
.q-slot i { font-style: normal; color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 0.04em; text-transform: uppercase; }
.q-slot.wait { animation: qpulse 1.4s ease-in-out infinite; }
.q-slot.on { border-style: solid; border-color: #ffd23e; box-shadow: 0 0 12px rgba(255, 210, 62, .25); }
@keyframes qpulse { 50% { border-color: rgba(0, 229, 255, .8); } }
.q-meta { text-align: center; color: #00e5ff; letter-spacing: 0.08em; text-transform: uppercase; font-size: calc(12px * var(--fontscale, 1)); }
#matchq.q-overlay {
  left: 50%; top: auto; bottom: 72px; transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px)); max-height: none;
  background: linear-gradient(180deg, rgba(14, 12, 22, .96), rgba(10, 8, 16, .96));
  border: 1px solid #00e5ff; padding: 12px 14px;
  box-shadow: 0 0 24px rgba(0, 229, 255, .18);
}
#matchq .q-panel h3 { color: #00e5ff; margin: 0 0 6px; font-size: calc(13px * var(--fontscale, 1)); letter-spacing: 0.06em; text-transform: uppercase; }
#matchq .q-found {
  text-align: center; color: #2fe58a; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: bold; padding: 12px; text-shadow: 0 0 12px rgba(47, 229, 138, .5);
}
#huntq {
  background: linear-gradient(180deg, #1a3040, #101820);
  border-color: #00e5ff; color: #00e5ff;
}

/* ---------- PunkCoin market ---------- */
/* The market is a deck panel now, so it inherits the app width instead of setting its own. */
#marketbody h4 { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); margin: 8px 0 3px; text-transform: uppercase; }
.mwallet { display: flex; gap: 6px; }
.mwallet > div {
  flex: 1; background: var(--panel2); border: 1px solid var(--border);
  padding: 4px 6px; display: flex; flex-direction: column;
}
.mwallet span { font-size: calc(10px * var(--fontscale, 1)); color: var(--dim); }
.mwallet b { font-size: calc(14px * var(--fontscale, 1)); color: var(--text); }
.mwallet b.pc { color: #ffd23e; }              /* PunkCoin is the gold-coloured currency */
.mwallet i { font-size: calc(10px * var(--fontscale, 1)); color: var(--dim); font-style: normal; }
.mmove { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.mmove input { flex: 1 1 80px; min-width: 0; }
.mmove button { flex: 0 0 auto; padding: 3px 8px; }   /* on the 306px deck these wrap instead of clipping */
.mtabs { display: flex; gap: 4px; margin-top: 8px; }
.mtabs button { flex: 1; }
.mtabs button.on { border-color: var(--neon); color: var(--neon); }
.mform { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-top: 6px; }
.mform label { flex: 1; min-width: 110px; font-size: calc(10px * var(--fontscale, 1)); color: var(--dim); display: flex; flex-direction: column; gap: 2px; }
#marketbody input {
  background: #05060e; color: var(--text); border: 1px solid var(--border);
  font: inherit; padding: 3px 6px; width: 100%;
}
.mtotal { flex: 1 0 100%; font-size: calc(11px * var(--fontscale, 1)); color: #ffd23e; }
.mnote { font-size: calc(10px * var(--fontscale, 1)); color: var(--dim); margin-top: 4px; }
.mbook { display: flex; gap: 8px; flex-wrap: wrap; }   /* on the phone-sized deck the two halves stack */
.mbook > div { min-width: 120px; }
.mbook > div { flex: 1; }
.mrow {
  display: flex; justify-content: space-between; gap: 6px; align-items: center;
  font-size: calc(11px * var(--fontscale, 1)); padding: 2px 4px; border-bottom: 1px solid var(--panel2);
}
.mrow[data-price] { cursor: pointer; }
.mrow[data-price]:hover { background: var(--panel2); }
.mrow.bid span { color: #2fe58a; }              /* green bids, red asks: the standard reading */
.mrow.ask span { color: #d9304b; }
.mrow button { padding: 1px 6px; font-size: calc(10px * var(--fontscale, 1)); }
.mempty { font-size: calc(10px * var(--fontscale, 1)); color: var(--dim); padding: 3px 0; }
.mtape { display: flex; flex-wrap: wrap; gap: 4px; font-size: calc(10px * var(--fontscale, 1)); color: var(--dim); }
.mtape span { background: var(--panel2); padding: 1px 5px; border: 1px solid var(--border); }

/* Compact HUD: one row for as long as it fits. The old 720px wrap set every panel to
   width:100% and ate the view. Minimap is the first thing to go (the deck has a map). */

/* ---- bazaar ---- */
#bazaarmodal { left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 0; width: min(520px, calc(100vw - 16px)); max-width: calc(100vw - 16px); z-index: 40; }
#bazaarwallet { color: #ffd23e; margin: 4px 0 8px; }
#bazaarsell { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
#bazaarsell select, #bazaarsell input {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text); font: inherit; padding: 3px 6px;
}
#bazaarsell input { width: 100px; }
#bazaarlist { max-height: 46vh; overflow-y: auto; }
.blot { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); padding: 6px 8px; margin-bottom: 5px; }
.blot canvas { width: 48px; height: 48px; image-rendering: pixelated; flex: none; }
.blot .binfo { flex: 1; min-width: 0; }
.blot .bname { color: var(--cyan); }
.blot .bmeta { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); }
.blot .bprice { color: #ffd23e; white-space: nowrap; }
#bazaarmodal .hint { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); }

/* ---- comparison tooltip ---- */
/* The hovered item on top, what you are wearing below it, and the deltas last — read top-down,
   the last line is the answer to "is this an upgrade". */
#tooltip .tiphead { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
#tooltip .tipicon {
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #07090e; font-size: 18px; line-height: 1;
  border: 1px solid color-mix(in srgb, var(--tiprar, var(--cyan)) 55%, var(--border));
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--tiprar, var(--cyan)) 22%, transparent);
}
#tooltip .tipicon canvas { width: 32px; height: 32px; display: block; image-rendering: pixelated; }
#tooltip .tipwho { min-width: 0; flex: 1; }
#tooltip .head b, #tooltip .wornblock b { display: block; margin-bottom: 2px; line-height: 1.2; }
#tooltip .tipup { color: #2fe58a; font-style: normal; font-size: calc(11px * var(--fontscale, 1)); }
#tooltip .rar { display: block; font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; opacity: .85; }
#tooltip .tipkind { display: block; color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); }
#tooltip .tipstats {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 12px;
  margin-top: 4px; align-items: baseline;
}
#tooltip .tipl { color: var(--dim); }
#tooltip .tipv { text-align: right; }
#tooltip .tipv.pos { color: #2fe58a; }
#tooltip .tipv.neg { color: var(--hp); }
#tooltip .tipv.maxed { color: #ffd23e; }
#tooltip .tipspan { grid-column: 1 / -1; color: var(--cyan); margin-top: 2px; }
#tooltip .tipuniq {
  margin-top: 5px; color: #ffd23e; line-height: 1.35;
  font-size: calc(11px * var(--fontscale, 1));
}
#tooltip .tipuniq b { display: inline; color: #ffd23e; text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(--fontscale, 1)); margin-right: 6px; }
#tooltip .tipprice { color: #ffd23e; margin-top: 5px; font-size: calc(10px * var(--fontscale, 1)); }
#tooltip .wornblock { color: var(--dim); }
#tooltip .wornblock b { filter: saturate(.5); }
#tooltip .wornblock .tipstats { opacity: .85; }
#tooltip .cmp { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 5px; }
#tooltip .cmph { font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 3px; }
#tooltip .cmpd { margin-top: 5px; font-size: calc(11px * var(--fontscale, 1)); }
#tooltip .cmpd .up { color: #2fe58a; }
#tooltip .cmpd .down { color: var(--hp); }
#tooltip .cmpd.same, #tooltip .cmpd.empty { color: var(--dim); font-style: italic; }
#tooltip .tippips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
#tooltip .tippip {
  font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .6px; text-transform: uppercase;
  padding: 2px 7px; color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, .38); background: rgba(0, 229, 255, .06);
}
#tooltip .tippip.cd {
  color: var(--neon); border-color: rgba(255, 46, 200, .4); background: rgba(255, 46, 200, .07);
}
/* ADR 0154: a generator's energy refill. */
#tooltip .tippip.gain {
  color: #6FD3FF; border-color: rgba(111, 211, 255, .45); background: rgba(111, 211, 255, .08);
}
#tooltip .tiplock {
  margin: 5px 0 2px; color: var(--hp); font-size: calc(10px * var(--fontscale, 1));
}
#tooltip.cardtip { max-width: 390px; min-width: 320px; }
#tooltip .tipcard {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: start;
}
#tooltip .tipcardface {
  width: 128px; height: 128px; perspective: var(--tilt-perspective); flex: none;
}
#tooltip .tipcardface .t-tilt, #tooltip .tipcardface .cardface { width: 100%; height: 100%; }
#tooltip .tipcardface .t-tilt { touch-action: none; }
#tooltip .tipcardface.generic {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--tiprar, var(--cyan)) 22%, #07090e), #07090e 72%);
  border: 1px solid color-mix(in srgb, var(--tiprar, var(--cyan)) 65%, var(--border));
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--tiprar, var(--cyan)) 28%, transparent);
}
#tooltip .tipcardface.generic canvas { width: 96px; height: 96px; image-rendering: pixelated; }
#tooltip .tipcardinfo { min-width: 0; }
#tooltip .tipcardtitle b { display: block; line-height: 1.2; }
#tooltip .tipcardtitle .rar { margin-top: 2px; }
#tooltip .tipcardsection {
  margin-top: 8px; padding-top: 5px; border-top: 1px solid rgba(0, 229, 255, .2);
  color: var(--cyan); font-size: calc(10px * var(--fontscale, 1));
  letter-spacing: 1px; text-transform: uppercase;
}
#tooltip .tipcardstats { margin-top: 3px; }
#tooltip .tipcardstats .tipspan { display: block; margin: 0; padding: 2px 0; color: var(--text); }
#tooltip .tipcardorigin { margin-top: 6px; color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); }
#tooltip .tipcardlore {
  color: #b5bdca; font-style: italic; line-height: 1.4; margin-top: 4px;
}
#tooltip .tiphint {
  margin-top: 7px; padding-top: 5px; border-top: 1px dashed rgba(0, 229, 255, .22);
  color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); line-height: 1.35;
}
#tooltip .tiphint + .tiphint { margin-top: 3px; padding-top: 0; border-top: none; }
#tooltip .abstats { display: block; margin-top: 6px; }
#tooltip .abstats .tipspan {
  display: block; margin: 0; padding: 2px 0;
  border-bottom: 1px solid rgba(0, 229, 255, .08); color: var(--amber, #ffb347);
}
#tooltip .abstats .tipspan:last-child { border-bottom: none; }

/* ---- ressonância (imbuements) ----
   Uma variável só carrega a cor do elemento (--imbc, escrita inline pelo renderInv/bench a partir
   do que o servidor mandou): borda, brilho, pip e barra saem todos dela, então um elemento novo na
   tabela do servidor não pede uma linha de CSS. */
.slot.imbued { border-color: var(--imbc); box-shadow: 0 0 6px -1px var(--imbc), inset 0 0 8px -4px var(--imbc); }
/* A pulsação é lenta e de baixo contraste de propósito: é um item parado numa mochila, não um
   alarme, e a regra de epilepsia vale pro inventário do mesmo jeito que vale pro FX. */
.slot.imbued::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, var(--imbc), transparent 70%);
  opacity: .16; animation: imbpulse 2.6s ease-in-out infinite;
}
.slot.imbued.fused::after { opacity: .3; animation-duration: 1.7s; }
@keyframes imbpulse { 0%, 100% { opacity: .10; } 50% { opacity: .26; } }
.slot .imbpips {
  position: absolute; right: 2px; top: 1px; font-size: calc(7px * var(--fontscale, 1));
  letter-spacing: -1px; color: var(--imbc); text-shadow: 0 0 3px var(--imbc); line-height: 1;
}
@media (prefers-reduced-motion: reduce) { .slot.imbued::after { animation: none; } }

.imbbar { height: 3px; background: rgba(255,255,255,.08); margin: 3px 0 2px; }
.imbbar > div { height: 100%; background: var(--imbc); }

/* a bancada no NPC forjador */
.imbrow { border: 1px solid #2b3450; margin-bottom: 5px; padding: 4px 5px; background: rgba(20,30,44,.4); }
.imbfus { font-size: calc(10px * var(--fontscale, 1)); color: var(--neon); }
.imbsocks { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.imbsock {
  flex: 1 1 90px; min-width: 90px; padding: 3px 5px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(0,0,0,.25);
  font-size: calc(10px * var(--fontscale, 1));
}
.imbsock.live { border-color: var(--imbc); }
.imbsock.echo { border-style: dashed; border-color: var(--imbc); opacity: .65; }
.imbsock.empty { color: var(--dim); border-style: dashed; }
.imbsock.on { outline: 1px solid var(--cyan); }
.imbsock:hover { background: rgba(0,229,255,.06); }
.imbsock b { color: var(--imbc, var(--fg)); }
.imbsock i { color: var(--dim); font-style: normal; }
.imbsub { color: var(--dim); font-size: calc(9px * var(--fontscale, 1)); }

.imbmenu { margin-top: 5px; border-top: 1px solid var(--border); padding-top: 4px; }
.imbmh { font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 3px; }
.imbopt { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.imbname { font-size: calc(11px * var(--fontscale, 1)); }
.imbdot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: middle; }
.imbdesc, .imbcost { grid-column: 1 / -1; font-size: calc(10px * var(--fontscale, 1)); color: var(--dim); }
.imbcost { display: flex; gap: 10px; flex-wrap: wrap; }
.imbreso { display: block; color: var(--xp); }
.imbtiers { display: flex; gap: 3px; }
.imbtiers button { padding: 1px 6px; font-size: calc(10px * var(--fontscale, 1)); }

/* o mesmo bloco dentro do tooltip do item */
#tooltip .tipsock { margin-bottom: 4px; font-size: calc(11px * var(--fontscale, 1)); }
#tooltip .tipsock.empty { color: var(--dim); font-style: italic; }
#tooltip .tipsock.echo { opacity: .7; }
#tooltip .tipsock b { color: var(--imbc); }
#tooltip .tipsock i { color: var(--dim); font-style: normal; }
#tooltip .tipch { float: right; color: var(--dim); }
#tooltip .tipch.echo { color: var(--hp); }
#tooltip .tipwhy { color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); }
#tooltip .tipfus { margin-top: 3px; font-size: calc(10px * var(--fontscale, 1)); color: var(--neon); }
#tooltip .tipreso { margin-top: 3px; font-size: calc(10px * var(--fontscale, 1)); color: var(--xp); }

/* ---- bestiary ---- */
.brow { border: 1px solid #2b3450; margin-bottom: 4px; background: rgba(20,30,44,.5); }
.brow.boss { border-color: #7a2a52; }
.bhead { display: flex; gap: 8px; align-items: center; padding: 5px 6px; cursor: pointer; }
.bhead:hover { background: rgba(0,229,255,.06); }
.bhead canvas { width: 34px; height: 34px; image-rendering: pixelated; flex: none; }
/* Folha ainda chegando: círculo de carregamento no lugar do quadro (o canvas é só uma caixa,
   então o giro é CSS — quando a arte resolve, o painter tira o .wait e carimba o mob). */
.bhead canvas.wait, .huntpick canvas.wait {
  border-radius: 50%;
  border: 3px solid rgba(0, 229, 255, .16);
  border-top-color: var(--cyan);
  background: rgba(6, 10, 18, .6);
  animation: cwait 1s linear infinite;
}
@keyframes cwait { to { transform: rotate(360deg); } }
body.nouimotion .bhead canvas.wait, body.nouimotion .huntpick canvas.wait { animation: none; }
.binfo2 { flex: 1; min-width: 0; }
.bnm { color: var(--cyan); font-size: calc(12px * var(--fontscale, 1)); }
.brow.boss .bnm { color: var(--neon); }
.bsub { color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); }
.btier { font-size: calc(10px * var(--fontscale, 1)); color: var(--xp); letter-spacing: 2px; }
.btier i { color: #2f3444; font-style: normal; }
.bdet { border-top: 1px solid #2b3450; padding: 6px; font-size: calc(11px * var(--fontscale, 1)); color: var(--text); line-height: 1.5; }
.bdet .bdesc { color: var(--dim); font-style: italic; margin-bottom: 4px; }   /* a lore vem antes dos números */
.blooth { color: var(--cyan); font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }
.bloot div { color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); display: flex; justify-content: space-between; }
.bloot i { color: #ffd23e; font-style: normal; }

/* ---- field encyclopedia ------------------------------------------------------------------- */
.appmodal[data-app="wiki"] .winbody {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.appmodal[data-app="wiki"] .panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#wiki {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--text);
}
.wikieyebrow { color: var(--neon); font-size: calc(9px * var(--fontscale, 1)); letter-spacing: 1.4px; text-transform: uppercase; }
.wikisearch { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; padding: 5px 7px; background: #0b131d; border: 1px solid #2b3450; color: var(--cyan); flex: 0 0 auto; }
.wikisearch span { font-size: 18px; line-height: 1; }
.wikisearch input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 1px 0; background: transparent; color: var(--text); font: inherit; font-size: calc(12px * var(--fontscale, 1)); }
.wikisearch b { color: #65708d; font-size: calc(10px * var(--fontscale, 1)); font-weight: normal; }
.wikitabs { display: flex; gap: 4px; flex-wrap: wrap; padding-bottom: 8px; flex: 0 0 auto; }
.wikitab { display: flex; align-items: center; gap: 4px; padding: 4px 7px; background: #111d2a; border: 1px solid #2b3450; color: #8492ad; cursor: pointer; font: inherit; font-size: calc(10px * var(--fontscale, 1)); }
.wikitab span { color: var(--cyan); }
.wikitab:hover, .wikitab.on { color: var(--text); border-color: var(--cyan); background: rgba(0, 229, 255, .08); }
.wikibody { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(0, 1.5fr); gap: 9px; flex: 1; min-height: 0; overflow: hidden; }
.wikibody.welcome { grid-template-columns: 1fr; overflow: auto; }
.wikilist { min-height: 0; overflow-y: auto; padding-right: 3px; }
.wikilistrow { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 6px; margin-bottom: 4px; text-align: left; border: 1px solid #263149; background: rgba(14, 23, 35, .7); color: var(--text); cursor: pointer; font: inherit; }
.wikilistrow:hover, .wikilistrow.on { border-color: var(--cyan); background: rgba(0, 229, 255, .1); }
.wikilisticon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #34415b; color: var(--neon); background: #08101a; font-size: 15px; }
.wikilistrow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cyan); font-size: calc(11px * var(--fontscale, 1)); }
.wikilistrow small { display: block; margin-top: 2px; color: #77849f; font-size: calc(9px * var(--fontscale, 1)); }
.wikidetailwrap { min-width: 0; min-height: 0; overflow-y: auto; }
.wikidetail, .wikiwelcome { min-height: 100%; box-sizing: border-box; padding: 14px; border: 1px solid #2b3450; background: radial-gradient(100% 80% at 0 0, rgba(0, 111, 142, .18), transparent 65%), linear-gradient(160deg, rgba(22, 34, 51, .9), rgba(7, 11, 18, .96)); box-shadow: inset 0 0 28px rgba(0, 229, 255, .06); }
.wikidetail h2, .wikiwelcome h2 { margin: 4px 0 5px; color: var(--text); font-size: calc(18px * var(--fontscale, 1)); line-height: 1.15; }
.wikisub { color: #8190aa; font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .3px; }
.wikilore { max-width: 66ch; margin: 12px 0; color: #d2dae8; line-height: 1.65; font-size: calc(12px * var(--fontscale, 1)); }
.wikilore.long { font-size: calc(13px * var(--fontscale, 1)); }
.wikiwelcome { display: flex; flex-direction: column; justify-content: center; }
.wikiwelcome h2 { max-width: 18em; color: var(--cyan); font-size: calc(22px * var(--fontscale, 1)); line-height: 1.15; }
.wikiwelcome > p { max-width: 58ch; color: #a8b5cb; line-height: 1.6; }
.wikicards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 15px 0; }
.wikicards button { display: block; width: 100%; text-align: left; padding: 9px 7px; border: 0; border-left: 2px solid var(--neon); background: rgba(7, 14, 24, .65); color: inherit; font: inherit; cursor: pointer; }
.wikicards button:hover { background: rgba(0, 229, 255, .1); }
.wikicards b { display: block; color: var(--neon); font-size: calc(21px * var(--fontscale, 1)); }
.wikicards span { color: #8190aa; font-size: calc(10px * var(--fontscale, 1)); }
.wikiquote { margin-top: auto; padding: 8px 10px; border-left: 2px solid var(--cyan); color: #aebbd0; font-style: italic; line-height: 1.5; }
.wikiquote small { display: block; margin-top: 4px; color: var(--cyan); font-style: normal; }
.wikitag { display: inline-block; margin-top: 7px; padding: 2px 6px; border: 1px solid var(--neon); color: var(--neon); font-size: calc(9px * var(--fontscale, 1)); letter-spacing: 1px; }
.wikistatgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 5px; margin: 12px 0 16px; }
.wikistatgrid div { padding: 6px; border: 1px solid #2b3450; background: rgba(5, 10, 17, .65); }
.wikistatgrid span { display: block; color: #71809b; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .4px; }
.wikistatgrid b { display: block; margin-top: 3px; color: var(--cyan); font-size: calc(13px * var(--fontscale, 1)); }
.wikidetail section { margin-top: 14px; padding-top: 9px; border-top: 1px solid #2b3450; }
.wikidetail section h3 { margin: 0 0 6px; color: var(--neon); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .6px; }
.wikidetail section p { margin: 0; color: #a8b5cb; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.55; }
.wikichips { display: flex; flex-wrap: wrap; gap: 4px; }
.wikichips span { padding: 2px 6px; border: 1px solid #2b3450; background: rgba(8, 14, 22, .7); color: #c5d0e0; font-size: calc(10px * var(--fontscale, 1)); }
.wikiability { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(43, 52, 80, .65); }
.wikiability b { flex: 0 0 130px; color: var(--cyan); font-size: calc(10px * var(--fontscale, 1)); }
.wikiability span { color: #9eabc0; font-size: calc(10px * var(--fontscale, 1)); line-height: 1.4; }
.wikinoresults, .wikiload { padding: 20px 8px; color: #7c89a4; font-size: calc(11px * var(--fontscale, 1)); }
/* Guides: numbered steps, tips, cross-links and the "open the app" button. */
.wikilore.long + .wikilore.long { margin-top: -4px; }
.wikisteps, .wikitips { margin: 0; padding-left: 20px; max-width: 66ch; color: #c5d0e0; font-size: calc(11.5px * var(--fontscale, 1)); line-height: 1.55; }
.wikisteps li, .wikitips li { margin: 0 0 6px; padding-left: 2px; }
.wikisteps li::marker { color: var(--neon); font-weight: bold; }
.wikitips { list-style: none; padding-left: 0; }
.wikitips li { position: relative; padding: 6px 8px 6px 22px; border-left: 2px solid var(--cyan); background: rgba(0, 229, 255, .05); }
.wikitips li::before { content: '›'; position: absolute; left: 8px; top: 5px; color: var(--cyan); font-weight: bold; }
.wikichips .wikilink { padding: 2px 7px; border: 1px solid #34506a; background: rgba(0, 229, 255, .06); color: var(--cyan); font: inherit; font-size: calc(10px * var(--fontscale, 1)); cursor: pointer; }
.wikichips .wikilink:hover { border-color: var(--cyan); background: rgba(0, 229, 255, .16); color: var(--text); }
.wikiapp { display: inline-block; margin: 4px 0 2px; padding: 5px 10px; border: 1px solid var(--neon); background: rgba(0, 0, 0, .25); color: var(--neon); font: inherit; font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .5px; cursor: pointer; }
.wikiapp:hover { background: rgba(0, 229, 255, .1); color: var(--text); }
.wikifilter { flex: 0 0 auto; padding: 2px 7px; border: 1px solid #2b3450; background: transparent; color: #8492ad; font: inherit; font-size: calc(10px * var(--fontscale, 1)); cursor: pointer; }
.wikifilter.on { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 229, 255, .08); }
.wikistarthead, .wikiresults h3 { margin: 14px 0 6px; color: var(--neon); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .6px; text-transform: uppercase; }
.wikistart { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
.wikistart button { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid #2b3450; background: rgba(7, 14, 24, .65); color: var(--text); font: inherit; font-size: calc(11px * var(--fontscale, 1)); text-align: left; cursor: pointer; }
.wikistart button:hover { border-color: var(--cyan); background: rgba(0, 229, 255, .1); }
.wikistart span { flex: 0 0 22px; color: var(--neon); text-align: center; }
.wikistart b { font-weight: normal; }
.wikicards { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.wikisighted { margin: -8px 0 12px; color: #71809b; font-size: calc(10px * var(--fontscale, 1)); }
.wikiresults { margin-bottom: 12px; }
@media (max-width: 560px) {
  /* Stacked: the list gets a fixed third, the page the rest. A max-height on the list alone
     left the two auto rows equal and a dead band between them. */
  .wikibody { grid-template-columns: 1fr; grid-template-rows: minmax(0, 34%) minmax(0, 1fr); }
  .wikibody.welcome { grid-template-rows: none; }
  .wikidetail, .wikiwelcome { padding: 11px; }
  .wikiability { flex-direction: column; gap: 2px; }
  .wikiability b { flex: none; }
  .wikicards { grid-template-columns: 1fr 1fr; }
  .wikistart { grid-template-columns: 1fr; }
}

/* ---- skills: the unlock ladder and its chip sockets ---- */
/* A locked row is dimmed but still readable — the whole point is to show what is coming. */
.skrow { border: 1px solid #2b3450; margin-bottom: 4px; background: rgba(20,30,44,.5); padding: 5px 6px; }
.skrow.locked { opacity: .45; border-style: dashed; }
.skrow:not(.locked) { cursor: pointer; }
.skrow.dragover { border-color: var(--cyan); box-shadow: inset 0 0 12px #00e5ff33; }
.skrow .sksockets { cursor: default; }
.skhead { display: flex; gap: 8px; align-items: center; }
.skhead .glyph { font-size: calc(18px * var(--fontscale, 1)); line-height: 1; flex: none; width: 22px; text-align: center; }
.skinfo { flex: 1; min-width: 0; }
.sknm { color: var(--cyan); font-size: calc(12px * var(--fontscale, 1)); }
.sklv { color: var(--xp); font-size: calc(10px * var(--fontscale, 1)); font-style: normal; border: 1px solid var(--xp); padding: 0 3px; }
.sksub { color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); }
.skstats { color: var(--amber, #ffb347); font-size: calc(10px * var(--fontscale, 1)); line-height: 1.45; margin: 3px 0 1px; }
.skstats:empty { display: none; }
.skdesc { color: var(--text); font-size: calc(10px * var(--fontscale, 1)); line-height: 1.45; margin: 3px 0 5px; }
.sksockets { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.sksockets .slot.socket { width: 30px; height: 30px; }
.sksockets .slot.socket canvas { width: 22px; height: 22px; margin: 3px; }
.sksockets .slot.socket.free { border-style: dashed; opacity: .55; }
.chippick { flex-basis: 100%; display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid #2b3450; margin-top: 4px; padding-top: 4px; }
.chippick .hint { flex-basis: 100%; }

/* Card deck (ADR 0129): tabs, two rows of ten (passives / skill supports), stored cards,
   collection grid and fusion tray. The yield strip is what the active rows add. */
#cards { --rc-common: #aeb7c4; --rc-uncommon: #2fe58a; --rc-rare: #2b9ce5; --rc-legendary: #ff9a2d; --rc-mythic: #f4e08a; }
#cards .cardtabs { position: sticky; top: 0; z-index: 9; display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 6px; background: var(--panel, #0b0f19); }
#cards .cardtabs button, #cards .cardchips button, #cards .fuseactions button {
  font: inherit; font-size: calc(11px * var(--fontscale, 1)); color: #bfe9f0; cursor: pointer;
  background: #0c1824; border: 1px solid #00e5ff44; padding: 3px 8px;
}
#cards .cardtabs button.on, #cards .cardchips button.on { color: #061018; background: var(--cyan); border-color: var(--cyan); }
#cards .cardtabs .cardopen {
  margin-left: auto; color: #ffe694; border-color: #d8b45b; letter-spacing: .5px;
  background: linear-gradient(155deg, #411e77, #101e55); box-shadow: 0 0 8px rgba(216, 180, 91, .35);
  animation: cardopen-pulse 2.4s ease-in-out infinite;
}
@keyframes cardopen-pulse { 50% { box-shadow: 0 0 14px rgba(255, 224, 126, .6); } }
#cards .cardchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
#cards .apphead b { color: var(--cyan); font-weight: normal; margin-left: 4px; }
.appmodal[data-app="cards"] {
  height: min(720px, calc(100dvh - var(--barh, 158px) - var(--window-top, 8px) - 12px));
  max-height: calc(100dvh - var(--barh, 158px) - var(--window-top, 8px) - 12px);
}
.appmodal[data-app="cards"] .winbody { overflow-y: auto; }
/* Roll grade and duplicate count ride on the card corner, over the art. */
.cgrade {
  position: absolute; left: 2px; bottom: 2px; z-index: 5; min-width: 13px; padding: 0 2px; text-align: center;
  font-size: calc(9px * var(--fontscale, 1)); font-weight: 900; line-height: 13px; color: #061018;
  background: #8a95a3; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.55); pointer-events: auto;
}
.cgrade.g-S { background: linear-gradient(135deg, #fff3a8, #ffb13d); box-shadow: 0 0 6px rgba(255, 196, 70, .8), 0 0 0 1px #000; }
.cgrade.g-A { background: #2fe58a; }
.cgrade.g-B { background: #5cc4ff; }
.cdup { position: absolute; right: 2px; top: 2px; z-index: 5; font-size: calc(9px * var(--fontscale, 1)); color: #fff; background: rgba(0,0,0,.66); padding: 0 3px; border-radius: 2px; }
/* Collection */
@media (prefers-reduced-motion: reduce) {
  #cards .cardtabs .cardopen, #cards .fusetray .fuseout { animation: none; }
}
.hot .needlv { position: absolute; right: 2px; bottom: 1px; color: var(--xp); font-size: calc(9px * var(--fontscale, 1)); z-index: 1; text-shadow: 1px 1px 0 #000; }
/* Skill art from the pack sits in the same place the emoji glyph did — 16px source drawn at an
   exact 2x on the bar, so it stays crisp instead of resampling to fill the slot. */
.hot canvas.glyph { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; image-rendering: pixelated; }
.skhead canvas.glyph { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }

/* ---- lobby: identity plaques ---- */
/* Hidden by default; showScreen() turns exactly one of login/lobby/charnew on. */
#lobby, #charnew, #loading { display: none; }
#lobby.on, #charnew.on, #loading.on { display: flex; }
#login.off { display: none; }
#charlist {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; width: min(1080px, 96vw); padding: 4px; flex: none;
  align-content: start; max-height: none;
}
.charcard {
  --cls: var(--cyan); --cls-rgb: 0, 229, 255;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
  aspect-ratio: 3 / 5; padding: 0; cursor: pointer;
  background: #090a12; border: 1px solid #303950;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .42);
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.charcard:hover {
  transform: translateY(-6px); border-color: var(--cls);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .55), 0 0 22px rgba(var(--cls-rgb), .28);
}
.charcard.empty {
  display: flex; flex-direction: column; cursor: pointer; opacity: 1;
  justify-content: center; align-items: center; gap: 8px; color: var(--dim);
  border-style: dashed; background: rgba(9, 10, 18, .55);
}
.charcard.empty:hover { color: var(--cyan); border-color: var(--cyan); }
.charcard.empty .cname { color: inherit; text-align: center; font-size: calc(12px * var(--fontscale, 1)); letter-spacing: 1px; text-transform: uppercase; }
.charcard.empty .cplus {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid currentColor; font-size: 28px; line-height: 1;
}
.charcard .cprev {
  position: absolute; inset: 0; z-index: 0; padding: 0; width: auto; height: auto;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 70% 46% at 50% 36%, rgba(var(--cls-rgb), .18), transparent 62%),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(var(--cls-rgb), .05) 13px 14px),
    #090a12;
  border: 0; overflow: hidden;
}
.charcard .cprev::before {
  content: ''; position: absolute; left: 16%; right: 16%; bottom: 20%; height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--cls-rgb), .4), transparent 72%);
  box-shadow: 0 0 22px rgba(var(--cls-rgb), .28);
}
.charcard .csigil {
  position: absolute; z-index: 1; width: 58%; height: 58%; top: 8%;
  opacity: .28; object-fit: contain;
}
.charcard .clive {
  position: relative; z-index: 2; width: 128px; height: 128px; margin: 0 0 72px;
  image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .8));
}
.charcard .clive:not(.on) { visibility: hidden; }
.charcard .cinfo {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 48px 12px 14px;
  background: linear-gradient(180deg, transparent, rgba(6, 7, 12, .55) 28%, rgba(6, 7, 12, .94) 100%);
}
.charcard .cdel {
  position: absolute; z-index: 3; top: 8px; right: 8px;
  color: var(--hp); border-color: var(--hp);
  font-size: calc(12px * var(--fontscale, 1)); padding: 1px 8px;
  background: rgba(10, 6, 10, .72);
}
.charcard .cclsbg { font-size: clamp(22px, 6vw, 42px); letter-spacing: .12em; opacity: .16; }
.charcard .ccls {
  color: var(--cls); letter-spacing: 1.8px; text-transform: uppercase;
  font-size: calc(9px * var(--fontscale, 1)); margin-bottom: 2px;
}
.charcard .cname { color: #fff; font-size: calc(16px * var(--fontscale, 1)); text-shadow: 0 2px 8px #000; }
.charcard .cmeta { color: #9aa3b4; font-size: calc(11px * var(--fontscale, 1)); }
.charcard .conline { color: #2fe58a; font-size: calc(11px * var(--fontscale, 1)); }
.charcard .cjack {
  margin-top: 8px; color: var(--cls); letter-spacing: 2.4px; text-transform: uppercase;
  font-size: calc(10px * var(--fontscale, 1)); opacity: 0;
  transition: opacity .15s ease;
}
.charcard:hover .cjack { opacity: 1; }
.classhero .cclsbg { font-size: clamp(36px, 8vw, 72px); opacity: .12; inset: 0; }
#lobbybtns { width: min(1080px, 96vw); justify-content: flex-end; margin-top: 6px; }
#lobbybtns, #charnewbtns, #cnclassbtns { display: flex; gap: 10px; }
#loginerr2, #loginerr3 { color: var(--hp); min-height: 16px; }
#lobby button.danger, #charnew button.danger { color: var(--hp); border-color: var(--hp); }
@media (max-width: 980px) {
  #charlist { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(640px, 96vw); }
}
@media (max-width: 560px) {
  #charlist { grid-template-columns: 1fr; width: min(360px, 96vw); flex: none; }
  .charcard { aspect-ratio: 3 / 4; }
  #lobbybtns { width: min(360px, 96vw); justify-content: center; flex-wrap: wrap; }
  .charcard .clive { width: 112px; height: 112px; margin-bottom: 64px; }
}

/* ---- class picker: dossier under the posters ---- */
#classdetail {
  --cls: var(--cyan); --cls-rgb: 0, 229, 255;
  position: relative; overflow: hidden; margin: 0 0 12px;
  border: 1px solid rgba(var(--cls-rgb), .42);
  background:
    linear-gradient(105deg, rgba(var(--cls-rgb), .095), transparent 32%),
    linear-gradient(180deg, rgba(19, 23, 37, .96), rgba(9, 10, 17, .96));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .025);
}
#classdetail::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cls); box-shadow: 0 0 14px rgba(var(--cls-rgb), .7);
}
.cdlabel {
  padding: 8px 15px 0; color: var(--cls); font-size: calc(9px * var(--fontscale, 1));
  letter-spacing: 2.2px; text-transform: uppercase;
}
.cdmain { display: grid; grid-template-columns: minmax(200px, 28%) 1fr; align-items: start; padding: 7px 15px 13px; }
.cdidentity { padding-right: 16px; border-right: 1px solid rgba(var(--cls-rgb), .22); }
.cdidentity > span {
  display: block; color: #81899a; font-size: calc(9px * var(--fontscale, 1));
  letter-spacing: 1.2px; text-transform: uppercase;
}
.cdidentity strong {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 5px; color: #f2f4f8; font-size: calc(17px * var(--fontscale, 1));
}
.cdidentity .csigil { width: 36px; height: 36px; flex: none; filter: none; }
.cddiff { color: var(--cls); letter-spacing: 3px; font-size: calc(10px * var(--fontscale, 1)); }
.cddiff i { color: #313749; font-style: normal; }
.cdstats { color: #737c8e; font-size: calc(9px * var(--fontscale, 1)); margin-top: 3px; }
.cdmain p {
  margin: 0; padding-left: 18px; color: #b7bdc9; font-size: calc(11px * var(--fontscale, 1));
  line-height: 1.58; text-align: left;
}
@media (max-width: 720px) {
  .cdmain { grid-template-columns: 1fr; gap: 10px; }
  .cdidentity { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgba(var(--cls-rgb), .22); }
  .cdmain p { padding-left: 0; }
}

/* Character creation: readable controls, stable preview and actions after the form. */
#charnew {
  font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45;
  padding: 24px; gap: 22px; color: #e2e7ef;
  background: radial-gradient(ellipse at 50% 0, rgba(var(--cls-rgb), .08), transparent 65%), #0b0e14;
}
#charnew > .fabfx, #charnew .fabglyph, #charnew #lookscan,
#charnew #cnprevart { display: none; }
#charnew #cnhead, #charnew #cnclass, #charnew #cnlook { width: min(1080px, 100%); flex: none; }
#charnew h1, #charnew.cnlook h1 {
  font: 700 28px/1.2 Arial, sans-serif; letter-spacing: -.5px; color: #f2f5fa; text-shadow: none;
}
#charnew .fabkicker { font-size: 10px; letter-spacing: 2px; margin-bottom: 6px; }
#charnew .sub, #charnew.cnlook .sub { display: block; font-size: 14px; color: #a4afbe; letter-spacing: 0; }
#charnew button, #charnew select, #charnew input { font-family: inherit; }
#charnew button:focus-visible, #charnew select:focus-visible, #charnew input:focus-visible {
  outline: 2px solid #e6f6ff; outline-offset: 3px;
}
#charnew .cnsteps button { min-height: 44px; font-size: 12px; letter-spacing: .5px; }
#charnew #classes { gap: 12px; margin: 0 0 16px; }
#charnew .clscard { height: 242px; clip-path: none; border-radius: 8px; box-shadow: none; }
#charnew .clscard:hover, #charnew .clscard.sel { transform: none; }
#charnew .clscard.sel { background: rgba(var(--cls-rgb), .08); box-shadow: inset 0 0 0 1px var(--cls); }
#charnew .classhero { padding: 12px 0 0; background: radial-gradient(ellipse at 50% 0, rgba(var(--cls-rgb), .10), transparent 70%); }
#charnew .classhero::after { display: none; }
#charnew .clscard .csigil { width: 88px; height: 88px; max-height: none; margin: 0 auto 14px; filter: none; }
#charnew .classtitle { padding: 0 16px 16px; }
#charnew .classtitle > span { font-size: 10px; letter-spacing: .9px; }
#charnew .classtitle b { font-size: 20px; letter-spacing: 0; }
#charnew .classtitle .tags span { font-size: 10px; letter-spacing: 0; }
#charnew #classdetail { border-radius: 8px; box-shadow: none; background: #111722; }
#charnew .cdlabel { font-size: 10px; }
#charnew .cdmain { grid-template-columns: 260px 1fr; padding: 12px 18px 18px; gap: 20px; }
#charnew .cdmain p { padding: 0; font-size: 14px; line-height: 1.65; }
#charnew .cdidentity > span { font-size: 10px; }
#charnew #cnclassbtns, #charnew .cnfinish {
  position: sticky; bottom: -24px; z-index: 5; padding: 14px 0;
  background: #0b0e14; border-top: 1px solid #293342; margin-top: 16px;
}
#charnew #cnclassbtns { flex-direction: row-reverse; }
#charnew #btn_charnext, #charnew #btn_charcreate {
  flex: 0 1 260px; margin-left: auto; font-size: 14px; min-height: 46px;
  letter-spacing: .6px; border-radius: 5px; background: #df287b; box-shadow: none;
}
#charnew #btn_charcancel, #charnew #btn_charback { font-size: 14px; border-radius: 5px; }
#charnew #btn_charnext { margin-left: 0; }
#charnew #btn_charcancel { margin-right: auto; }
#charnew #cnlook { grid-template-columns: 300px minmax(0, 1fr); gap: 18px 28px; }
#charnew #cnleft { position: static; padding: 0; border: 0; background: none; clip-path: none; box-shadow: none; }
#charnew #cnleft::before { display: none; }
#charnew #cnprev {
  height: 340px; padding: 16px; border: 1px solid #2b3544; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 70%, rgba(var(--cls-rgb), .12), transparent 70%), #10151e;
}
#charnew #cnprevcls {
  inset: 16px 0 auto; font-size: 14px; opacity: 1; letter-spacing: 1px; mix-blend-mode: normal;
}
#charnew #lookrig { align-items: center; }
#charnew #lookprev { width: 240px; height: 240px; margin: 0; filter: none; }
#charnew #lookpad { bottom: 10%; height: 10%; animation: none; box-shadow: none; opacity: .35; }
#charnew #lookspin button { min-height: 40px; min-width: 44px; font-size: 13px; box-shadow: none; }
#charnew #cnid { grid-template-columns: 1fr; padding-top: 10px; }
#charnew .cncall { font-size: 11px; color: #bec8d6; letter-spacing: 1px; }
#charnew #c_name { font-size: 16px; border: 1px solid #3b4759; border-radius: 5px; background: #111722; }
#charnew #cnnamehint { color: #97a5b7; font-size: 12px; }
#charnew .lookheading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#charnew .lookheading h4 { margin: 0; font-size: 16px; letter-spacing: 0; }
#charnew #btn_lookrand { font-size: 12px; }
#charnew .sexpick { margin-bottom: 14px; }
#charnew .sexpick button { min-height: 42px; font-size: 13px; border-radius: 5px; }
#charnew .sexpick button.on { color: #f0f4fa; border-color: var(--cls); background: rgba(var(--cls-rgb), .12); box-shadow: none; }
#charnew #lookpick { padding: 0; border: 0; background: none; box-shadow: none; }
#charnew .swaxes { grid-template-columns: 1fr 1fr; gap: 12px; }
#charnew .pickrow { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 0; border: 0; background: none; }
#charnew .pickrow > span { flex: none; font-size: 12px; text-align: left; color: #aebdce; }
#charnew .lookstep { gap: 4px; }
#charnew .lookstep select { min-width: 0; width: 100%; height: 40px; padding: 0 8px; border: 1px solid #354357; border-radius: 4px; color: #e2e7ef; background: #151d29; font-size: 14px; }
#charnew .lookstep button { flex: 0 0 36px; height: 40px; border-radius: 4px; }
#charnew .pickrow:has(#eyepick) { flex-direction: row; align-items: center; gap: 16px; }
#charnew .eyepick { flex-wrap: wrap; gap: 8px; margin: 0; }
#charnew .eyeCell { width: 28px; height: 28px; flex-basis: 28px; }
#charnew .colorhint { grid-column: 1 / -1; margin: 4px 0 -8px; color: #aebdce; font-size: 12px; }
#charnew .chanpick { margin: 0; }
#charnew .chan { min-height: 36px; font-size: 12px; border-radius: 4px; color: #b8c6d8; background: #151d29; text-shadow: none; }
#charnew .chan::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1px solid #687588; border-radius: 50%; background: var(--part-color); }
#charnew .chan.on { color: #fff; border-color: var(--cls); background: rgba(var(--cls-rgb), .12); box-shadow: none; }
#charnew .palette { gap: 3px; max-width: 418px; }
#charnew .pcell { border-radius: 3px; min-height: 18px; }
#charnew .pcell.on { outline: 2px solid white; outline-offset: 1px; position: relative; z-index: 1; }
#charnew .cnfinish { grid-column: 1 / -1; margin: 0; }
#charnew #loginerr3:empty { display: none; }
#charnew #loginerr3 { margin-bottom: 10px; font-size: 14px; }
@media (max-width: 760px) {
  #charnew { padding: 16px; gap: 16px; }
  #charnew #cnhead { justify-content: flex-start; text-align: left; }
  #charnew h1, #charnew.cnlook h1 { font-size: 24px; }
  #charnew #classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #charnew .clscard { height: 216px; }
  #charnew .clscard .csigil { width: 64px; height: 64px; }
  #charnew .classtitle { padding: 0 12px 12px; }
  #charnew .classtitle b { font-size: 18px; }
  #charnew .cdmain { grid-template-columns: 1fr; }
  #charnew #cnlook { grid-template-columns: 1fr; gap: 20px; }
  #charnew #cnprev { height: 300px; }
  #charnew #cnclassbtns, #charnew .cnfinish { bottom: -16px; }
  #charnew .palette { grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 2px; }
  #charnew .pcell { min-height: 26px; }
}
@media (max-width: 380px) {
  #charnew .swaxes { grid-template-columns: 1fr; }
  #charnew .classtitle .tags { display: none; }
  #charnew .clscard { height: 184px; }
}

/* ============================================================================
   THE DECK
   - #phonetab: launcher tile in the bottom bar (always visible, bar height)
   - #phone:    GERAL launcher (opens/closes on tile click or P). Always the app grid.
   - .appmodal: floating window for a selected app (#appmodals)
   ============================================================================ */
#phone {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: min(94vw, 760px);
  min-width: 0;
  max-width: 94vw;
  height: min(calc(var(--vh) - var(--barh) - 48px), 480px);
  max-height: calc(var(--vh) - var(--barh) - 24px);
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  z-index: 25;
  display: none;
  align-items: stretch;
}
#phone.open, #phone.on { display: flex; }

/* Store shortcut — A2.1 magenta glass tile at the right end of #bottom, sibling of the phone tab.
   Click opens the unified loja straight onto the moeda tab (wired next to the other HUD buttons
   in game.js). The chest sprite stays; only the chrome changed. */
#lojatab {
  position: relative;
  flex: 0 0 84px; width: 84px; height: 100%;
  padding: 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--glass2);
  border: 1px solid var(--edge-mag); color: var(--magenta); font: inherit;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  box-shadow: var(--glow-mag), inset 0 0 14px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
#lojatab:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: var(--glow-cyan), inset 0 0 14px rgba(0,0,0,.5);
}
#lojatab .lojachest { width: 48px; height: 48px; display: block; filter: drop-shadow(0 0 4px rgba(255,46,200,.4)); }
#lojatab .lojalbl { font-size: calc(12px * var(--fontscale, 1)); letter-spacing: 2px; text-shadow: 0 0 8px rgba(255, 46, 200, .4); }
/* Chamada de atenção: brilho magenta respirando e uma varredura ciana lenta cruzando o quadro.
   Lento de propósito — anúncio, não flash (regra da casa: sem flicker rápido). Os pseudo-
   elementos nascem com opacidade 0: é a animação que acende, então sem motion (reduced-motion
   ou body.nouimotion) o tile fica estático e nada fica preso a meio caminho. */
#lojatab .lojachest, #lojatab .lojalbl { position: relative; z-index: 1; }
#lojatab::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 32%, rgba(255,46,200,.28), transparent 72%);
  opacity: 0;
}
#lojatab::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(0,229,255,.28), transparent);
  transform: translateX(-160%) skewX(-16deg);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.nouimotion) #lojatab::before { animation: lojaglow 3.2s ease-in-out infinite; }
  body:not(.nouimotion) #lojatab::after { animation: lojasweep 4.6s ease-in-out infinite; }
}
@keyframes lojaglow { 0%, 100% { opacity: .18; } 50% { opacity: .85; } }
@keyframes lojasweep {
  0% { transform: translateX(-160%) skewX(-16deg); opacity: 0; }
  8% { opacity: .5; }
  24% { transform: translateX(360%) skewX(-16deg); opacity: 0; }
  100% { transform: translateX(360%) skewX(-16deg); opacity: 0; }
}
@keyframes lojapulse {
  0%, 100% { filter: drop-shadow(0 0 3px #ff4ad4) drop-shadow(0 0 1px #ffd36a); }
  50% { filter: drop-shadow(0 0 8px #ff4ad4) drop-shadow(0 0 4px #ffd36a); }
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.nouimotion) #lojatab .lojachest { animation: lojapulse 2.8s ease-in-out infinite; }
}

/* Phone launcher — vertical portrait card at the right end of #bottom. Click toggles the menu.
   Portrait fills the width; name/role sit under it. The old side-by-side 56px face looked like
   two leftover HUD meters glued to a stamp. */
#phonetab {
  flex: 0 0 140px; width: 140px; height: 100%;
  padding: 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px;
  background: var(--glass2);
  border: 1px solid var(--edge-mag);
  color: inherit; font: inherit;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  box-shadow: var(--glow-mag), inset 0 0 18px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  transition: border-color .15s, box-shadow .15s;
  outline: none;   /* no browser focus ring on click */
  overflow: hidden;
}
#phonetab:focus,
#phonetab:focus-visible {
  outline: none;
  box-shadow: var(--glow-mag), inset 0 0 18px rgba(0,0,0,.55);
}
#phonetab:hover {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan), inset 0 0 18px rgba(0,0,0,.55);
}
/* Menu open: cyan edge — Open Deck is this same tile (no extra button). */
#phonetab.on {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan), inset 0 0 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,229,255,.15);
}
#phonetab.on:hover {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan), inset 0 0 18px rgba(0,0,0,.55);
}
#tabface {
  position: relative; flex: 1 1 0; min-height: 0; width: 100%;
  background: #07090e;
  border: 1px solid rgba(0, 229, 255, .28);
  box-shadow: inset 0 0 10px rgba(0, 229, 255, .08);
  overflow: hidden;
}
#pixie { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#tabclock {
  position: absolute; right: 4px; bottom: 3px;
  font-size: calc(9px * var(--fontscale, 1)); color: var(--cyan);
  letter-spacing: 1px; text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
#tabinfo { flex: none; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#tabname {
  font-size: calc(11px * var(--fontscale, 1)); letter-spacing: .5px; color: var(--cyan);
  line-height: 1.2;
}
#tabname i { font-style: normal; color: var(--dim); letter-spacing: 1px; font-size: .85em; }
/* Linha do meio = convite ao clique. O título "GUIA" mora ao lado do nome; aqui o tile precisa
   LER como botão: chip de borda ciana com chevron pulsando, que acende junto do hover do tile. */
#tabrole {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .5px;
  color: var(--cyan); line-height: 1.7;
  border: 1px solid rgba(0,229,255,.35);
  background: rgba(0,229,255,.06);
  padding: 0 5px;
}
#tabrole::before { content: '▸\00a0'; animation: tabcta 1.6s ease-in-out infinite; }
#phonetab:hover #tabrole, #phonetab.on #tabrole { border-color: var(--cyan); background: rgba(0,229,255,.14); }
@keyframes tabcta { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  #tabrole::before { animation: none; }
}
#tabmood { font-size: calc(9px * var(--fontscale, 1)); color: var(--text); letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tabmood.alert { color: var(--neon); }
#tabmood.scan { color: var(--cyan); }
#tabmood.warn { color: var(--hp); }
/* a quest ready to hand in: the launcher pulses magenta until you look */
#phonetab.alert { animation: tabalert 1.6s ease-in-out infinite; }
#phonetab.cue { animation: tabcue 1.6s ease-in-out infinite; }
#phonetab.hurt { animation: tabhurt 1.6s ease-in-out infinite; }
@keyframes tabalert {
  0%, 100% { box-shadow: 0 0 14px rgba(255,46,200,.25), inset 0 0 18px rgba(0,0,0,.6); }
  50% { box-shadow: 0 0 28px rgba(255,46,200,.7), inset 0 0 18px rgba(0,0,0,.6); }
}
@keyframes tabcue {
  0%, 100% { box-shadow: 0 0 14px rgba(0,229,255,.25), inset 0 0 18px rgba(0,0,0,.6); }
  50% { box-shadow: 0 0 26px rgba(0,229,255,.6), inset 0 0 18px rgba(0,0,0,.6); }
}
@keyframes tabhurt {
  0%, 100% { box-shadow: 0 0 14px rgba(255,59,78,.25), inset 0 0 18px rgba(0,0,0,.6); }
  50% { box-shadow: 0 0 26px rgba(255,59,78,.65), inset 0 0 18px rgba(0,0,0,.6); }
}
@media (prefers-reduced-motion: reduce) {
  #phonetab.alert, #phonetab.cue, #phonetab.hurt { animation: none; }
}
@keyframes deckblink { 0%, 70%, 100% { opacity: 1; } 72%, 86% { opacity: .25; } }

/* Menu shell — centered cyberdeck modal */
#phonebody {
  display: flex; width: 100%; height: 100%; min-height: 0;
  flex-direction: column; position: relative;
  background: linear-gradient(170deg, #232733 0%, #14171f 40%, #0a0c12 100%);
  border: 2px solid var(--border);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 16px 48px rgba(0,0,0,.85), 0 0 32px rgba(0,229,255,.14);
  padding: 8px 8px 6px;
  box-sizing: border-box;
  /* entrada do deck é do container #phone (seção UI MOTION no fim do arquivo) */
}

/* status strip */
#phonebar {
  display: flex; align-items: center; gap: 6px; font-size: calc(10px * var(--fontscale, 1)); color: var(--dim);
  letter-spacing: 1px; padding: 0 2px 6px; user-select: none;
}
#phonebar .grow { flex: 1; }
#phonecarrier { color: var(--neon); animation: carrierflick 7s steps(1) infinite; }
#phonesig { color: var(--cyan); letter-spacing: -1px; animation: sigflick 3.1s steps(1) infinite; }
#phonemoney { color: #ffd23e; }
#phoneclose {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  padding: 0;
  margin-left: 6px;
  background: rgba(30, 15, 22, 0.7);
  border: 1px solid #732a3d;
  color: var(--hp);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  transition: background .15s, border-color .15s, color .15s;
}
#phoneclose:hover {
  background: var(--hp);
  border-color: var(--neon);
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 46, 200, 0.5);
}
/* carrier and signal misbehave like real radio — a step flicker, never a smooth fade */
@keyframes carrierflick { 0%, 100% { opacity: 1; } 31% { opacity: 1; } 32% { opacity: .4; } 33% { opacity: 1; } 78% { opacity: 1; } 79% { opacity: .55; } 80% { opacity: 1; } }
@keyframes sigflick { 0%, 100% { opacity: 1; } 40% { opacity: .6; } 44% { opacity: 1; } 78% { opacity: .35; } 82% { opacity: 1; } }

/* screen */
#phonescreen {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 50% 0%, #10202a 0%, #060a10 70%);
  border: 1px solid #2b3450;
  box-shadow: inset 0 0 26px rgba(0,229,255,.09), inset 0 0 3px rgba(255,255,255,.12);
}
/* CRT grille over the whole screen, same trick the login uses */
#phonescreen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.22) 2px 3px);
}
/* a slow scan beam sweeping down the glass — the screen is on, not painted */
#phonescreen::before {
  content: ''; position: absolute; left: 0; right: 0; height: 90px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,229,255,.05) 42%, rgba(0,229,255,.12) 50%, rgba(0,229,255,.05) 58%, transparent);
  animation: screensweep 6.5s linear infinite;
}
@keyframes screensweep { from { top: -22%; } to { top: 112%; } }

/* app grid / Geral panel — the launcher is always this screen */
#apphome {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%;
  /* faint circuit grid under the icons, drifting like the OS is idling */
  background-image:
    linear-gradient(rgba(0,229,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.045) 1px, transparent 1px);
  background-size: 22px 22px;
  animation: gridpan 16s linear infinite;
}
@keyframes gridpan { from { background-position: 0 0, 0 0; } to { background-position: 0 22px, 22px 0; } }
/* "Geral" section header — a plain label bar; the app list under it is always up. */
#homebar {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  width: 100%; box-sizing: border-box;
  padding: 6px 8px; min-height: 26px;
  user-select: none;
  background: rgba(10,16,26,.95); border-bottom: 1px solid #2b3450;
  font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; color: var(--cyan);
  /* Above phonescreen CRT overlays (z-index 2–3) so the bar renders crisp */
  position: relative; z-index: 5;
}
#hometitle { text-shadow: 0 0 8px rgba(0,229,255,.35); }
#homebar .grow { min-width: 0; flex: 1 1 auto; align-self: stretch; }
#homebody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
}
#appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }

/* the readout under the grid: what the deck is worth glancing at when nothing is open */
#deckfeed { border-top: 1px solid #2b3450; padding-top: 8px; font-size: calc(11px * var(--fontscale, 1)); }
#deckfeed .dhead { color: var(--cyan); font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
#deckfeed .dwho { color: var(--text); }
#deckfeed .dsub { color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); margin-bottom: 7px; }
#deckfeed .dlog { color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); line-height: 1.5; }
#deckfeed .dlog div { border-left: 2px solid #2b3450; padding-left: 5px; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#deckfeed .dlog .quest { border-left-color: #2fe58a; color: #2fe58a; }
#deckfeed .dlog .loot { border-left-color: #ffd23e; color: #ffd23e; }
#deckfeed .dlog .death { border-left-color: var(--hp); color: var(--hp); }
/* the newest feed line still has its cursor up, as if the deck were mid-sentence */
#deckfeed .dlog div:last-child::after { content: ' ▌'; animation: deckblink 1.1s steps(1) infinite; }
.appicon {
  background: rgba(20,30,44,.7); border: 1px solid #2b3450; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 2px 7px; color: var(--text); font: inherit; font-size: calc(10px * var(--fontscale, 1)); text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  /* the grid boots in a stagger, like the OS waking its apps one by one */
  animation: appin .28s cubic-bezier(.2,.9,.3,1.2) backwards;
}
.appicon:nth-child(3n+2) { animation-delay: .04s; }
.appicon:nth-child(3n) { animation-delay: .08s; }
@keyframes appin { from { opacity: 0; transform: translateY(8px) scale(.92); } }
.appicon:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(0,229,255,.3); transform: translateY(-1px); }
.appicon .glyph {
  font-size: calc(21px * var(--fontscale, 1)); line-height: 1; color: var(--cyan); text-shadow: 0 0 9px rgba(0,229,255,.55);
  animation: glyphbob 3.4s ease-in-out infinite;
}
.appicon .glyph img { width: 22px; height: 22px; display: block; }
.appicon:nth-child(2n) .glyph { animation-delay: -1.7s; }
@keyframes glyphbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.appicon .lbl { color: var(--dim); letter-spacing: .5px; }
/* an app with something waiting gets a dot, so the closed deck is worth glancing at */
.appicon.badge { border-color: var(--neon); }
.appicon.badge .glyph { color: var(--neon); text-shadow: 0 0 9px rgba(255,46,200,.6); }
.appicon.active { border-color: var(--neon); background: rgba(255,46,200,.1); }
.appicon.front { box-shadow: 0 0 12px rgba(0,229,255,.25); }

/* ---- floating app windows ----
   Selecting an icon on GERAL opens a new modal. Same parked panel, moved, never cloned. */
.appmodal {
  position: fixed;
  display: flex; flex-direction: column;
  width: min(92vw, 500px); height: auto; max-height: min(70vh, 640px);
  min-width: min(280px, calc(100vw - 16px)); min-height: 0;
  padding: 8px 8px 6px; box-sizing: border-box;
  z-index: 28;
  background: linear-gradient(170deg, #232733 0%, #14171f 40%, #0a0c12 100%);
  border: 2px solid var(--border);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 16px 48px rgba(0,0,0,.85), 0 0 32px rgba(0,229,255,.14);
  overflow: hidden;
  /* entrada/saída na seção UI MOTION no fim do arquivo */
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.appmodal.wide { width: min(94vw, 660px); min-height: 280px; max-height: min(76vh, 720px); }
.appmodal.wide[data-app="wiki"] {
  width: min(94vw, 740px);
  height: min(80vh, 760px);
  max-height: min(80vh, 760px);
}
.appmodal.front { border-color: #3d4a66; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 16px 48px rgba(0,0,0,.85), 0 0 28px rgba(0,229,255,.28); }
.appmodal .winbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 0 2px 6px; cursor: grab; user-select: none;
  font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; color: var(--dim);
}
.appmodal .wglyph { color: var(--cyan); text-shadow: 0 0 8px rgba(0,229,255,.45); display: inline-flex; align-items: center; }
.appmodal .wglyph img { width: 14px; height: 14px; display: block; }
#discord {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 16px 18px; text-align: center;
}
#discord > img { width: 48px; height: 48px; }
#discord p { margin: 0; max-width: 36ch; color: var(--dim); line-height: 1.5; }

/* Invite friends (ADR 0074): link row, two counters, invitee list. */
#invite { display: flex; flex-direction: column; gap: 12px; padding: 14px 12px; }
#invite .invite-blurb { margin: 0; color: var(--dim); line-height: 1.5; }
#invite .invite-row { display: flex; gap: 6px; }
#invite .invite-row input {
  flex: 1; min-width: 0; padding: 7px 9px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--cyan);
  font-size: calc(12px * var(--fontscale, 1)); overflow: hidden; text-overflow: ellipsis;
}
#invite .invite-row input:focus { outline: none; border-color: var(--cyan); }
#invite .invite-row button {
  flex: 0 0 auto; padding: 7px 14px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--border); color: var(--text, #eee);
  font-size: calc(12px * var(--fontscale, 1));
}
#invite .invite-row button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
#invite .invite-row button:disabled { opacity: .5; cursor: default; }
#invite .invite-stats { display: flex; gap: 10px; }
#invite .invite-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; background: var(--panel2); border: 1px solid var(--border);
}
#invite .invite-stat b { font-size: calc(18px * var(--fontscale, 1)); color: var(--cyan); text-shadow: 0 0 8px rgba(0,229,255,.35); }
#invite .invite-stat span { font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; color: var(--dim); }
#invite .invite-friends { display: flex; flex-direction: column; max-height: 180px; overflow-y: auto; }
#invite .invite-friend {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: calc(12px * var(--fontscale, 1));
}
#invite .invite-friend:last-child { border-bottom: 0; }
#invite .invite-friend i { font-style: normal; color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); white-space: nowrap; }
.appmodal .wtitle { color: var(--neon); letter-spacing: 1px; }
.appmodal.front .wtitle { text-shadow: 0 0 8px rgba(255,46,200,.35); }
.appmodal .winbar .grow { flex: 1; }
.appmodal .winbar button {
  width: 22px; height: 20px; padding: 0; line-height: 1;
  font-size: calc(12px * var(--fontscale, 1));
  background: var(--panel2); color: var(--dim); border: 1px solid var(--border); cursor: pointer;
}
.appmodal .winbar button:hover { color: var(--cyan); border-color: var(--cyan); }
.appmodal .winx {
  background: rgba(30, 15, 22, 0.7); border-color: #732a3d; color: var(--hp); font-size: 16px; font-weight: bold;
}
.appmodal .winx:hover { background: var(--hp); border-color: var(--neon); color: #fff; box-shadow: 0 0 8px rgba(255, 46, 200, 0.5); }
.appmodal .winhint {
  flex: 0 0 auto; padding: 4px 8px; color: var(--dim); font-size: calc(9px * var(--fontscale, 1));
  line-height: 1.4; border: 1px solid #2b3450; border-bottom: 0;
  background: rgba(10,16,26,.95);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.appmodal .winbody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px;
  background: radial-gradient(120% 80% at 50% 0%, #10202a 0%, #060a10 70%);
  border: 1px solid #2b3450;
  box-shadow: inset 0 0 26px rgba(0,229,255,.09);
  container-type: inline-size;
}
.appmodal.folded { height: auto; min-height: 0; }
.appmodal.wide[data-app="wiki"].folded { height: auto; max-height: none; }
.appmodal.folded .winbody, .appmodal.folded .winhint { display: none; }
.appmodal .panel { background: none; border: 0; padding: 0; clip-path: none; }
.appmodal .apphead {
  font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; color: var(--cyan);
  border-bottom: 1px solid #2b3450; padding-bottom: 2px; margin: 10px 0 5px;
}
@container (max-width: 200px) { #gearrig { zoom: .8; } }
@container (max-width: 140px) { #gearrig { zoom: .6; } }

/* the options hosted inside a deck window: the Esc menu's own resume button makes no sense here */
#optshost #btn_escresume { display: none; }
#optshost .escsec { position: static; }

/* nav */
#phonenav { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
#phonenav button {
  width: 26px; height: 22px; padding: 0; line-height: 1; font-size: calc(14px * var(--fontscale, 1));
  background: var(--panel2); color: var(--cyan); border: 1px solid var(--border); cursor: pointer;
}
#phonenav button:hover { border-color: var(--cyan); }
#phonebrand { flex: 1; text-align: center; font-size: calc(9px * var(--fontscale, 1)); color: #39405a; letter-spacing: 2px; animation: brandglow 4.5s ease-in-out infinite; }
@keyframes brandglow { 0%, 100% { color: #39405a; text-shadow: none; } 50% { color: #55689a; text-shadow: 0 0 9px rgba(0,229,255,.4); } }

#phone.wide #phonebody { width: 100%; height: 100%; }
#phonewide { font-size: calc(12px * var(--fontscale, 1)) !important; }

@media (max-width: 900px) {
  :root { --barh: 150px; }
  #mmpanel { display: none; }
  #phonetab { flex: 0 0 72px; width: 72px; padding: 4px; }
  #lojatab { flex: 0 0 56px; width: 56px; padding: 3px; }
  #lojatab .lojalbl { display: none; }
  #lojatab .lojachest { width: 32px; height: 32px; }
  #tabinfo { display: none; }
  #vitals { width: 160px; overflow: hidden; }
  #vitals h3 { margin-bottom: 2px; padding-bottom: 1px; font-size: calc(10px * var(--fontscale, 1)); }
  #vitals .bar { height: 11px; margin: 1px 0; }
  #vitals .bar span { font-size: calc(9px * var(--fontscale, 1)); line-height: 10px; }
  #statrow { margin-top: 1px; }
  #hudwallet { gap: 3px; margin-top: 2px; }
  .hudcurrency { padding: 2px 4px; }
  .hudcurrency > span { font-size: calc(8px * var(--fontscale, 1)); }
  .hudcurrency strong { margin-top: 1px; font-size: min(calc(12px * var(--fontscale, 1)), calc(150cqi / var(--digits, 1))); }
  #huntlaunch .huntname { font-size: calc(12px * var(--fontscale, 1)); letter-spacing: 1px; }
  #huntlaunch .hunticon { width: 24px; height: 24px; }
  #chatflip { flex: 0 0 44px; width: 44px; }
  #phone {
    width: 96vw;
    top: 12px;
    height: min(calc(var(--vh) - var(--barh) - 36px), 460px);
    max-height: calc(var(--vh) - var(--barh) - 16px);
  }
  .appmodal, .appmodal.wide { width: 96vw; height: auto; max-height: min(70vh, 520px); }
}

/* Phone portrait: two controlled rows (hotbar full-width, then vitals/hunt/phone).
   Not each panel at 100% — that was the view-eating wrap. */
@media (max-width: 560px) {
  :root { --barh: 156px; }
  #bottom { height: var(--barh); flex-wrap: wrap; align-content: flex-start; }
  #hotbar { flex: 1 1 100%; height: 86px; }
  .hb-head { display: none; }
  #vitals {
    width: auto; flex: 1 1 0; height: 64px; overflow: hidden; padding: 3px 5px;
  }
  #vitals #charheading, #vitals #statrow, #vitals #statuses, #vitals #ammopips { display: none !important; }
  #vitals .bar { height: 8px; margin: 1px 0; }
  #vitals .bar span { font-size: calc(8px * var(--fontscale, 1)); line-height: 8px; }
  #hunt { flex: 0 0 auto; width: auto; height: 64px; position: relative; }
  #hunt.steering { clip-path: none; }
  #huntlaunch .huntname, #huntlaunch .huntband { display: none; }
  #huntlaunch .hunticon { width: 22px; height: 22px; }
  #hunt.steering #huntmain { display: flex; }
  #hunt.steering #huntlaunch { display: flex; padding: 2px 4px; }
  #hunt.steering #huntlaunch .hunticon { display: block; }
  #hunt #huntgroups { max-width: 90px; margin: 2px 4px; padding: 2px 4px; }
  #phonetab { flex: 0 0 64px; width: 64px; height: 64px; }
  #lojatab { flex: 0 0 64px; width: 64px; height: 64px; }
  #hunt.steering #huntsteer {
    position: absolute; bottom: calc(100% + 4px); left: auto; right: 0;
    width: min(280px, calc(100vw - 16px)); z-index: 6;
    background: var(--glass2); border: 1px solid var(--edge-mag);
    box-shadow: var(--glow-mag);
    max-height: 40vh;
  }
}

/* ---- equipment sets: the tooltip block ---- */
/* A row you have earned lights up; the rest stay dim so the kit reads as a ladder you climb. */
.setrow { color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); }
.setrow.on { color: var(--neon); }
.setpieces { color: var(--dim); font-size: calc(9px * var(--fontscale, 1)); margin-top: 3px; opacity: .8; }
/* The kit list doubles as a compact checklist: dressed pieces need to read at a glance while
   missing ones remain quiet. Keep this brighter than rarity green without competing with rows. */
.setpiece.worn { color: #8dffb5; text-shadow: 0 0 5px rgba(68, 255, 151, .7); }

/* Ranking shares the deck window and scroll area used by the other apps. */
.ranking-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:10px 0; }
.ranking-controls select { min-width:140px; max-width:100%; padding:8px; background:#111923; color:#e1ebf4; border:1px solid #405564; }
.ranking-controls span, .ranking-note { font-size:12px; color:#a7b7c5; }
.ranking-table { width:100%; border-collapse:collapse; font-size:13px; }
.ranking-table th, .ranking-table td { padding:10px 5px; text-align:left; border-bottom:1px solid #293943; overflow-wrap:anywhere; }
.ranking-table th { color:#a7b7c5; font-size:11px; }
.ranking-table td:nth-child(n+4), .ranking-table th:nth-child(n+4) { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ranking-table .ranking-self { background:#19352e; color:#9cf5ce; }

.ranking-controls button { padding:7px 10px; border:1px solid #405564; background:#15252e; color:#bcece9; font:inherit; font-size:12px; cursor:pointer; }
.ranking-controls button:hover:not(:disabled) { border-color:#64ded5; background:#203b43; }
.ranking-controls button:disabled { opacity:.4; cursor:default; }
.ranking-controls button:focus-visible, .ranking-controls select:focus-visible { outline:2px solid #64ded5; outline-offset:2px; }

/* Account residences: the keyring is separate from ordinary item slots. */
#housingkeys { border-top:1px solid var(--border); margin-top:16px; padding-top:10px; }
.hkeyhead,.hkey,.hcontrols { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.hkeyhead { justify-content:space-between; }.hkey { padding:8px 0; border-bottom:1px solid var(--border); }
.hkeyicon { color:#d7b474; font-size:24px; }.hkey small { margin-right:auto; }
.hmuted { color:#9ba6b5; font-size:12px; line-height:1.6; }.hmarketlink { margin:8px; }
.hhero { padding:24px; background:linear-gradient(130deg,#263148,#111923); border-bottom:1px solid #766346; }
.hhero h2 { font-size:27px; margin:8px 0; color:#e2c28a; }.hhero p { color:#c3cbd7; }.heyebrow { font-size:10px;letter-spacing:2px;color:#aeb9cd; }
.hcard { display:flex; gap:16px; padding:18px 0; border-bottom:1px solid #344052; }.hplan { width:150px; flex-shrink:0;align-self:flex-start; }
.hcardbody { flex:1;min-width:0; }.hcard h3 { margin:5px 0;color:#e2c28a; }.hcard p { margin:5px 0; }.hcategory { text-transform:uppercase;letter-spacing:1px;font-size:10px;color:#8fadae; }
.hcontrols { margin-top:12px; }.hcontrols input { width:120px; }.hprice { font-size:18px;color:#e4c28b; }.hprimary { color:#81beac; }.hbuy { border-color:#b69660; }
.hsection { margin:24px 0 8px;color:#d4bd96; }#housingbody { padding:12px; }
@media(max-width:600px){ .hcard { flex-direction:column; }.hplan { width:180px; } }


.housing-welcome { position:fixed; z-index:20000; left:50%; bottom:24%; transform:translateX(-50%); width:min(520px,calc(100vw - 40px)); box-sizing:border-box; padding:22px; color:#e9ece4; background:#111e29; border:2px solid #75b7b4; box-shadow:0 8px 32px #000a; }
.housing-welcome h3 { margin:0 0 12px; color:#e8c779; }
.housing-welcome p { font-size:16px; line-height:1.65; margin:0 0 18px; }
.housing-welcome button { min-width:140px; min-height:44px; padding:10px 24px; font-size:16px; cursor:pointer; }

#charnew .skip-intro { display:flex; align-items:center; gap:10px; padding:12px 0; width:100%; min-width:0; box-sizing:border-box; cursor:pointer; color:var(--text); }
#charnew .skip-intro input[type=checkbox] { width:20px; height:20px; min-width:20px; flex:0 0 20px; padding:0; margin:0; accent-color:var(--cyan); }
#charnew .skip-intro span { min-width:0; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }

/* The wardrobe shares the character creator's controls and native modal focus. */
.housing-wardrobe { width:min(760px,92vw); max-height:90dvh; overflow:auto; color:#dbe6e5; background:#18232d; border:1px solid #678a91; border-radius:12px; padding:22px; }
.housing-wardrobe::backdrop { background:rgba(5,10,17,.75); }
.wardrobe-body { display:flex; align-items:flex-start; gap:24px; }
.wardrobe-preview { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; }
.wardrobe-tools { flex:1; min-width:0; }
.housing-wardrobe #lookprev { width:192px; height:192px; image-rendering:pixelated; flex-shrink:0; background:#263740; border-radius:8px; }
.housing-wardrobe #lookpick { flex:1; min-width:0; }
.housing-wardrobe #bodypick { display:flex; gap:8px; margin:0 0 10px; }
.housing-wardrobe #bodypick button { flex:1; padding:8px 10px; }
.housing-wardrobe #lookspin { display:flex; gap:6px; justify-content:center; }
.housing-wardrobe #lookspin button { min-width:36px; padding:5px 10px; }
.housing-wardrobe #btn_lookauto.on { border-color:#64ded5; color:#64ded5; }
@media(max-width:600px) { .wardrobe-body { flex-direction:column; gap:8px; } .housing-wardrobe #lookprev { width:96px; height:96px; } }
.housing-wardrobe { margin:auto; }
.housing-wardrobe button { color:#dbe6e5; background:#293e4a; border:1px solid #678a91; border-radius:5px; cursor:pointer; }
/* Stacked rows, same as the creator: the nodes leave #charnew when the dialog
   borrows them, so its column layout must be restated here — inline, the 64px
   label plus the full-width lookstep overflow the grid cell and the › button
   covers the neighbor column's label. */
.housing-wardrobe .pickrow { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:0; border:0; background:none; }
.housing-wardrobe .pickrow > span { flex:none; font-size:12px; text-align:left; color:#aebdce; }
.housing-wardrobe .pickrow:has(#eyepick) { flex-direction:row; align-items:center; gap:16px; }
.housing-wardrobe .lookstep { display:flex; align-items:center; gap:4px; min-width:0; }
.housing-wardrobe .lookstep select { min-width:0; flex:1; height:36px; padding:0 8px; border:1px solid #354357; border-radius:4px; color:#e2e7ef; background:#151d29; font:inherit; font-size:14px; }
.housing-wardrobe .lookstep button { flex:0 0 32px; width:32px; height:36px; font-size:20px; }
.housing-wardrobe .hcontrols button { padding:10px 16px; }
.housing-wardrobe .hcontrols button:first-child { background:#386d65; }
.housing-wardrobe button:focus-visible { outline:2px solid #f3cc80; outline-offset:2px; }

/* Copy quality also appears outside tooltips, in the refinement quote. */
.row .grow > .tipkind { display: block; color: var(--dim); font-size: calc(10px * var(--fontscale, 1)); }

#chatlog .chat-item-link {
  display: inline;
  padding: 0 2px;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  overflow-wrap: anywhere;
}
#chatlog .chat-item-link:focus-visible { outline: 1px solid currentColor; }

#chatlog .market { color: #ffd23e; }

#chatdraft:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; background: var(--panel2); border-top: 1px solid var(--border); }
#chatdraft span { overflow-wrap: anywhere; }
#chatdraft button { padding: 0 5px; margin: 0; }
#chatdraft small { width: 100%; color: var(--dim); }

/* Live party card, anchored inside the game view. */
#partycard { position:absolute; right:8px; top:6px; z-index:6; width:220px; max-width:40%; max-height:calc(100% - 48px); overflow:auto; padding:8px 9px; color:var(--text); background:var(--glass); border:1px solid var(--edge-mag); border-radius:0; clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); box-shadow:var(--glow-mag), 0 6px 20px #0008; font-size:11px; backdrop-filter:blur(6px); }
#partycard[hidden], #partyfollowrow[hidden] { display:none; }
#partycard h3 { margin:0 0 8px; color:var(--cyan); font-size:12px; }
#partycardhunt { margin:0 0 10px; color:var(--cyan); line-height:1.4; overflow-wrap:anywhere; }
#partycard .pname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pclass { color:var(--cyan); font-size:10px; }
.pleader { color:#ffd23e; }
.pbar.hp, .pbar.en { position:relative; height:14px; }
.pbar.hp span, .pbar.en span { position:absolute; inset:0; text-align:center; font-size:10px; line-height:14px; color:white; text-shadow:0 1px 2px black; }
#partyfollowrow { display:flex; align-items:center; gap:6px; padding-top:8px; border-top:1px solid #365564; cursor:pointer; }
#partyfollow { width:16px; height:16px; accent-color:var(--cyan); }
#partyfollowhint { margin-top:6px; color:var(--dim); font-size:10px; }

#viewwrap:has(#partycard:not([hidden])) #huntrun { right:auto; left:6px; top:6px; }

/* Recruitment stays above the controls, with the same dark buttons as the deck. */
#matchq.hunt-queue { left:12px; top:48px; bottom:auto; transform:none; width:min(360px, calc(100vw - 24px)); max-height:45vh; overflow:auto; }
#matchq.hunt-queue .q-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; text-align:left; margin:5px 0; }
#partyrecruit { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
#partycard button, #matchq.hunt-queue button { color:var(--cyan); background:#142632; border:1px solid #365564; border-radius:4px; padding:6px 9px; font:inherit; cursor:pointer; }
#partycard button:hover:not(:disabled), #matchq.hunt-queue button:hover { background:#234252; border-color:var(--cyan); }

#huntgroups { flex:0 0 auto; margin:4px 6px; padding:5px; border:1px solid var(--edge-cyan); border-radius:0; background:rgba(8,12,20,.82); color:var(--cyan); font:inherit; font-size:11px; cursor:pointer; box-shadow:0 0 8px rgba(0,229,255,.16); clip-path:polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px); }
#huntgroups:hover { background:rgba(0,229,255,.08); border-color:var(--cyan); }

/* Unified trade window: the strip that swaps store / PunkCoin market / auction. It lives in the
   panel, OUTSIDE the scoped bodies (#shopbody and #marketbody style their own buttons), so it
   carries its own — same look as the store's category tabs. */
#tradetabs { display: flex; gap: 6px; margin: 2px 0 12px; border-bottom: 1px solid #32495b; padding-bottom: 10px; }
#tradetabs button { flex: 1; font: inherit; cursor: pointer; padding: 8px 10px; color: #a9bacb; background: transparent; border: 1px solid transparent; border-radius: 4px; }
#tradetabs button:hover { color: #d8e3ee; border-color: #35495b; }
#tradetabs button[aria-pressed="true"] { color: #91f0df; background: #173b40; border-color: #62dccc; }

/* Storefront: scoped because deck windows do not inherit modal button styles. */
#shopbody { container-type: inline-size; color: #e8edf4; padding: 12px; font-size: calc(12px * var(--fontscale, 1)); line-height: 1.5; }
#shopbody * { box-sizing: border-box; }
#shopbody button { font: inherit; cursor: pointer; border: 1px solid #354251; border-radius: 4px; background: #14202b; color: #d8e3ee; padding: 9px 14px; min-height: 40px; transition: background .15s, border-color .15s; }
#shopbody button:hover:not(:disabled) { background: #213343; border-color: #6bdedc; }
#shopbody button:focus-visible { outline: 2px solid #6bf4eb; outline-offset: 3px; }
#shopbody button:disabled { cursor: default; background: #1a2330; border-color: #303d4b; color: #96a4b5; }
#shopbody .shop-head { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0 18px; }
#shopbody .shop-eyebrow { color: #62dcd8; font-size: 10px; letter-spacing: .16em; }
#shopbody h2 { font-size: calc(24px * var(--fontscale, 1)); line-height: 1.2; margin: 9px 0; letter-spacing: -.04em; color: #f3f7fc; }
#shopbody p { margin: 0; }
#shopbody .shop-head p { color: #a7b7c9; max-width: 360px; }
#shopbody .shop-balance { min-width: 130px; padding: 10px 14px; border: 1px solid #314050; border-radius: 5px; background: #101b27; display: flex; flex-direction: column; align-self: flex-start; gap: 3px; }
#shopbody .shop-balance > span { font-size: 10px; color: #9eafc3; }
#shopbody .shop-balance strong { color: #ffda80; font-size: 24px; line-height: 1.3; }
#shopbody small { font-size: .48em; font-weight: normal; color: #b5c1ce; }
#shopbody #shoptabs { display: flex; gap: 5px; border-bottom: 1px solid #293745; padding-bottom: 10px; flex-wrap: wrap; }
#shopbody #shoptabs button { background: transparent; border-color: transparent; padding: 7px 18px; }
#shopbody #shoptabs button.on { color: #72eee2; background: #133234; border-color: #276267; }
#shopbody .shop-benefits { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 0; color: #b2c5ce; font-size: 11px; }
#shopbody .shop-benefits b { color: #6fe9d8; font-size: 15px; }
#shopbody #shoplist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 4px 0 14px; }
#shopbody .shop-card { position: relative; min-width: 0; padding: 18px; border: 1px solid #344252; border-radius: 7px; background: linear-gradient(140deg, #192634, #101823); display: flex; flex-direction: column; align-items: stretch; }
#shopbody .shop-card.featured { border-color: #b99552; background: linear-gradient(135deg, #302c24, #161e28 75%); box-shadow: inset 0 3px #ddb369; }
#shopbody .shop-card.active { border-color: #65dbae; }
#shopbody .shop-card canvas { image-rendering: pixelated; width: 64px; height: auto; align-self: center; }
#shopbody .shop-badge { color: #9bb0c4; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; min-height: 15px; }
#shopbody .featured .shop-badge { color: #f2cf8e; }
#shopbody h3 { font-size: calc(18px * var(--fontscale, 1)); line-height: 1.25; color: #f0f4f9; margin: 12px 0 5px; }
#shopbody .shop-detail { color: #a6b7c8; font-size: 11px; }
#shopbody .shop-price { font-size: calc(34px * var(--fontscale, 1)); letter-spacing: -.04em; font-weight: bold; margin-top: 16px; line-height: 1.2; color: #fff1d5; }
#shopbody .shop-rate { color: #d4c19d; font-size: 11px; padding: 5px 0 14px; }
#shopbody .shop-terms { font-size: 10px; color: #9dadbd; padding-bottom: 14px; }
#shopbody .shop-buy { width: 100%; margin-top: auto; font-weight: bold; color: #9df3e8; border-color: #387069; background: #193b3b; }
#shopbody .featured .shop-buy { color: #191c23; border-color: #e2bd77; background: #e2bd77; }
#shopbody .featured .shop-buy:hover { background: #f7d79b; border-color: #f7d79b; }
#shopbody .shop-shortfall { text-align: center; font-size: 10px; color: #aab9c7; margin-top: 8px; }
#shopbody .shop-footer { border-top: 1px solid #283646; padding-top: 12px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
#shopbody .shop-footer span { font-size: 10px; color: #9aafc2; max-width: 340px; }
#shopbody .shop-footer button { flex-shrink: 0; font-size: 11px; }
#shopbody .shop-notice { color: #dec590; background: #2c281e; border: 1px solid #514737; border-radius: 4px; padding: 12px; margin: 14px 0; }
/* Membership pass and catalog insignia. Keep all decoration inside the shop. */
#shopbody .shop-membership { display: flex; align-items: center; gap: 14px; padding: 14px; margin: 0 0 12px; border: 1px solid #627652; border-radius: 8px; background: radial-gradient(ellipse at 0 0, #b1cf7720, transparent 70%), linear-gradient(115deg, #182a29, #101c24); box-shadow: inset 3px 0 #c3e88d; }
#shopbody .shop-emblem { width: 74px; height: 74px; color: #6ce9db; flex-shrink: 0; filter: drop-shadow(0 0 12px #64e6d522); }
#shopbody .shop-membership > .shop-emblem { color: #c6e99b; width: 60px; height: 60px; }
#shopbody .shop-member-copy { flex: 1; min-width: 0; }
#shopbody .shop-member-copy .shop-eyebrow { color: #a5bda1; font-size: 9px; }
#shopbody .shop-member-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 3px 0 5px; font-size: 21px; font-weight: bold; letter-spacing: -.03em; }
#shopbody .shop-live { font-size: 9px; font-weight: normal; letter-spacing: .1em; border: 1px solid #607063; color: #bbc9be; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; }
#shopbody .shop-live.is-live { background: #c0e88b17; border-color: #83a768; color: #d2f3af; }
#shopbody .shop-live.is-live::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #c6ef95; margin-right: 5px; }
#shopbody .shop-member-copy p { color: #b9c9c8; font-size: 10px; overflow-wrap: anywhere; }
#shopbody .shop-member-copy .shop-stack { color: #8ea6a4; margin-top: 3px; }
#shopbody .shop-time { display: flex; flex-direction: column; align-items: center; border-left: 1px solid #42554a; padding-left: 18px; min-width: 106px; }
#shopbody .shop-time strong { font-size: 42px; line-height: 1.1; letter-spacing: -.05em; color: #d5f1b4; }
#shopbody .shop-time span { font-size: 10px; color: #bdcfb2; white-space: nowrap; }
#shopbody .shop-vip-card { overflow: hidden; border-color: #345b62; background: radial-gradient(ellipse at 80% 15%, #3fb8b51a, transparent 65%), #101d27; }
#shopbody .shop-vip-card.featured { background: radial-gradient(ellipse at 80% 15%, #e2bd771f, transparent 65%), #211f22; }
#shopbody .shop-plan-art .shop-emblem { width: 58px; height: 58px; }
#shopbody .shop-plan-art { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 0; }
#shopbody .featured .shop-emblem { color: #edc779; filter: drop-shadow(0 0 14px #dfae5428); }
#shopbody .shop-pass { display: flex; flex-direction: column; align-items: flex-end; color: #99b8bc; font-size: 9px; letter-spacing: .13em; }
#shopbody .shop-pass strong { color: #d1e3e5; font-size: 28px; letter-spacing: -.04em; line-height: 1.3; }
#shopbody .shop-pass small { font-size: 11px; letter-spacing: 0; }
#shopbody .shop-vip-card h3 { border: 0; text-transform: none; font-size: calc(23px * var(--fontscale, 1)); letter-spacing: -.04em; margin: 9px 0 5px; }
#shopbody .shop-vip-card .shop-price { border-top: 1px solid #ffffff16; padding-top: 14px; }
#shopbody .shop-vip-card .shop-badge { font-size: 9px; color: #8ad7cf; }
#shopbody .shop-vip-card.featured .shop-badge { color: #edc779; }
@container (max-width: 480px) {
  #shopbody .shop-membership { gap: 12px; padding: 14px; flex-wrap: wrap; }
  #shopbody .shop-membership > .shop-emblem { width: 44px; height: 44px; }
  #shopbody .shop-member-copy { flex-basis: calc(100% - 60px); }
  #shopbody .shop-time { width: 100%; border-left: 0; border-top: 1px solid #42554a; padding: 10px 0 0; flex-direction: row; justify-content: center; gap: 10px; }
  #shopbody .shop-time strong { font-size: 32px; }
}
@container (max-width: 420px) {
  #shopbody .shop-head { flex-direction: column; gap: 12px; }
  #shopbody .shop-balance { width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
  #shopbody .shop-balance strong { font-size: 20px; }
  #shopbody .shop-footer { align-items: stretch; flex-direction: column; }
  #shopbody h2 { font-size: 22px; }
}
@media (max-width: 600px) {
  .appmodal[data-app="commerce"] { left: 2vw !important; top: 16px !important; width: 96vw; max-height: calc(100dvh - 32px); }
}

/* PunkCoin exchange, isolated from the shop and other deck apps. */
#marketbody { container-type: inline-size; padding: 12px; color: #e8edf4; font-size: calc(12px * var(--fontscale, 1)); line-height: 1.5; }
#marketbody * { box-sizing: border-box; }
#marketbody p { margin: 0; }
#marketbody button { font: inherit; cursor: pointer; min-height: 38px; padding: 8px 12px; color: #dce7f1; background: #182735; border: 1px solid #35495b; border-radius: 4px; }
#marketbody button:hover:not(:disabled) { border-color: #69d9ce; background: #233d49; }
#marketbody button:focus-visible, #marketbody input:focus-visible { outline: 2px solid #76eee0; outline-offset: 2px; }
#marketbody button:disabled { cursor: default; color: #90a2b4; background: #202b37; border-color: #354250; }
#marketbody .pm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
#marketbody .pm-head > button { flex-shrink: 0; font-size: 10px; }
#marketbody .pm-eyebrow { color: #62dcd8; font-size: 10px; letter-spacing: .12em; }
#marketbody h2 { color: #f1f6fb; font-size: calc(23px * var(--fontscale, 1)); line-height: 1.2; letter-spacing: -.04em; margin: 8px 0; }
#marketbody .pm-head p, #marketbody .pm-help { color: #a9bacb; font-size: 11px; }
#marketbody h3 { color: #e7eff8; font-size: 13px; margin: 0 0 8px; border: 0; letter-spacing: .02em; }
#marketbody .pm-wallet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#marketbody .pm-wallet > div { padding: 12px; border: 1px solid #304353; border-radius: 5px; background: #121f2b; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#marketbody .pm-wallet span { color: #a9bacb; font-size: 10px; }
#marketbody .pm-wallet strong { font-size: calc(23px * var(--fontscale, 1)); line-height: 1.2; overflow-wrap: anywhere; }
#marketbody small { color: #9bafc2; font-size: 11px; font-weight: normal; }
#marketbody .pm-wallet i { font-size: 10px; font-style: normal; color: #8fa8bc; }
#marketbody .pm-gold { color: #f3d287; }
#marketbody .pm-transfer { margin: 12px 0 18px; padding: 12px; border: 1px solid #2b3c4b; border-radius: 5px; background: #0f1923; }
#marketbody .pm-transfer p { font-size: 10px; color: #9dafbf; }
#marketbody .pm-transfer-controls { display: flex; gap: 6px; margin-top: 10px; }
#marketbody .pm-transfer-controls input { flex: 1; min-width: 0; }
#marketbody input { background: #080f18; border: 1px solid #3b5164; color: #f0f5fa; font: inherit; padding: 9px 10px; min-height: 39px; border-radius: 4px; width: 100%; }
#marketbody .pm-workspace { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: start; }
#marketbody .pm-order, #marketbody .pm-book { padding: 15px; background: linear-gradient(150deg, #172634, #101922); border: 1px solid #32485a; border-radius: 6px; min-width: 0; }
#marketbody .pm-tabs { display: flex; gap: 5px; margin: 12px 0 10px; }
#marketbody .pm-tabs button { flex: 1; padding: 8px 4px; }
#marketbody .pm-tabs .on { color: #89eee0; background: #17413e; border-color: #3b857a; }
#marketbody .pm-tabs .on.sell { color: #ffcc9a; background: #423025; border-color: #98704f; }
#marketbody .pm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
#marketbody label { color: #b4c4d2; font-size: 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#marketbody .pm-total { border-top: 1px solid #2e4152; padding: 12px 0 8px; display: flex; flex-direction: column; gap: 3px; }
#marketbody .pm-total span { font-size: 10px; color: #a6bbcd; }
#marketbody .pm-total strong { font-size: 22px; color: #f2d595; overflow-wrap: anywhere; }
#marketbody .pm-feedback { font-size: 10px; color: #e7c38e; margin: 9px 0; }
#marketbody .pm-primary { width: 100%; margin-top: 5px; font-weight: bold; }
#marketbody .pm-primary.buy:not(:disabled) { background: #81ddd0; border-color: #81ddd0; color: #102526; }
#marketbody .pm-primary.sell:not(:disabled) { background: #edbb88; border-color: #edbb88; color: #292016; }
#marketbody .pm-rules { display: flex; flex-direction: column; gap: 4px; color: #9bafc1; font-size: 10px; margin-top: 12px; }
#marketbody h4 { margin: 16px 0 6px; font-size: 11px; }
#marketbody .pm-bid { color: #7ce0cb; }
#marketbody .pm-ask { color: #efb384; }
#marketbody .pm-columns, #marketbody .pm-level { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#marketbody .pm-columns { color: #93aabd; font-size: 9px; padding: 4px 8px; }
#marketbody .pm-level { width: 100%; border-radius: 0; border: 0; border-bottom: 1px solid #2d4050; background: transparent; padding: 7px 8px; font-size: 11px; }
#marketbody .pm-level.bid span { color: #7ce0cb; }
#marketbody .pm-level.ask span { color: #efb384; }
#marketbody .pm-empty { padding: 17px 10px; background: #101b25; border: 1px dashed #334858; border-radius: 4px; display: flex; flex-direction: column; gap: 5px; text-align: center; }
#marketbody .pm-empty b { font-weight: normal; font-size: 11px; color: #bdcbd6; }
#marketbody .pm-empty span { font-size: 10px; color: #899fb2; }
#marketbody .pm-viplock { margin-top: 12px; padding: 16px 12px; background: #101b25; border: 1px solid #4d4426; border-radius: 4px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
#marketbody .pm-viplock b { font-weight: normal; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #e7c38e; }
#marketbody .pm-viplock p { margin: 0; font-size: 10px; color: #a9bacb; line-height: 1.5; }
#marketbody .pm-history { margin-top: 14px; padding-top: 14px; border-top: 1px solid #2b3e4e; }
#marketbody .pm-count { color: #8fe2d6; border-radius: 4px; background: #1c3a3b; padding: 1px 7px; font-size: 10px; }
#marketbody .pm-empty-line { color: #8ea5b8; font-size: 11px; padding: 4px 0; }
#marketbody .pm-order-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #253747; }
#marketbody .pm-order-row > div { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11px; }
#marketbody .pm-tape { display: flex; flex-wrap: wrap; gap: 8px; }
#marketbody .pm-tape > span { background: #142430; border: 1px solid #2c4253; padding: 6px 9px; font-size: 10px; border-radius: 4px; }
#marketbody .pm-tape b { color: #acc5d8; margin-left: 8px; }
#marketbody .pm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@container (max-width: 460px) {
  #marketbody .pm-workspace { grid-template-columns: 1fr; }
  #marketbody .pm-wallet { grid-template-columns: 1fr; }
  #marketbody .pm-wallet > div { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  #marketbody .pm-wallet strong { font-size: 20px; }
  #marketbody .pm-wallet i { grid-column: 1 / -1; }
  #marketbody .pm-head { flex-wrap: wrap; }
  #marketbody .pm-transfer-controls { flex-wrap: wrap; }
  #marketbody .pm-transfer-controls input { flex-basis: 100%; }
  #marketbody .pm-transfer-controls button { flex: 1; }
}

/* Auction storefront inside the deck. */
#auction { container-type: inline-size; padding: 12px; color: #e8edf4; font-size: calc(12px * var(--fontscale, 1)); line-height: 1.5; }
#auction * { box-sizing: border-box; }
#auction p { margin: 0; }
#auction button { font: inherit; min-height: 38px; padding: 8px 12px; border: 1px solid #3a5060; border-radius: 4px; background: #192c38; color: #dbe9f3; cursor: pointer; }
#auction button:hover:not(:disabled) { border-color: #65dbcd; background: #24434a; }
#auction button:focus-visible, #auction input:focus-visible { outline: 2px solid #72e7d8; outline-offset: 2px; }
#auction button:disabled { cursor: default; color: #8fa4b6; background: #202c37; border-color: #344653; }
#auction input { font: inherit; color: #eff6fc; background: #080f18; border: 1px solid #3a5164; border-radius: 4px; padding: 9px; min-height: 39px; width: 100%; min-width: 0; }
#auction .ah-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 4px 0 14px; }
#auction .ah-eyebrow { font-size: 10px; letter-spacing: .12em; color: #63dfd4; }
#auction h2 { font-size: calc(23px * var(--fontscale, 1)); line-height: 1.2; letter-spacing: -.04em; color: #f0f6fb; margin: 8px 0; }
#auction .ah-head p { color: #a8bdcd; font-size: 11px; max-width: 390px; }
#auction .ah-balance { flex-shrink: 0; padding: 11px 14px; border: 1px solid #36485a; border-radius: 5px; background: #111f2b; display: flex; flex-direction: column; gap: 5px; }
#auction .ah-balance span { font-size: 10px; color: #a2b5c6; }
#auction .ah-balance strong { font-size: 24px; color: #f2d28b; }
#auction small { font-size: 10px; color: #a4b8c8; font-weight: normal; }
#auction .ah-info { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #9fc6c9; font-size: 10px; padding: 10px 0 15px; }
#auction h3 { margin: 0 0 8px; padding: 0; border: 0; color: #e7f0f6; font-size: 13px; letter-spacing: .02em; }
#auction .aucsell { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; padding: 16px; border: 1px solid #32495b; border-radius: 6px; background: linear-gradient(140deg, #172735, #111a24); margin-bottom: 20px; }
#auction .ah-inventory, #auction .ah-form { min-width: 0; }
#auction .ah-help { color: #9fb4c7; font-size: 10px; }
#auction .auclist { max-height: 240px; overflow-y: auto; background: #0b151f; border: 1px solid #2e4355; border-radius: 4px; margin-top: 12px; }
#auction .aucpick { display: flex; align-items: center; gap: 9px; text-align: left; white-space: normal; width: 100%; min-height: 48px; padding: 9px; border: 0; border-bottom: 1px solid #23384a; border-radius: 0; background: transparent; font-size: 11px; }
#auction .aucpick span { flex: 1; overflow-wrap: anywhere; }
#auction .aucpick canvas { flex: 0 0 24px; }
#auction .aucpick.sel { background: #173b40; box-shadow: inset 3px 0 #62dccc; }
#auction .ah-selected { color: #e6cf96; font-size: 12px; margin: 0 0 12px; min-height: 18px; }
#auction .aucctl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
#auction .aucctl label { justify-content: flex-end; }
#auction label { display: flex; flex-direction: column; gap: 4px; color: #b1c4d4; font-size: 10px; }
#auction .ah-feedback { font-size: 10px; color: #dfbe8d; margin: 10px 0; }
#auction .ah-primary { width: 100%; font-weight: bold; background: #81dfd0; color: #102728; border-color: #81dfd0; }
#auction .ah-terms { margin-top: 10px; }
#auction .ah-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 0 10px; }
#auction .ah-section-title > span { font-size: 10px; color: #9bb7c9; }
#auction .ah-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
#auction .ah-empty { grid-column: 1 / -1; border: 1px dashed #344b5c; border-radius: 6px; padding: 28px 18px; background: #101d28; text-align: center; }
#auction .ah-empty > span { color: #75c6c6; font-size: 26px; display: block; margin-bottom: 8px; }
#auction .ah-empty p { color: #91aabd; font-size: 11px; max-width: 370px; margin: auto; }
#auction .ah-empty-small { padding: 18px 12px; color: #96afc2; font-size: 11px; }
#auction .aucrow { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 15px; background: #14232f; border: 1px solid #324a5c; border-radius: 6px; min-width: 0; }
#auction .aucrow.mine { border-color: #398278; }
#auction .ah-itemhead { display: flex; align-items: center; gap: 10px; }
#auction .ah-icon { min-width: 32px; }
#auction .ah-icon canvas { display: block; }
#auction .aucname { font-size: 12px; overflow-wrap: anywhere; }
#auction .ah-time { margin-left: auto; color: #a9bdce; font-size: 10px; white-space: nowrap; }
#auction .ah-own { color: #7de0cb; font-size: 9px; letter-spacing: .12em; }
#auction .ah-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid #2a4254; padding-top: 10px; }
#auction .ah-prices > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#auction .ah-prices span { color: #96afc2; font-size: 10px; }
#auction .ah-prices strong { color: #f0d59c; font-size: 21px; overflow-wrap: anywhere; }
#auction .ah-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
#auction .ah-actions label { flex: 1; min-width: 70px; }
#auction .ah-buyout { flex-basis: 100%; color: #f0d597; border-color: #816b46; background: #322d25; }
#auction .ah-notice { padding: 12px; margin-bottom: 12px; background: #30291e; border: 1px solid #73603f; color: #e7c78d; border-radius: 4px; }
@container (max-width: 460px) {
  #auction .ah-head { flex-direction: column; }
  #auction .ah-balance { flex-direction: row; align-items: center; gap: 14px; width: 100%; }
  #auction .aucsell { grid-template-columns: 1fr; }
  #auction .auclist { max-height: 150px; }
}

.shop-payment { padding:14px 0; border-top:1px solid #ffffff20; display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.shop-payment p { margin:0; flex:1 1 100% }
.shop-payment small { opacity:.65; flex:1 1 100%; overflow-wrap:anywhere }
.shop-checkout-link { display:inline-block; padding:9px 14px; background:#c3f06b; color:#15220c; border-radius:6px; text-decoration:none; font-weight:700 }

.partycardhead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
#partycard .partycardhead h3 { margin:0; }
#partycardlock { margin:0; min-width:32px; padding:4px 6px; }
#partyloothint { margin:10px 0; font-size:10px; line-height:1.4; }
#partycardleave { width:100%; margin:0; }

#partycardlock:disabled { cursor:default; opacity:.65; }

#chatlog .chat-time { font-size: 9px; color: #9295a5; margin-right: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#chatlog .chat-vip { width: 32px; height: 16px; margin-right: 5px; vertical-align: -3px; }

/* Home actions stay prominent; property administration is secondary. */
.haddress { color:#e7d1a3; font-weight:700; }
.hhome-actions { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.hhome-actions button,.housing-lift button,.hmanage button,.hmanage input {
  min-height:44px; padding:10px 16px; border:1px solid #526578; border-radius:5px;
  background:#233442; color:#edf1f3; font:inherit; box-sizing:border-box;
}
.hhome-actions button { flex:1; cursor:pointer; }
.hhome-actions button:first-child { background:#b79150; border-color:#d6b475; color:#141c25; font-weight:700; }
.hhome-actions button:nth-child(2) { background:#234c49; border-color:#69a99d; }
.hhome-actions button:hover,.housing-lift button:hover { filter:brightness(1.2); }
.hhome-actions button:focus-visible,.housing-lift :focus-visible { outline:2px solid #8be3cf; outline-offset:3px; }
.hmanage { margin-top:14px; }.hmanage summary { color:#9ba6b5; cursor:pointer; padding:10px 0; }
.hmanage input { width:150px; }
.housing-lift { margin:auto; width:min(440px,calc(100vw - 32px)); max-height:80vh; overflow:auto; box-sizing:border-box;
  padding:24px; border:1px solid #69818c; border-radius:8px; background:#101c28; color:#edf1f3; box-shadow:0 18px 80px #000b; }
.housing-lift::backdrop { background:#030a12a6; }.housing-lift h2 { color:#e2c28a; margin:0; }
.housing-lift button { cursor:pointer; }.housing-lift .hground { width:100%; margin:12px 0; }
.hlift-sector { border-top:1px solid #344858; padding:12px 0; }.hlift-sector h3 { color:#a5c4c2; }
.hlift-label { display:flex; align-items:center; gap:12px; flex:1; }
.hlift-label input { min-width:70px; width:100%; min-height:48px; padding:10px; box-sizing:border-box;
  background:#0c1520; border:1px solid #617c8a; border-radius:4px; color:#fff; font:inherit; font-size:18px; }
.housing-lift .hlift-go { min-height:48px; min-width:100px; background:#315e58; }

.htabs { display:flex; gap:10px; margin:20px 0; border-bottom:1px solid #344858; padding-bottom:12px; }
.htabs button,.hoffers-panel button { min-height:44px; padding:10px 16px; border:1px solid #526578; border-radius:5px; background:#233442; color:#edf1f3; font:inherit; cursor:pointer; }
.htabs button[aria-selected="true"] { border-color:#d6b475; background:#b79150; color:#141c25; font-weight:700; }
.hsale-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%; }
.hsale-field { display:flex; flex-direction:column; gap:7px; color:#b9cbd2; font-size:12px; }
.hsale-field[hidden] { display:none; }
.hsale-field input,.hsale-field select,#auction .aucctl select { width:100%; min-height:44px; box-sizing:border-box; background:#111e2b; color:#edf1f3; border:1px solid #526578; border-radius:4px; padding:10px; font:inherit; }
.hsale-form small { grid-column:1/-1; }.hoffer { border-left:3px solid #b79150; background:#152430; padding:12px; margin-top:14px; }
.hoffers-panel button:disabled { opacity:.45; cursor:default; }
#auction .aucctl label:first-child, #auction .aucctl label:nth-child(4), #auction .aucctl label:last-child { grid-column:1/-1; }
@media(max-width:480px){.htabs { flex-wrap:wrap; }.hsale-form { grid-template-columns:1fr; }}

.hb-priority { color: var(--cyan); font-size: 10px; cursor: help; white-space: nowrap; }

/* ============================================================================
   UI MOTION — superfícies que entram e saem (modais, janelas, launcher, ctx)
   Padrão transitions.dev: fade + rise + scale + blur curto na entrada, saída
   mais rápida que a entrada, dropdown com origem no clique.
   - ENTRADA é keyframes: display:none→display re-executa a animação em qualquer
     navegador. SAÍDA dos modais genéricos é progressiva (transition-behavior:
     allow-discrete segura o display durante o fade — navegador sem suporte
     fecha instantâneo, como sempre foi); onde o JS destrói o nó (janelas do
     deck, launcher, menu de contexto) a saída é a classe .closing conduzida no
     game.js.
   - O movimento usa as propriedades INDIVIDUAIS translate/scale, nunca transform:
     #escmenu/#trademodal/#minigame se posicionam por transform:translate(-50%),
     e propriedades individuais compõem com ele em vez de sobrescrever.
   - O estado oculto (opacity:0) mora no MESMO escopo das animações: desligar
     motion no meio da sessão não deixa modal fantasma invisível.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --m-out: cubic-bezier(.22, 1, .36, 1);   /* entrada: desaceleração forte */
    --m-in: cubic-bezier(.55, 0, .8, .4);    /* saída: mergulha cedo — o display some em ~50% do tempo dele */
  }
  @keyframes surfIn   { from { opacity: 0; translate: 0 9px;  scale: .965; filter: blur(4px); } }
  @keyframes surfOut  { to   { opacity: 0; translate: 0 7px;  scale: .97;  filter: blur(3px); } }
  @keyframes fadeIn   { from { opacity: 0; } }
  @keyframes winIn    { from { opacity: 0; translate: 0 10px; scale: .97;  filter: blur(4px); } }
  @keyframes winOut   { to   { opacity: 0; translate: 0 8px;  scale: .97;  filter: blur(3px); } }
  @keyframes phoneIn  { from { opacity: 0; translate: 0 -10px; scale: .975; filter: blur(4px); } }
  @keyframes phoneOut { to   { opacity: 0; translate: 0 -8px;  scale: .98;  filter: blur(3px); } }
  @keyframes ctxIn    { from { opacity: 0; scale: .92; filter: blur(2px); } }

  /* ---- modais genéricos (.modal.on): entrada keyframes, saída allow-discrete ----
     #phone também usa class="modal" (só o chrome: clip-path/borda) mas é comandado por
     .open, não por .on — fora destas regras, senão o estado ocerto o deixa invisível.
     O display discreto flipa no FIM da transição dele, então a duração dele ≈ o fade:
     o resto do rastro é clicável — por isso pointer-events:none no estado de saída e
     auto explícito no .on. */
  body:not(.nouimotion) .modal:not(#phone) {
    opacity: 0; translate: 0 9px; scale: .965; pointer-events: none;
    transition:
      opacity .17s var(--m-in),
      translate .18s var(--m-in),
      scale .18s var(--m-in),
      display .2s allow-discrete;
  }
  body:not(.nouimotion) .modal.on:not(#phone) {
    opacity: 1; translate: none; scale: none; pointer-events: auto;
    animation: surfIn .2s var(--m-out) backwards;
  }

  /* ---- janelas do deck (.appmodal): entrada sobe, saída .closing via removeWin ---- */
  body:not(.nouimotion) .appmodal { animation: winIn .18s var(--m-out) backwards; }
  body:not(.nouimotion) .appmodal.closing { animation: winOut .15s var(--m-in) forwards; pointer-events: none; }

  /* ---- launcher GERAL (#phone): desce de cima como um drone; saída .closing via setDockOpen ---- */
  body:not(.nouimotion) #phone.open, body:not(.nouimotion) #phone.on { animation: phoneIn .22s var(--m-out) backwards; }
  body:not(.nouimotion) #phone.closing { animation: phoneOut .17s var(--m-in) forwards; pointer-events: none; }

  /* ---- menu de contexto: dropdown com origem no clique (canto superior esquerdo) ---- */
  body:not(.nouimotion) #ctxmenu {
    opacity: 0; transform-origin: top left; pointer-events: none;
    transition: opacity .12s var(--m-in), display .15s allow-discrete;
  }
  body:not(.nouimotion) #ctxmenu.on { opacity: 1; pointer-events: auto; animation: ctxIn .14s var(--m-out) backwards; }
  body:not(.nouimotion) #ctxmenu.closing { pointer-events: none; }

  /* ---- minigame de pesca ---- */
  body:not(.nouimotion) #minigame {
    opacity: 0; pointer-events: none;
    transition: opacity .15s var(--m-in), display .17s allow-discrete;
  }
  body:not(.nouimotion) #minigame.on { opacity: 1; pointer-events: auto; animation: surfIn .18s var(--m-out) backwards; }

  /* ---- cabine do elevador (dialog nativo) ---- */
  body:not(.nouimotion) .housing-lift[open] { animation: surfIn .2s var(--m-out); }

  /* ---- cascata da grade do deck: cada app entra 22ms depois do anterior ---- */
  body:not(.nouimotion) .appicon:nth-child(2)  { animation-delay: .022s; }
  body:not(.nouimotion) .appicon:nth-child(3)  { animation-delay: .044s; }
  body:not(.nouimotion) .appicon:nth-child(4)  { animation-delay: .066s; }
  body:not(.nouimotion) .appicon:nth-child(5)  { animation-delay: .088s; }
  body:not(.nouimotion) .appicon:nth-child(6)  { animation-delay: .11s; }
  body:not(.nouimotion) .appicon:nth-child(7)  { animation-delay: .132s; }
  body:not(.nouimotion) .appicon:nth-child(8)  { animation-delay: .154s; }
  body:not(.nouimotion) .appicon:nth-child(9)  { animation-delay: .176s; }
  body:not(.nouimotion) .appicon:nth-child(10) { animation-delay: .198s; }
  body:not(.nouimotion) .appicon:nth-child(11) { animation-delay: .22s; }
  body:not(.nouimotion) .appicon:nth-child(12) { animation-delay: .242s; }
  body:not(.nouimotion) .appicon:nth-child(13) { animation-delay: .264s; }
  body:not(.nouimotion) .appicon:nth-child(14) { animation-delay: .286s; }
  body:not(.nouimotion) .appicon:nth-child(15) { animation-delay: .308s; }
  body:not(.nouimotion) .appicon:nth-child(16) { animation-delay: .33s; }
  body:not(.nouimotion) .appicon:nth-child(17) { animation-delay: .352s; }
  body:not(.nouimotion) .appicon:nth-child(18) { animation-delay: .374s; }

  /* ---- micro: press nos ícones e nos botões da barra de janela ---- */
  body:not(.nouimotion) .appicon:active { transform: translateY(0) scale(.95); }
  body:not(.nouimotion) .appmodal .winbar button { transition: scale .1s var(--m-out); }
  body:not(.nouimotion) .appmodal .winbar button:active { scale: .88; }
}

/* kill-switches: o toggle das opções e o prefers-reduced-motion calam também as
   animações que já existiam (stagger da grade, bob dos glifos). */
body.nouimotion .appicon, body.nouimotion .appicon .glyph, body.nouimotion .appmodal,
body.nouimotion #phone.open, body.nouimotion #phone.on, body.nouimotion .modal,
body.nouimotion #minigame, body.nouimotion #ctxmenu, body.nouimotion .housing-lift[open] {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .appicon, .appicon .glyph, .appmodal, #phone.open, #phone.on, .modal,
  #minigame, #ctxmenu, .housing-lift[open] {
    animation: none !important; transition: none !important;
  }
}

/* Auction browsing stays separate from the listing draft. */
#auction [hidden] { display: none !important; }
#auction .ah-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid #32495b; padding-bottom: 10px; }
#auction .ah-tabs button { flex: 1; }
#auction .ah-tabs button[aria-pressed="true"] { color: #91f0df; background: #173b40; border-color: #62dccc; }
#auction .ah-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid #32495b; border-radius: 6px; background: #111f2b; }
#auction .ah-search { grid-column: span 2; }
#auction .ah-filters select { font: inherit; width: 100%; min-width: 0; min-height: 39px; padding: 9px; color: #eff6fc; background: #080f18; border: 1px solid #3a5164; border-radius: 4px; }
#auction select:focus-visible { outline: 2px solid #72e7d8; outline-offset: 2px; }
#auction #au_clear { grid-column: 1 / -1; justify-self: end; }
@container (max-width: 420px) {
  #auction .ah-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #auction .ah-tabs { flex-wrap: wrap; }
  #auction .ah-tabs button { padding: 8px; }
}

/* Provider icons share one row; help and status span the row below them. */
#login .login-providers { display: grid; grid-template-columns: repeat(3, 48px); justify-content: center; align-items: start; gap: 10px 16px; width: 100%; }
#login #google_login, #login #wallet_login, #login #discord_login { display: contents; }
#login #google_button { grid-column: 1; grid-row: 1; margin: 0; justify-content: center; padding-top: 4px; }
#login #wallet_button, #login #discord_button { grid-row: 1; width: 40px; height: 40px; padding: 0; margin: 4px; display: flex; align-items: center; justify-content: center; border: 1px solid #526172; border-radius: 6px; background: #f4f6fa; cursor: pointer; }
#login #wallet_button { grid-column: 2; }
#login #discord_button { grid-column: 3; }
#login #wallet_button:hover, #login #discord_button:hover { background: #fff; border-color: var(--cyan); }
#login #discord_button:disabled { opacity: .55; cursor: wait; }
#login .login-providers #google_status, #login .login-providers #wallet_status, #login .login-providers #discord_status,
#login .login-providers #google_retry, #login .login-providers #google_switch, #login .login-providers #google_switch_hint,
#login .login-providers #wallet_login > a { grid-column: 1 / -1; text-align: center; font-size: 12px; }
#login #discord_status { color: var(--dim); }
#login #discord_status:empty { display: none; }
#login #provider_hint { max-width: 340px; margin: 0; text-align: center; color: var(--dim); font-size: 12px; line-height: 1.5; }
#login .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* GIS expects content-box inside its official button; the game's universal reset
   otherwise collapses the padded Google mark to a zero-sized SVG. */
:where(#google_button *) { box-sizing: content-box; }
#login #wallet_button { min-height: 40px; box-shadow: none; }

/* Game-owned pixel emotes, shared by the composer and chat history. */
.chat-emoji { vertical-align: middle; image-rendering: pixelated; }
#chatemojitoggle { flex: 0 0 34px; padding: 3px; background: #1c2938; border: 1px solid #4be4d244; border-radius: 4px; cursor: pointer; }
#chatemojitoggle:focus-visible { outline: 2px solid #4be4d2; }
#chatemojipicker:not([hidden]) { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: #111b29; border-top: 1px solid #4be4d266; }
#chatemojipicker button { padding: 4px; background: #1c2938; border: 1px solid #4be4d244; border-radius: 4px; cursor: pointer; }
#chatemojipicker button:hover, #chatemojipicker button:focus-visible { background: #314458; border-color: #4be4d2; }
/* Personal hunt exits: keep controls mounted while party HP updates. */
#huntstopsettings { margin:10px 0; padding-top:9px; border-top:1px solid #365564; }
#huntstopsettings summary { color:var(--cyan); cursor:pointer; line-height:1.5; }
#huntstopoptions { display:grid; gap:5px; margin-top:8px; }
.huntstopcheck { display:flex; align-items:center; gap:7px; min-height:28px; cursor:pointer; line-height:1.4; }
.huntstopcheck input { flex:none; width:16px; height:16px; margin:0; accent-color:var(--cyan); }
.huntstopcheck.warn { color:var(--hp); background:rgba(255,65,85,.09); border-radius:4px; outline:1px solid var(--hp); padding:5px; }
.huntstopcheck.warn input { accent-color:var(--hp); }
.huntstopwarning { display:block; margin-top:4px; font-size:10px; line-height:1.5; }
.huntstopwarning[hidden] { display:none; }
.huntstopmembers { display:grid; gap:5px; margin-bottom:4px; }
#huntstopmembers { width:100%; min-width:0; padding:6px; border:1px solid #365564; border-radius:4px; color:var(--text); background:#142632; font:inherit; }
#huntstophint { margin-top:8px; font-size:10px; line-height:1.5; color:var(--dim); }
#partygroupcontent[hidden], #partycardlock[hidden], #partycardleave[hidden] { display:none; }

/* Review the same personal controls beside the picker before entering a hunt. */
#huntplanner { display:none; position:fixed; z-index:10; left:50%; top:50%; transform:translate(-50%, -50%); width:min(1200px, 96vw); height:min(780px, 86vh); gap:12px; pointer-events:none; }
#huntplanner:has(#huntmodal.on) { display:flex; }
#huntplanner #huntmodal { position:relative; inset:auto !important; transform:none !important; animation:none; flex:1; width:auto; min-width:0; max-width:none; height:100%; max-height:none; pointer-events:auto; }
#huntreview { flex:0 0 250px; min-width:0; max-height:100%; overflow:auto; pointer-events:auto; }
#huntreview #partycard { position:static; width:100%; max-width:none; max-height:none; }
@media (max-width:800px) {
  #huntplanner { flex-direction:column; height:92vh; overflow:auto; pointer-events:auto; }
  #huntreview { order:-1; flex:none; max-height:none; overflow:visible; }
  #huntplanner #huntmodal { flex:none; height:78vh; }
}
 /* ---------- PunkCoin storefront v2 ---------- */
.appmodal.wide[data-app="commerce"] { width: min(96vw, 960px); max-height: min(86vh, 860px); }
#shopbody { container-type: inline-size; min-height:100%; padding:clamp(14px,2vw,28px); background:radial-gradient(900px 280px at 80% -10%,#a646f622,transparent 68%),linear-gradient(150deg,#0c0e16,#121622 48%,#0a0d14); color:#eef2f7; font-size:max(12px,calc(12px * var(--fontscale,1))); line-height:1.45; }
#shopbody *,#shopbody *::before,#shopbody *::after{box-sizing:border-box}
#shopbody button,#shopbody select{min-height:44px;font:inherit;color:#eaf1f8;border:1px solid #3a465b;border-radius:5px;background:#151c2a;cursor:pointer}
#shopbody button{padding:10px 16px;transition:background .15s,border-color .15s,transform .15s}
#shopbody button:hover:not(:disabled),#shopbody select:hover{background:#202d42;border-color:#78dbed}
#shopbody button:focus-visible,#shopbody select:focus-visible{outline:3px solid #a56df2;outline-offset:2px}
#shopbody button:disabled{opacity:.55;cursor:default}
#shopbody p{margin:0}
#shopbody .shop-vitrine-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:0 0 18px}
#shopbody .shop-title-block{min-width:0}
#shopbody .shop-eyebrow,#shopbody .shop-kicker{color:#c28cf8;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
#shopbody h2{margin:8px 0 5px;color:#fafcff;font-size:clamp(26px,4vw,42px);letter-spacing:-.045em;line-height:1.05}
#shopbody .shop-title-block p{max-width:520px;color:#aab8ca;font-size:14px}
#shopbody .shop-balance{min-width:190px;padding:14px 16px;border:1px solid #3b4862;border-radius:8px;background:linear-gradient(150deg,#1a2231,#111722);box-shadow:0 12px 30px #0005}
#shopbody .shop-balance>span:first-child{display:block;color:#8d9caf;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
#shopbody .shop-balance strong{display:block;color:#73e5f2;font-size:27px;line-height:1.15}
#shopbody .shop-balance small{color:#9bb9c7;font-size:11px}
#shopbody .shop-balance-split{display:block;margin-top:7px;color:#91a2b4;font-size:11px}
#shopbody .shop-balance-split b{color:#d9e8f1}
#shopbody .shop-balance-link{width:100%;min-height:32px;margin-top:10px;padding:5px 8px;color:#ffe0a0;border-color:#745d35;background:#2b2518;font-size:11px}
#shopbody .shop-membership{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:12px 16px;border:1px solid #51643e;border-radius:8px;background:linear-gradient(110deg,#202e28,#131b24 65%);box-shadow:inset 3px 0 #d5b36b}
#shopbody .shop-membership-compact .shop-emblem{width:48px;height:48px;color:#f1c870;flex-shrink:0}
#shopbody .shop-emblem{width:66px;height:66px;color:#f1c870;flex-shrink:0}
#shopbody .shop-member-copy{flex:1;min-width:0}
#shopbody .shop-member-title{display:flex;align-items:center;gap:9px;margin:2px 0 3px;color:#f8fafc;font-size:19px;font-weight:800}
#shopbody .shop-live{padding:2px 7px;border:1px solid #56616b;border-radius:3px;color:#b4c0ca;font-size:10px;letter-spacing:.08em}
#shopbody .shop-live.is-live{color:#d9f6af;border-color:#759d57;background:#c7ee8c18}
#shopbody .shop-member-copy p{color:#aebcbf;font-size:12px}
#shopbody .shop-stack{color:#879d96!important;margin-top:2px!important}
#shopbody .shop-claim{display:inline-block;margin-top:9px;min-height:34px;padding:6px 14px;color:#0e130f;background:#c7ee8c;border:1px solid #759d57;border-radius:4px;font-weight:700;font-size:12px;cursor:pointer}
#shopbody .shop-claim:hover{background:#d9f6af;border-color:#8fb968}
#shopbody .shop-claim:focus-visible{outline:2px solid #d9f6af;outline-offset:2px}
#shopbody .shop-claim-done{display:inline-block;margin-top:9px;min-height:34px;padding:6px 14px;color:#8ea08f;background:transparent;border:1px dashed #4d5f50;border-radius:4px;font-size:11px}
#shopbody .shop-time{display:flex;flex-direction:column;align-items:center;min-width:80px;padding-left:14px;border-left:1px solid #475a4b}
#shopbody .shop-time strong{color:#f0d695;font-size:32px;line-height:1}
#shopbody .shop-time span{color:#bdc7b7;font-size:11px;white-space:nowrap}
#shopbody .shop-main-tabs{display:flex;gap:7px;overflow-x:auto;padding:0 0 12px;border-bottom:1px solid #2b3546;scrollbar-width:none}
#shopbody .shop-main-tabs::-webkit-scrollbar{display:none}
#shopbody .shop-main-tabs button{flex:0 0 auto;min-height:42px;padding:9px 15px;color:#9cabbc;border-color:transparent;background:transparent}
#shopbody .shop-main-tabs button.on{color:#fff;border-color:#6c4d92;background:#382450;box-shadow:0 0 18px #9b59dc22}
#shopbody .shop-hero{position:relative;display:grid;min-height:250px;margin:18px 0;overflow:hidden;border:1px solid #5a3a83;border-radius:10px;background:#110f1f;box-shadow:0 16px 36px #0007}
#shopbody .shop-hero-art{grid-column:1;grid-row:1;min-height:250px;background-position:center;background-size:cover}
#shopbody .shop-hero-copy{z-index:1;grid-column:1;grid-row:1;align-self:center;max-width:430px;padding:30px;background:linear-gradient(90deg,#0b0d16ef 0%,#0b0d16c7 70%,transparent)}
#shopbody .shop-hero-copy h3{margin:9px 0 8px;color:#fff;font-size:clamp(24px,3vw,36px);line-height:1.05;letter-spacing:-.04em}
#shopbody .shop-hero-copy p{color:#c2c9db;font-size:14px}
#shopbody .shop-hero-cta{margin-top:18px;color:#160d20!important;border-color:#d4a1ff!important;background:#c588f8!important;font-weight:800}
#shopbody .shop-hero-vote{display:inline-flex;align-items:center;gap:10px;margin-top:12px;color:#64ded5;font-size:13px;text-decoration:none}
#shopbody .shop-hero-vote:hover{color:#8ef0e6}
#shopbody .shop-hero-vote-art{width:34px;height:auto;transform-origin:50% 100%;filter:drop-shadow(0 5px 9px #0008);animation:shop-hero-swing 1.9s ease-in-out infinite}
#shopbody .shop-hero-vote:hover .shop-hero-vote-art{animation-play-state:paused}
@keyframes shop-hero-swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@media (prefers-reduced-motion: reduce){#shopbody .shop-hero-vote-art{animation:none}}
#shopbody .shop-vitrine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
#shopbody .shop-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #303c51;border-radius:9px;background:linear-gradient(145deg,#1b2432,#101620);box-shadow:0 12px 24px #0004}
#shopbody .shop-card-pack{border-color:#65408b;background:linear-gradient(145deg,#281b38,#121721)}
#shopbody .shop-card-vip{border-color:#7c643d;background:linear-gradient(145deg,#30291d,#171921)}
#shopbody .shop-card-pc{border-color:#2b6677;background:linear-gradient(145deg,#152c36,#111a22)}
#shopbody .shop-card.featured{box-shadow:0 0 0 1px #c78af844,0 15px 30px #0006}
#shopbody .shop-card.active{box-shadow:0 0 0 2px #75e6c055}
#shopbody .shop-card-art{display:flex;align-items:center;justify-content:center;height:170px;padding:10px;background:radial-gradient(circle at 50% 50%,#ffffff0a,transparent 68%)}
#shopbody .shop-generated-art{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 16px #0009)}
#shopbody .shop-card-body{display:flex;flex:1;flex-direction:column;padding:16px}
#shopbody .shop-badge{min-height:16px;color:#b68ae7;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
#shopbody .shop-card-vip .shop-badge{color:#e6c67c}
#shopbody .shop-card-pc .shop-badge{color:#72deee}
#shopbody .shop-card h3{margin:8px 0 5px;color:#f8fafc;font-size:21px;line-height:1.15}
#shopbody .shop-detail{min-height:42px;color:#afbdcb;font-size:12px}
#shopbody .shop-price{margin-top:17px;color:#fff0ca;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
#shopbody .shop-card-pack .shop-price{color:#e4b7ff}
#shopbody .shop-card-pc .shop-price{color:#9beef5}
#shopbody .shop-price small{color:#b5c2cf;font-size:12px;font-weight:500}
#shopbody .shop-rate{min-height:20px;margin-top:6px!important;color:#d6c596;font-size:12px}
#shopbody .shop-terms{margin-top:5px!important;color:#9eaaba;font-size:11px}
#shopbody .shop-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;padding:0 16px 16px}
#shopbody .shop-buy{flex:1 1 150px;color:#d8fbf7;border-color:#397e83;background:#193b40;font-weight:800}
#shopbody .shop-card-pack .shop-buy{color:#f1ddff;border-color:#8a58b3;background:#492363}
#shopbody .shop-card-vip .shop-buy{color:#251e10;border-color:#e5c27c;background:#ddb266}
#shopbody .shop-card-pc .shop-buy{color:#071a1d;border-color:#72dce9;background:#65cbd7}
#shopbody .shop-payment-method{flex:1 1 150px;min-width:0;padding:8px}
#shopbody .shop-shortfall{width:100%;color:#efb2a6;font-size:12px;text-align:center}
#shopbody .shop-review{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0;padding:18px;border:1px solid #7d58a4;border-radius:8px;background:linear-gradient(110deg,#25193a,#141a28)}
#shopbody .shop-review h3{margin:5px 0;color:#fff;font-size:21px}
#shopbody .shop-review p{color:#c4cbd7;font-size:13px}
#shopbody .shop-review-actions{display:flex;gap:8px;flex-wrap:wrap}
#shopbody .shop-review-actions .primary{color:#190f22;border-color:#d8a5ff;background:#bd79ec;font-weight:800}
#shopbody .shop-notice{margin:12px 0;padding:12px 14px;border:1px solid #705f35;border-radius:6px;background:#2d281c;color:#f0d49a;font-size:13px}
#shopbody .shop-notice-success{border-color:#377e6e;background:#153a37;color:#adf1d9}
#shopbody .shop-notice-error{border-color:#8d4950;background:#3a2027;color:#ffc0bb}
#shopbody .shop-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:35px 15px;color:#aab8ca;text-align:center}
#shopbody .shop-payment{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0;padding:13px 15px;border:1px solid #33445a;border-radius:6px;background:#151d2b}
#shopbody .shop-payment p{flex:1 1 240px;color:#e6edf4;font-size:13px}
#shopbody .shop-payment small{flex:1 1 100%;color:#8798ae;font-size:11px;overflow-wrap:anywhere}
#shopbody .shop-order-status{padding:4px 8px;border-radius:4px;color:#c9d7e3;background:#2b3545;font-size:11px}
#shopbody .shop-order-status.delivered{color:#b5f1d9;background:#16453b}
#shopbody .shop-order-status.pending,#shopbody .shop-order-status.creating{color:#f6d88c;background:#44371b}
#shopbody .shop-checkout-link{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:5px;color:#d6f7ff;background:#1a4d59;text-decoration:none}
#shopbody .shop-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:14px;border-top:1px solid #2b3546}
#shopbody .shop-footer span{max-width:600px;color:#8495aa;font-size:12px}
@media(max-width:760px){.appmodal.wide[data-app="commerce"]{width:96vw;max-height:calc(100dvh - 24px)}#shopbody .shop-vitrine-head{flex-direction:column;gap:13px}#shopbody .shop-balance{width:100%}#shopbody .shop-hero{min-height:330px}#shopbody .shop-hero-copy{align-self:end;max-width:none;padding:22px 18px;background:linear-gradient(0deg,#0b0d16f5,transparent)}#shopbody .shop-hero-art{min-height:330px;background-position:60% center}#shopbody .shop-vitrine-grid{grid-template-columns:1fr}#shopbody .shop-card-art{height:190px}#shopbody .shop-membership{flex-wrap:wrap}#shopbody .shop-time{flex-direction:row;gap:8px;width:100%;justify-content:center;padding:9px 0 0;border-top:1px solid #475a4b;border-left:0}#shopbody .shop-review{flex-direction:column;align-items:stretch}#shopbody .shop-footer{flex-direction:column;align-items:stretch}}
@media(prefers-reduced-motion:reduce){#shopbody button{transition:none}}

.world-status-tip {
  position: fixed; z-index: 10000; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 16px); padding: 10px 12px 10px 10px;
  background: linear-gradient(125deg, #1b2432f5, #0a101af8);
  border: 1px solid #ffffff24; border-left: 2px solid var(--effect-color);
  border-radius: 8px; color: #edf4ff; font: 12px sans-serif;
  box-shadow: 0 6px 24px #0009, inset 0 1px #ffffff0b;
  backdrop-filter: blur(8px);
}
.world-status-tip[hidden] { display: none; }
.world-status-art {
  display: grid; place-items: center; flex: 0 0 34px; height: 34px;
  border: 1px solid #ffffff19; border-radius: 6px; background: #070d1680;
}
.world-status-art canvas { width: 24px; height: 24px; }
.world-status-copy { display: flex; flex-direction: column; gap: 4px; min-width: 65px; }
.world-status-copy strong { font-size: 12px; font-weight: 600; text-transform: capitalize; }
.world-status-copy span { color: #94a6bc; font-size: 10px; overflow-wrap: anywhere; }
.world-status-duration {
  display: flex; align-items: center; gap: 4px; padding: 5px 7px;
  margin-left: 6px; border: 1px solid #ffffff12; border-radius: 5px;
  background: #060a1280; color: #e7f1ff; font-variant-numeric: tabular-nums;
}
.world-status-duration small { color: #94a6bc; font-size: 10px; }
.world-status-duration i {
  position: relative; width: 10px; height: 10px; margin-right: 3px;
  border: 1px solid var(--effect-color); border-radius: 50%;
}
.world-status-duration i::after {
  content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 3px;
  border-left: 1px solid var(--effect-color); border-bottom: 1px solid var(--effect-color);
}

#hudportrait { display: none; }
.hudbar-label { display: none; }

/* Global DiffUI HUD A2.1: the same playfield overlays and dock on every map. */
:root { --barh: clamp(158px, 19.2vh, 224px); }
#onlinecounter.in-game-hud { display: none !important; }
#huntrun {
  position: absolute; top: 8px; left: 8px; right: auto; z-index: 5;
  width: min(800px, calc(100% - 16px)); max-width: 62%;
  box-sizing: border-box; padding: 7px 10px 8px;
  pointer-events: none; color: #d5e4ee;
  background: linear-gradient(155deg, rgba(7, 15, 25, .96), rgba(3, 8, 16, .96));
  border: 1px solid rgba(0, 229, 255, .8);
  box-shadow: 0 0 0 1px rgba(255, 46, 200, .24), 0 0 16px rgba(0, 229, 255, .26), 0 8px 24px #0009;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  backdrop-filter: blur(8px);
}
#huntrun[hidden] { display: none !important; }
#huntrun::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); }
#huntrun > * { position: relative; z-index: 1; }
#huntrun .hrtop {
  display: flex; min-height: 24px; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(0, 229, 255, .38); padding-bottom: 5px; margin-bottom: 6px;
  color: #a6c3d4; font-size: calc(11px * var(--fontscale, 1));
  letter-spacing: 1.4px; text-transform: uppercase;
}
#huntrun .hrdot { width: 7px; height: 7px; flex: none; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
#huntrun .hrbrand { color: var(--cyan); font-weight: 700; white-space: nowrap; text-shadow: 0 0 8px #00e5ff70; max-width: min(320px, 36vw); overflow: hidden; text-overflow: ellipsis; }
#huntrun .hrlive { margin-left: 0; color: var(--magenta); letter-spacing: 1.5px; text-shadow: 0 0 8px #ff2ec870; }
#huntrun .hrscreen { display: block; flex: 1 1 72px; width: 72px; height: 16px; margin: 0 4px; }
#hrgraph { display: block; width: 100%; height: 16px; }
#huntrun .hrplayers { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--cyan); letter-spacing: .5px; white-space: nowrap; }
#huntrun .hrplayers b { color: #eaf7ff; font-size: calc(14px * var(--fontscale, 1)); font-variant-numeric: tabular-nums; }
#huntrun .hrplayers > span:not(.hronline-dot):not(.hrsignal) { color: #9cb5c2; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .8px; }
#huntrun .hronline-dot { width: 6px; height: 6px; background: #45f3b4; box-shadow: 0 0 7px #45f3b4; }
#huntrun .hrsignal { display: inline-flex; align-items: end; gap: 2px; height: 10px; }
#huntrun .hrsignal i { width: 3px; background: var(--magenta); box-shadow: 0 0 4px #ff2ec870; }
#huntrun .hrsignal i:nth-child(1) { height: 3px; }
#huntrun .hrsignal i:nth-child(2) { height: 5px; }
#huntrun .hrsignal i:nth-child(3) { height: 7px; }
#huntrun .hrsignal i:nth-child(4) { height: 9px; }
#huntrun .hrstats { display: grid; grid-template-columns: 1.08fr 1.08fr .8fr .84fr .76fr .88fr .76fr 1.08fr; gap: 8px; align-items: end; }
#huntrun .hrmetric { --hr-tone: var(--cyan); display: flex; min-width: 0; flex-direction: column; gap: 2px; }
#huntrun .hrmetric > span { color: #8da0af; text-transform: uppercase; letter-spacing: .7px; font-size: calc(9px * var(--fontscale, 1)); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#huntrun .hrmetric > b { color: var(--hr-tone); font-size: calc(18px * var(--fontscale, 1)); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 7px color-mix(in srgb, var(--hr-tone), transparent 55%); }
#huntrun .hrmetric.hr-xph > b { font-size: calc(22px * var(--fontscale, 1)); }
#huntrun .hrmetric.hrlevel > b { font-size: calc(16px * var(--fontscale, 1)); }
#huntrun .hrmetric.hr-session > b { font-size: calc(14px * var(--fontscale, 1)); }
#huntrun .hrmetric:not(.hrlevel)::after { content: ''; height: 2px; margin-top: 1px; background: repeating-linear-gradient(90deg, var(--hr-tone) 0 5px, transparent 5px 7px); opacity: .68; }
#huntrun .hr-xph, #huntrun .hr-heal, #huntrun .hr-session { --hr-tone: var(--cyan); }
#huntrun .hrlevel { --hr-tone: #47cfff; }
#huntrun .hr-gold { --hr-tone: #f2bd4f; }
#huntrun .hr-dmg, #huntrun .hr-dps { --hr-tone: #ed55d5; }
#huntrun .hr-taken { --hr-tone: #ff647c; }
#huntrun .hrlevelbar { height: 4px; overflow: hidden; background: repeating-linear-gradient(90deg, #00e5ff22 0 6px, transparent 6px 9px); }
#huntrun .hrlevelbar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #00e5ff 0 6px, #00e5ff 6px 7px, transparent 7px 9px); box-shadow: 0 0 7px #00e5ff80; }
#viewwrap:has(#huntrun:not([hidden])) #tutpanel { top: 126px; }
#partycard {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  display: block; width: min(390px, 40%); max-width: calc(100% - 16px);
  max-height: calc(100% - 16px); overflow: auto; padding: 8px 10px;
  box-sizing: border-box; color: var(--text); font-size: calc(11px * var(--fontscale, 1));
  background: linear-gradient(150deg, rgba(8, 14, 24, .96), rgba(5, 8, 16, .96));
  border: 1px solid var(--edge-cyan); border-right-color: var(--edge-mag);
  box-shadow: 0 0 0 1px #ff2ec824, var(--glow-cyan), 0 6px 20px #0009;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  backdrop-filter: blur(8px);
}
#partycard[hidden], #partyfollowrow[hidden] { display: none !important; }
#partycard h3 { margin: 0; color: var(--cyan); font-size: calc(12px * var(--fontscale, 1)); letter-spacing: 1.2px; text-transform: uppercase; }
.partycardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid #00e5ff45; }
.partycardactions { display: flex; gap: 4px; }
#partycard .partycardactions button { min-width: 25px; padding: 2px 6px; color: var(--cyan); border-color: #00e5ff70; background: #00e5ff12; }
#partycardhunt { margin: 5px 0 7px; color: #b8d7e7; line-height: 1.3; overflow-wrap: anywhere; }
#partycard .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#partycard #huntstopsettings { margin-top: 5px; border-top: 1px solid #ff2ec845; padding-top: 5px; }
#partycard #huntstopsettings summary { color: var(--magenta); cursor: pointer; letter-spacing: .6px; }
#partycard #huntstopoptions { display: grid; gap: 4px; padding-top: 5px; }
#partycard #huntstopoptions label { line-height: 1.25; }
#partycard #huntstopoptions input { accent-color: var(--cyan); }
#partycard #partycardleave { width: 100%; margin-top: 6px; }
#viewwrap > #partycard.min {
  width: max-content;
  max-width: min(240px, 46vw);
  padding: 6px 8px;
  overflow: hidden;
}
#viewwrap > #partycard.min > :not(.partycardhead) { display: none !important; }
#viewwrap > #partycard.min .partycardhead { margin: 0; padding: 0; border: 0; }
#viewwrap > #partycard.min h3 {
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#partycard button, #matchq.hunt-queue button {
  color: var(--cyan); background: #10202d; border: 1px solid #365564; border-radius: 3px;
  padding: 5px 8px; font: inherit; cursor: pointer;
}
#partycard button:hover:not(:disabled), #matchq.hunt-queue button:hover { background: #123441; border-color: var(--cyan); }
#partycardlock:disabled { cursor: default; opacity: .65; }
#partygroupcontent[hidden], #partycardlock[hidden], #partycardleave[hidden] { display: none !important; }
#partycard .pbar.hp, #partycard .pbar.en { position: relative; height: 12px; }
#partycard .pbar.hp span, #partycard .pbar.en span { position: absolute; inset: 0; text-align: center; font-size: 9px; line-height: 12px; color: white; }
body:not(.freelayout) #chatbox {
  box-sizing: border-box; width: 306px; height: 140px;
  min-width: 240px; min-height: 110px; max-width: calc(100% - 16px);
  left: 8px; right: auto; top: auto;
  bottom: calc(var(--barh) + 14px);
  background: linear-gradient(155deg, rgba(7, 15, 25, .96), rgba(3, 8, 16, .96));
  border: 1px solid var(--edge-cyan); box-shadow: var(--glow-cyan), 0 5px 18px #0009;
}
#chathead { align-items: center; gap: 6px; min-height: 24px; border-bottom: 1px solid #00e5ff38; }
.chat-title { color: var(--cyan); font-size: calc(9px * var(--fontscale, 1)); font-weight: bold; letter-spacing: 1.2px; }
#chatfilters { flex: 1 1 auto; min-width: 0; }
body:not(.freelayout) #viewwrap #mmpanel {
  position: absolute; right: 8px; bottom: 8px; z-index: 5;
  display: flex; width: 154px; height: 166px; flex: none;
  flex-direction: column; gap: 5px; padding: 6px;
  box-sizing: border-box; overflow: hidden; pointer-events: auto;
  background: linear-gradient(155deg, rgba(7, 15, 25, .96), rgba(3, 8, 16, .96));
  border: 1px solid var(--edge-cyan); border-left-color: var(--edge-mag);
  border-radius: 8px; clip-path: none;
  box-shadow: var(--glow-cyan), 0 5px 20px #0009; backdrop-filter: blur(8px);
}
body.freelayout #viewwrap #mmpanel { position: fixed; right: auto; bottom: auto; }
#mmpanel[hidden] { display: none !important; }
#viewwrap #mmpanel h3 {
  display: flex; flex: none; align-items: center; justify-content: space-between; gap: 5px;
  min-height: 16px; margin: 0; padding: 0 1px 4px;
  color: var(--cyan); font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .6px;
  text-transform: none; border-bottom: 1px solid #00e5ff38; white-space: nowrap;
}
#mmtitle { overflow: hidden; text-overflow: ellipsis; }
#mmopen { flex: none; width: 19px; height: 18px; padding: 0; color: var(--cyan); background: #07121c; border: 1px solid #00e5ff70; cursor: pointer; line-height: 1; }
#minimap {
  display: block; flex: 1 1 0; width: 140px; height: 140px; min-height: 0;
  background: radial-gradient(ellipse at 50% 42%, #00e5ff12, transparent 58%), #05070c;
  border: 1px solid #00e5ff45; border-radius: 4px; image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px #ff2ec82b, inset 0 0 18px #000b; cursor: pointer;
}
#minimap:hover { box-shadow: inset 0 0 0 1px var(--cyan), inset 0 0 0 2px #ff2ec838, inset 0 0 18px #000b, 0 0 10px #00e5ff50; }
#bottom {
  display: grid; grid-template-columns: minmax(260px, 2.15fr) minmax(220px, 1.7fr) minmax(106px, .75fr) minmax(170px, 1.25fr) minmax(58px, .42fr) minmax(88px, .58fr) minmax(58px, .55fr);
  gap: 6px; align-items: stretch; box-sizing: border-box; width: 100%;
  height: var(--barh); flex: none; min-width: 0; padding: 8px 6px 7px;
  box-shadow: 0 -1px 0 #00e5ff66, 0 -10px 24px #00e5ff16; overflow: hidden;
}
#bottom > * { min-width: 0; min-height: 0; }
#hotbar, #vitals, #currencies, #hunt, #lojatab, #phonetab, #decktab { width: auto; min-width: 0; height: 100%; box-sizing: border-box; }
#hotbar {
  display: flex; flex-direction: column; gap: 3px; padding: 5px 6px;
  background: var(--glass); border: 1px solid var(--edge-cyan); box-shadow: var(--glow-cyan); backdrop-filter: blur(8px); overflow: hidden;
}
#hotbar .hb-head { display: none; }
#hotbar .hb-grid { display: grid; flex: 1 1 0; min-height: 0; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 5px; }
#hotbar .hot { min-width: 0; min-height: 0; border-color: #00e5ff60; border-radius: 3px; background: #040b14ed; }
#vitals {
  position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 7px;
  padding: 7px; overflow: hidden; background: var(--glass); border: 1px solid var(--edge-cyan);
  box-shadow: var(--glow-cyan); backdrop-filter: blur(8px);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
#hudportrait { display: grid; place-items: center; width: 60px; height: 82px; border: 1px solid #00e5ff52; background: linear-gradient(180deg, #101d2ddd, #060a12f2); box-shadow: inset 0 0 14px #00e5ff1c; }
#hudface { display: none; }
#hudstats { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 1px; }
#charheading { display: flex; align-items: center; gap: 6px; min-height: 19px; margin: 0 0 4px; padding: 0 0 4px; border-bottom: 1px solid #00e5ff4a; color: var(--text); font-size: calc(12px * var(--fontscale, 1)); }
#vitals #charname { color: #e6f2fa; text-shadow: none; }
#vitals #lvltxt { min-width: 0; margin-left: auto; padding: 1px 5px; color: #c9b3fa; background: #282039a8; border-color: #9a6cf480; box-shadow: none; font-size: calc(11px * var(--fontscale, 1)); }
#vitals .hudbarrow { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 5px; min-width: 0; min-height: 18px; margin: 1px 0; }
#vitals .hudbar-label { display: block; overflow: hidden; color: #94a8b8; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .7px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
#vitals .hudbarrow .bar { width: 100%; min-width: 0; height: 10px; margin: 0; border-color: #00e5ff55; border-radius: 1px; }
#vitals .hudbarrow .bar span { padding: 0 3px; color: #e1e7ed; font-size: calc(9px * var(--fontscale, 1)); line-height: 8px; text-align: right; }
#vitals #stamrow.hudbarrow { grid-template-columns: 56px minmax(0, 1fr); gap: 5px; }
#vitals #restbtn { display: none; }
#vitals .stamgain { display: none !important; }
#ammopips { justify-content: flex-end; min-height: 0; margin: 0; }
#statuses { display: flex; gap: 3px; margin-top: 2px; }
#statuses:empty { display: none; }
#currencies {
  display: flex; align-items: center; justify-content: center; padding: 7px;
  background: linear-gradient(155deg, rgba(7, 15, 25, .96), rgba(3, 8, 16, .96));
  border: 1px solid var(--edge-cyan); box-shadow: var(--glow-cyan);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
#statrow { width: 100%; min-width: 0; margin: 0; color: var(--dim); }
#hudwallet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; margin: 0; }
#currencies .hudcurrency { min-width: 0; padding: 3px 4px; background: transparent; border: 0; border-bottom: 1px solid #00e5ff3e; border-radius: 0; clip-path: none; box-shadow: none; }
#currencies .hudcurrency:last-child { border-bottom-color: #ff2ec853; }
#currencies .hudcurrency > span { display: block; overflow: hidden; color: #8fa5b5; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .7px; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
#currencies .hudcurrency strong { display: block; margin-top: 3px; color: var(--cyan); font-size: calc(14px * var(--fontscale, 1)); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 7px #00e5ff55; }
#currencies .hudcurrency.coins strong { color: var(--magenta); text-shadow: 0 0 7px #ff2ec855; }
#currencies .hudcurrency.coins { background: transparent; box-shadow: none; }
#hunt {
  position: relative; display: flex; flex-direction: column; padding: 5px;
  border: 1px solid var(--edge-mag); background: var(--glass2); box-shadow: var(--glow-mag);
  backdrop-filter: blur(8px); overflow: hidden;
}
#huntmain { display: grid; flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 28px minmax(0, 1fr); }
#huntlaunch { display: flex; flex: none; min-height: 0; width: 100%; height: 28px; grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; padding: 0 4px; color: var(--text); text-align: left; letter-spacing: 1.5px; }
#huntlaunch .hunticon { display: block; width: 20px; height: 20px; }
#huntlaunch .huntname { color: var(--magenta); font-size: calc(13px * var(--fontscale, 1)); letter-spacing: 1.8px; }
#huntlaunch .huntband { overflow: hidden; color: #a4b5c1; font-size: calc(9px * var(--fontscale, 1)); text-overflow: ellipsis; white-space: nowrap; }
#huntgroups { grid-column: 2; grid-row: 1; align-self: center; max-width: 92px; margin: 0 2px; padding: 3px 5px; font-size: calc(8px * var(--fontscale, 1)); }
#hunt.steering #huntmain { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 28px minmax(0, 1fr); }
#hunt.steering #huntlaunch { display: flex; height: 28px; min-height: 0; align-items: center; padding: 0 4px; text-align: left; }
#hunt.steering #huntlaunch .hunticon { display: block; }
#hunt.steering #huntlaunch .huntname { font-size: calc(13px * var(--fontscale, 1)); letter-spacing: 1.8px; }
#hunt.steering #huntgroups { display: none; }
#huntsteer { display: flex; grid-column: 1 / -1; grid-row: 2; min-height: 0; overflow: auto; flex-direction: column; gap: 3px; padding: 4px 3px 2px; border-top: 1px solid #ff2ec84a; }
#huntsteer[hidden] { display: none !important; }
#huntsteer .huntdist { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; }
#huntsteer .huntfocus { display: flex; flex-direction: row; align-items: center; }
#huntsteer .huntsegs { flex: 1; min-width: 0; }
#huntsteer > .hint { margin: 0; color: #8298a6; font-size: calc(8px * var(--fontscale, 1)); line-height: 1.2; }
#huntleave { position: absolute; top: 8px; right: 7px; z-index: 2; width: 36px; height: 20px; padding: 0; border: 1px solid var(--edge-mag); background: #19091d; color: var(--magenta); font: inherit; font-size: calc(9px * var(--fontscale, 1)); cursor: pointer; }
#huntleave[hidden] { display: none !important; }
/* Fechado, o flip sai da barra da Caça e vira o botão que abre de novo.
   placeChatFlip tira o nó de #hunt: o backdrop-filter de lá segura o fixed
   e o overflow corta o chip. Aberto, some: o × da própria janela fecha. */
#chatflip.open { display: none; }
#chatflip:not(.open) {
  position: fixed; left: 8px; bottom: calc(var(--barh) + 14px); z-index: 7;
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; height: 28px; padding: 0 10px; flex: none;
  zoom: var(--ui, 1);
  border: 1px solid var(--edge-cyan); border-left: 1px solid var(--edge-cyan);
  background: rgba(7, 16, 28, .94); color: var(--cyan);
  box-shadow: var(--glow-cyan); font: inherit; letter-spacing: 1px;
}
#chatflip:not(.open) .flipphone { display: none; }
#chatflip:not(.open) .chatflip-label { font-size: calc(11px * var(--fontscale, 1)); }
#lojatab {
  position: relative; display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px; background: var(--glass2); border: 1px solid var(--edge-mag); color: var(--magenta);
  box-shadow: var(--glow-mag), inset 0 0 14px #0008; backdrop-filter: blur(8px);
}
#lojatab .lojachest { width: min(48px, 70%); height: auto; max-height: 68%; }
#lojatab .lojalbl { color: var(--magenta); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 1.3px; }
#phonetab {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 6px;
  padding: 5px; background: var(--glass2); border: 1px solid var(--edge-mag);
  box-shadow: var(--glow-mag), inset 0 0 18px #0009; backdrop-filter: blur(8px); cursor: pointer; overflow: hidden;
}
#tabface { width: 52px; height: 72px; min-height: 0; flex: none; border: 1px solid #00e5ff55; background: #07090e; }
#tabinfo { display: flex; min-width: 0; flex-direction: column; gap: 2px; text-align: left; }
#tabname { color: #ddecf5; font-size: calc(10px * var(--fontscale, 1)); }
#tabname b { color: var(--cyan); }
#tabname i { display: block; color: #8ca2b0; font-size: calc(8px * var(--fontscale, 1)); font-style: normal; letter-spacing: 1px; }
#tabrole, #tabmood { display: block; overflow: hidden; color: #84bd9f; font-size: calc(8px * var(--fontscale, 1)); text-overflow: ellipsis; }
#decktab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 3px; border: 1px solid var(--edge-cyan); background: var(--glass);
  box-shadow: var(--glow-cyan); color: var(--cyan); cursor: pointer; font: inherit;
  font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .6px; text-transform: uppercase;
}
#decktab::before { content: '\25a3'; font-size: 26px; line-height: 1; text-shadow: 0 0 9px #00e5ff70; }
#decktab.on { border-color: var(--magenta); color: var(--magenta); box-shadow: var(--glow-mag); }
@media (max-width: 1050px) {
  :root { --barh: clamp(146px, 20vh, 190px); }
  #bottom {
    grid-template-columns: minmax(230px, 2fr) minmax(170px, 1.5fr) minmax(78px, .7fr) minmax(132px, 1.1fr) 44px 66px 48px;
    gap: 4px; padding: 5px 4px;
  }
  #viewwrap #mmpanel { width: 126px; height: 138px; padding: 5px; }
  #viewwrap #mmpanel h3 { min-height: 14px; }
  #minimap { width: 112px; height: 112px; }
  #vitals { grid-template-columns: 42px minmax(0, 1fr); gap: 4px; padding: 4px; }
  #hudportrait { width: 42px; height: 62px; }
  #hudface { width: 38px; height: 56px; }
  #vitals .hudbarrow { grid-template-columns: 40px minmax(0, 1fr); gap: 3px; min-height: 15px; }
  #vitals #stamrow.hudbarrow { grid-template-columns: 40px minmax(0, 1fr); gap: 3px; }
  #vitals .hudbar-label { font-size: 8px; }
  #vitals .hudbarrow .bar { height: 8px; }
  #vitals .hudbarrow .bar span { font-size: 7px; line-height: 7px; }
  #currencies { padding: 4px; }
  #currencies .hudcurrency { padding: 2px; }
  #currencies .hudcurrency strong { font-size: 11px; }
  #lojatab .lojachest { width: 30px; }
  #lojatab .lojalbl { display: none; }
  #phonetab { grid-template-columns: 38px minmax(0,1fr); gap: 3px; padding: 3px; }
  #tabface { width: 38px; height: 54px; }
  #tabrole, #tabmood { font-size: 7px; }
  #decktab { font-size: 7px; }
  #decktab::before { font-size: 19px; }
  #huntrun { max-width: 62%; padding: 5px 7px 6px; }
  #huntrun .hrstats { gap: 4px; }
  #huntrun .hrmetric > b { font-size: 14px; }
  #huntrun .hrmetric.hr-xph > b { font-size: 16px; }
  #partycard { width: min(350px, 38%); }
}
@media (max-width: 800px) {
  #bottom { overflow-x: auto; }
  #huntrun { width: calc(100% - 16px); max-width: none; }
  #partycard { top: 114px; right: 8px; width: min(350px, calc(100% - 16px)); max-width: none; }
}
@media (max-width: 560px) {
  #huntrun { left: 5px; top: 5px; width: calc(100% - 10px); max-width: none; }
  #huntrun .hrtop { gap: 4px; }
  #huntrun .hrscreen { flex: 1 1 24px; width: 24px; margin: 0 1px; }
  #huntrun .hrplayers > span:not(.hronline-dot):not(.hrsignal) { display: none; }
  #huntrun .hrsignal { display: none; }
  #huntrun .hrstats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  #huntrun .hrmetric > span { font-size: 7px; }
  #huntrun .hrmetric > b { font-size: 11px; }
  #huntrun .hrmetric.hr-xph > b { font-size: 13px; }
  #partycard { top: 118px; right: 5px; width: min(300px, calc(100% - 10px)); max-width: none; }
  #viewwrap #mmpanel { width: 108px; height: 120px; right: 5px; bottom: 5px; }
  #viewwrap #mmpanel h3 { font-size: 8px; }
  #minimap { width: 94px; height: 94px; }
  body:not(.freelayout) #chatbox { left: 5px; width: min(306px, calc(100% - 10px)); height: 132px; bottom: calc(var(--barh) + 10px); }
  #bottom { display: flex; gap: 5px; overflow-x: auto; padding: 5px; }
  #hotbar { flex: 0 0 280px; }
  #vitals { flex: 0 0 170px; }
  #currencies { flex: 0 0 80px; }
  #hunt { flex: 0 0 140px; }
  #lojatab { flex: 0 0 42px; }
  #phonetab { flex: 0 0 90px; }
  #decktab { flex: 0 0 50px; }
}

/* DiffUI A2.2: give every always-visible HUD module a clear icon and its own signal color. */
#huntrun .hrmetric > span {
  display: flex; min-width: 0; align-items: center; gap: 4px;
  color: #9bafbd; letter-spacing: .8px;
}
#huntrun .hrmetric > span > i { min-width: 0; overflow: hidden; font-style: normal; text-overflow: ellipsis; }
#huntrun .hricon { display: block; flex: 0 0 13px; width: 13px; height: 13px; fill: none; stroke: var(--hr-tone); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hr-tone), transparent 38%)); }
#huntrun .hrmetric:not(.hrlevel)::after { height: 3px; margin-top: 2px; opacity: .85; }
#huntrun .hrlevelbar { border: 1px solid #47cfff66; background: repeating-linear-gradient(90deg, #47cfff38 0 6px, transparent 6px 9px); }
#huntrun .hrlevelbar i { background: repeating-linear-gradient(90deg, #47cfff 0 6px, #b6f4ff 6px 7px, transparent 7px 9px); }
#huntrun .hr-gold .hricon { fill: #f2bd4f16; }
#huntrun .hr-dmg .hricon, #huntrun .hr-dps .hricon { stroke-width: 2; }

#hotbar {
  position: relative; padding: 5px 6px 6px;
  background: linear-gradient(150deg, #091522f5, #050913f7 72%);
  border-color: #00e5ffb0;
  box-shadow: 0 0 0 1px #ff2ec82b, 0 0 17px #00e5ff28, inset 0 1px 0 #a3f5ff24;
}
#hotbar .hb-head { display: flex; min-height: 17px; align-items: center; gap: 6px; padding: 0 1px 4px; border-bottom: 1px solid #00e5ff43; }
#hotbar .hb-mark { display: block; flex: 0 0 13px; width: 13px; height: 13px; fill: none; stroke: #53efff; stroke-width: 1.3; filter: drop-shadow(0 0 4px #00e5ff88); }
#hotbar .hb-title { overflow: hidden; color: #c4eef5; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: 1.1px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
#hotbar .hb-priority { margin-left: auto; padding: 1px 5px; color: #ff87df; border: 1px solid #ff2ec85c; background: #ff2ec812; font-size: calc(8px * var(--fontscale, 1)); line-height: 1.25; letter-spacing: .6px; }
#hotbar .hb-grid { gap: 4px; }
#hotbar .hot {
  position: relative; overflow: hidden; border: 1px solid #18b6ca82; border-radius: 2px;
  background: linear-gradient(145deg, #0d1c2af5, #050a13fa 70%);
  box-shadow: inset 0 0 11px #00b8d20d, 0 2px 4px #0008;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
#hotbar .hot:not(.free):hover { z-index: 2; transform: translateY(-1px); border-color: #90f6ff; background: linear-gradient(145deg, #183243, #080d19); box-shadow: inset 0 0 12px #00e5ff18, 0 0 10px #00e5ff44; }
#hotbar .hot::before { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: linear-gradient(225deg, #ff2ec86a 0 48%, transparent 50%); pointer-events: none; }
#hotbar .hot .key { top: 2px; left: 3px; z-index: 3; min-width: 12px; padding: 1px 2px; color: #9ff8ff; border: 1px solid #00e5ff52; background: #06101ddd; font-size: calc(8px * var(--fontscale, 1)); line-height: 1; text-align: center; }
#hotbar .hot .glyph { filter: drop-shadow(0 2px 5px #000b); }
#hotbar .hot .qty { padding: 1px 3px; border: 1px solid #ff2ec863; background: #160a19e8; color: #ff81db; }
#hotbar .hot.free { border-color: #48717d67; background: repeating-linear-gradient(135deg, #0a111a, #0a111a 5px, #0c1721 5px, #0c1721 10px); opacity: .78; }
#hotbar .hot.free::after { content: '+'; position: absolute; right: 5px; bottom: 1px; color: #57909a83; font-size: 15px; line-height: 1; }
#hotbar .hot.free::before { background: linear-gradient(225deg, #00e5ff2b 0 48%, transparent 50%); }

#vitals {
  background: linear-gradient(145deg, #0b1725f5, #050912f8 74%);
  border-color: #00e5ff99; border-right-color: #ff2ec872;
  box-shadow: 0 0 0 1px #ff2ec81a, 0 0 16px #00e5ff24, inset 0 1px 0 #9ffaff1d;
}
#vitals::before, #currencies::before, #hunt::before, #lojatab::before, #phonetab::before, #decktab::before {
  content: ''; position: absolute; top: 0; left: 8px; width: 35%; height: 2px;
  background: linear-gradient(90deg, #00e5ff, #ff2ec8); box-shadow: 0 0 8px #00e5ff70; pointer-events: none;
}
#vitals::before, #currencies::before { z-index: 2; }
#hudportrait { border-color: #00e5ff85; background: radial-gradient(ellipse at 50% 25%, #123e4d, #08111c 68%); box-shadow: inset 0 0 17px #00e5ff25, 0 0 8px #00e5ff17; }
#vitals .hudbar-label { display: flex; min-width: 0; align-items: center; gap: 4px; color: #b2c6d3; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .65px; }
#vitals .hudbar-label svg { display: block; flex: 0 0 12px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#vitals .hudlabeltext { min-width: 0; overflow: hidden; font-style: normal; text-overflow: ellipsis; }
#vitals #hpbarlabel { color: #ff7182; }
#vitals #enbarlabel { color: #51eafa; }
#vitals #shbarlabel { color: #b8c7ff; }
#vitals #stambarlabel { color: #86e2a5; }
#vitals #xpbarlabel { color: #e87de2; }
#vitals .hudbarrow .bar { border-color: #4b6b7b9c; border-radius: 2px; background: #03070d; }
#vitals #hpbar { border-color: #ff596e9c; box-shadow: inset 0 0 8px #000d, 0 0 5px #ff405021; }
#vitals #enbar { border-color: #00d9eb8a; }
#vitals #shbar { border-color: #899cff88; }
#vitals #stambar { border-color: #6ccd8a88; }
#vitals #xpbar { border-color: #de5dd383; }
#vitals #hpbar > div { background-image: linear-gradient(180deg, #ff8591, #ed2d50 75%); }
#vitals #enbar > div { background-image: linear-gradient(180deg, #71f6ff, #00b6d1 75%); }
#vitals #shbar > div { background-image: linear-gradient(180deg, #d4dcff, #778bf3 75%); }
#vitals #stambar > div { background-image: linear-gradient(180deg, #adf0b5, #49bb71 75%); }
#vitals #xpbar > div { background-image: linear-gradient(180deg, #ff9aeb, #c843bb 75%); }
#vitals #hpbar > div, #vitals #enbar > div, #vitals #shbar > div, #vitals #stambar > div, #vitals #xpbar > div {
  background-image: repeating-linear-gradient(90deg, transparent 0 7px, #0005 7px 8px), linear-gradient(180deg, currentColor, currentColor);
}
#vitals #hpbar > div { color: #ff3e5f; }
#vitals #enbar > div { color: #00b6d1; }
#vitals #shbar > div { color: #778bf3; }
#vitals #stambar > div { color: #49bb71; }
#vitals #xpbar > div { color: #c843bb; }
#vitals .hudbarrow .bar span { color: #f4f7ff; font-size: calc(8px * var(--fontscale, 1)); text-shadow: 0 1px 2px #000, 0 0 4px #000; }

#currencies {
  position: relative; border-color: #d8a445a8; border-right-color: #ff2ec887;
  background: linear-gradient(150deg, #1a1720f5, #090c15fa 75%);
  box-shadow: 0 0 0 1px #ff2ec81e, 0 0 13px #f3b84420, inset 0 1px 0 #ffd97522;
}
#currencies::before { background: linear-gradient(90deg, #ffd05e, #ff2ec8); box-shadow: 0 0 8px #ffd05e77; }
#hudwallet { gap: 6px; }
#currencies .hudcurrency {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto;
  align-items: center; column-gap: 5px; min-height: 42px; padding: 4px 3px;
  border: 1px solid #efbb534f; border-radius: 3px; background: linear-gradient(100deg, #efbb5314, #efbb5305);
}
#currencies .hudcurrency:last-child { border-color: #ff2ec85e; background: linear-gradient(100deg, #ff2ec816, #ff2ec804); }
#currencies .hudcurrency > svg { grid-column: 1; grid-row: 1 / 3; display: block; width: 22px; height: 22px; fill: none; stroke: #ffd166; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ffba4166); }
#currencies .hudcurrency.coins > svg { stroke: #ff6ed5; filter: drop-shadow(0 0 4px #ff2ec866); }
#currencies .hudcurrency > span { grid-column: 2; grid-row: 1; color: #e4c984; font-size: calc(8px * var(--fontscale, 1)); letter-spacing: .5px; }
#currencies .hudcurrency.coins > span { color: #f28bdc; }
#currencies .hudcurrency strong { grid-column: 2; grid-row: 2; margin-top: 1px; color: #ffd166; font-size: calc(13px * var(--fontscale, 1)); line-height: 1.1; text-shadow: 0 0 8px #ffb92d55; }
#currencies .hudcurrency.coins strong { color: #ff70d5; text-shadow: 0 0 8px #ff2ec855; }

#hunt { position: relative; border-color: #ff2ec8a6; background: linear-gradient(145deg, #1a0e20f5, #090a14fa 75%); box-shadow: 0 0 0 1px #00e5ff20, 0 0 16px #ff2ec824, inset 0 1px 0 #ff97e322; }
#hunt::before { background: linear-gradient(90deg, #ff2ec8, #ffb44a); box-shadow: 0 0 8px #ff2ec877; }
#huntlaunch .hunticon { color: #ff66d5; filter: drop-shadow(0 0 6px #ff2ec87a); }
#huntlaunch .huntname { color: #ff65d2; text-shadow: 0 0 8px #ff2ec844; }
#huntlaunch:hover .hunticon { color: #8df6ff; }
#huntgroups { display: grid; place-items: center; width: 26px; max-width: 26px; height: 23px; padding: 2px; color: #a7eaf1; border-color: #00e5ff70; background: linear-gradient(145deg, #0c202b, #08111d); box-shadow: inset 0 0 8px #00e5ff12; }
#huntgroups svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
#huntgroups span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
#huntgroups:hover { color: #ff8bdd; border-color: #ff2ec8a6; box-shadow: 0 0 8px #ff2ec82a; }
#huntsteer { border-top-color: #ff2ec875; }
#huntleave { background: #220817; box-shadow: 0 0 8px #ff2ec82e; }

#lojatab, #phonetab, #decktab { position: relative; overflow: hidden; }
#lojatab { background: radial-gradient(ellipse at 50% 40%, #4a2a173d, transparent 65%), linear-gradient(150deg, #1e111bf5, #090a14fa); border-color: #ff71d49c; box-shadow: 0 0 0 1px #00e5ff1b, 0 0 15px #ff2ec82c, inset 0 1px 0 #ffb85b28; }
#lojatab::before { background: linear-gradient(90deg, #ffd166, #ff2ec8); }
#lojatab .lojachest { filter: drop-shadow(0 2px 6px #ff9e32a6); }
#lojatab .lojalbl { color: #ff8bdd; font-weight: 700; text-shadow: 0 0 8px #ff2ec866; }
#phonetab { background: linear-gradient(145deg, #17101ff5, #080b15fa); border-color: #ff2ec889; box-shadow: 0 0 0 1px #00e5ff1b, 0 0 14px #ff2ec821, inset 0 1px 0 #ff9ae21e; }
#phonetab::before { background: linear-gradient(90deg, #ff2ec8, #00e5ff); }
#tabface { border-color: #00e5ff8a; background: radial-gradient(ellipse at 50% 20%, #16404b, #080c15 70%); box-shadow: inset 0 0 12px #00e5ff23; }
#tabname b { color: #6df3ff; text-shadow: 0 0 7px #00e5ff4c; }
#tabname i { color: #ff8bdd; }
#tabrole, #tabmood { color: #9ae3b5; }
#decktab { border-color: #00e5ff9c; background: linear-gradient(145deg, #0c1b28f5, #070a13fa); box-shadow: 0 0 0 1px #ff2ec820, 0 0 13px #00e5ff24, inset 0 1px 0 #97fbff20; }
#decktab::before { display: none; }
#decktab > svg { display: block; width: 28px; height: 28px; fill: #00e5ff0c; stroke: #69efff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #00e5ff7a); }
#decktab > span { font-size: calc(8px * var(--fontscale, 1)); }
#decktab.on { border-color: #ff70d8; background: linear-gradient(145deg, #251129, #0c0b17); }
#decktab.on > svg { stroke: #ff70d8; filter: drop-shadow(0 0 5px #ff2ec87a); }

#partycard { border-top-color: #ff2ec8a6; background: linear-gradient(145deg, #101421f7, #080a13fa); }
#partycard h3::before { content: '☠'; display: inline-block; margin-right: 7px; color: #ff69d3; font-size: 15px; text-shadow: 0 0 7px #ff2ec870; vertical-align: -1px; }
#partycard .partycardhead { border-bottom-color: #ff2ec84d; }
#partycard button { background: linear-gradient(135deg, #101e2a, #0a101c); }
#mmpanel { border-top-color: #ff2ec883; background: linear-gradient(145deg, #081722f5, #070a13fa); }
#mmpanel h3::before { content: '⌖'; display: inline-block; margin-right: 5px; color: #ff75d6; font-size: 14px; vertical-align: -1px; }
#mmopen { border-color: #00e5ff80; background: #081723; box-shadow: 0 0 7px #00e5ff26; }
body:not(.freelayout) #chatbox { border-right-color: #ff2ec887; background: linear-gradient(145deg, #0d1723f7, #070a13fa); box-shadow: 0 0 0 1px #ff2ec81e, 0 0 15px #00e5ff23, 0 5px 18px #0009; }
#chathead { border-bottom-color: #00e5ff50; }
#chathead .chat-title::before { content: '◉'; margin-right: 6px; color: #66efff; text-shadow: 0 0 7px #00e5ff75; }

@media (max-width: 560px) {
  #hotbar .hb-head { display: none; }
  #currencies .hudcurrency { min-height: 0; }
  #currencies .hudcurrency > svg { width: 17px; height: 17px; }
  #decktab > svg { width: 22px; height: 22px; }
}
@media (min-width: 561px) and (max-width: 1050px) {
  #bottom { grid-template-columns: minmax(220px, 2fr) minmax(164px, 1.5fr) minmax(90px, .8fr) minmax(122px, 1.05fr) 44px 66px 48px; }
  #huntlaunch .huntband { display: none; }
  #currencies .hudcurrency.coins > span { font-size: 7px; letter-spacing: 0; }
}

/* B-BOP / Loja / deck windows: one frame language, with cyan help and warm store accents. */
#phonetab {
  background: linear-gradient(145deg, #111a2af5 0%, #0b101dfb 62%, #180d20f5 100%);
  border-color: #8661a5; box-shadow: 0 8px 20px #0008, inset 0 1px #b4d8ff18;
}
#phonetab::before { left: 8px; width: 62%; background: linear-gradient(90deg, #6fefff, #ad72ef, #ff60ce); box-shadow: 0 0 7px #9d75fa50; }
#phonetab:hover, #phonetab.on { border-color: #8f83d3; box-shadow: 0 8px 24px #0009, inset 0 0 0 1px #b47aff22; }
#tabface {
  border-color: #586d9e; background: radial-gradient(ellipse at 50% 25%, #193b58 0%, #101629 55%, #090d17 100%);
  box-shadow: inset 0 0 22px #5269c21e, 0 0 0 1px #e077f324;
}
#tabface::before, #tabface::after { content: ''; position: absolute; inset: 4px; pointer-events: none; }
#tabface::before { z-index: 2; border: 1px solid #77dff224; box-shadow: inset 0 0 14px #59c6ff10; }
#tabface::after { z-index: 3; inset: 0; opacity: .2; background: repeating-linear-gradient(0deg, transparent 0 3px, #b3e7ff12 3px 4px); }
#pixie { position: relative; z-index: 1; filter: drop-shadow(0 3px 5px #020610aa); }
#tabclock { z-index: 4; padding: 2px 4px; border: 1px solid #76dbef48; background: #09101cdb; color: #a5f2fa; }
#tabname { color: #e9e4ff; font-size: calc(11px * var(--fontscale, 1)); font-weight: 700; letter-spacing: .7px; }
#tabname b { color: #8ceefa; text-shadow: 0 0 8px #58c4f25b; }
#tabname i { color: #d690fa; font-weight: 700; }
#tabrole { border-color: #6bd8e47a; background: linear-gradient(90deg, #102d3c, #21152f); color: #9ff5f1; }
#tabrole::before { color: #ff7ad5; animation-duration: 2.6s; }
#phonetab:hover #tabrole, #phonetab.on #tabrole { border-color: #9a86ee; background: #281c3b; }
#tabmood { display: flex; align-items: center; gap: 5px; color: #a4dfbb; }
#tabmood::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #61e6ad; box-shadow: 0 0 6px #61e6ad80; }
#tabmood.alert { color: #ff8bdc; }
#tabmood.alert::before { background: #ff66ca; box-shadow: 0 0 7px #ff66ca; }
#tabmood.scan { color: #8eefff; }
#tabmood.scan::before { background: #61e6ff; box-shadow: 0 0 7px #61e6ff; }
#tabmood.warn { color: #ff8790; }
#tabmood.warn::before { background: #ff5268; box-shadow: 0 0 7px #ff5268; }

#lojatab {
  background: radial-gradient(ellipse at 50% 40%, #c8872c26, transparent 70%), linear-gradient(145deg, #1d1720, #0d1019 72%);
  border-color: #b88946; box-shadow: 0 8px 18px #0008, inset 0 1px #ffdc9224;
  color: #ffd887;
}
#lojatab::before { left: 10%; width: 80%; background: linear-gradient(90deg, #ffc95c, #ff72bd); box-shadow: 0 0 8px #ffc95c60; }
#lojatab:hover { border-color: #ffd16c; color: #fff0bf; box-shadow: 0 0 0 1px #ffc95c30, 0 8px 20px #0009, inset 0 0 15px #ffcb3517; }
#lojatab .lojachest { filter: drop-shadow(0 3px 7px #f0a52b80) drop-shadow(0 0 3px #ff70b352); }
#lojatab .lojalbl { color: #ffd881; font-weight: 800; letter-spacing: 1.5px; text-shadow: 0 1px 4px #000, 0 0 7px #f3ad394b; }

.appmodal {
  max-height: min(70vh, 640px, calc(100dvh - var(--barh, 158px) - var(--window-top, 56px) - 20px));
  padding: 0 8px 8px; border: 1px solid #3d566c;
  background: linear-gradient(145deg, #111a27 0%, #0b101a 58%, #090b13 100%);
  box-shadow: 0 16px 42px #000c, inset 0 1px #c0efff12;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.appmodal.wide { max-height: min(76vh, 720px, calc(100dvh - var(--barh, 158px) - var(--window-top, 56px) - 20px)); }
.appmodal.wide[data-app="wiki"] { max-height: min(80vh, 760px, calc(100dvh - var(--barh, 158px) - var(--window-top, 56px) - 20px)); }
.appmodal.front { border-color: #65bed0; box-shadow: 0 0 0 1px #000a, 0 18px 48px #000d, 0 0 16px #00e5ff24, inset 0 1px #bdf8ff20; }
.appmodal::before { content: ''; position: absolute; z-index: 5; top: 0; left: 10px; width: 100px; height: 2px; background: linear-gradient(90deg, #00e5ff, #c074e7, transparent); pointer-events: none; }
.appmodal .winbar {
  position: relative; min-height: 36px; margin: 0 -8px 0; padding: 6px 9px 7px;
  border-bottom: 1px solid #00e5ff36; background: linear-gradient(100deg, #111d2a, #11111d 75%);
  color: #aebbc9; letter-spacing: 1.2px;
}
.appmodal .wglyph { display: inline-flex; width: 20px; height: 20px; justify-content: center; color: #79eaf2; text-shadow: 0 0 8px #00e5ff55; }
.appmodal .wtitle { color: #b9e9ef; font-weight: 700; letter-spacing: 1.25px; }
.appmodal.front .wtitle { color: #effcff; text-shadow: 0 0 8px #00e5ff40; }
.appmodal .winbar button { width: 23px; height: 22px; color: #aec2d0; border-color: #344b5c; background: #0a121d; }
.appmodal .winbar button:hover { color: #8bf4fa; border-color: #59dbe4; background: #102732; }
.appmodal .winx { color: #ff8bb4; border-color: #70445c; background: #251321; }
.appmodal .winx:hover { color: white; border-color: #ff6988; background: #aa3859; box-shadow: 0 0 8px #fa4e7970; }
.appmodal .winhint { margin: 0 -1px; padding: 5px 8px; border: 0; border-bottom: 1px solid #263b4c; border-left: 2px solid #9d67d9; background: #0b111c; color: #94a8b8; }
.appmodal .winbody { padding: 0; border: 1px solid #273b4b; background: linear-gradient(145deg, #0c1420, #080d16 70%); box-shadow: inset 0 1px #c1eaff08; }
.appmodal .apphead { color: #80e9f1; border-bottom-color: #345262; }

.appmodal[data-app="commerce"] {
  border-color: #78506f;
  background: linear-gradient(145deg, #171221 0%, #0e101a 58%, #090b13 100%);
}
.appmodal[data-app="commerce"]::before { width: 150px; background: linear-gradient(90deg, #ffc95c, #ff63c7, transparent); }
.appmodal.front[data-app="commerce"] { border-color: #cf8ec0; box-shadow: 0 0 0 1px #000a, 0 18px 48px #000d, 0 0 18px #e64cad27, inset 0 1px #ffe2f21a; }
.appmodal[data-app="commerce"] .winbar { border-bottom-color: #cb58a34a; background: linear-gradient(100deg, #211626, #10121b 78%); }
.appmodal[data-app="commerce"] .wglyph { color: #ffd272; text-shadow: 0 0 7px #ffc64b4b; }
.appmodal[data-app="commerce"] .wtitle { color: #ffc9e9; }
.appmodal[data-app="commerce"] .winhint { border-bottom-color: #513047; border-left-color: #e378b6; }
.appmodal.wide[data-app="commerce"] { max-height: min(86vh, 860px, calc(100dvh - var(--barh, 158px) - var(--window-top, 56px) - 20px)); }

#phonebody { border: 1px solid #526985; background: linear-gradient(145deg, #111a28, #0b101a 60%, #100d1a); box-shadow: 0 18px 48px #000b, inset 0 1px #b3e9ff18; }
#phonebar { border-bottom: 1px solid #38495e; }
#phonecarrier { color: #dc95eb; }
#phonescreen { border-color: #354a60; background: radial-gradient(ellipse at 50% 0, #162a3d, #080d16 70%); box-shadow: inset 0 0 18px #00e5ff0d; }
#homebar { border-bottom-color: #374b5d; background: linear-gradient(90deg, #10202d, #14111e); }
#hometitle { color: #94f2f1; }
#deckfeed { border-top-color: #3a4c5d; }
#deckfeed .dhead { color: #a779dc; }
#deckfeed .dwho { color: #ecf4f6; }
#deckfeed .dsub { color: #a8b7c2; }
#phonenav { border-top: 1px solid #354558; margin-top: 6px; }
#phonenav button { border-color: #3e576a; background: #0d1824; color: #8ceff1; }
#phonebrand { color: #a977d2; }

#shopbody {
  background: radial-gradient(800px 260px at 84% -5%, #c13b9c18, transparent 68%), linear-gradient(150deg, #0b1018, #111522 48%, #090c14);
}
#shopbody .shop-eyebrow, #shopbody .shop-kicker { color: #f087ce; }
#shopbody .shop-balance {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 8px; min-width: 212px; padding: 12px 14px; border: 1px solid #a7834a;
  border-radius: 3px; background: linear-gradient(135deg, #211b1c, #111620 80%); box-shadow: inset 0 1px #ffdf8b16;
}
#shopbody .shop-balance-icon { grid-column: 1; grid-row: 1 / 3; display: block; width: 32px; height: 32px; align-self: center; fill: #ffd16610; stroke: #ffd166; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #f2b83b55); }
#shopbody .shop-balance > span:first-of-type { grid-column: 2; grid-row: 1; }
#shopbody .shop-balance > strong { grid-column: 2; grid-row: 2; }
#shopbody .shop-balance-split, #shopbody .shop-balance-link { grid-column: 1 / -1; }
#shopbody .shop-balance strong { color: #83eaf1; }
#shopbody .shop-balance small { color: #ffd166; }
#shopbody .shop-balance-split b { color: #ffca67; }
#shopbody .shop-membership { border-color: #5d6e55; border-radius: 3px; background: linear-gradient(105deg, #17281f, #111921 67%); box-shadow: inset 3px 0 #69dba1; }
#shopbody .shop-member-title { color: #f4f7f5; }
#shopbody .shop-live.is-live { color: #b4f4ce; border-color: #4fa77b; background: #2aa26620; }
#shopbody .shop-main-tabs { border-bottom-color: #344256; }
#shopbody .shop-main-tabs button.on { border-color: #a858a0; background: linear-gradient(135deg, #4a2149, #21203b); box-shadow: inset 0 -2px #ff76cf, 0 4px 12px #d1409720; }
#shopbody .shop-hero { border-color: #895089; border-radius: 3px; background: linear-gradient(130deg, #171123, #10131d); }
#shopbody .shop-hero-copy { background: linear-gradient(90deg, #090d16f5 0%, #0b0d16d9 69%, transparent); }
#shopbody .shop-hero-cta { color: #210e24 !important; border-color: #ff9bde !important; background: linear-gradient(115deg, #f28acb, #c483ef) !important; box-shadow: 0 0 14px #d554b52e; }
#shopbody .shop-card { border-radius: 3px; box-shadow: 0 10px 23px #0006; }
#shopbody .shop-card-pack { border-color: #8956b0; background: linear-gradient(145deg, #251a35, #10141e); }
#shopbody .shop-card-vip { border-color: #9a7842; background: linear-gradient(145deg, #292418, #15161a); }
#shopbody .shop-card-pc { border-color: #387a85; background: linear-gradient(145deg, #14282e, #10141c); }
#shopbody .shop-card.featured { box-shadow: inset 0 2px #d67ced66, 0 12px 26px #0007; }
#shopbody .shop-card-pack .shop-badge { color: #dc9df5; }
#shopbody .shop-card-vip .shop-badge { color: #f0cc7c; }
#shopbody .shop-card-pc .shop-badge { color: #82eaf0; }
#shopbody .shop-card-pack .shop-price { color: #e6a7f2; }
#shopbody .shop-card-vip .shop-price { color: #ffe0a2; }
#shopbody .shop-card-pc .shop-price { color: #a2f0f3; }
#shopbody .shop-card-pack .shop-buy { color: #fff0fc; border-color: #a961c4; background: linear-gradient(110deg, #57276a, #773869); }
#shopbody .shop-card-pack .shop-buy:hover:not(:disabled) { border-color: #f2a1eb; background: #71367e; }
#shopbody .shop-card-vip .shop-buy { color: #231b0e; border-color: #f0ce83; background: linear-gradient(110deg, #ddb565, #f1d38c); }
#shopbody .shop-card-pc .shop-buy { color: #07191d; border-color: #76e3e9; background: linear-gradient(110deg, #54b8c6, #83e6dc); }
#shopbody .shop-review { border-color: #a25ca0; border-radius: 3px; background: linear-gradient(110deg, #29172b, #131923); box-shadow: inset 3px 0 #ef75c8; }
#shopbody .shop-review-actions .primary { color: #1c1022; border-color: #f39bdf; background: linear-gradient(110deg, #e77ec8, #bb83ea); }
#shopbody .shop-footer { border-top-color: #384658; }
#shopbody .shop-footer button { color: #a6f2ee; border-color: #437e83; background: #102b31; }
#shopbody button:focus-visible, #shopbody select:focus-visible { outline-color: #67e8ed; }

@media (max-width: 760px) {
  .appmodal.wide[data-app="commerce"] { max-height: calc(100dvh - var(--barh, 156px) - 40px); }
  #shopbody .shop-balance { min-width: 0; }
}
@media (min-width: 561px) and (max-width: 900px) {
  #bottom { grid-template-columns: minmax(212px, 2fr) minmax(156px, 1.5fr) minmax(90px, .8fr) minmax(120px, 1.05fr) 50px 76px 48px; }
  #lojatab .lojachest { width: 31px; height: 31px; max-height: none; }
  #lojatab .lojalbl { display: block; font-size: 7px; letter-spacing: .7px; }
  #phonetab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; }
  #tabface { flex: 0 0 74px; width: 48px; height: 74px; }
  #tabinfo { display: flex; width: 100%; align-items: center; gap: 1px; text-align: center; }
  #tabname { overflow: hidden; width: 100%; font-size: 8px; line-height: 1.1; white-space: nowrap; }
  #tabname i { display: none; }
  #tabrole { align-self: center; max-width: 100%; overflow: hidden; padding: 0 3px; font-size: 6px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
  #tabmood { display: none; }
}
@media (max-width: 600px) {
  .appmodal[data-app="commerce"] { top: 16px !important; max-height: calc(100dvh - var(--barh, 156px) - 40px); }
  .appmodal.wide[data-app="commerce"] { min-height: min(280px, calc(100dvh - var(--barh, 156px) - 40px)); }
  #lojatab .lojachest { width: 32px; height: 32px; }
  #lojatab .lojalbl { display: block; font-size: 8px; letter-spacing: .8px; }
  #phonetab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px; }
  #tabface { flex: 0 0 39px; width: 35px; height: 39px; }
  #tabinfo { display: flex; width: 100%; align-items: center; text-align: center; }
  #tabname { overflow: hidden; width: 100%; font-size: 7px; line-height: 1; white-space: nowrap; }
  #tabname i, #tabrole, #tabmood { display: none; }
}

/* Reference pass: cyan chrome, magenta signal, and a compact B-BOP status card. */
#bottom {
  grid-template-columns: minmax(260px, 2.15fr) minmax(220px, 1.7fr) minmax(106px, .75fr)
    minmax(170px, 1.25fr) minmax(58px, .42fr) minmax(120px, .78fr) minmax(58px, .55fr);
}
#lojatab {
  color: #65edff; border-color: #21cce7;
  background: linear-gradient(155deg, #0d1d31, #080d1a 76%);
  box-shadow: 0 0 0 1px #ed4bda38, 0 0 13px #00dfff20, inset 0 1px #b2f7ff20;
}
#lojatab::before { left: 9px; width: 72%; background: linear-gradient(90deg, #36e7ff, #b450eb, #ff55ce); box-shadow: 0 0 8px #00dfff66; }
#lojatab:hover { color: #fff; border-color: #91f4ff; box-shadow: 0 0 0 1px #ff55ce44, 0 0 17px #00e5ff55, inset 0 0 12px #00e5ff16; }
#lojatab .lojachest { display: block; width: min(31px, 76%); height: auto; max-height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #00dfff75); }
#lojatab .lojalbl { color: #abf6ff; font-size: calc(8px * var(--fontscale, 1)); font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
#lojatab:hover .lojalbl { color: #fff; }

#phonetab {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 1fr;
  align-items: center; gap: 6px; flex: 0 0 124px; width: 124px; padding: 5px;
  background: linear-gradient(150deg, #0c1a30, #080d18 72%);
  border-color: #30d4ee; box-shadow: 0 0 0 1px #e444d34a, 0 0 14px #00dfff20, inset 0 1px #c6f9ff1a;
}
#phonetab::before { left: 7px; width: 78%; background: linear-gradient(90deg, #48e8ff, #b852e8, #ff51cf); box-shadow: 0 0 8px #3edfff80; }
#phonetab:hover, #phonetab.on { border-color: #a0f7ff; box-shadow: 0 0 0 1px #ff58d14d, 0 0 16px #00e5ff42, inset 0 0 0 1px #a9edff1c; }
#tabface { width: 44px; height: 56px; flex: none; border-color: #36d7ee; background: radial-gradient(ellipse at 50% 22%, #194660, #0b1323 72%); box-shadow: inset 0 0 14px #00e5ff27, 0 0 8px #00e5ff1e; }
#tabinfo { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; }
#tabname { overflow: hidden; color: #dffaff; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .3px; line-height: 1.1; white-space: nowrap; }
#tabname b { color: #92f4ff; text-shadow: 0 0 7px #00dfff65; }
#tabname i { display: block; margin-top: 2px; color: #b285e9; font-size: calc(7px * var(--fontscale, 1)); letter-spacing: 1px; }
#tabrole { align-self: flex-start; max-width: 100%; padding: 0 4px; border-color: #3eddf36b; background: #0a2635; color: #80edfa; font-size: calc(7px * var(--fontscale, 1)); line-height: 1.55; }
#tabrole::before { color: #fb62d6; animation-duration: 2.5s; }
#tabmood { display: flex; align-items: center; gap: 4px; color: #68e5b1; font-size: calc(7px * var(--fontscale, 1)); letter-spacing: .5px; line-height: 1.1; text-transform: uppercase; }
#tabmood::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; background: #57ecb2; box-shadow: 0 0 6px #57ecb2; }
#tabmood.alert { color: #ff7bdc; }
#tabmood.alert::before { background: #ff61d3; box-shadow: 0 0 7px #ff61d3; }
#tabmood.warn { color: #ff8295; }
#tabmood.warn::before { background: #ff536f; box-shadow: 0 0 7px #ff536f; }
#tabmeters { display: grid; gap: 3px; margin-top: 1px; }
.tabmeter { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 4px; }
.tabmeter > span { color: #a8c8d5; font-size: 7px; letter-spacing: .6px; }
.tabmeter > i { display: block; height: 4px; overflow: hidden; border: 1px solid #315467; background: #030814; }
.tabmeter > i > b { display: block; width: 0; height: 100%; transition: width .2s ease; }
#tabhpfill { background: linear-gradient(90deg, #ff4f86, #ff78d6); box-shadow: 0 0 6px #ff4f86; }
#tabenfill { background: linear-gradient(90deg, #04bcd5, #62f5ff); box-shadow: 0 0 6px #00dfff; }

.appmodal { border-color: #237a9b; background: linear-gradient(145deg, #0e1b30, #080d19 70%); box-shadow: 0 0 0 1px #000a, 0 16px 44px #000d, 0 0 17px #00dfff24; }
.appmodal.front { border-color: #4de7f5; box-shadow: 0 0 0 1px #000a, 0 18px 48px #000d, 0 0 0 2px #f04ad529, 0 0 20px #00dfff42; }
.appmodal::before { width: 130px; height: 2px; background: linear-gradient(90deg, #30eaff, #bc5be9, #fb5bce, transparent); }
.appmodal .winbar { border-bottom-color: #24d4ec72; background: linear-gradient(100deg, #10243a, #110f24 82%); }
.appmodal .wglyph { color: #70efff; text-shadow: 0 0 8px #00e5ff72; }
.appmodal .wtitle, .appmodal.front .wtitle { color: #e0faff; text-shadow: 0 0 8px #00dfff30; }
.appmodal .winbar button { border-color: #35637b; background: #091525; }
.appmodal .winbar button:hover { border-color: #57edff; color: #9bf5ff; }
.appmodal .winhint { border-bottom-color: #285169; border-left-color: #d14fe0; background: #091323; color: #9db7c8; }
.appmodal .winbody { border-color: #20445b; background: linear-gradient(145deg, #09182a, #070b16 72%); box-shadow: inset 0 1px #84f4ff10; }
.appmodal .apphead { color: #69edfa; border-bottom-color: #22657b; }
#app:has(.appmodal) #viewwrap #tutpanel { visibility: hidden; pointer-events: none; }
.appmodal[data-app="commerce"] { width: min(740px, 90vw); border-color: #258ca8; background: linear-gradient(145deg, #101a32, #080d1a 72%); }
.appmodal[data-app="commerce"]::before { width: 160px; background: linear-gradient(90deg, #34eaff, #a84ded, #ff58cb, transparent); }
.appmodal.front[data-app="commerce"] { border-color: #55eaff; box-shadow: 0 0 0 1px #000a, 0 18px 48px #000d, 0 0 0 2px #d94bd32b, 0 0 20px #00dfff48; }
.appmodal[data-app="commerce"] .winbar { border-bottom-color: #27d5eb70; background: linear-gradient(100deg, #0b263d, #17102c 85%); }
.appmodal[data-app="commerce"] .wglyph { color: #71f0ff; }
.appmodal[data-app="commerce"] .wtitle { color: #d7faff; }
.appmodal[data-app="commerce"] .winhint { border-bottom-color: #285169; border-left-color: #dc53d4; }

#shopbody { background: radial-gradient(720px 230px at 85% 0, #8037b51b, transparent 65%), linear-gradient(150deg, #081425, #0b1020 52%, #070b16); }
#shopbody .shop-eyebrow, #shopbody .shop-kicker { color: #74eafa; letter-spacing: 1.2px; }
#shopbody .shop-title-block h2 { color: #e6f9ff; text-shadow: 0 0 14px #28d8f11c; }
#shopbody .shop-balance { border-color: #2c9eb5; background: linear-gradient(135deg, #0c2333, #101222 84%); box-shadow: inset 0 1px #83f5ff20, 0 0 10px #00e5ff0d; }
#shopbody .shop-membership { border-color: #267f98; background: linear-gradient(105deg, #0d2536, #101323 72%); box-shadow: inset 3px 0 #29d9ee; }
#shopbody .shop-member-title { color: #e9f9ff; }
#shopbody .shop-time { border-left-color: #27546a; }
#shopbody .shop-time strong { color: #a4f5ff; }
#shopbody .shop-main-tabs { border-bottom-color: #25516a; }
#shopbody .shop-main-tabs button.on { border-color: #22bcd2; background: linear-gradient(135deg, #10364b, #211638); box-shadow: inset 0 -2px #fc5cce, 0 4px 14px #00cce52e; }
#shopbody .shop-membership { margin-bottom: 12px; padding: 9px 12px; }
#shopbody .shop-hero { min-height: 198px; margin: 12px 0; border-color: #2789a4; background: linear-gradient(130deg, #0e1930, #130e25); box-shadow: inset 0 0 18px #05cbe81c, 0 12px 30px #0008; }
#shopbody .shop-hero-art { min-height: 198px; }
#shopbody .shop-hero-copy { padding: 20px; }
#shopbody .shop-hero-copy h3 { font-size: clamp(20px, 2.4vw, 29px); }
#shopbody .shop-hero-copy h3 { color: #f2f6ff; }
#shopbody .shop-card { border-radius: 2px; border-color: #245269; background: linear-gradient(145deg, #102236, #0a101d); }
#shopbody .shop-card-pack { border-color: #8d4cc6; background: linear-gradient(145deg, #241736, #0e1423); }
#shopbody .shop-card-vip { border-color: #b246a0; background: linear-gradient(145deg, #29162e, #0f1422); }
#shopbody .shop-card-pc { border-color: #287e91; background: linear-gradient(145deg, #102936, #0c1420); }
#shopbody .shop-card-pack .shop-badge, #shopbody .shop-card-pack .shop-price { color: #dc9dff; }
#shopbody .shop-card-vip .shop-badge, #shopbody .shop-card-vip .shop-price { color: #ff8bdc; }
#shopbody .shop-card-pc .shop-badge { color: #85f1ff; }
#shopbody .shop-card-pack .shop-buy { border-color: #a84bd0; background: linear-gradient(110deg, #51216f, #7b3185); }
#shopbody .shop-card-vip .shop-buy { color: #250f25; border-color: #fb80d0; background: linear-gradient(110deg, #df56bd, #a963de); }
#shopbody .shop-card-pc .shop-buy { color: #05171b; border-color: #67eff6; background: linear-gradient(110deg, #35bbd2, #79eee2); }
/* Cosmetics (skin, mount, mount skin): a lit showcase in the colour of the effect the piece wears
   in the world (--fx from RideFX.colorOf, --fxink the readable text on it; no effect = shop cyan).
   Spotlight, pulsing pedestal and motes rising in that colour; the 192px preview shows at 192px so
   the pixel art scales by whole pixels. Motion stops under prefers-reduced-motion. */
#shopbody .shop-card-cosmetic { --fx: #62d8f0; --fxink: #0a0d16; position: relative; border-color: color-mix(in srgb, var(--fx) 60%, #1d3346); background: linear-gradient(172deg, color-mix(in srgb, var(--fx) 30%, #0c1422) 0%, color-mix(in srgb, var(--fx) 9%, #0a101c) 48%, #090d17 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx) 22%, transparent), 0 0 26px color-mix(in srgb, var(--fx) 16%, transparent), inset 0 1px color-mix(in srgb, var(--fx) 55%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
#shopbody .shop-card-cosmetic:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx) 45%, transparent), 0 10px 34px color-mix(in srgb, var(--fx) 30%, transparent), inset 0 1px color-mix(in srgb, var(--fx) 75%, transparent); }
#shopbody .shop-card-cosmetic .shop-card-art { position: relative; height: 226px; padding: 6px 10px 28px; overflow: hidden; background: radial-gradient(ellipse 62% 56% at 50% 62%, color-mix(in srgb, var(--fx) 42%, transparent), transparent 74%); }
#shopbody .shop-card-cosmetic .shop-card-art::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 30px; width: 80%; transform: translateX(-50%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--fx) 48%, transparent), transparent 92%); pointer-events: none; }
#shopbody .shop-card-cosmetic .shop-card-art::after { content: ''; position: absolute; left: 50%; bottom: 17px; width: 62%; height: 26px; transform: translateX(-50%); border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fx) 80%, #fff); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--fx) 70%, transparent), transparent 72%); box-shadow: 0 0 24px color-mix(in srgb, var(--fx) 60%, transparent), inset 0 0 12px color-mix(in srgb, var(--fx) 50%, transparent); animation: shop-pedestal 2.6s ease-in-out infinite; }
#shopbody .shop-card-cosmetic .shop-motes { position: absolute; inset: 0 12% 26px; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--fx) 60%, #fff) 0 1.6px, transparent 2.6px), radial-gradient(circle, var(--fx) 0 1.2px, transparent 2.2px), radial-gradient(circle, color-mix(in srgb, var(--fx) 80%, #fff) 0 1px, transparent 2px); background-size: 38px 60px, 53px 83px, 29px 47px; background-position: 0 0, 17px 30px, 9px 12px; -webkit-mask-image: linear-gradient(0deg, transparent, #000 22%, #000 58%, transparent 92%); mask-image: linear-gradient(0deg, transparent, #000 22%, #000 58%, transparent 92%); opacity: .85; animation: shop-motes 5.5s linear infinite; }
#shopbody .shop-card-cosmetic .shop-stage { position: relative; z-index: 1; width: 192px; height: 192px; perspective: 520px; perspective-origin: 50% 70%; transition: transform .2s ease; }
#shopbody .shop-card-cosmetic:hover .shop-stage { transform: translateY(-5px) scale(1.04); }
#shopbody .shop-card-cosmetic .shop-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: 50% 88%; animation: shop-turn 7s ease-in-out infinite alternate; }
#shopbody .shop-card-cosmetic .shop-3d canvas { position: absolute; inset: 0; width: 192px; height: 192px; image-rendering: pixelated; }
/* The slab: copies pushed back 1.6px each and darkened, so the turned piece shows a solid edge. */
#shopbody .shop-card-cosmetic .shop-3d-layer { transform: translateZ(calc(var(--z) * -1.6px)); filter: brightness(.3) saturate(1.4); }
/* Rim light in the effect colour: dark art (camouflage, obsidian) still reads against the glow. */
#shopbody .shop-card-cosmetic .shop-3d-face { filter: drop-shadow(0 0 1px color-mix(in srgb, var(--fx) 85%, #fff)) drop-shadow(0 0 12px color-mix(in srgb, var(--fx) 55%, transparent)); }
#shopbody .shop-card-cosmetic .shop-badge { align-self: flex-start; padding: 3px 8px; border-radius: 999px; color: color-mix(in srgb, var(--fx) 55%, #fff); background: color-mix(in srgb, var(--fx) 18%, transparent); border: 1px solid color-mix(in srgb, var(--fx) 45%, transparent); }
#shopbody .shop-card-cosmetic .shop-price { color: color-mix(in srgb, var(--fx) 35%, #fff4d8); text-shadow: 0 0 18px color-mix(in srgb, var(--fx) 55%, transparent); }
#shopbody .shop-card-cosmetic .shop-rate { color: color-mix(in srgb, var(--fx) 65%, #fff); font-weight: 700; }
#shopbody .shop-card-cosmetic .shop-buy { position: relative; overflow: hidden; color: var(--fxink); border-color: color-mix(in srgb, var(--fx) 80%, #fff); background: linear-gradient(110deg, var(--fx), color-mix(in srgb, var(--fx) 65%, #fff)); box-shadow: 0 0 18px color-mix(in srgb, var(--fx) 40%, transparent); font-weight: 800; letter-spacing: .03em; }
#shopbody .shop-card-cosmetic .shop-buy::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #ffffff8c, transparent); transition: left .5s ease; }
#shopbody .shop-card-cosmetic .shop-buy:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 26px color-mix(in srgb, var(--fx) 65%, transparent); }
#shopbody .shop-card-cosmetic .shop-buy:hover:not(:disabled)::after { left: 130%; }
#shopbody .shop-card-cosmetic.locked .shop-buy:disabled { color: #8aa0b4; border-style: dashed; border-color: #3a4a5c; background: transparent; box-shadow: none; }
#shopbody .shop-card-cosmetic.locked .shop-buy:disabled::after { display: none; }
@keyframes shop-turn { from { transform: rotateY(-32deg); } to { transform: rotateY(32deg); } }
@keyframes shop-motes { to { background-position: 0 -60px, 17px -53px, 9px -35px; } }
@keyframes shop-pedestal { 50% { box-shadow: 0 0 36px color-mix(in srgb, var(--fx) 85%, transparent), inset 0 0 16px color-mix(in srgb, var(--fx) 70%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  #shopbody .shop-card-cosmetic .shop-motes, #shopbody .shop-card-cosmetic .shop-card-art::after { animation: none; }
  #shopbody .shop-card-cosmetic .shop-3d { animation: none; transform: rotateY(-22deg); }
  #shopbody .shop-card-cosmetic, #shopbody .shop-card-cosmetic .shop-stage { transition: none; }
  #shopbody .shop-card-cosmetic:hover, #shopbody .shop-card-cosmetic:hover .shop-stage { transform: none; }
}
#shopbody .shop-review { border-color: #934ab0; background: linear-gradient(110deg, #211332, #101725); box-shadow: inset 3px 0 #e650d3; }
#shopbody .shop-review-actions .primary { color: #1d1128; border-color: #ee8ae2; background: linear-gradient(110deg, #df68c9, #9365e3); }
#shopbody .shop-footer { border-top-color: #284960; }

@media (min-width: 901px) and (max-width: 1050px) {
  #bottom { grid-template-columns: minmax(205px, 2fr) minmax(148px, 1.45fr) minmax(76px, .75fr) minmax(106px, 1fr) 44px 116px 48px; }
  #phonetab { flex-basis: 116px; width: 116px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  #bottom { grid-template-columns: minmax(195px, 2fr) minmax(142px, 1.45fr) minmax(76px, .75fr) minmax(106px, 1fr) 44px 118px 48px; }
  #phonetab { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 1fr; flex-basis: 118px; width: 118px; align-items: center; gap: 5px; padding: 4px; }
  #tabface { width: 42px; height: 54px; flex-basis: auto; }
  #tabinfo { width: auto; align-items: stretch; text-align: left; }
  #tabname { font-size: 8px; }
  #tabname i { display: block; }
  #tabrole { align-self: flex-start; font-size: 6px; }
  #tabmood { display: flex; font-size: 6px; }
  #lojatab .lojalbl { display: block; font-size: 7px; letter-spacing: .7px; }
}
@media (max-width: 560px) {
  #bottom { overflow-x: auto; }
  #lojatab { flex-basis: 46px; }
  #phonetab { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: 1fr; flex: 0 0 116px; width: 116px; align-items: center; gap: 4px; padding: 3px; }
  #tabface { width: 38px; height: 50px; flex-basis: auto; }
  #tabname { font-size: 7px; }
  #tabname i { display: block; font-size: 6px; }
  #tabrole { display: inline-flex; font-size: 6px; }
  #tabmood { display: flex; font-size: 6px; }
  .tabmeter { grid-template-columns: 13px minmax(0, 1fr); gap: 3px; }
  .tabmeter > span { font-size: 6px; }
}
@media (max-width: 760px) {
  .appmodal.wide[data-app="commerce"] { width: min(740px, 90vw); }
  #shopbody .shop-hero, #shopbody .shop-hero-art { min-height: 205px; }
  #shopbody .shop-hero-copy { padding: 18px; }
}

/* HUD reference pass: carry the cyan / magenta hardware language through every live panel. */
:root {
  --hud-cyan: #55efff;
  --hud-pink: #f257d5;
  --hud-violet: #9c71ff;
  --hud-panel: #07111ff5;
}

#huntrun {
  border-color: #44e8f7;
  background:
    linear-gradient(90deg, #23dff115 1px, transparent 1px) 0 0 / 28px 100%,
    linear-gradient(155deg, #0b1b2df7, #050a14fa 78%);
  box-shadow: 0 0 0 1px #ee4bd52e, 0 0 20px #00daf52e, 0 9px 26px #000b;
}
#huntrun .hrtop { border-bottom-color: #48e4f45c; }
#huntrun .hrbrand { color: #77f3ff; }
#huntrun .hrlive { padding: 2px 5px; border: 1px solid #f257d56a; background: #f257d51a; }
#huntrun .hrscreen {
  height: 20px; padding: 2px 3px; border-color: #39cfe277;
  background:
    linear-gradient(#3ddff41b 1px, transparent 1px) 0 0 / 100% 6px,
    linear-gradient(90deg, #3ddff416 1px, transparent 1px) 0 0 / 12px 100%, #030914;
  box-shadow: inset 0 0 10px #00cfe91c, 0 0 7px #00cfe91c;
}
#hrgraph { height: 20px; filter: drop-shadow(0 0 3px #43efff); }
#huntrun .hrstats { gap: 5px; }
#huntrun .hrmetric {
  min-height: 39px; padding: 3px 4px 2px; border-left: 1px solid #48dcec35;
  background: linear-gradient(145deg, #10233699, #07101a66);
}
#huntrun .hrmetric > span { color: #b3c5d6; }
#huntrun .hrmetric > b { font-weight: 750; }
#huntrun .hr-xph { border-left-color: #40e5f5a3; }
#huntrun .hr-gold { border-left-color: #ffc65f99; }
#huntrun .hr-dmg, #huntrun .hr-dps { border-left-color: #e65bd4a6; }
#huntrun .hr-taken { border-left-color: #ff657d9c; }
#huntrun .hr-heal { border-left-color: #60edb29c; }

#partycard {
  border-color: #38d9e6;
  border-right-color: #df4ec8;
  background: linear-gradient(145deg, #101c31f7, #080d19fc 75%);
  box-shadow: 0 0 0 1px #f354d522, 0 0 16px #00d9ed20, 0 8px 24px #000a;
}
#partycard .partycardhead { border-bottom-color: #36d5e84d; }
#partycard h3 { color: #75efff; }
#partycard button { border-color: #347f91; color: #91f4ff; }
#partycard button:hover:not(:disabled) { border-color: #fa64d9; box-shadow: 0 0 9px #ef4ac53c; }

#chatbox {
  border-color: #34d9ed;
  border-right-color: #e748c8;
  background: linear-gradient(150deg, #0c1a2bf7, #060b16fc 78%);
  box-shadow: 0 0 0 1px #e74bc51f, 0 0 16px #00d5ee29, 0 7px 22px #000b;
}
#chathead {
  min-height: 28px; padding: 2px 5px 3px;
  background: linear-gradient(95deg, #11283cf2, #101126f2);
  border-bottom-color: #32d9ed66;
}
#chathead .chat-title { color: #8bf5ff; letter-spacing: 1.5px; text-shadow: 0 0 8px #00dff45c; }
#chatfiltersummary { padding: 4px 7px; color: #b8a6f7; }
#chatfilters[open] #chatfiltersummary { color: #ff83dc; }
#chattabs { border-top: 1px solid #e94bca43; background: #090f1ceF; }
.ctab { color: #c4d8e7; }
.ctab input { accent-color: #ed5bd0; }
#chatinputrow { border-top-color: #31d9ec70; background: linear-gradient(90deg, #0d2131, #101022); }
#chatsend { color: #85eff8; border-right-color: #e64ec94d; }
#chatemojitoggle { color: #f38ad9; border-color: #8c4e91; background: #24152d; }
#chatin { color: #e5f4ff; }
#chatin:focus { box-shadow: inset 0 -1px #4ae7f4; }

#bottom {
  background: linear-gradient(180deg, #0b1523 0%, #070b14 100%);
  box-shadow: 0 -1px 0 #46e6f5a6, 0 -2px 0 #e84bcf54, 0 -12px 28px #00dffc18;
}
#hotbar, #vitals, #currencies, #hunt, #decktab {
  background-image: linear-gradient(100deg, #48eafa, #8b79ff 56%, #f04acb), linear-gradient(145deg, #0d1c2df7, #070b15fa 76%);
  background-size: 100% 2px, auto;
  background-repeat: no-repeat;
  border-color: #298fa9;
  box-shadow: 0 0 0 1px #e74cc31c, 0 0 13px #00dffa17, inset 0 1px #bafaff12;
}
#hotbar .hb-head { border-bottom-color: #278ca46b; }
#hotbar .hb-title { color: #c9f6ff; }
#hotbar .hb-mark { stroke: #66efff; }
#hotbar .hb-priority { color: #ff91de; border-color: #e94bc76e; background: #d93caa17; }
#hotbar .hot {
  position: relative; border: 1px solid #287184; border-radius: 2px;
  background: linear-gradient(145deg, #0b1726, #060b14 78%);
  box-shadow: inset 0 0 12px #00e5ff0a, 0 2px 5px #0007;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
#hotbar .hot:not(.free) {
  border-color: color-mix(in srgb, var(--slot-tone, #52edff) 74%, #243a52);
  background: linear-gradient(145deg, color-mix(in srgb, var(--slot-tone, #52edff) 18%, #0b1726), #070b16 78%);
  box-shadow: inset 0 0 13px color-mix(in srgb, var(--slot-tone, #52edff) 22%, transparent), 0 0 8px color-mix(in srgb, var(--slot-tone, #52edff) 20%, transparent);
}
#hotbar .hot:not(.free) .glyph { filter: drop-shadow(0 0 5px var(--slot-tone, #52edff)) drop-shadow(0 2px 4px #000c); }
#hotbar .hot:not(.free) .key { color: var(--slot-tone, #a4f6ff); border-color: color-mix(in srgb, var(--slot-tone, #52edff) 60%, transparent); }
#hotbar .hot.free { border-color: #315063; background: repeating-linear-gradient(135deg, #09121e, #09121e 5px, #0c1723 5px, #0c1723 10px); }
#hotbar .hot:nth-child(8n + 1) { --slot-tone: #48e9ff; }
#hotbar .hot:nth-child(8n + 2) { --slot-tone: #ff58d2; }
#hotbar .hot:nth-child(8n + 3) { --slot-tone: #ae68ff; }
#hotbar .hot:nth-child(8n + 4) { --slot-tone: #50c7ff; }
#hotbar .hot:nth-child(8n + 5) { --slot-tone: #ff9b52; }
#hotbar .hot:nth-child(8n + 6) { --slot-tone: #52efff; }
#hotbar .hot:nth-child(8n + 7) { --slot-tone: #ec67ff; }
#hotbar .hot:nth-child(8n) { --slot-tone: #a1efff; }

#vitals {
  border-right-color: #b24eb5;
  background-image: linear-gradient(100deg, #46e8f7, #9871f3 72%, #ee50cf), linear-gradient(145deg, #0d1c2df7, #070b15fa 76%);
}
#hudportrait { border-color: #37d9ee; background: radial-gradient(ellipse at 50% 18%, #164564, #0b1323 72%); box-shadow: inset 0 0 17px #00e5ff2b, 0 0 8px #00e5ff19; }
#charheading { border-bottom-color: #35d5e85e; }
#vitals .hudbar-label { display: flex; align-items: center; gap: 3px; color: #b5c7d6; }
#vitals .hudbar-label svg { width: 11px; height: 11px; flex: 0 0 11px; fill: none; stroke: #6beeff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px #2ddcf58c); }
#hpbarlabel svg { stroke: #ff6b9c !important; }
#shbarlabel svg { stroke: #b18bff !important; }
#stambarlabel svg { stroke: #69ebba !important; }
#xpbarlabel svg { stroke: #ffd264 !important; }
#vitals .hudbarrow .bar { border-color: #397085; background: #040915; }
#vitals #hpbar > div { background: linear-gradient(90deg, #ff386f, #ff7bb3); }
#vitals #enbar > div { background: linear-gradient(90deg, #00b8d8, #63f4ff); }
#vitals #shbar > div { background: linear-gradient(90deg, #7157df, #bd8eff); }
#vitals #stambar > div { background: linear-gradient(90deg, #27bd89, #6ef1b8); }
#vitals #xpbar > div { background: linear-gradient(90deg, #e6a531, #ffe37a); }
#vitals .hudbarrow .bar > div { background-image: repeating-linear-gradient(90deg, transparent 0 12px, #ffffff38 12px 13px); }

#currencies { border-right-color: #df50ca; }
#currencies .hudcurrency { border-bottom-color: #37d8e64f; }
#currencies .hudcurrency:last-child { border-bottom-color: #e94aca70; }
#currencies .hudcurrency > svg { color: #63efff; filter: drop-shadow(0 0 5px #00dff75c); }
#currencies .hudcurrency.credits > svg { color: #ffd16d; filter: drop-shadow(0 0 5px #ffbc4866); }
#currencies .hudcurrency.coins > svg { color: #ed74dc; filter: drop-shadow(0 0 5px #e44ac866); }
#currencies .hudcurrency strong { color: #e7f8ff; }
#currencies .hudcurrency.credits strong { color: #ffe098; }
#currencies .hudcurrency.coins strong { color: #f5a0e3; }

#hunt { border-color: #348ca7; border-right-color: #dc4bc6; }
#huntlaunch { color: #7cf2ff; background: linear-gradient(145deg, #10283a, #0c1020); }
#huntlaunch:hover { border-color: #60efff; box-shadow: 0 0 12px #00d9ef38; }
#huntlaunch .hunticon { color: #65efff; filter: drop-shadow(0 0 5px #00dbef77); }
#huntgroups { color: #db8df1; border-color: #9d52ac; background: linear-gradient(145deg, #21172e, #111220); }
#huntgroups svg { stroke: #ed70dc; }
#huntleave { color: #ff94db; border-color: #d84ab9; background: #2a1028; }

body:not(.freelayout) #viewwrap #mmpanel {
  border-radius: 0; border-color: #39dce9; border-left-color: #e74cc9;
  background: linear-gradient(145deg, #102035f8, #070b16fa 78%);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
#minimap { border-radius: 0; border-color: #39dce98a; box-shadow: inset 0 0 0 1px #ee4dcc35, inset 0 0 18px #000c; }
#mmopen { color: #73f1ff; border-color: #39dce98a; }

@media (max-width: 1050px) {
  #huntrun .hrmetric { padding: 2px; }
}
@media (max-width: 560px) {
  #huntrun .hrmetric { min-height: 31px; }
  #huntrun .hrscreen { height: 15px; }
  #hrgraph { height: 15px; }
}

/* DiffUI alignment: lead with the action skills, then character status and currencies. */
#bottom {
  grid-template-columns: minmax(230px, 1.7fr) minmax(160px, 1.15fr) minmax(108px, .78fr)
    minmax(170px, 1.25fr) 60px minmax(124px, .9fr) 70px;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
#bottom > #hotbar { grid-column: 1; grid-row: 1; }
#bottom > #vitals { grid-column: 2; grid-row: 1; }
#bottom > #currencies { grid-column: 3; grid-row: 1; }
#bottom > #hunt { grid-column: 4; grid-row: 1; }
#bottom > #bagtab { grid-column: 5; grid-row: 1; }
#bottom > #phonetab { grid-column: 6; grid-row: 1; }
#bottom > #decktab { grid-column: 7; grid-row: 1; }

#huntrun, #partycard, #chatbox, #tutpanel, #phone, .appmodal,
body:not(.freelayout) #viewwrap #mmpanel {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
#huntrun { letter-spacing: .15px; }
#huntrun .hrbrand, #huntrun .hrmetric > span, #huntrun .hrplayers > span,
#chathead .chat-title, #hotbar .hb-title, #lojatab .lojalbl,
#vitals .hudbar-label, #currencies .hudcurrency > span {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
#vitals .hudbar-label { font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .45px; }
#currencies .hudcurrency > span { font-size: calc(8px * var(--fontscale, 1)); letter-spacing: .2px; }
#currencies .hudcurrency strong { font-size: calc(14px * var(--fontscale, 1)); }
#hotbar .hb-title { font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 1px; }
#hotbar .hb-priority { font-size: calc(8px * var(--fontscale, 1)); }
#hotbar .hot .key { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-weight: 700; }
#hotbar .hot.free::after { color: #58cfe1b8; font-size: 18px; font-weight: 500; text-shadow: 0 0 7px #00dfff75; }
#tabname { font-size: calc(10px * var(--fontscale, 1)); }
#tabname i { font-size: calc(8px * var(--fontscale, 1)); }
#tabrole, #tabmood { font-size: calc(8px * var(--fontscale, 1)); }
#tabmeters .tabmeter > span { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 8px; }

#lojatab {
  color: #ff78dc; border-color: #e652c9;
  background:
    linear-gradient(100deg, #f257d5, #a45bfa 72%) top left / 100% 2px no-repeat,
    radial-gradient(ellipse at 50% 34%, #e84bc926, transparent 68%),
    linear-gradient(155deg, #17152d, #090d19 76%);
  box-shadow: 0 0 0 1px #4ceaff48, 0 0 15px #e941c92e, inset 0 1px #fff1ff20;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
#lojatab::before {
  inset: 0; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto;
  background: radial-gradient(ellipse at 50% 35%, #fa55d22b, transparent 70%);
}
#lojatab .lojachest { width: min(35px, 78%); max-height: 38px; stroke: #ff72db; stroke-width: 1.6; filter: drop-shadow(0 0 6px #f443d583); }
#lojatab .lojalbl { color: #ffd2f1; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: 1.3px; }
#lojatab:hover { color: #fff; border-color: #ff9be8; box-shadow: 0 0 0 1px #56edff72, 0 0 18px #ed45ce5c, inset 0 0 13px #ec44ce20; }
#lojatab:hover .lojachest { stroke: #fff; filter: drop-shadow(0 0 8px #f14fda); }

#vitals, #currencies, #hotbar, #hunt, #lojatab, #phonetab, #decktab {
  min-width: 0;
  border-radius: 0;
}
#vitals, #currencies, #hotbar, #hunt, #lojatab, #phonetab, #decktab {
  box-shadow: 0 0 0 1px #e94bc81c, 0 4px 13px #0008, inset 0 1px #bcfaff17;
}
#phonetab { border-color: #42dbea; border-right-color: #dc4bca; }
#phonetab::before { width: 78%; background: linear-gradient(90deg, #54efff, #a070ff, #f452d0); }
#tabface { border-color: #43dcea; }
#decktab { border-color: #3ddfeb; border-left-color: #a957e7; }
#decktab > svg { stroke: #62efff; }
#decktab > span { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: calc(8px * var(--fontscale, 1)); font-weight: 700; }

@media (max-width: 1050px) {
  #bottom {
    grid-template-columns: minmax(188px, 1.4fr) minmax(128px, .95fr) minmax(92px, .68fr)
      minmax(148px, 1.1fr) 48px minmax(114px, .84fr) 54px;
  }
}
#vitals { grid-template-columns: minmax(0, 1fr); align-items: stretch; padding: 6px 8px; }
#hudportrait { display: none !important; }
#hudstats { gap: 2px; }
#charheading { min-height: 19px; margin-bottom: 2px; padding-bottom: 3px; }
#vitals #charname { max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vitals .hudbarrow, #vitals #stamrow.hudbarrow { grid-template-columns: 46px minmax(0, 1fr); gap: 4px; min-height: 17px; }
#vitals .hudbar-label { gap: 3px; font-size: calc(8px * var(--fontscale, 1)); }
#vitals .hudbar-label svg { width: 10px; height: 10px; flex-basis: 10px; }
#vitals .hudbarrow .bar { height: 9px; }
#vitals .hudbarrow .bar span { font-size: calc(8px * var(--fontscale, 1)); line-height: 7px; }

@media (max-width: 760px) {
  #bottom { overflow-x: auto; }
  #vitals { padding: 5px 6px; }
  #vitals .hudbarrow, #vitals #stamrow.hudbarrow { grid-template-columns: 42px minmax(0, 1fr); gap: 3px; }
}

/* Give the utility end of the dock room to breathe without squeezing small screens. */
#bottom { gap: 8px; padding-right: 10px; padding-left: 10px; }
#phonetab { gap: 7px; padding: 6px; }
#tabinfo { gap: 3px; }
#tabmeters { gap: 4px; margin-top: 2px; }
.tabmeter { gap: 5px; }
@media (max-width: 1050px) {
  #bottom { gap: 5px; padding: 5px 4px; }
  #phonetab { gap: 3px; padding: 3px; }
  #tabinfo { gap: 2px; }
  #tabmeters { gap: 3px; margin-top: 1px; }
  .tabmeter { gap: 4px; }
}
@media (max-width: 850px) {
  #bottom { overflow-x: auto; }
}
@media (max-width: 760px) {
  #bottom { gap: 5px; padding: 5px; }
}



/* Menus and the hunt picker stay in the band above the dock and reflow when that band is narrow. */
.modal {
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - var(--barh) - 12px);
}
#phone {
  top: 8px;
  width: min(94vw, 760px);
  height: min(520px, calc(100dvh - var(--barh) - 16px));
  max-height: calc(100dvh - var(--barh) - 12px);
}
#appgrid { grid-template-columns: repeat(auto-fill, minmax(min(108px, 100%), 1fr)); }

/* Hunt picker: exit rules in a side column, the catalogue takes the rest.
   The list/stage/loot row is the only flexible row, so it keeps the leftover height. */
#huntplanner {
  position: fixed !important;
  inset: 8px 8px calc(var(--barh) + 8px) 8px !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  z-index: 40;
}
#huntplanner:has(#huntmodal.on) { display: grid !important; }
#huntreview { min-width: 0; min-height: 0; overflow: auto; }
#huntreview #partycard {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}
#huntplanner #huntmodal {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#huntui {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(80px, 1fr) auto;
  gap: 8px;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
#huntbody {
  grid-template-columns: minmax(188px, 260px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
}
#huntdetail, #huntstage { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; gap: 8px; }
#huntdetail { container-type: inline-size; }
.huntchosen {
  flex: none; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 6px 8px; align-items: center; padding: 6px 8px;
  border: 1px solid rgba(0, 229, 255, .55); background: rgba(0, 229, 255, .06);
}
.huntchosen h4 { margin: 0; font-size: 15px; }
.huntchosen .huntmob { color: var(--cyan); font-size: 12px; }
.huntchosen .huntdesc {
  color: var(--dim); font-size: 11px; line-height: 1.3; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.huntchosen .huntdiffwrap { min-width: 0; align-self: center; }
.huntchosen .huntdiff {
  display: grid; grid-template-columns: repeat(3, auto);
  align-items: stretch; gap: 4px; height: auto;
}
.huntchosen .huntdiff > span { grid-column: 1 / -1; text-align: left; margin: 0; }
.huntchosen .huntdiff button {
  min-height: 26px; padding: 4px 8px; text-align: center;
  letter-spacing: 0; white-space: nowrap;
}
.huntchosen .huntdiff button.on { color: #041018; background: var(--cyan); font-weight: 700; }
.huntsheets { flex: 1.35 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: hidden; }
#huntpicks, #huntroster, #huntloot { min-width: 0; min-height: 0; overflow: auto; }
#huntpicks,
#huntroster,
#huntsetup #huntloot .lootlist {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 229, 255, .75) rgba(0, 229, 255, .12);
}
#huntpicks::-webkit-scrollbar,
#huntroster::-webkit-scrollbar,
#huntsetup #huntloot .lootlist::-webkit-scrollbar {
  display: block !important;
  width: 8px;
  height: 8px;
}
#huntpicks::-webkit-scrollbar-track,
#huntroster::-webkit-scrollbar-track,
#huntsetup #huntloot .lootlist::-webkit-scrollbar-track {
  background: rgba(0, 229, 255, .1);
}
#huntpicks::-webkit-scrollbar-thumb,
#huntroster::-webkit-scrollbar-thumb,
#huntsetup #huntloot .lootlist::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, .7);
  border-radius: 4px;
}
#huntpicks .huntpick > span { min-width: 0; }
#huntpicks .huntpick b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#huntpicks .huntpick.on { background: rgba(0, 229, 255, .14); box-shadow: inset 3px 0 0 var(--cyan); }
#huntroster > .hint { display: none; }
#huntroster h5 { margin: 0 0 4px; }
#huntstage #huntsetup {
  flex: 1 1 0;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
  padding: 6px 0 0 !important;
  border-top: 1px solid var(--border);
}
#huntsetup #huntloot {
  flex: 1 1 auto; min-height: 0; border: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
#huntsetup #huntloot h4 { margin: 0; }
#huntsetup #huntloot .lootlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-content: start;
  gap: 4px;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
}
#huntsetup #huntloot .lootrow { padding: 3px 4px; gap: 6px; }
#hunttank, #hunttank canvas { width: 56px; height: 56px; max-height: none; aspect-ratio: auto; }
#huntfoot {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent;
}
#huntfoot .huntactions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px;
  min-width: 0;
}
#huntfoot .huntaction { padding: 6px 8px; gap: 4px; min-width: 0; }
#huntfoot .huntaction button {
  min-height: 34px;
  white-space: normal;
  line-height: 1.2;
}
#huntfoot .huntaction .hint {
  display: block !important;
  min-height: 0;
  overflow: visible;
}
#huntfoot .huntaction .hint:empty { display: none !important; }
#huntfoot .huntfootbtns {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  margin: 0 !important;
}
@media (max-width: 1080px) {
  .huntsheets { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  #huntplanner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #huntreview { order: -1; max-height: 120px; }
  #huntbody { grid-template-columns: minmax(128px, 34%) minmax(0, 1fr) !important; }
}
@media (max-width: 520px) {
  #huntfoot { grid-template-columns: minmax(0, 1fr) !important; }
  #huntfoot .huntactions { grid-template-columns: minmax(0, 1fr) !important; }
  #huntfoot .huntfootbtns { flex-direction: row; justify-content: flex-end; }
}
@container (max-width: 520px) {
  .huntchosen { grid-template-columns: 56px minmax(0, 1fr); }
  .huntchosen .huntdiffwrap { grid-column: 1 / -1; }
  .huntchosen .huntdiff { grid-template-columns: minmax(0, 0.75fr) minmax(0, 0.9fr) minmax(0, 1.35fr); }
  .huntchosen .huntdiff > span { display: none; }
  .huntchosen .huntdiff button { width: 100%; padding: 4px 4px; font-size: 12px; }
}
@media (max-height: 760px) {
  #huntui { gap: 6px !important; }
  #huntmodal h3 { margin-bottom: 4px; }
  #huntfoot .huntaction { padding: 5px 6px; }
  #huntfoot .huntaction button { min-height: 32px; }
  #huntfoot .huntaction .hint { font-size: 11px; line-height: 1.25; }
}
@container (max-width: 900px) {
  #shopbody .shop-vitrine-head,
  #shopbody .shop-review,
  #shopbody .shop-footer,
  #shopbody .shop-membership { flex-direction: column; align-items: stretch; }
  #shopbody .shop-balance { width: 100%; min-width: 0; }
  #shopbody .shop-vitrine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #shopbody .shop-time { flex-direction: row; justify-content: center; width: 100%; border-left: 0; border-top: 1px solid #475a4b; padding: 8px 0 0; }
}
@container (max-width: 560px) {
  #shopbody .shop-vitrine-grid { grid-template-columns: minmax(0, 1fr); }
  #shopbody .shop-hero-copy { max-width: none; padding: 16px; }
}
.appmodal .winbody, #marketbody, #auction, #npcbody { max-width: 100%; }
.appmodal[data-app="commerce"] .winhint,
.appmodal[data-app="commerce"] .winfold { display: none !important; }
.appmodal[data-app="commerce"].folded .winbody { display: block !important; }
.appmodal.wide[data-app="commerce"],
.appmodal[data-app="commerce"] {
  display: flex !important;
  flex-direction: column !important;
  width: min(960px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px);
  height: min(860px, calc(100dvh - var(--barh) - 16px)) !important;
  max-height: min(860px, calc(100dvh - var(--barh) - 16px)) !important;
  overflow: hidden !important;
}
.appmodal[data-app="commerce"] .winbody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 74, 212, .8) rgba(255, 74, 212, .12);
}
.appmodal[data-app="commerce"] .winbody::-webkit-scrollbar {
  display: block !important;
  width: 8px;
}
.appmodal[data-app="commerce"] .winbody::-webkit-scrollbar-track {
  background: rgba(255, 74, 212, .12);
}
.appmodal[data-app="commerce"] .winbody::-webkit-scrollbar-thumb {
  background: rgba(255, 74, 212, .8);
  border-radius: 4px;
}
#shopbody { min-width: 0; min-height: 0; overflow: visible; }
#shopbody .shop-vitrine-head { flex-wrap: wrap; }
#shopbody .shop-title-block { flex: 1 1 220px; min-width: 0; }
#shopbody .shop-title-block p { max-width: none; }
#shopbody .shop-balance { flex: 1 1 180px; min-width: 0; max-width: 100%; }
#shopbody .shop-vitrine-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
}
#shopbody .shop-hero-copy { max-width: min(430px, 100%); }

/* Loja leaves the dock column and sits under the PunkCoin counter.
   The column it left is the bag, same open path as the I key. */
#currencies {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  gap: 4px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#currencies #statrow { width: 100%; min-height: 0; }
#currencies .hudcurrency { min-height: 0; }
#currencies #lojatab {
  position: relative;
  right: auto; bottom: auto; left: auto; top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 6px 4px;
  clip-path: none;
  cursor: pointer;
  overflow: hidden;
}
#currencies #lojatab::before,
#currencies #lojatab::after { display: none; animation: none; }
#currencies #lojatab .lojachest {
  width: auto; height: 46%; max-width: 78%; max-height: 56px; flex: 0 1 auto;
  animation: none;
}
#currencies #lojatab .lojalbl { display: block; line-height: 1; font-size: calc(14px * var(--fontscale, 1)); font-weight: 800; letter-spacing: 1.4px; }
#bagtab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 4px 2px;
  border: 1px solid #00c3e8;
  border-radius: 0;
  background:
    linear-gradient(#00def5, #00def5) top / 100% 2px no-repeat,
    linear-gradient(155deg, #101a31, #080d1c 76%);
  color: #a9f6ff;
  box-shadow: 0 0 0 1px #00def51c, 0 4px 12px #0009, inset 0 1px #b8f6ff12;
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
}
#bagtab .bagicon {
  width: min(32px, 72%);
  height: auto;
  max-height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px #00def566);
}
#bagtab .baglbl {
  max-width: 100%;
  overflow: hidden;
  color: #a9f6ff;
  font-size: calc(8px * var(--fontscale, 1));
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bagtab:hover { color: #fff; border-color: #91f4ff; box-shadow: 0 0 12px #00e5ff55; }
#bagtab.on { border-color: #ed4bd0; color: #ffd2f1; }
@media (max-width: 560px) {
  #bagtab .baglbl { display: none; }
  #bottom > #bagtab { flex: 0 0 46px; width: 46px; height: 64px; }
}
#shopbody .shop-card h3,
#shopbody .shop-price,
#shopbody h2 { overflow-wrap: anywhere; }
#shopbody .shop-card-actions { flex-direction: column; }
#shopbody .shop-buy,
#shopbody .shop-payment-method { flex: 1 1 auto; width: 100%; min-width: 0; }
#shopbody .shop-footer { flex-wrap: wrap; }
#shopbody .shop-footer span { max-width: 100%; }
#shopbody .shop-review { flex-wrap: wrap; }
#shopbody .shop-review-actions { width: 100%; }
#shopbody .shop-membership {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
#shopbody .shop-time {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: auto !important;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 12px !important;
  border: 0 !important;
  border-left: 1px solid #27546a !important;
}
#shopbody .shop-time strong {
  font-size: 26px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}
#shopbody .shop-time span { font-size: 11px !important; white-space: nowrap; }
@container (max-width: 520px) {
  #shopbody .shop-membership { grid-template-columns: auto minmax(0, 1fr); }
  #shopbody .shop-time {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    width: 100% !important;
    padding: 8px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid #27546a !important;
  }
}
#npcbody .npc-buy-row { min-width: 0; }

/* 3D cards (ADR 0131, client/card3d.js). The WebGL result is copied into a canvas that overflows
   its host by 35% (17.5% each side) so the halo, particles and the tilt are not clipped. */
.card3d-host { position: relative; }
.card3d-canvas { position: absolute; left: -17.5%; top: -17.5%; width: 135%; height: 135%; pointer-events: none; z-index: 1; }
#cardreveal.booster-modal.revealed { width: min(1000px, calc(100vw - 16px)); max-width: min(1000px, calc(100vw - 16px)); }
#cardrevealart.reveal-spread:has(.rv3d) { gap: 22px; padding: 26px 8px 18px; }
.rv-card.rv3d { width: clamp(116px, 17vw, 168px); aspect-ratio: 2 / 3; }
#cardrevealart.single .rv-card.rv3d { width: clamp(170px, 42vw, 250px); }
.rv-card.rv3d .rv-stage { position: absolute; inset: 0; }
.rv-card.rv3d:focus-visible { outline: 2px solid var(--cyan); outline-offset: 10px; border-radius: 10px; }
.rv-card.rv3d .rv-new { opacity: 0; z-index: 4; top: -8px; left: -6px; transition: opacity .25s ease .45s; }
.rv-card.rv3d.flipped .rv-new { opacity: 1; }
#cardviewbody .tipcardface.is3d { aspect-ratio: 2 / 3; background: none; margin: 30px 20px 30px; width: min(240px, 30vw); cursor: grab; touch-action: none; }
#cardviewbody .tipcardface.is3d:active { cursor: grabbing; }
#cardviewbody .tipcard:has(.is3d) { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
#tooltip .tipcardface.is3d { width: 112px; height: 168px; margin: 14px 8px; }
@media (max-width: 600px) {
  #cardviewbody .tipcardface.is3d { width: min(220px, 60vw); margin: 30px auto; }
  #cardrevealart.reveal-spread:has(.rv3d) { gap: 18px 14px; }
  .rv-card.rv3d { width: clamp(96px, 27vw, 130px); }
}

/* Deck app (ADR 0132): the character's passives as cards, the skills with the supports aimed at
   them (and what each support changed), then the stored cards with a detail panel. */
#cards .decksec { margin: 10px 0 14px; }
#cards .dsechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #1c3440; }
#cards .dsechead h4 { margin: 0; font-family: var(--logofont); font-weight: 400; font-size: calc(20px * var(--fontscale, 1)); letter-spacing: 1px; color: #eafcff; line-height: 1; }
#cards .dsechead p { margin: 3px 0 0; color: #7fa4b0; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.35; }
#cards .dsecmeter { position: relative; flex: none; min-width: 64px; padding: 3px 8px 5px; text-align: right; color: #7fa4b0; font-size: calc(11px * var(--fontscale, 1)); }
#cards .dsecmeter b { color: #eafcff; font-size: calc(16px * var(--fontscale, 1)); font-family: var(--logofont); font-weight: 400; }
#cards .dsecmeter::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #00e5ff var(--fill, 0%), #10202b var(--fill, 0%)); }
#cards .passives .dsecmeter::after { background: linear-gradient(90deg, #f4c96a var(--fill, 0%), #10202b var(--fill, 0%)); }
#cards .decktotals { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 9px; }
#cards .decktotals span { padding: 3px 8px; border-radius: 999px; background: #0b1822; border: 1px solid #f4c96a44; color: #cfe3ea; font-size: calc(11px * var(--fontscale, 1)); }
#cards .decktotals b { color: #ffe39a; font-weight: 700; }

/* A card, small: the composed face is a background image, name and effect below it. */
#cards .mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px 8px; }
#cards .mcard { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#cards .mcface { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 7px; background: #070b14 center / cover no-repeat;
  box-shadow: 0 4px 10px rgba(0,0,0,.5); transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; }
#cards .mcface.pending { display: grid; place-items: start center; padding-top: 7%; background: linear-gradient(160deg, #1b2130, #070b14); }
#cards .mcface.pending .mcart { width: 86%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; opacity: .8; }
#cards .mcard:hover .mcface, #cards .mcard:focus-visible .mcface { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 16px rgba(0,0,0,.6), 0 0 14px var(--mcglow, transparent); }
#cards .mcard.r-uncommon { --mcglow: rgba(47, 229, 138, .35); } #cards .mcard.r-rare { --mcglow: rgba(43, 156, 229, .5); }
#cards .mcard.r-legendary { --mcglow: rgba(255, 154, 45, .55); } #cards .mcard.r-mythic { --mcglow: rgba(244, 224, 138, .6); }
#cards .mcard.r-mythic.align-dark { --mcglow: rgba(196, 92, 255, .6); }
#cards .mcard.r-legendary .mcface, #cards .mcard.r-mythic .mcface { box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 0 8px var(--mcglow); }
#cards .mcard .cgrade { left: 5px; bottom: auto; top: 5px; }
#cards .mcard .cdup { right: 5px; top: 5px; }
#cards .mccap { display: grid; gap: 1px; min-width: 0; }
#cards .mccap b { color: #eef9ff; font-size: calc(11px * var(--fontscale, 1)); font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cards .mccap span { color: #8fe0d6; font-size: calc(10px * var(--fontscale, 1)); line-height: 1.25; }
#cards .mcard.r-uncommon .mccap b { color: #b9ffd9; } #cards .mcard.r-rare .mccap b { color: #bfe3ff; }
#cards .mcard.r-legendary .mccap b { color: #ffd9a8; } #cards .mcard.r-mythic .mccap b { color: #fff1bd; }
#cards .mcard.on .mcface { outline: 2px solid var(--magenta); outline-offset: 2px; }
#cards .mcard.nofit .mcface { filter: saturate(.35) brightness(.7); }
#cards .mcard.free .mcface { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #0a121b 0 6px, #0c1620 6px 12px); border: 1px dashed #24404d; box-shadow: none; }
#cards .mcard.free b { font-size: 26px; color: #2d5563; font-weight: 400; }
#cards .mcard.free:hover .mcface { border-color: var(--cyan); } #cards .mcard.free:hover b { color: var(--cyan); }
#cards .mcremove { position: absolute; right: -5px; top: -5px; z-index: 6; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid #ff4f7a; background: #1a0a12; color: #ff8aa5; font: 700 13px/18px sans-serif; cursor: pointer; opacity: 0; transition: opacity .15s; }
#cards .mcard:hover .mcremove, #cards .mcremove:focus-visible { opacity: 1; }
@media (hover: none) { #cards .mcremove { opacity: 1; } }
/* ADR 0135: the first card on a skill sets its element; ◀ moves a card one to the left. */
#cards .mcmove { position: absolute; left: -5px; top: -5px; z-index: 6; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid #00e5ff; background: #07131b; color: #7feaff; font: 700 9px/18px sans-serif; cursor: pointer; opacity: 0; transition: opacity .15s; }
#cards .mcard:hover .mcmove, #cards .mcmove:focus-visible { opacity: 1; }
@media (hover: none) { #cards .mcmove { opacity: 1; } }
#cards .mcard.elfirst .mcface { box-shadow: 0 0 0 1px #ffe23d, 0 0 8px rgba(255, 226, 61, .45); }

/* Skills and their supports. */
#cards .sklist { display: grid; gap: 7px; }
#cards .skcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px;
  border: 1px solid #16303b; border-radius: 6px; background: linear-gradient(90deg, #0a1520, #070d15); }
#cards .skcard.has { border-color: #1f4a5a; }
#cards .skcard.aim { border-color: var(--magenta); box-shadow: 0 0 10px rgba(255, 45, 138, .25); }
#cards .skc-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
#cards .skc-head canvas.glyph { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
#cards .skc-head .glyph { flex: none; font-size: 20px; }
#cards .skc-head b { color: #eafcff; font-size: calc(12px * var(--fontscale, 1)); }
#cards .skc-head i { color: #ffb347; font-style: normal; font-size: calc(10px * var(--fontscale, 1)); }
#cards .skc-delta { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 2px; font-size: calc(10.5px * var(--fontscale, 1)); color: #86a8b3; }
#cards .skc-delta b { color: #7dffc4; font-weight: 700; }
#cards .skc-delta s { color: #5b707a; }
#cards .skc-delta em { color: #58707a; font-style: normal; }
#cards .skc-cards { display: flex; align-items: center; gap: 6px; }
#cards .mcard.small { width: 46px; }
#cards .mcard.small .cgrade { display: none; }
#cards .skc-add { width: 30px; height: 45px; border-radius: 6px; border: 1px dashed #2a5160; background: #08121b; color: #4e8595; font-size: 18px; cursor: pointer; }
#cards .skc-add:hover, #cards .skcard.aim .skc-add { color: var(--magenta); border-color: var(--magenta); }

/* The picked stored card. */
#cards .carddetail { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; margin: 4px 0 12px; padding: 10px;
  border: 1px solid #22404c; border-radius: 8px; background: radial-gradient(circle at 0 0, rgba(0, 229, 255, .08), transparent 60%), #070d15; }
#cards .carddetail.r-legendary { border-color: #ff9a2d66; } #cards .carddetail.r-mythic { border-color: #f4e08a77; }
#cards .mcard.big { width: 120px; }
#cards .cdinfo { display: grid; align-content: start; gap: 6px; min-width: 0; }
#cards .cdname { font-family: var(--logofont); font-weight: 400; font-size: calc(20px * var(--fontscale, 1)); line-height: 1; }
#cards .cdkind { color: #7fa4b0; font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; }
#cards .cdfx { display: grid; gap: 4px; }
#cards .fxrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; padding: 5px 8px; border-radius: 5px; background: #0c1822; }
#cards .fxrow span { color: #b6d6df; font-size: calc(11px * var(--fontscale, 1)); }
#cards .fxrow b { color: #eafcff; font-family: var(--logofont); font-weight: 400; font-size: calc(18px * var(--fontscale, 1)); line-height: 1; }
#cards .fxrow i { grid-column: 1 / -1; color: #5f7f89; font-style: normal; font-size: calc(10px * var(--fontscale, 1)); }
#cards .fxrow.maxed b { color: #ffd76a; }
#cards .cdhint { margin: 0; color: #7fa4b0; font-size: calc(10.5px * var(--fontscale, 1)); line-height: 1.4; }
#cards .cdact { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
#cards .cdacthead { flex-basis: 100%; color: var(--cyan); font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; }
#cards .cdact button { font: inherit; font-size: calc(11px * var(--fontscale, 1)); cursor: pointer; color: #cfeff5; background: #0c1824; border: 1px solid #00e5ff55; border-radius: 5px; padding: 4px 8px; }
#cards .cdact button.primary { color: #061018; background: linear-gradient(180deg, #ffe39a, #f4b64a); border-color: #ffd57a; font-weight: 700; }
#cards .cdact .fitbtn { display: inline-flex; align-items: center; gap: 5px; }
#cards .cdact .fitbtn canvas.glyph { width: 16px; height: 16px; image-rendering: pixelated; }
#cards .cdact .fitbtn i { font-style: normal; color: #7dffc4; font-size: calc(10px * var(--fontscale, 1)); }
#cards .cdact .fitbtn:hover:not(:disabled) { border-color: var(--cyan); color: #fff; }
#cards .cdact .fitbtn.no, #cards .cdact button:disabled { opacity: .38; cursor: not-allowed; }
@media (max-width: 480px) {
  #cards .mgrid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px 6px; }
  #cards .skcard { grid-template-columns: 1fr; }
  #cards .skc-cards { flex-wrap: wrap; }
  #cards .carddetail { grid-template-columns: 92px minmax(0, 1fr); }
  #cards .mcard.big { width: 92px; }
}
@media (prefers-reduced-motion: reduce) { #cards .mcface { transition: none; } }
#cards .skbarehead { margin-top: 4px; color: #6c8c97; font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; }
/* Builds (ADR 0162): one recipe per section, its wants per row and the cards the server picked. */
#cards .bldintro { margin: 8px 0 4px; }
#cards .decksec.build { padding: 9px 10px 10px; border: 1px solid #16303b; border-radius: 8px; background: linear-gradient(180deg, #0a1520, #070d15); }
#cards .decksec.build.active { border-color: #7dffc466; box-shadow: 0 0 12px rgba(125, 255, 196, .12); }
#cards .bldrows { display: grid; gap: 5px; }
#cards .bldrow { display: grid; gap: 5px; padding: 5px 7px; border-radius: 5px; background: #0c1822; }
#cards .bldrow.locked { opacity: .55; }
#cards .bldhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; }
#cards .bldhead canvas.glyph { width: 20px; height: 20px; image-rendering: pixelated; flex: none; }
#cards .bldhead .glyph { flex: none; font-size: 15px; color: #f4c96a; }
#cards .bldhead b { color: #eafcff; font-size: calc(12px * var(--fontscale, 1)); }
#cards .bldhead i { margin-left: auto; color: #ffb347; font-style: normal; font-size: calc(10px * var(--fontscale, 1)); }
#cards .bldkeys { display: flex; flex-wrap: wrap; gap: 3px; flex: 1 1 auto; min-width: 0; }
#cards .bldkey { padding: 1px 6px; border-radius: 999px; border: 1px solid #24404d; color: #9fc3cc; font-size: calc(10px * var(--fontscale, 1)); }
#cards .bldkey.first { border-color: #00e5ff66; color: #cfeff5; }
#cards .bldn { margin-left: auto; color: #ffb347; font-style: normal; font-weight: 700; font-size: calc(11px * var(--fontscale, 1)); }
#cards .bldn.full { color: #7dffc4; }
#cards .bldcards { flex-wrap: wrap; }
#cards .bldmissing { margin: 7px 0 0; color: #8aa9b3; font-size: calc(10.5px * var(--fontscale, 1)); line-height: 1.45; }
#cards .bldmissing b { color: #ffb347; }
#cards .decksec.build .cdact { margin-top: 8px; justify-content: flex-end; }
/* Quick swap + custom slots (ADR 0165). The bar is one tap per build; custom slots are magenta. */
#cards .bldbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 8px; padding: 6px 7px; border: 1px solid #16303b; border-radius: 6px; background: #08121b; }
#cards .bldbarlbl { color: var(--cyan); font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; margin-right: 2px; }
#cards .bldpill { font: inherit; font-size: calc(11px * var(--fontscale, 1)); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #cfeff5; background: #0c1824; border: 1px solid #00e5ff44; border-radius: 999px; padding: 3px 10px; }
#cards .bldpill:hover:not(:disabled) { border-color: var(--cyan); color: #fff; }
#cards .bldpill.custom { border-color: #ff3cac55; }
#cards .bldpill.custom:hover:not(:disabled) { border-color: var(--magenta); }
#cards .bldpill.empty { border-style: dashed; color: #8aa9b3; }
#cards .bldpill.on { color: #061018; background: #7dffc4; border-color: #7dffc4; font-weight: 700; cursor: default; }
#cards .bldpill:disabled:not(.on) { opacity: .38; cursor: not-allowed; }
#cards .bldcustomhead { margin: 14px 0 6px; padding-top: 8px; border-top: 1px solid #1c3440; }
#cards .bldcustomhead h4 { margin: 0; font-family: var(--logofont); font-weight: 400; font-size: calc(18px * var(--fontscale, 1)); letter-spacing: 1px; color: #ffb3dd; }
#cards .bldcustomhead p { margin: 3px 0 0; }
#cards .decksec.build.custom { border-color: #ff3cac33; }
#cards .decksec.build.custom.active { border-color: #7dffc466; }
#cards .decksec.build.custom.empty { border-style: dashed; background: none; }
#cards .bldren { margin-left: 6px; padding: 0 5px; font: inherit; font-size: calc(12px * var(--fontscale, 1)); color: #8aa9b3; background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; vertical-align: middle; }
#cards .bldren:hover { color: #fff; border-color: #ff3cac66; }
#cards .bldname { min-width: 0; width: min(220px, 100%); font: inherit; font-size: calc(14px * var(--fontscale, 1)); color: #eafcff; background: #0c1824; border: 1px solid var(--magenta); border-radius: 4px; padding: 3px 6px; }
#cards .cdact button.danger { color: var(--hp); border-color: var(--hp); margin-right: auto; }
#cards .skbare { display: flex; flex-wrap: wrap; gap: 5px; }
#cards .skbarebtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font: inherit; font-size: calc(11px * var(--fontscale, 1)); color: #b9d6de; cursor: pointer;
  background: #0a1520; border: 1px solid #16303b; border-radius: 999px; }
#cards .skbarebtn canvas.glyph { width: 16px; height: 16px; image-rendering: pixelated; }
#cards .skbarebtn b { color: #4e8595; font-weight: 400; }
#cards .skbarebtn:hover, #cards .skbarebtn.aim { border-color: var(--magenta); color: #fff; }
#cards .skbarebtn:hover b, #cards .skbarebtn.aim b { color: var(--magenta); }
#cards .mcard.free .mcface { align-content: center; gap: 2px; }
#cards .mcard.free small { color: #4e7885; font-size: calc(10px * var(--fontscale, 1)); }

/* Collection (redesigned): a ring for the whole set, a bar per rarity, filters, card tiles. */
#cards .dexhero { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin: 6px 0 10px; padding: 10px;
  border: 1px solid #1c3642; border-radius: 10px; background: radial-gradient(circle at 12% 30%, rgba(196, 92, 255, .14), transparent 55%), #070d15; }
#cards .dexring { position: relative; width: 96px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#f4e08a 0, #c45cff calc(var(--p) * 1%), #13222c 0); display: grid; place-items: center; }
#cards .dexring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #070d15; box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
#cards .dexring > div { position: relative; text-align: center; line-height: 1; }
#cards .dexring b { font-family: var(--logofont); font-weight: 400; font-size: 30px; color: #fff4c8; }
#cards .dexring span { color: #7fa4b0; font-size: 12px; }
#cards .dexring i { display: block; margin-top: 3px; font-style: normal; color: #c9a9ff; font-size: 11px; letter-spacing: 1px; }
#cards .dexbars { display: grid; gap: 5px; min-width: 0; }
#cards .dexrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 42px; align-items: center; gap: 6px; font-size: calc(10.5px * var(--fontscale, 1)); color: #b6cfd7; }
#cards .dexrow i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--rc) var(--fill, 0%), #13222c var(--fill, 0%)); }
#cards .dexrow b { text-align: right; color: #eafcff; font-weight: 700; }
#cards .dexrow.r-common { --rc: var(--rc-common); } #cards .dexrow.r-uncommon { --rc: var(--rc-uncommon); }
#cards .dexrow.r-rare { --rc: var(--rc-rare); } #cards .dexrow.r-legendary { --rc: var(--rc-legendary); }
#cards .dexrow.r-mythic { --rc: var(--rc-mythic); }
#cards .dexrow.pity { grid-template-columns: minmax(0, 1fr); color: #f4e08a; margin-top: 3px; }
#cards .dexrow.pity i { --rc: #c45cff; }
#cards .dexfilters { position: sticky; top: 30px; z-index: 8; display: grid; gap: 5px; padding: 6px 0 8px; background: var(--panel, #0b0f19); }
#cards .dexsearch { display: flex; gap: 6px; }
#cards .dexsearch input, #cards .dexsearch select { font: inherit; font-size: calc(12px * var(--fontscale, 1)); color: #eafcff; background: #08121b; border: 1px solid #1f4250; border-radius: 6px; padding: 5px 9px; }
#cards .dexsearch input { flex: 1; min-width: 0; }
#cards .dexsearch input:focus, #cards .dexsearch select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0, 229, 255, .15); }
#cards .dexfilters .cardchips { margin: 0; }
#cards .dexfilters .cardchips button { border-radius: 999px; }
#cards .dexrar button:nth-child(2) { color: var(--rc-common); } #cards .dexrar button:nth-child(3) { color: var(--rc-uncommon); }
#cards .dexrar button:nth-child(4) { color: var(--rc-rare); } #cards .dexrar button:nth-child(5) { color: var(--rc-legendary); }
#cards .dexrar button:nth-child(6) { color: var(--rc-mythic); }
#cards .dexrar button.on { color: #061018; }
#cards .dexhead { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 7px; padding-bottom: 4px; border-bottom: 1px solid #1c3440;
  font-family: var(--logofont); font-size: calc(17px * var(--fontscale, 1)); color: #eafcff; letter-spacing: 1px; }
#cards .dexhead b { font-family: inherit; font-weight: 400; color: #7fa4b0; font-size: .85em; }
#cards .mcard.dex .dexno { position: absolute; left: 50%; top: -7px; z-index: 6; transform: translateX(-50%); padding: 0 5px; border-radius: 3px;
  background: #050910; border: 1px solid #1f4250; color: #7fa4b0; font-size: 9px; letter-spacing: 1px; line-height: 13px; }
#cards .mcard.dex.locked .mccap b { color: #4f6670; }
#cards .mcard.dex.locked .mccap span { color: #3f5963; }
#cards .mcard.dex.locked .mcface { box-shadow: 0 3px 8px rgba(0,0,0,.5); }

/* Fusion: rarity tabs, the altar (five card slots → charged beam → the back that comes out). */
#cards .fuserar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 6px 0 10px; }
#cards .fuserar button { display: grid; gap: 1px; padding: 5px 4px; font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid #1c3642; background: #08121b; color: var(--rc); }
#cards .fuserar button span { font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; }
#cards .fuserar button b { font-family: var(--logofont); font-weight: 400; font-size: 18px; color: #eafcff; }
#cards .fuserar button.r-common { --rc: var(--rc-common); } #cards .fuserar button.r-uncommon { --rc: var(--rc-uncommon); }
#cards .fuserar button.r-rare { --rc: var(--rc-rare); } #cards .fuserar button.r-legendary { --rc: var(--rc-legendary); }
#cards .fuserar button.ready { border-color: color-mix(in srgb, var(--rc) 55%, #1c3642); }
#cards .fuserar button.on { border-color: var(--rc); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--rc) 18%, transparent); }
#cards .fusealtar { --rc: var(--rc-uncommon); position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 10px; border-radius: 12px; border: 1px solid #1c3642;
  background: radial-gradient(ellipse at 80% 50%, color-mix(in srgb, var(--rc) calc(var(--charge) * 30%), transparent), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px), #060b13; }
#cards .fusealtar.r-uncommon { --rc: var(--rc-uncommon); } #cards .fusealtar.r-rare { --rc: var(--rc-rare); }
#cards .fusealtar.r-legendary { --rc: var(--rc-legendary); } #cards .fusealtar.r-mythic { --rc: var(--rc-mythic); }
#cards .fuseslots { display: flex; gap: 6px; }
#cards .fslot { width: 54px; flex: none; }
#cards .fslot.empty { display: grid; place-items: center; aspect-ratio: 2 / 3; border-radius: 7px; border: 1px dashed #28495a; color: #2f5566; font-family: var(--logofont); font-size: 20px;
  background: repeating-linear-gradient(135deg, #0a121b 0 6px, #0c1620 6px 12px); }
#cards .fusebeam { position: relative; width: 44px; height: 6px; border-radius: 3px; background: #10202b; overflow: hidden; }
#cards .fusebeam i { position: absolute; inset: 0 auto 0 0; width: calc(var(--charge) * 100%); background: linear-gradient(90deg, #00e5ff, var(--rc)); box-shadow: 0 0 8px var(--rc); transition: width .3s ease; }
#cards .fusealtar.full .fusebeam i { animation: fuse-beam 1s linear infinite; background: linear-gradient(90deg, #00e5ff, var(--rc), #fff, var(--rc)); background-size: 200% 100%; }
@keyframes fuse-beam { to { background-position: -200% 0; } }
#cards .fuseresult { display: grid; justify-items: center; gap: 5px; width: 78px; }
#cards .fuseback { width: 78px; aspect-ratio: 2 / 3; border-radius: 8px; background: #0b1024 center / cover no-repeat; display: grid; place-items: center;
  box-shadow: 0 0 calc(6px + var(--charge) * 18px) color-mix(in srgb, var(--rc) 70%, transparent); transition: box-shadow .3s ease; }
#cards .fuseback b { font-family: var(--logofont); font-size: 34px; color: var(--rc); font-weight: 400; }
#cards .fusealtar.full .fuseback { animation: fuse-ready 1.4s ease-in-out infinite; }
@keyframes fuse-ready { 50% { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 28px var(--rc); } }
#cards .fuseresult span { color: var(--rc); font-size: calc(10px * var(--fontscale, 1)); text-align: center; line-height: 1.25; }
#cards .fuseinfo { margin: 8px 0; color: #7fa4b0; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.4; }
#cards .fuseactions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#cards .fuseactions button { font: inherit; font-size: calc(11px * var(--fontscale, 1)); cursor: pointer; color: #cfeff5; background: #0c1824; border: 1px solid #00e5ff55; border-radius: 6px; padding: 5px 10px; }
#cards .fuseactions .fusego { margin-left: auto; font-weight: 700; letter-spacing: .5px; }
#cards .fuseactions .fusego:not(:disabled) { color: #061018; border-color: #ffd57a; background: linear-gradient(180deg, #ffe39a, #f4b64a); box-shadow: 0 0 12px rgba(255, 213, 122, .35); }
#cards .fuseactions button:disabled { opacity: .4; cursor: default; }
#cards .fusepick { position: absolute; right: -5px; top: -5px; z-index: 6; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--magenta); color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 0 8px rgba(255, 45, 138, .6); }
#cards .mcard.dim .mcface { filter: brightness(.55) saturate(.6); }
@media (max-width: 480px) {
  #cards .dexhero { grid-template-columns: 78px minmax(0, 1fr); }
  #cards .dexfilters { position: static; }   /* three chip rows would cover the grid on a phone */
  #cards .dexring { width: 78px; }
  #cards .dexring b { font-size: 24px; }
  #cards .fslot { width: 46px; }
  #cards .fusebeam { width: 100%; order: 2; }
  #cards .fuseresult { order: 3; }
}
@media (prefers-reduced-motion: reduce) { #cards .fusealtar.full .fusebeam i, #cards .fusealtar.full .fuseback { animation: none; } }

/* Elements (ADR 0133): the badge (app, tooltip, bestiary, hunt cast), the Elements tab. */
.elbadge { --el: #fff; display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 1px 7px 1px 2px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--el) 55%, transparent); background: color-mix(in srgb, var(--el) 12%, #060a12);
  color: var(--el); font-size: calc(11px * var(--fontscale, 1)); line-height: 16px; white-space: nowrap; font-style: normal; }
.elbadge img { width: 16px; height: 16px; flex: none; }
.elbadge b { font-weight: 700; color: var(--el); }
.elbadge i { font-style: normal; color: #eafcff; opacity: .85; font-size: .9em; }
.elbadge.sm { padding: 0 5px 0 1px; font-size: calc(10px * var(--fontscale, 1)); line-height: 14px; gap: 3px; }
.elbadge.sm img { width: 14px; height: 14px; }
.skbarebtn .elbadge, .fitbtn .elbadge { padding: 0 1px; border: 0; background: none; }
.tipelem, #cards .cdelem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 5px 0; color: #b6cfd7; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.35; }
.tipelem > span:not(.elbadge), #cards .cdelem > span:not(.elbadge) { flex: 1; min-width: 140px; }
.tipelem > .elbadge, #cards .cdelem > .elbadge { flex: none; }
.bestel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; color: #9fb8c2; }
#cards .elintro p { margin: 4px 0 8px; color: #9fbac4; font-size: calc(11.5px * var(--fontscale, 1)); line-height: 1.45; }
#cards .elgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px; }
#cards .elcard { --el: #fff; position: relative; padding: 8px 9px; border-radius: 10px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--el) 40%, #1c3642);
  background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--el) 20%, transparent), transparent 60%), #070d15; }
#cards .elhead { display: flex; align-items: center; gap: 7px; }
#cards .elhead img { width: 28px; height: 28px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--el) 60%, transparent)); }
#cards .elhead b { font-family: var(--logofont); font-weight: 400; font-size: calc(18px * var(--fontscale, 1)); color: var(--el); letter-spacing: 1px; }
#cards .elhead span { margin-left: auto; color: #eafcff; font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 1px; opacity: .8; }
#cards .elcard p { margin: 6px 0; color: #c7dde4; font-size: calc(11px * var(--fontscale, 1)); line-height: 1.35; min-height: 2.7em; }
#cards .elvs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
#cards .elvs em { font-style: normal; font-size: calc(10px * var(--fontscale, 1)); width: 78px; flex: none; }
#cards .elvs.up em { color: #7dff9a; } #cards .elvs.down em { color: #ff8095; }
#cards .elreacts { display: inline-flex; flex-wrap: wrap; gap: 3px 6px; vertical-align: middle; }
.elreact { display: inline-flex; align-items: center; gap: 2px; color: #7fa4b0; font-size: calc(10px * var(--fontscale, 1)); }
#cards .elrxlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-bottom: 10px; }
#cards .elrx { --el: #fff; padding: 6px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--el) 35%, #1c3642); background: #070d15; }
#cards .elrx > div { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#cards .elrx i { font-style: normal; color: #7fa4b0; }
#cards .elrxmatrix td { background: color-mix(in srgb, var(--el, #070d15) 14%, #070d15); }
#cards .elrxmatrix td img { width: 16px; height: 16px; display: block; margin: auto; }
#cards .elrxmatrix td.same { color: #7dff9a; font-size: 9px; background: #0b1a14; }
#cards .elrxwhy { margin-bottom: 10px; }
#cards .elrxwhy summary { cursor: pointer; color: #7feaff; font-size: calc(11px * var(--fontscale, 1)); margin-bottom: 6px; }
#cards .elrx p { margin: 4px 0 0; color: #c7dde4; font-size: calc(10.5px * var(--fontscale, 1)); line-height: 1.35; }
#cards .elmatrix { overflow-x: auto; margin-bottom: 10px; }
#cards .elmatrix table { border-collapse: collapse; margin: 0 auto; }
#cards .elmatrix th, #cards .elmatrix td { width: 24px; height: 24px; padding: 0; text-align: center; border: 1px solid #13222c; }
#cards .elmatrix th img { width: 18px; height: 18px; display: block; margin: auto; }
#cards .elmatrix th.corner { width: auto; padding: 0 4px; font-size: 9px; color: #7fa4b0; font-weight: 400; white-space: nowrap; }
#cards .elmatrix td { font-size: 11px; background: #070d15; }
#cards .elmatrix td.up { color: #7dff9a; background: rgba(46, 204, 113, .14); }
#cards .elmatrix td.down { color: #ff8095; background: rgba(255, 64, 96, .12); }
#cards .elmatrix tr:hover td { outline: 1px solid rgba(0, 229, 255, .12); }
@media (max-width: 480px) {
  #cards .elgrid { grid-template-columns: minmax(0, 1fr); }
  #cards .elmatrix th, #cards .elmatrix td { width: 22px; height: 22px; }
}

/* ============================================================================================
   HUD v4 (ADR 0137): a HUD atual, limpa. Mesmas funções, agrupadas: painéis chapados sem brilho,
   cantos retos, uma cor de acento (ciano) e uma de dinheiro (âmbar). Tokens --v4-* abaixo; o
   bloco fica no fim do arquivo e vence as passadas A2.x anteriores por ordem e especificidade.
   ============================================================================================ */
:root {
  --v4-acc: #00e5ff; --v4-acc2: #ffd23f; --v4-tx: #f2ede0; --v4-dim: #9f896b;
  --v4-line: #14b8c455; --v4-pbg: #05060eeb; --v4-dock: #05060ef4; --v4-trk: #17151f;
  /* Vida vermelha e energia azul (pedido do usuário); o dano da telemetria fica no magenta (--v4-dmg). */
  --v4-hp: #ff3b4e; --v4-en: #2f8bff; --v4-es: #39ff14; --v4-xp: #6c43b8; --v4-red: #ff3b4e; --v4-dmg: #ff2ec8;
  --v4-font: 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif;
  --v4-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
}
#bottom, #bottom *, #huntrun, #huntrun *, #partycard, #partycard *, #chatbox, #chatbox *,
#chatflip, #chatflip *, #viewwrap #mmpanel, #viewwrap #mmpanel *, #phone, #phone * {
  font-family: var(--v4-font);
}
#huntrun b, #bottom .hudbarval, #bottom #crtxt, #bottom #pctxt, #bottom kbd, #bottom .hot .key,
#bottom .hot .qty, #chatflip .chatflip-unread { font-family: var(--v4-mono); }

/* ---------- telemetria (canto superior esquerdo) ---------- */
#viewwrap #huntrun {
  top: 16px; left: 16px; width: auto; max-width: calc(100% - 32px); padding: 0;
  color: var(--v4-tx); background: var(--v4-pbg); border: 1px solid var(--v4-line);
  box-shadow: none; clip-path: none; backdrop-filter: none; border-radius: 0;
}
#huntrun::after { display: none; }
/* Jogadores online: chip no mesmo canto da telemetria, só fora da hunt (dentro, o número
   vai na linha do #huntrun como mais um KPI). */
#viewwrap #onlinecounter {
  top: 16px; left: 16px; gap: 8px; max-width: calc(100% - 32px); height: 30px; box-sizing: border-box;
  padding: 0 12px; background: var(--v4-pbg); border: 1px solid var(--v4-line); clip-path: none;
  font-family: var(--v4-font);
}
body.hrshow #onlinecounter { display: none; }
#viewwrap #onlinecount { color: var(--v4-tx); font-family: var(--v4-mono); font-size: calc(13px * var(--fontscale, 1)); font-weight: 700; }
#viewwrap .online-label { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .04em; }
#viewwrap .online-dot, #huntrun .hronline-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #45f3b4; box-shadow: 0 0 6px #45f3b4aa; }
#huntrun .hronline { align-items: center; }
#huntrun .hronline b { color: var(--v4-tx); }
#huntrun .hrtop {
  display: flex; align-items: center; gap: 14px; height: 44px; min-height: 0; margin: 0;
  padding: 0 12px; border: 0; background: transparent; color: var(--v4-tx); cursor: pointer;
  text-align: left; letter-spacing: 0; text-transform: none; pointer-events: auto;
  font-size: calc(12px * var(--fontscale, 1));
}
#huntrun .hrtop:hover { background: #ffffff08; }
#huntrun .hrtop:focus-visible { outline: 1px solid var(--v4-acc); outline-offset: -1px; }
#huntrun .hrdot { width: 7px; height: 7px; border-radius: 50%; background: var(--v4-dim); box-shadow: none; }
#huntrun.live .hrdot { background: var(--v4-red); }
#huntrun .hrbrand {
  max-width: min(300px, 30vw); color: var(--v4-tx); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-shadow: none;
}
#huntrun .hrkpi { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
#huntrun .hrkpi i, #huntrun .hrmetric i {
  font-style: normal; color: var(--v4-dim); text-transform: uppercase;
  font-size: calc(10px * var(--fontscale, 1));
}
#huntrun .hrkpi b { font-size: calc(14px * var(--fontscale, 1)); font-weight: 700; }
#huntrun .hr-xph { color: var(--v4-acc); }
#huntrun .hr-gold { color: var(--v4-acc2); }
#huntrun .hr-dmg, #huntrun .hr-dps { color: var(--v4-dmg); }
#huntrun .hr-taken { color: var(--v4-red); }
#huntrun .hr-heal { color: var(--v4-es); }
#huntrun .hrchev::before { content: '\25BE'; color: var(--v4-dim); font-size: 11px; }
#huntrun.open .hrchev::before { content: '\25B4'; }
#huntrun .hrstats {
  display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr)); gap: 1px; margin: 0;
  background: var(--v4-line); border-top: 1px solid var(--v4-line); pointer-events: auto;
}
#huntrun .hrstats[hidden] { display: none; }
#huntrun .hrmetric {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 12px;
  background: #05060e; border: 0; box-shadow: none;
}
#huntrun .hrmetric b { font-size: calc(16px * var(--fontscale, 1)); font-weight: 700; color: var(--v4-tx); }
#huntrun .hrmetric b.hr-xph { color: var(--v4-acc); }
#huntrun .hrmetric b.hr-gold { color: var(--v4-acc2); }
#huntrun .hrmetric b.hr-dmg { color: var(--v4-dmg); }
#huntrun .hrmetric b.hr-taken { color: var(--v4-red); }
#huntrun .hrmetric b.hr-heal { color: var(--v4-es); }

/* ---------- cartão da caçada (canto superior direito) ---------- */
#viewwrap #partycard {
  top: 16px; right: 16px; width: 270px; max-width: calc(100% - 32px); padding: 0;
  color: var(--v4-tx); background: var(--v4-pbg); border: 1px solid var(--v4-line);
  border-radius: 0; clip-path: none; box-shadow: none; backdrop-filter: none;
  font-size: calc(12px * var(--fontscale, 1));
}
#partycard .partycardhead { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; margin: 0; border: 0; }
#partycard .partycardhead h3 {
  flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--v4-tx); font-size: calc(12px * var(--fontscale, 1)); font-weight: 600;
  letter-spacing: 0; text-transform: none; text-shadow: none;
}
#partycard .partycardhead h3::before, #partycard .partycardhead h3::after { display: none; content: none; }
#partycard .partycardactions { display: flex; gap: 2px; }
#partycard .partycardactions button {
  width: 22px; height: 22px; padding: 0; color: var(--v4-dim); background: transparent;
  border: 1px solid transparent; border-radius: 0; box-shadow: none; line-height: 1;
}
#partycard .partycardactions button:hover { color: var(--v4-tx); border-color: var(--v4-line); }
#partycard button { border-radius: 0; box-shadow: none; }
#partycard #partycardexit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 24px); min-height: 34px; margin: 10px 12px 0; padding: 0 12px;
  color: var(--v4-red); background: transparent; border: 1px solid var(--v4-red);
  font-weight: 700; cursor: pointer;
}
#partycard #partycardexit:hover, #partycard #partycardexit.leaving { color: #05060e; background: var(--v4-red); }
#partycard #partycardexit[hidden] { display: none; }
#partycardexit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#partycard #partygroupcontent { padding: 8px 12px 0; }
#partycard #huntstopsettings { margin: 0; padding: 0; border: 0; background: none; }
#partycard #huntstopsettings > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0;
  padding: 8px 12px 10px; color: var(--v4-dim); cursor: pointer; list-style: none;
  font-size: calc(11px * var(--fontscale, 1)); letter-spacing: 0; text-transform: none;
  background: none; border: 0;
}
#partycard #huntstopsettings > summary::-webkit-details-marker { display: none; }
#partycard #huntstopsettings > summary::before { display: none; content: none; }
#partycard #huntstopsettings > summary::after { content: '\25BE'; font-size: 10px; }
#partycard #huntstopsettings[open] > summary::after { content: '\25B4'; }
#partycard #huntstopsettings[open] > summary { color: var(--v4-tx); }
#partycard #huntstopoptions { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px 0; border-top: 1px solid var(--v4-line); }
#partycard #huntstopoptions label { color: var(--v4-tx); }
#partycard #huntstopoptions input[type=checkbox] { accent-color: var(--v4-acc); }
#partycard #huntstopoptions select {
  color: var(--v4-tx); background: #05060e; border: 1px solid var(--v4-line); border-radius: 0;
}
#partycard #huntstophint { padding: 4px 12px 12px; color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); line-height: 1.5; }
#partycard #partycardleave {
  width: calc(100% - 24px); margin: 0 12px 10px; color: var(--v4-dim); background: transparent;
  border: 1px solid var(--v4-line);
}
#partycard .pbar { background: var(--v4-trk); border-radius: 0; }
#partycard .pbar.hp > div { background: var(--v4-hp); }
#partycard .pbar.en > div { background: var(--v4-en); }

/* ---------- minimapa (acima do dock, à direita) ---------- */
html body:not(.freelayout) #viewwrap #mmpanel {
  right: 16px; bottom: 16px; width: 140px; height: 140px; padding: 0; gap: 0;
  background: #05060ee6; border: 1px solid var(--v4-line); border-radius: 0;
  box-shadow: none; clip-path: none; backdrop-filter: none;
}
html body:not(.freelayout) #viewwrap #mmpanel #minimap {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none;
}
html #viewwrap #mmpanel h3 {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; min-height: 0; margin: 0;
  padding: 3px 6px; border: 0; background: linear-gradient(0deg, #05060ee6, transparent);
  color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 0;
  pointer-events: none; justify-content: flex-start;
}
#viewwrap #mmpanel h3::before { display: none; content: none; }
#viewwrap #mmpanel .mmcompass { color: var(--v4-dim); font-style: normal; }
html #viewwrap #mmpanel #mmopen {
  position: static; margin-left: auto; pointer-events: auto; width: 18px; height: 18px; padding: 0; line-height: 1;
  color: var(--v4-dim); background: #05060ecc; border: 1px solid var(--v4-line); border-radius: 0;
}
#viewwrap #mmpanel #mmopen:hover { color: var(--v4-acc); border-color: var(--v4-acc); }

/* ---------- chat (acima do dock, à esquerda) ---------- */
body:not(.freelayout) #chatbox {
  left: 16px; bottom: calc(var(--barh) + 16px); width: 380px; height: 220px;
  background: var(--v4-pbg); border: 1px solid var(--v4-line); border-radius: 0;
  box-shadow: none; clip-path: none; backdrop-filter: none;
}
#chatbox #chathead { padding: 4px 6px 4px 8px; border-bottom: 1px solid var(--v4-line); background: none; }
#chatbox .chat-title { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .12em; }
#chatbox #chatfilters summary, #chatbox .chatgrip { color: var(--v4-dim); }
#chatbox .chatclose { color: var(--v4-dim); background: transparent; border: 0; box-shadow: none; border-radius: 0; }
#chatbox .chatclose:hover { color: var(--v4-tx); }
#chatbox #chatlog { color: var(--v4-tx); font-size: calc(12px * var(--fontscale, 1)); line-height: 1.4; }
#chatbox #chatinputrow { border-top: 1px solid var(--v4-line); background: none; }
#chatbox #chatinputrow input, #chatbox #chatinputrow select, #chatbox #chatinputrow button {
  color: var(--v4-tx); background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
#chatbox #chatinputrow select { color: var(--v4-acc); border-right: 1px solid var(--v4-line); }
#chatbox #chatin::placeholder { color: #836d54; }
/* Fechado: o chip mostra a última linha e a contagem do que chegou. */
#chatflip:not(.open) {
  left: 16px; bottom: calc(var(--barh) + 16px); height: auto; min-height: 34px; max-width: 380px;
  gap: 10px; padding: 7px 12px; color: var(--v4-tx); background: var(--v4-pbg);
  border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none; letter-spacing: 0;
  font-size: calc(12px * var(--fontscale, 1)); cursor: pointer; animation: none;
}
#chatflip:not(.open)::before {
  content: ''; flex: none; width: 16px; height: 16px; background: var(--v4-dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#chatflip:not(.open):hover { border-color: var(--v4-acc); }
#chatflip.open .chatflip-last, #chatflip.open .chatflip-unread { display: none; }
#chatflip:not(.open) .chatflip-label { color: var(--v4-dim); font-size: calc(12px * var(--fontscale, 1)); }
#chatflip .chatflip-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#chatflip:not(.open) .chatflip-last:empty { display: none; }
#chatflip:not(.open):has(.chatflip-last:not(:empty)) .chatflip-label { display: none; }
#chatflip .chatflip-unread {
  flex: none; padding: 1px 6px; color: #05060e; background: var(--v4-acc);
  font-size: calc(10px * var(--fontscale, 1)); font-weight: 700;
}
#chatflip .chatflip-unread[hidden] { display: none; }

/* ---------- dock ---------- */
@media (min-width: 901px), (min-width: 561px) and (max-height: 699px) {
  :root { --barh: 108px; }
  #left #bottom {
    display: flex; align-items: center; gap: 18px; height: var(--barh);
    padding: 0 16px; box-sizing: border-box; overflow: visible;
    grid-template-columns: none; background: var(--v4-dock);
    border: 0; border-top: 1px solid var(--v4-line); box-shadow: none;
  }
  #left #bottom > * {
    grid-column: auto; grid-row: auto; width: auto; max-width: none; height: auto; min-height: 0;
    margin: 0; flex: none;
  }
  #left #bottom > .panel, #left #bottom > button {
    padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    clip-path: none; backdrop-filter: none;
  }
  #left #bottom > .panel::before, #left #bottom > .panel::after,
  #left #bottom > button::before, #left #bottom > button::after { display: none; content: none; }

  /* barra de ações: 2 x 8 de 44px */
  #left #bottom > #hotbar { display: block; flex: none; }
  #left #hotbar .hb-head { display: none; }
  #left #hotbar .hb-grid {
    display: grid; grid-template-columns: repeat(8, 44px); grid-auto-rows: 44px; gap: 4px;
    width: auto; height: auto; padding: 0;
  }
  #left #hotbar .hot {
    position: relative; width: 44px; height: 44px; min-width: 0; min-height: 0; margin: 0;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #ffffff05; border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none;
  }
  #left #hotbar .hot:hover { border-color: var(--v4-acc); }
  #left #hotbar .hot.free { background: transparent; border-color: #14b8c42a; }
  #left #hotbar .hot .key {
    position: absolute; left: 3px; top: 1px; z-index: 2; color: var(--v4-dim);
    font-size: 9px; line-height: 1; background: none; border: 0; padding: 0; text-shadow: none;
  }
  #left #hotbar .hot .qty {
    position: absolute; right: 3px; bottom: 1px; z-index: 2; color: var(--v4-tx);
    font-size: 9px; line-height: 1; background: none; text-shadow: 0 1px 0 #000;
  }
  #left #hotbar .hot .cd { background: #05060ecc; }

  /* personagem */
  #left #bottom > #vitals {
    position: relative; flex: 1 1 0; min-width: 220px; max-width: 420px; height: 96px; padding-left: 18px;
    display: flex; align-items: center; border-left: 1px solid var(--v4-line);
  }
  #left #vitals #hudportrait { display: none; }
  #left #vitals #hudstats {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 78px; align-items: center;
    gap: 3px 8px; width: 100%; min-width: 0; padding: 0; background: none; border: 0;
    grid-auto-flow: row dense; line-height: 1.2;
  }
  #left #vitals #charheading {
    grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; margin: 0 0 2px;
    padding: 0; border: 0; min-width: 0; background: none;
  }
  #left #vitals #charname { color: var(--v4-tx); font-size: calc(14px * var(--fontscale, 1)); font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #left #vitals #lvltxt {
    min-width: 0; margin: 0; padding: 0; color: var(--v4-dim); background: none; border: 0; border-radius: 0;
    box-shadow: none; font-size: calc(11px * var(--fontscale, 1)); font-weight: 400; white-space: nowrap;
    letter-spacing: 0; text-align: left; text-transform: none;
  }
  #left #vitals .hudbarrow { display: contents; }
  #left #vitals .hudbar-label {
    display: block; min-width: 0; color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1));
    letter-spacing: 0; text-transform: uppercase; background: none; border: 0; padding: 0;
  }
  #left #vitals .hudbar-label svg { display: none; }
  #left #vitals .hudbar-label .hudlabeltext { display: inline; font-style: normal; }
  #left #vitals .bar {
    position: relative; height: 8px; min-width: 0; margin: 0; background: var(--v4-trk);
    border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
  }
  #left #vitals .bar > div { height: 100%; border-radius: 0; box-shadow: none; background-image: none; }
  #left #vitals .bar::before, #left #vitals .bar::after { display: none; }
  #left #vitals #hpbar > div:not(.ghost) { background: var(--v4-hp); }
  #left #vitals #hpbar > .ghost { background: #ff3b4e55; }
  #left #vitals #enbar > div { background: var(--v4-en); }
  #left #vitals #shbar > div { background: var(--v4-es); }
  #left #vitals .hudbarval {
    color: var(--v4-tx); font-size: calc(10px * var(--fontscale, 1)); text-align: right;
    white-space: nowrap; letter-spacing: 0; text-shadow: none;
  }
  /* rodapé: XP fina + estamina em texto, como no v4 */
  #left #vitals .xprow, #left #vitals .stamrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
  #left #vitals .xprow { grid-column: 1 / 3; }
  #left #vitals .stamrow { grid-column: 3; justify-content: flex-end; }
  #left #vitals #xpbarlabel { display: none; }
  #left #vitals #xpbar { flex: 1 1 auto; height: 3px; }
  #left #vitals #xpbar > div { background: var(--v4-xp); }
  #left #vitals .xprow .hudbarval, #left #vitals .stamrow .hudbarval,
  #left #vitals .stamrow .hudbar-label { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); }
  #left #vitals .xprow .hudbarval::before { content: 'XP '; }
  #left #vitals .stamrow #stambar { display: none; }
  #left #vitals .stamrow.gain .hudbarval { color: var(--v4-es); }
  #left #vitals .stamrow:has(#stambar.warn) .hudbarval { color: var(--v4-acc2); }
  #left #vitals .stamrow:has(#stambar.max) .hudbarval { color: var(--v4-red); }
  #left #vitals .stamrow .stamgain { position: static; }
  #left #vitals #restbtn {
    position: static; width: 18px; height: 18px; padding: 0; color: var(--v4-dim); background: transparent;
    border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none;
  }
  #left #vitals #restbtn svg { width: 12px; height: 12px; }
  #left #vitals #ammorow[hidden] { display: none; }
  #left #vitals #statuses { position: absolute; right: 0; top: 0; display: flex; gap: 4px; }

  /* moedas + loja */
  #left #bottom > #currencies {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 150px; height: 80px; padding-left: 18px; border-left: 1px solid var(--v4-line);
  }
  #left #currencies #statrow, #left #currencies #hudwallet { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; background: none; border: 0; }
  #left #currencies .hudcurrency {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 0; margin: 0; background: none; border: 0; box-shadow: none; min-height: 0;
    color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); letter-spacing: 0; text-transform: none;
  }
  #left #currencies .hudcurrency svg { display: none; }
  #left #currencies .hudcurrency span { color: var(--v4-dim); font-size: inherit; letter-spacing: 0; text-transform: none; }
  #left #currencies .hudcurrency strong { font-size: calc(13px * var(--fontscale, 1)); color: var(--v4-tx); font-weight: 400; text-shadow: none; }
  #left #currencies .hudcurrency.credits strong { color: var(--v4-acc2); }
  #left #currencies #lojatab {
    display: flex; align-items: center; justify-content: center; flex-direction: row;
    width: 100%; height: 30px; min-height: 0; padding: 0; color: var(--v4-tx); background: transparent;
    border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none; backdrop-filter: none;
    font-size: calc(12px * var(--fontscale, 1)); cursor: pointer;
  }
  #left #currencies #lojatab:hover { color: var(--v4-acc2); border-color: var(--v4-acc2); }
  #left #currencies #lojatab .lojachest { display: none; }
  #left #currencies #lojatab .lojalbl { color: inherit; font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: capitalize; text-shadow: none; }

  /* botões: Mochila, Caçada, B-BOP001, Cartas, Deck */
  #left #bottom > #hunt { position: relative; display: block; width: 74px; height: 80px; overflow: visible; }
  #left #bottom .dockbtn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 74px; height: 80px; padding: 0; color: var(--v4-tx); background: transparent;
    border: 1px solid transparent; border-radius: 0; box-shadow: none; cursor: pointer;
    font-size: calc(11px * var(--fontscale, 1)); letter-spacing: 0; text-transform: none;
  }
  #left #bottom > #bagtab.dockbtn {
    width: 92px; margin-left: auto; padding-left: 18px; border: 0; border-left: 1px solid var(--v4-line);
  }
  #left #bottom .dockbtn:hover { background: #ffffff08; }
  #left #bottom .dockbtn.on, #left #bottom .dockbtn.open { background: #ffffff0c; border-color: var(--v4-line); }
  #left #bottom > #bagtab.dockbtn.on { border-color: transparent; border-left-color: var(--v4-line); }
  #left #bottom .dockbtn > svg {
    width: 22px; height: 22px; flex: none; fill: none; stroke: var(--v4-acc); stroke-width: 1.6;
    stroke-linejoin: round; stroke-linecap: round; filter: none;
  }
  #left #bottom .dockbtn > svg * { fill: none; stroke: var(--v4-acc); }
  #left #bottom .dockbtn > span { color: var(--v4-tx); font-size: calc(11px * var(--fontscale, 1)); letter-spacing: 0; text-transform: none; text-shadow: none; line-height: 1.1; }
  #left #bottom .dockkey { color: var(--v4-dim); font-size: 9px; line-height: 1; background: none; border: 0; padding: 0; box-shadow: none; }
  #left #bottom .dockkey:empty { display: none; }
  #left #huntlaunch .huntband {
    max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--v4-dim); font-size: 9px;
  }
  #left #huntlaunch .huntband:empty { display: none; }
  #left #huntlaunch.on > svg { stroke: var(--v4-acc2); }
  /* B-BOP001: o visor pequeno fica no lugar do ícone */
  #left #bottom > #phonetab { flex-direction: column; }
  #left #phonetab #tabface { width: 26px; height: 26px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  #left #phonetab #tabface canvas { width: 26px; height: 26px; image-rendering: pixelated; }
  #left #phonetab #tabinfo { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: none; border: 0; }
  #left #phonetab #tabname b { color: var(--v4-tx); font-size: calc(11px * var(--fontscale, 1)); font-weight: 400; letter-spacing: 0; text-shadow: none; }
  #left #phonetab #tabrole { color: var(--v4-dim); font-size: 9px; font-style: normal; background: none; border: 0; padding: 0; letter-spacing: 0; text-transform: uppercase; }
  #left #phonetab #tabrole::before, #left #phonetab #tabface::before, #left #phonetab #tabface::after { display: none; content: none; animation: none; }
  #left #phonetab #tabmood { display: none; }
  #left #bottom > #phonetab.alert::after, #left #bottom > #phonetab.cue::after {
    display: block; content: ''; position: absolute; top: 12px; right: 18px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--v4-acc2);
  }

  #tutpanel { top: 72px; }

  /* popover da Caçada, acima do botão */
  #huntpop {
    position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; width: 300px;
    display: flex; flex-direction: column; gap: 12px; padding: 16px; box-sizing: border-box;
    color: var(--v4-tx); background: var(--v4-pbg); border: 1px solid var(--v4-line);
  }
}

/* Popover da Caçada: conteúdo nos dois layouts. */
#huntpop[hidden] { display: none; }
#huntpop .huntpophead { display: flex; align-items: center; justify-content: space-between; }
#huntpop .huntpophead b { font-size: calc(15px * var(--fontscale, 1)); font-weight: 700; }
#huntpop #huntpopclose { width: 24px; height: 24px; padding: 0; color: var(--v4-dim); background: transparent; border: 0; cursor: pointer; font-size: 14px; }
#huntpop #huntsteer { display: flex; flex-direction: column; gap: 12px; position: static; padding: 0; background: none; border: 0; }
#huntpop #huntsteer[hidden] { display: none; }
#huntpop #huntgroups {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: auto;
  padding: 9px; color: var(--v4-tx); background: transparent; border: 1px solid var(--v4-line);
  border-radius: 0; box-shadow: none; font-size: calc(12px * var(--fontscale, 1)); cursor: pointer;
  position: static;
}
#huntpop #huntgroups svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#huntpop #huntgroups:hover { border-color: var(--v4-acc); }
#huntpop #huntleave {
  position: static; display: block; width: 100%; height: auto; padding: 12px; color: #05060e; background: var(--v4-acc);
  border: 1px solid var(--v4-acc); border-radius: 0; box-shadow: none;
  font-size: calc(13px * var(--fontscale, 1)); font-weight: 700; cursor: pointer;
}
#huntpop #huntleave.danger { color: var(--v4-red); background: transparent; border-color: var(--v4-red); }
#huntpop #huntleave.danger:hover { color: #05060e; background: var(--v4-red); }
#huntpop .huntdist, #huntpop .huntfocus { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; background: none; border: 0; }
#huntpop button { font-family: var(--v4-font); }

/* Botões livres no layout personalizado: Deck ao lado da Mochila. */
body.freelayout #menutab {
  position: fixed; right: 72px; bottom: 10px; z-index: 6; width: 74px; height: auto;
  opacity: var(--hudalpha, 1);
}

/* ---------- Deck (lançador GERAL) ---------- */
#phone #phonecarrier, #phone #phonesig, #phone #phonebrand { display: none; }
#phone #phoneclock, #phone #phonemoney { color: var(--v4-dim); font-family: var(--v4-mono); }
#phone #homebar { display: flex; align-items: center; gap: 12px; background: none; border: 0; }
#phone #hometitle { color: var(--v4-tx); font-size: calc(15px * var(--fontscale, 1)); font-weight: 700; letter-spacing: 0; text-transform: none; text-shadow: none; }
#appsearchwrap {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
  border: 1px solid var(--v4-line); min-width: 0;
}
#appsearchwrap svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--v4-dim); stroke-width: 2; stroke-linecap: round; }
#appsearch { flex: 1; min-width: 0; color: var(--v4-tx); background: transparent; border: 0; outline: none; font-size: calc(13px * var(--fontscale, 1)); }
#appsearch::placeholder { color: #836d54; }
#phone #homebar .grow { display: none; }
#phone #appgrid { display: flex; flex-direction: column; gap: 14px; grid-template-columns: none; }
#appgrid .appgroup { display: flex; flex-direction: column; gap: 8px; }
#appgrid .appgrouplbl { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .12em; text-transform: uppercase; }
#appgrid .appgroupgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
#phone #appgrid .appicon {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: auto; height: 68px; min-height: 0; padding: 0 4px; color: var(--v4-tx); background: #ffffff05;
  border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none; cursor: pointer; clip-path: none;
}
#phone #appgrid .appicon:hover { background: #ffffff0c; border-color: var(--v4-acc); }
#phone #appgrid .appicon.active { border-color: var(--v4-acc); }
#phone #appgrid .appicon .glyph {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  margin: 0; color: var(--v4-acc); background: none; border: 0; box-shadow: none; font-size: 18px; line-height: 1;
}
#phone #appgrid .appicon .glyph svg { width: 20px; height: 20px; fill: none; stroke: var(--v4-acc); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#phone #appgrid .appicon .lbl { color: var(--v4-tx); font-size: calc(12px * var(--fontscale, 1)); line-height: 1.1; text-align: center; letter-spacing: 0; text-transform: none; }
#appgrid .appnone { color: var(--v4-dim); font-size: calc(13px * var(--fontscale, 1)); }

/* Dica do coach: faixa central chapada, entre o chat (esquerda) e o minimapa (direita). */
#viewwrap #coach {
  left: 50%; right: auto; bottom: 16px; transform: translateX(-50%);
  width: min(460px, calc(100% - 32px)); padding: 7px 12px; box-sizing: border-box;
  color: var(--v4-tx); background: var(--v4-pbg); border: 1px solid var(--v4-line);
  clip-path: none; font-family: var(--v4-font); font-size: calc(12px * var(--fontscale, 1));
}
#viewwrap #coach::before { display: none; }
#viewwrap #coachface { width: 24px; height: 24px; background: none; border: 0; }
@media (min-width: 901px), (min-width: 561px) and (max-height: 699px) {
  #left #bottom > #phonetab.dockbtn { animation: none; }
  #left #bottom > #phonetab.dockbtn:not(.on) { background: transparent; border-color: transparent; box-shadow: none; }
  #left #huntlaunch .huntname { color: var(--v4-tx); font-size: calc(11px * var(--fontscale, 1)); font-weight: 400; letter-spacing: 0; text-transform: none; text-shadow: none; }
}
/* HUD v4: controles do popover da Caçada e grade da telemetria sem os enfeites das passadas A2.x. */
#huntrun .hrmetric::after, #huntrun .hrmetric::before { display: none; content: none; }
#huntrun .hrmetric b, #huntrun .hrkpi b { font-family: var(--v4-mono); letter-spacing: 0; text-shadow: none; }
#huntrun .hrmetric i, #huntrun .hrkpi i { font-family: var(--v4-font); letter-spacing: 0; }
#hunt #huntpop #huntgroups {
  display: flex; place-items: unset; width: 100%; max-width: none; height: auto; margin: 0; padding: 9px;
  color: var(--v4-tx); background: transparent; border: 1px solid var(--v4-line); clip-path: none; box-shadow: none;
  font-size: calc(12px * var(--fontscale, 1));
}
#hunt #huntpop #huntgroups:hover { color: var(--v4-tx); border-color: var(--v4-acc); box-shadow: none; }
#hunt #huntpop #huntgroups span {
  position: static; width: auto; height: auto; padding: 0; overflow: visible; clip: auto; clip-path: none; white-space: nowrap;
}
#hunt #huntpop .huntdist, #hunt #huntpop .huntfocus {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; padding: 0;
  text-align: left; background: none; border: 0;
}
#hunt #huntpop .huntdist > span, #hunt #huntpop .huntfocus > span {
  color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); letter-spacing: 0; text-transform: none; text-align: left;
}
#hunt #huntpop #huntdistsel {
  width: 100%; height: 34px; padding: 0 8px; color: var(--v4-tx); background: #05060e;
  border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none; font-size: calc(12px * var(--fontscale, 1));
}
#hunt #huntpop .huntsegs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
#hunt #huntpop .huntsegs button {
  min-width: 0; min-height: 32px; padding: 0; color: var(--v4-dim); background: transparent;
  border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none; font-size: calc(11px * var(--fontscale, 1));
}
#hunt #huntpop .huntsegs button:hover { color: var(--v4-tx); border-color: var(--v4-acc); }
#hunt #huntpop .huntsegs button.on { color: #05060e; background: var(--v4-acc); border-color: var(--v4-acc); }
@media (min-width: 901px), (min-width: 561px) and (max-height: 699px) { body.hropen #tutpanel { top: 176px; } }
#phone #phonebody, #phone #phonescreen, #phone #apphome, #phone #homebody { background: var(--v4-pbg); background-image: none; box-shadow: none; }
#phone #phonescreen::before, #phone #phonescreen::after, #phone #phonebody::before, #phone #phonebody::after { display: none; }
#phone #appgrid .appicon[data-app="commerce"] .lbl { text-transform: capitalize; }

/* HUD v4 no celular (≤560px) e no tablet em pé (≤900px e alto): o dock empilha cabeçalho +
   barras, a barra de ações 2 x 8 e a fileira de cinco botões; o minimapa sai (M e o Deck abrem o
   mapa) e os overlays ocupam a largura. */
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  :root { --barh: 272px; }
  #left #bottom {
    position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto auto; align-content: start; gap: 8px 4px;
    height: var(--barh); padding: 10px 12px 12px; box-sizing: border-box; overflow: visible;
    background: var(--v4-dock); border: 0; border-top: 1px solid var(--v4-line); box-shadow: none;
  }
  #left #bottom > * {
    width: auto; max-width: none; height: auto; min-height: 0; margin: 0; flex: none;
    padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; clip-path: none; backdrop-filter: none;
  }
  #left #bottom > .panel::before, #left #bottom > .panel::after,
  #left #bottom > button::before, #left #bottom > button::after { display: none; content: none; }

  /* personagem: nome, nível e créditos na primeira linha, barras embaixo */
  #left #bottom > #vitals { grid-column: 1 / -1; grid-row: 1; position: relative; display: block; overflow: visible; }
  #left #vitals #hudportrait { display: none; }
  #left #vitals #hudstats {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 72px; grid-auto-flow: row dense;
    align-items: center; gap: 4px 8px; width: 100%; padding: 0; background: none; border: 0; line-height: 1.2;
  }
  #left #vitals #charheading { display: flex !important; grid-column: 1 / -1; align-items: baseline; gap: 8px; margin: 0; padding: 0 110px 0 0; border: 0; background: none; }
  #left #vitals #charname { color: var(--v4-tx); font-size: calc(13px * var(--fontscale, 1)); font-weight: 700; text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #left #vitals #lvltxt { min-width: 0; margin: 0; padding: 0; color: var(--v4-dim); background: none; border: 0; box-shadow: none; font-size: calc(11px * var(--fontscale, 1)); white-space: nowrap; }
  #left #vitals .hudbarrow { display: contents; }
  #left #vitals .hudbar-label { display: block; color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: 0; background: none; border: 0; padding: 0; }
  #left #vitals .hudbar-label svg { display: none; }
  #left #vitals .hudbar-label .hudlabeltext { display: inline; font-style: normal; }
  #left #vitals .bar { height: 7px; margin: 0; background: var(--v4-trk); border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
  #left #vitals .bar > div { height: 100%; border-radius: 0; box-shadow: none; background-image: none; }
  #left #vitals #hpbar > div:not(.ghost) { background: var(--v4-hp); }
  #left #vitals #hpbar > .ghost { background: #ff3b4e55; }
  #left #vitals #enbar > div { background: var(--v4-en); }
  #left #vitals #shbar > div { background: var(--v4-es); }
  #left #vitals .hudbarval { color: var(--v4-tx); font-size: calc(10px * var(--fontscale, 1)); text-align: right; white-space: nowrap; text-shadow: none; }
  #left #vitals .xprow, #left #vitals .stamrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
  #left #vitals .xprow { grid-column: 1 / 3; }
  #left #vitals .stamrow { grid-column: 3; justify-content: flex-end; }
  #left #vitals #xpbarlabel, #left #vitals .stamrow #stambar { display: none; }
  #left #vitals #xpbar { flex: 1 1 auto; height: 3px; }
  #left #vitals #xpbar > div { background: var(--v4-xp); }
  #left #vitals .xprow .hudbarval, #left #vitals .stamrow .hudbarval, #left #vitals .stamrow .hudbar-label { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); }
  #left #vitals .xprow .hudbarval::before { content: 'XP '; }
  #left #vitals #restbtn { position: static; width: 18px; height: 18px; padding: 0; color: var(--v4-dim); background: transparent; border: 1px solid var(--v4-line); border-radius: 0; }
  #left #vitals #statuses { display: none !important; }

  /* moedas no canto do cabeçalho; a Loja fica no Deck */
  #left #bottom > #currencies { position: absolute; top: 10px; right: 12px; display: block; width: auto; height: auto; }
  #left #currencies #statrow, #left #currencies #hudwallet { display: flex; flex-direction: row; gap: 10px; padding: 0; margin: 0; background: none; border: 0; }
  #left #currencies .hudcurrency { display: flex; align-items: baseline; gap: 4px; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; min-height: 0; }
  #left #currencies .hudcurrency svg, #left #currencies .hudcurrency > span { display: none; }
  #left #currencies .hudcurrency strong { margin: 0; color: var(--v4-tx); font-size: calc(12px * var(--fontscale, 1)); font-weight: 400; text-shadow: none; }
  #left #currencies .hudcurrency.credits strong { color: var(--v4-acc2); }
  #left #currencies .hudcurrency.credits strong::after { content: ' cr'; }
  #left #currencies .hudcurrency.coins strong::after { content: ' pc'; }
  #left #currencies #lojatab { display: none; }

  /* barra de ações: 2 x 8 que cabe na largura */
  #left #bottom > #hotbar { grid-column: 1 / -1; grid-row: 2; display: block; }
  #left #hotbar .hb-head { display: none; }
  #left #hotbar .hb-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 42px; gap: 4px; padding: 0; }
  #left #hotbar .hot {
    position: relative; width: auto; height: 42px; min-width: 0; margin: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #ffffff05; border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none;
  }
  #left #hotbar .hot.free { background: transparent; border-color: #14b8c42a; }
  #left #hotbar .hot .key { position: absolute; left: 3px; top: 1px; z-index: 2; color: var(--v4-dim); font-size: 9px; line-height: 1; background: none; border: 0; padding: 0; }
  #left #hotbar .hot .qty { position: absolute; right: 3px; bottom: 1px; z-index: 2; font-size: 9px; line-height: 1; }

  /* os cinco botões */
  #left #bottom > #bagtab { grid-column: 1; grid-row: 3; }
  #left #bottom > #hunt { grid-column: 2; grid-row: 3; position: relative; display: block; overflow: visible; }
  #left #bottom > #phonetab { grid-column: 3; grid-row: 3; }
  #left #bottom > #decktab { grid-column: 4; grid-row: 3; }
  #left #bottom > #menutab { grid-column: 5; grid-row: 3; }
  #left #bottom .dockbtn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 100%; height: 52px; min-width: 0; padding: 0; color: var(--v4-tx); background: transparent;
    border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none; animation: none; cursor: pointer;
    font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 0; text-transform: none;
  }
  #left #bottom .dockbtn.on, #left #bottom .dockbtn.open { background: #ffffff0c; border-color: var(--v4-acc); }
  #left #bottom .dockbtn > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--v4-acc); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  #left #bottom .dockbtn > svg * { fill: none; stroke: var(--v4-acc); }
  #left #bottom .dockbtn > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v4-tx); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: 0; text-transform: none; text-shadow: none; }
  #left #bottom .dockkey, #left #huntlaunch .huntband { display: none; }
  #left #huntlaunch .huntname { color: var(--v4-tx); font-size: calc(10px * var(--fontscale, 1)); font-weight: 400; text-transform: none; letter-spacing: 0; }
  #left #phonetab #tabface { width: 22px; height: 22px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  #left #phonetab #tabface canvas { width: 22px; height: 22px; }
  #left #phonetab #tabface::before, #left #phonetab #tabface::after, #left #phonetab #tabrole::before { display: none; content: none; }
  #left #phonetab #tabinfo { display: block; padding: 0; background: none; border: 0; }
  #left #phonetab #tabname b { color: var(--v4-tx); font-size: calc(10px * var(--fontscale, 1)); font-weight: 400; letter-spacing: 0; text-shadow: none; }
  #left #phonetab #tabrole, #left #phonetab #tabmood { display: none; }
  #left #bottom > #phonetab.alert::after, #left #bottom > #phonetab.cue::after {
    display: block; content: ''; position: absolute; top: 8px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--v4-acc2);
  }

  /* popover da Caçada vira folha acima do dock */
  #huntpop {
    position: fixed; left: 12px; right: 12px; bottom: calc(var(--barh) + 8px); z-index: 30;
    display: flex; flex-direction: column; gap: 12px; padding: 14px; box-sizing: border-box;
    color: var(--v4-tx); background: var(--v4-pbg); border: 1px solid var(--v4-line);
  }

  /* overlays na largura do celular */
  #viewwrap #huntrun { top: 12px; left: 12px; right: 12px; max-width: none; }
  #viewwrap #onlinecounter { top: 12px; left: 12px; }
  #huntrun .hrtop { gap: 10px; padding: 0 10px; }
  #huntrun .hrkpi i { display: none; }
  #huntrun .hrbrand { flex: 1; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(11px * var(--fontscale, 1)); }
  #huntrun .hrstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #viewwrap #partycard { top: 12px; left: 12px; right: 12px; width: auto; max-height: 45%; }
  body.hrshow #viewwrap #partycard { top: 64px; }
  body.hropen #viewwrap #partycard { display: none; }
  html body:not(.freelayout) #viewwrap #mmpanel { display: none; }
  body:not(.freelayout) #chatbox { left: 12px; right: 12px; width: auto; height: 180px; bottom: calc(var(--barh) + 12px); }
  #chatflip:not(.open) { left: 12px; right: 12px; bottom: calc(var(--barh) + 12px); max-width: none; min-height: 44px; }
  #viewwrap #coach { bottom: 64px; width: calc(100% - 24px); }
}
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) { #left #vitals #ammorow[hidden] { display: none; } }
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  #left #bottom > #currencies { left: auto; width: max-content; max-width: 50%; overflow: visible; }
  #left #currencies .hudcurrency strong { font-size: calc(12px * var(--fontscale, 1)); white-space: nowrap; }
  #left #vitals #lvltxt { text-transform: none; letter-spacing: 0; }
  #hunt #huntpop #huntsteer {
    position: static; inset: auto; width: auto; height: auto; max-height: none; margin: 0; padding: 0;
    overflow: visible; background: none; border: 0; box-shadow: none; transform: none;
  }
}
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  #left #bottom > #currencies, #left #currencies .hudcurrency, #left #currencies #hudwallet, #left #currencies #statrow { container-type: normal; width: auto; min-width: max-content; }
}
#left #bottom #huntlaunch .huntname, #left #bottom .dockbtn > span, #left #bottom .dockbtn #tabname b {
  font-family: var(--v4-font); font-size: calc(11px * var(--fontscale, 1)); font-weight: 500; letter-spacing: 0; text-transform: none; text-shadow: none;
}

/* Loja: revisão da compra e resultado presos ao pé da janela. O botão Comprar pode estar no fim da
   vitrine; a revisão entrava no topo de #shopbody e ficava fora da vista de quem clicou. O dock é o
   último filho de #shopbody, então `sticky` o segura no rodapé do .winbody que rola. */
#shopbody .shop-dock {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
  margin: 14px -12px -12px; padding: 10px 12px 12px;
  background: linear-gradient(0deg, #080d16 72%, #080d16e6);
  border-top: 1px solid #ef75c866; box-shadow: 0 -14px 26px #000a;
}
#shopbody .shop-dock.enter { animation: shop-dock-in .18s ease-out; }
@keyframes shop-dock-in { from { transform: translateY(14px); opacity: 0; } }
#shopbody .shop-dock .shop-review, #shopbody .shop-dock .shop-notice { margin: 0; }
#shopbody .shop-dock .shop-review { padding: 12px 14px; }
#shopbody .shop-dock .shop-review h3 { font-size: calc(17px * var(--fontscale, 1)); }
#shopbody .shop-dock .shop-review h3 small { font-size: .7em; }
#shopbody .shop-review-info { min-width: 0; }
#shopbody .shop-review-balance { color: #ffda80; font-weight: 700; margin-top: 4px !important; }
#shopbody .shop-review-actions .primary:disabled { color: #1c1022; opacity: .65; }
#shopbody .shop-card.reviewing { outline: 2px solid #ef75c8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #shopbody .shop-dock.enter { animation: none; } }
/* Compacto: o bloco genérico de .shop-review empilha tudo abaixo de 900px, o que dava meio vidro de
   dock. Aqui texto e botões dividem a linha enquanto couberem. */
#shopbody .shop-dock .shop-review { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
#shopbody .shop-dock .shop-review-info { flex: 1 1 260px; }
#shopbody .shop-dock .shop-review-actions { flex: 1 1 260px; width: auto; flex-direction: row; justify-content: flex-end; }
#shopbody .shop-dock .shop-review-actions .shop-buy { flex: 0 1 auto; width: auto; }
#shopbody .shop-dock .shop-review-actions .primary { flex: 1 1 auto; max-width: 280px; }

/* ==========================================================================
   Celular jogável (≤560px, e tablet em pé até 900px) e toque.
   Três regras: a tela do jogo é do jogo (nada fica pendurado por cima dela sem motivo), texto
   nunca quebra letra por letra nem some em reticências no que importa, e todo alvo de toque tem
   pelo menos ~40px. Lógica em game.js: phoneUI(), body.touchui, body.pcardlive, body.chatopen,
   uma janela por vez no deck, e "tocar age, segurar explica" nos cards de hover.
   ========================================================================== */

/* Menu de contexto acima das janelas do deck (9500+): segurar um item DENTRO da mochila abria o
   menu atrás da própria janela. */
#ctxmenu { z-index: 9990; }
body.touchui #ctxmenu { min-width: 180px; }
body.touchui #ctxmenu button { min-height: 44px; padding: 10px 16px; font-size: calc(14px * var(--fontscale, 1)); }
/* Dica do B-BOP001: tocar dispensa (listener em game.js). No desktop ela segue transparente a clique. */
body.touchui #viewwrap #coach.on { pointer-events: auto; cursor: pointer; }

/* Foco do tutorial no toque: a seta de mouse ensina um ponteiro que não existe; ficam só as ondas
   de toque, maiores, onde o dedo deve ir. */
body.touchui .tut-cursor svg { visibility: hidden; }
/* Alvo de MUNDO (baú, tile) com uma janela do deck aberta por cima: o anel flutuava sobre a
   janela apontando pra algo que ela esconde. Alvo de HUD (slot dentro da mochila) continua. */
body:has(#appmodals .appmodal:not(.closing)) #tutspot:has(.tut-ring.tut-dim, .tut-ring.tut-edge) { display: none !important; }
body.touchui .tut-ripple { width: 30px; height: 30px; left: -12px; top: -12px; border-width: 3px; }

/* Login e criação: nada de "中/文" empilhado letra por letra nem "‹ / Classe" em duas linhas. */
#langbtns { flex-wrap: wrap; justify-content: center; }
#langbtns button { white-space: nowrap; }
#charnew #btn_charback { white-space: nowrap; }

@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  /* ---------- dock mais baixo: cada pixel devolvido vai pra tela do jogo ---------- */
  /* --barh aqui é só o palpite do primeiro quadro: syncDockHeight (game.js) publica a altura
     medida, porque o dock agora tem a altura do que mostra. */
  :root { --barh: 232px; }
  #left #bottom {
    height: auto; padding: 8px 10px 10px; gap: 6px 4px;
    grid-template-rows: max-content max-content max-content;
  }
  #left #vitals #hudstats { grid-template-columns: max-content minmax(0, 1fr) 72px; gap: 3px 8px; }
  #left #vitals .bar { height: 6px; }
  #left #vitals .hudbarrow.empty { display: none; }
  #left #bottom > #hotbar { overflow: visible; }
  /* No tablet em pé a largura toda esticava cada slot pra 90px: fica no máximo 60, centrado. */
  #left #hotbar .hb-grid { grid-template-columns: repeat(8, minmax(0, 60px)); justify-content: center; grid-auto-rows: 40px; }
  #left #hotbar .hot { height: 40px; }
  #left #bottom .dockbtn { height: 48px; gap: 3px; }
  #left #bottom #huntlaunch .huntband { display: none !important; }

  /* ---------- chat: chip quadrado no canto, não uma faixa na largura da tela ---------- */
  #chatflip:not(.open) {
    left: 10px; right: auto; bottom: calc(var(--barh) + 10px);
    width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center;
  }
  #chatflip:not(.open) .chatflip-last, #chatflip:not(.open) .chatflip-label { display: none !important; }
  #chatflip:not(.open)::before { width: 20px; height: 20px; }
  #chatflip:not(.open) .chatflip-unread { position: absolute; top: -6px; right: -6px; min-width: 18px; text-align: center; }
  body:not(.freelayout) #chatbox { left: 8px; right: 8px; bottom: calc(var(--barh) + 8px); height: min(200px, 34vh); }

  /* ---------- dica: ao lado do chip do chat, no máximo três linhas; some com o chat aberto ---------- */
  #viewwrap #coach {
    left: 62px; right: 10px; bottom: 10px; width: auto; transform: none;
    padding: 6px 10px; font-size: calc(12px * var(--fontscale, 1)); line-height: 1.35;
  }
  #viewwrap #coachtext { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  body.chatopen #viewwrap #coach { display: none; }

  /* ---------- cartão da caçada: só onde tem o que dizer (hunt, saída, grupo) ---------- */
  body:not(.pcardlive) #viewwrap > #partycard { display: none !important; }
  #viewwrap > #partycard { top: 8px; left: 8px; right: 8px; max-height: 42%; overflow-y: auto; overscroll-behavior: contain; }
  /* Sair da caçada sobe pra linha do título: uma linha a menos em cima do combate. */
  #viewwrap > #partycard:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  #viewwrap > #partycard[hidden] { display: none !important; }
  #viewwrap > #partycard > * { grid-column: 1 / -1; }
  #viewwrap > #partycard > .partycardhead { grid-column: 1; grid-row: 1; padding: 6px 4px 6px 10px; }
  #viewwrap > #partycard > #partycardexit {
    grid-column: 2; grid-row: 1; width: auto; min-height: 34px; margin: 6px 6px 6px 0; padding: 0 10px; white-space: nowrap;
  }
  #viewwrap > #partycard #huntstopsettings > summary { padding: 6px 10px 8px; }
  body.hrshow #viewwrap > #partycard { top: 56px; }
  #viewwrap > #partycard .partycardactions button { width: 32px; height: 32px; }
  #viewwrap > #partycard #huntstopsettings > summary { min-height: 34px; box-sizing: border-box; }
  #viewwrap > #partycard.min { width: auto; max-width: none; }
  #viewwrap > #partycard.min h3 { max-width: none; }
  #viewwrap #huntrun { top: 8px; left: 8px; right: 8px; }

  /* ---------- primeiros passos: faixa no topo, só o passo atual por extenso ---------- */
  #viewwrap #tutpanel, #viewwrap:has(#huntrun:not([hidden])) #tutpanel {
    top: 8px; left: 8px; right: 8px; width: auto; max-width: none; box-sizing: border-box;
    padding: 8px 10px; font-size: calc(12px * var(--fontscale, 1));
  }
  body.pcardlive #viewwrap #tutpanel,
  body.pcardlive #viewwrap:has(#huntrun:not([hidden])) #tutpanel {
    top: auto; bottom: 62px; max-height: min(150px, 30%); overflow-y: auto;
  }
  #viewwrap #tutpanel ol { grid-template-columns: 1fr; gap: 3px; }
  #viewwrap #tutpanel .tut-done small, #viewwrap #tutpanel .tut-next small { display: none; }
  #viewwrap #tutpanel .tut-done, #viewwrap #tutpanel .tut-next { font-size: calc(11px * var(--fontscale, 1)); }
  #tutspot .tut-clicklabel { font-size: 12px; }

  /* ---------- janelas do deck: tela cheia acima do dock, alvos de toque maiores ---------- */
  .appmodal { resize: none; }
  .appmodal .winbar { min-height: 44px; box-sizing: border-box; }
  .appmodal .winbar button { width: 38px; height: 38px; font-size: 16px; }
  #phone #homebar button, #phone .phonebar button { min-width: 38px; min-height: 38px; }

  /* ---------- modais: × de verdade, não um caractere de 8px ---------- */
  .modal .close {
    display: flex; align-items: center; justify-content: center;
    right: 2px; top: 2px; width: 40px; height: 40px; font-size: 20px; z-index: 3;
  }
  #huntpop #huntpopclose { width: 40px; height: 40px; font-size: 18px; }

  /* ---------- diálogo de NPC e fila: dentro da tela e fora do dock ---------- */
  #npcmodal { left: 8px !important; right: 8px; top: 8px !important; width: auto; max-width: none; }
  #matchq.q-overlay, #matchq.hunt-queue {
    left: 8px; right: 8px; top: auto; bottom: calc(var(--barh) + 62px); transform: none;
    width: auto; max-height: 40vh; overflow: auto;
  }

  /* ---------- botões de diálogo com altura de dedo ---------- */
  #askmodal button, #splitmodal button, #invitemodal button, #lootmodal button,
  #huntusemodal button, #npcmodal button, #death button { min-height: 40px; }

  /* ---------- regra de uso na caça: selects cabem, rótulos não picam ---------- */
  #huntusemodal select, #huntuse select { min-width: 0; max-width: 100%; }
}

/* ---------- dock de uma linha que não cabe: celular deitado, notebook pequeno ----------
   Tela larga e baixa fica com o dock de uma linha (o empilhado comeria a tela inteira), mas a
   soma dele passa de 1.290px: abaixo disso Mochila, Caçada, B-BOP001, Cartas e Deck saíam pela
   direita, fora de alcance. Encolhe em degraus em vez de cortar. As duas vírgulas repetem a
   condição do dock de uma linha ((min-width: 901px), (min-width: 561px) and (max-height: 699px)). */
@media (min-width: 901px) and (max-width: 1320px), (min-width: 561px) and (max-width: 1320px) and (max-height: 699px) {
  #left #bottom { gap: 10px; padding: 0 10px; }
  #left #bottom > #vitals { min-width: 170px; padding-left: 10px; }
  #left #bottom > #currencies { width: 112px; padding-left: 10px; }
  #left #bottom .dockbtn, #left #bottom > #hunt { width: 58px; }
  #left #bottom > #bagtab.dockbtn { width: 68px; padding-left: 10px; }
}
@media (min-width: 901px) and (max-width: 1080px), (min-width: 561px) and (max-width: 1080px) and (max-height: 699px) {
  :root { --barh: 92px; }
  #left #bottom { gap: 6px; }
  #left #hotbar .hb-grid { grid-template-columns: repeat(8, 34px); grid-auto-rows: 34px; gap: 3px; }
  #left #hotbar .hot { width: 34px; height: 34px; }
  #left #bottom > #vitals { height: 84px; min-width: 130px; }
  #left #vitals .hudbarrow.empty { display: none; }
  /* Botões só com ícone: o rótulo sai da vista mas continua sendo o nome acessível. */
  #left #bottom .dockbtn, #left #bottom > #hunt { width: 44px; height: 64px; }
  #left #bottom > #bagtab.dockbtn { width: 54px; }
  #left #bottom .dockbtn > span, #left #huntlaunch .huntname, #left #huntlaunch .huntband, #left #phonetab #tabinfo {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  #left #bottom .dockkey { display: none; }
  #left #bottom > #currencies { width: 84px; height: 72px; gap: 4px; }
  #left #currencies .hudcurrency > span { display: none; }
  #left #currencies .hudcurrency.credits strong::after { content: ' cr'; }
  #left #currencies .hudcurrency.coins strong::after { content: ' pc'; }
  #left #currencies #lojatab { height: 24px; }
}
@media (min-width: 561px) and (max-width: 860px) and (max-height: 699px) {
  /* Celular deitado: créditos e Loja moram no Deck; a largura vai pra vida e energia, que sem
     ela cortavam o próprio número. */
  #left #bottom > #currencies { display: none; }
  #left #vitals #hudstats { grid-template-columns: max-content minmax(0, 1fr) max-content; }
}
@media (min-width: 561px) and (max-width: 720px) and (max-height: 699px) {
  #left #bottom { padding: 0 6px; }
  #left #hotbar .hb-grid { grid-template-columns: repeat(8, 30px); grid-auto-rows: 30px; }
  #left #hotbar .hot { width: 30px; height: 30px; }
}
/* Tela baixa: o minimapa de 140px comia metade da vista. */
@media (min-width: 561px) and (max-height: 520px) {
  html body:not(.freelayout) #viewwrap #mmpanel { width: 96px; height: 96px; right: 8px; bottom: 8px; }
}

/* Hunt planner on phones: review first, then choose, with room for each task.
   Keep the desktop's simultaneous selector + review and its dock untouched. */
#huntplannav, #huntreviewnext { display: none; }
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px), (pointer: coarse) and (max-width: 1000px) and (max-height: 699px) {
  #huntplanner {
    inset: 0 !important; width: 100% !important; height: var(--vh) !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px;
    background: var(--panel); z-index: 9600; pointer-events: auto;
  }
  body:has(#huntmodal.on) .modal:not(#huntmodal) { z-index: 9800; max-height: calc(var(--vh) - 24px); }
  #huntplannav { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
  #huntplannav button {
    min-height: 48px; padding: 8px; font-size: calc(12px * var(--fontscale, 1));
    white-space: normal; line-height: 1.3; letter-spacing: 0;
    color: var(--text); background: var(--panel2); border: 1px solid var(--border); cursor: pointer; font-family: inherit;
  }
  #huntplannav button[aria-pressed=true] { border-color: var(--cyan); color: var(--cyan); background: #00e5ff12; }
  #huntplanner[data-pane=rules] #huntmodal,
  #huntplanner[data-pane=choose] #huntreview { display: none !important; }
  #huntreview {
    order: 0; max-height: none; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  }
  #huntreview #partycard {
    order: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    font-size: calc(14px * var(--fontscale, 1));
  }
  #huntreviewnext {
    display: block; order: 1; flex: none; width: 100%; min-height: 48px;
    color: var(--bg); background: var(--cyan); border: 1px solid var(--cyan); font: inherit; font-weight: bold; cursor: pointer;
  }
  #huntreview .partycardhead { padding: 12px; }
  #huntreview .partycardhead h3 { font-size: calc(14px * var(--fontscale, 1)); }
  #huntreview #partycardmin, #huntreview #partycardedit { display: none; }
  #huntreview #partycard #huntstopsettings > summary { min-height: 48px; font-size: calc(14px * var(--fontscale, 1)); }
  #huntreview #partycard #huntstopoptions { gap: 6px; padding: 8px 12px; }
  #huntreview #partycard .huntstopcheck { min-height: 48px; padding: 10px 8px; gap: 12px; border: 1px solid var(--border); }
  #huntreview #partycard .huntstopcheck.warn { color: var(--hp); }
  #huntreview #partycard .huntstopcheck input { width: 22px; height: 22px; }
  #huntreview #partycard #huntstopmembers { min-height: 48px; font-size: 16px; }
  #huntreview #partycard .huntstopwarning, #huntreview #partycard #huntstophint { font-size: calc(12px * var(--fontscale, 1)); }
  #huntreview #partycard button { min-height: 44px; }
  #huntplanner #huntmodal { padding: 0; border: 0; box-shadow: none; background: none; }
  #huntplanner #huntmodal > .close, #huntplanner #hunttitle { display: none; }
  #huntplanner #huntmodal { grid-template-rows: minmax(0, 1fr); }
  #huntplanner #huntui { display: flex !important; flex-direction: column; overflow: hidden !important; gap: 8px !important; }
  #hunttabs, #huntsearch, #huntcount, #huntfoot { flex: none; }
  #hunttabs button { min-height: 44px; }
  #huntsearch { min-height: 44px; font-size: 16px; }
  #huntcount span { display: none; }
  #huntplanner #huntbody {
    display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px;
    overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain;
  }
  #huntpicks {
    display: flex !important; flex: none; flex-direction: row !important; gap: 8px;
    max-height: none !important; overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x proximity; padding-bottom: 6px;
  }
  #huntpicks .huntpick, #huntpicks .huntpick.soon {
    flex: 0 0 174px; width: 174px; height: auto; min-height: 76px;
    grid-template-columns: 40px minmax(0, 1fr); scroll-snap-align: start;
  }
  #huntpicks .huntpick b { white-space: normal; font-size: 13px; }
  #huntpicks .huntpick > span { display: block; }
  #huntdetail, #huntstage, .huntsheets { height: auto !important; overflow: visible !important; flex: none; }
  #huntstage #huntsetup { flex: none; overflow: visible !important; }
  #huntroster, #huntsetup #huntloot, #huntsetup #huntloot .lootlist { overflow: visible !important; }
  #huntsetup #huntloot .lootlist { grid-template-columns: minmax(0, 1fr); }
  #huntsetup #huntloot .lootrow { min-height: 44px; }
  .huntchosen { grid-template-columns: 48px minmax(0, 1fr); }
  #hunttank, #hunttank canvas { width: 48px; height: 48px; }
  .huntchosen .huntdiffwrap { grid-column: 1 / -1; }
  .huntchosen .huntdiff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .huntchosen .huntdiff > span { display: none; }
  .huntchosen .huntdiff button { width: 100%; min-height: 44px; padding: 6px 2px; white-space: normal; }
  #huntplanner #huntfoot { position: static; grid-template-columns: minmax(0, 1fr) !important; padding-top: 8px; border-top: 1px solid var(--border); background: var(--panel); }
  #huntfoot .huntactions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #huntfoot .huntaction { padding: 0; border: 0; background: none; }
  #huntfoot .huntaction.primary { grid-column: 1 / -1; }
  #huntfoot .huntaction button { min-height: 48px; font-size: calc(13px * var(--fontscale, 1)); }
  #huntplanner #huntfoot .huntaction .hint, #huntfoot .huntfootbtns { display: none !important; }
  #viewwrap > #partycard #huntstopsettings > summary, #viewwrap > #partycard > #partycardexit { min-height: 44px; }
}
@media (pointer: coarse) and (min-width: 561px) and (max-width: 1000px) and (max-height: 699px) {
  #huntplanner #huntui { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto !important; }
  #huntplanner #huntcount { display: none; }
  #huntplanner #huntbody, #huntplanner #huntfoot { grid-column: 1 / -1; }
  #huntplanner #huntfoot .huntactions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #huntplanner #huntfoot .huntaction.primary { grid-column: auto; }
}

/* ============================================================================================
   Balcão de NPC (ADR 0158): uma janela, uma aba por serviço. Tokens da HUD v4 — painel chapado,
   cantos retos, ciano de acento e âmbar para dinheiro. O cabeçalho e as abas ficam parados; só o
   painel da aba rola, e a janela só se arrasta pelo cabeçalho (makeDraggable ignora .npc-pane).
   ============================================================================================ */
#npcmodal {
  width: min(620px, calc(100vw - 16px)); max-width: calc(100vw - 16px); min-width: 0;
  padding: 0; overflow: hidden; clip-path: none; border-radius: 0;
  background: #05060ef4; border: 1px solid var(--v4-line); box-shadow: 0 18px 48px #000a;
  color: var(--v4-tx); font-family: var(--v4-font);
  max-height: min(84vh, calc(100dvh - var(--barh) - 12px));
}
#npcmodal.on { display: flex; flex-direction: column; }
#npcmodal > .close { right: 8px; top: 8px; z-index: 2; color: var(--v4-dim); font-size: 18px; line-height: 1; }
#npcmodal > .close:hover { color: var(--v4-tx); }
#npcbody { display: flex; flex-direction: column; flex: 1; min-height: 0; max-width: none; }
#npcbody .npc-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 44px 10px 14px; cursor: move;
  border-bottom: 1px solid var(--v4-line); background: linear-gradient(180deg, #0b1020, #05060e00);
}
#npcbody .npc-id { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#npcbody .npc-id h3 {
  margin: 0; color: var(--v4-tx); font-size: calc(15px * var(--fontscale, 1)); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; text-shadow: none;
}
#npcbody .npc-role {
  padding: 1px 6px; border: 1px solid var(--v4-line); color: var(--v4-acc);
  font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .08em; text-transform: uppercase;
}
#npcbody .npc-purse { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
#npcbody .npc-bagn { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); }
#npcbody .npc-price { color: var(--v4-acc2); font-family: var(--v4-mono); font-size: calc(11px * var(--fontscale, 1)); white-space: nowrap; }
#npcbody .npc-price b { font-size: calc(14px * var(--fontscale, 1)); font-weight: 700; }
#npcbody .npc-price.short { color: var(--v4-red); }
#npcbody .npc-say {
  margin: 10px 14px 0; padding: 8px 10px; color: #c9bfa8; font-style: italic;
  font-size: calc(12px * var(--fontscale, 1)); line-height: 1.45;
  border-left: 2px solid var(--v4-acc); background: #ffffff06;
}
#npcbody .npc-services { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px 0; }
#npcbody .npc-tabs {
  display: flex; gap: 0; margin: 12px 0 0; padding: 0 10px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--v4-line); flex: none;
}
#npcbody .npc-tabs::-webkit-scrollbar { display: none; }
#npcbody .npc-tab {
  flex: none; margin: 0 0 -1px; padding: 8px 12px; background: transparent; color: var(--v4-dim);
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none;
  font: 600 calc(12px * var(--fontscale, 1)) var(--v4-font); letter-spacing: .03em; text-transform: uppercase;
}
#npcbody .npc-tab:hover { color: var(--v4-tx); }
#npcbody .npc-tab.on { color: var(--v4-acc); border-bottom-color: var(--v4-acc); }
#npcbody .npc-tab i { font-style: normal; font-family: var(--v4-mono); color: var(--v4-acc2); font-size: calc(10px * var(--fontscale, 1)); }
#npcbody .npc-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 14px; overscroll-behavior: contain; }
#npcbody .npc-pane > .dlgopt, #npcbody .npc-pane > .npc-act { display: block; width: 100%; margin: 0 0 6px; text-align: left; }
#npcbody .npc-note { color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); line-height: 1.5; margin: 0 0 10px; }
#npcbody .npc-empty { padding: 18px 8px; text-align: center; color: var(--v4-dim); font-size: calc(12px * var(--fontscale, 1)); border: 1px dashed var(--v4-line); }
#npcbody .npc-dim { color: var(--v4-dim); font-weight: normal; }

/* filtros da prateleira */
#npcbody .npc-filters {
  position: sticky; top: -10px; z-index: 1; margin: -10px -14px 8px; padding: 10px 14px 8px;
  background: #05060e; border-bottom: 1px solid #ffffff0d; display: grid; gap: 8px;
}
#npcbody #npcsearch {
  width: 100%; box-sizing: border-box; min-height: 32px; padding: 6px 10px; border-radius: 0;
  background: #0b0f1c; color: var(--v4-tx); border: 1px solid var(--v4-line); font: inherit;
}
#npcbody #npcsearch:focus { outline: 1px solid var(--v4-acc); outline-offset: -1px; }
#npcbody .npc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#npcbody .npc-chip {
  padding: 4px 10px; border-radius: 0; background: transparent; color: var(--v4-dim); box-shadow: none;
  border: 1px solid #ffffff1a; font: calc(11px * var(--fontscale, 1)) var(--v4-font);
}
#npcbody .npc-chip:hover { color: var(--v4-tx); border-color: var(--v4-line); }
#npcbody .npc-chip.on { color: #05060e; background: var(--v4-acc); border-color: var(--v4-acc); }
#npcbody .npc-group {
  margin: 12px 0 4px; color: var(--v4-acc); font-size: calc(10px * var(--fontscale, 1));
  letter-spacing: .1em; text-transform: uppercase;
}
#npcbody .npc-list > .npc-group:first-child { margin-top: 0; }

/* linha de item */
#npcbody .npc-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid #ffffff0d;
}
#npcbody .npc-row:hover { background: #ffffff05; }
#npcbody .npc-row.unfit .npc-icon { opacity: .55; }
#npcbody .npc-row.keep { box-shadow: inset 2px 0 0 var(--v4-acc2); }
#npcbody .npc-icon {
  width: 44px; height: 44px; display: grid; place-items: center; box-sizing: border-box;
  background: #0b0f1c; border: 1px solid #ffffff14;
}
#npcbody .npc-icon canvas { width: 32px; height: 32px; image-rendering: pixelated; }
#npcbody .npc-main { min-width: 0; }
#npcbody .npc-name { font-weight: 600; font-size: calc(13px * var(--fontscale, 1)); line-height: 1.3; overflow-wrap: anywhere; }
#npcbody .npc-line { margin-top: 2px; color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); line-height: 1.4; }
#npcbody .npc-line:empty { display: none; }
#npcbody .npc-line .npcwield { font-size: inherit; color: var(--v4-dim); }
#npcbody .npc-line .npcwield.no, #npcbody .npc-bad { color: var(--v4-red); }
#npcbody .npc-up { color: #5deab2; font-family: var(--v4-mono); }
#npcbody .npc-keep {
  margin-left: 4px; padding: 0 5px; border: 1px solid #ffd23f66; color: var(--v4-acc2); vertical-align: 1px;
  font: 600 calc(9px * var(--fontscale, 1)) var(--v4-font); letter-spacing: .06em; text-transform: uppercase;
}
#npcbody .npc-keep.supply { border-color: #ffffff22; color: var(--v4-dim); }
#npcbody .npc-mats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
#npcbody .npc-mat { padding: 1px 6px; background: #ffffff08; border: 1px solid #ffffff12; color: #c9bfa8; }
#npcbody .npc-mat i { font-style: normal; color: var(--v4-dim); font-family: var(--v4-mono); }
#npcbody .npc-mat.short { color: var(--v4-red); border-color: #ff3b4e55; }
#npcbody .npc-yield { color: #5deab2; }
#npcbody .npc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#npcbody .npc-cost { display: flex; flex-direction: column; align-items: flex-end; }
#npcbody .npc-each { font-style: normal; color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); font-family: var(--v4-mono); }
#npcbody .npc-qty { display: flex; align-items: stretch; }
#npcbody .npc-qty input {
  width: 46px; min-height: 28px; box-sizing: border-box; padding: 2px 4px; text-align: center; border-radius: 0;
  background: #0b0f1c; color: var(--v4-tx); border: 1px solid #ffffff1f; border-left: 0; border-right: 0;
  font-family: var(--v4-mono); -moz-appearance: textfield; appearance: textfield;
}
#npcbody .npc-qty input::-webkit-inner-spin-button, #npcbody .npc-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#npcbody .npc-step {
  min-width: 28px; min-height: 28px; padding: 0 6px; border-radius: 0; box-shadow: none;
  background: #0b0f1c; color: var(--v4-tx); border: 1px solid #ffffff1f; font: 600 12px var(--v4-font);
}
#npcbody .npc-step:last-child { margin-left: 4px; color: var(--v4-acc); font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; }
#npcbody .npc-act {
  min-height: 32px; padding: 6px 14px; border-radius: 0; box-shadow: none; white-space: nowrap;
  background: transparent; color: var(--v4-tx); border: 1px solid #ffffff2a;
  font: 600 calc(12px * var(--fontscale, 1)) var(--v4-font); letter-spacing: .02em;
}
#npcbody .npc-act:hover:not(:disabled) { border-color: var(--v4-acc); color: var(--v4-acc); }
#npcbody .npc-act.primary { background: #00e5ff14; border-color: #00e5ff88; color: var(--v4-acc); }
#npcbody .npc-act.primary:hover:not(:disabled) { background: #00e5ff26; }
#npcbody .npc-act:disabled { opacity: .35; cursor: not-allowed; }
#npcbody .npc-act:focus-visible, #npcbody .npc-tab:focus-visible, #npcbody .npc-chip:focus-visible { outline: 1px solid var(--v4-acc); outline-offset: 1px; }

/* venda rápida */
#npcbody .npc-quick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  margin: 0 0 10px; padding: 10px 12px; background: #ffd23f0a; border: 1px solid #ffd23f33;
}
#npcbody .npc-quick b { color: var(--v4-tx); font-size: calc(12px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: .05em; }
#npcbody #npcsellzone {
  margin: 12px 0 0; padding: 10px; text-align: center; border: 1px dashed var(--v4-line); border-radius: 0;
  color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1));
}
#npcbody #npcsellzone.dragover { border-color: var(--v4-acc2); color: var(--v4-tx); background: #ffd23f10; box-shadow: none; }

/* bancadas herdadas dentro do painel: mesmos cantos retos e superfícies das linhas novas */
#npcbody .npc-pane .refine-section { margin-top: 0; }
#npcbody .npc-pane .refine-notice { border-radius: 0; background: #ff3b4e0f; border-color: #ff3b4e44; color: #f0c9a0; }
#npcbody .npc-pane .refine-card { border-radius: 0; background: #0b0f1c; border-color: #ffffff14; }
#npcbody .npc-pane .refine-head > canvas, #npcbody .npc-pane .refine-preview,
#npcbody .npc-pane .refine-target { border-radius: 0; }
#npcbody .npc-pane .refine-preview { background: #00e5ff08; border-color: #00e5ff26; }
#npcbody .npc-pane .refine-cost strong { color: var(--v4-acc2); font-family: var(--v4-mono); font-weight: 700; }
#npcbody .npc-pane .refine-action {
  border-radius: 0; background: #00e5ff14; border-color: #00e5ff88; color: var(--v4-acc);
  font: 600 calc(12px * var(--fontscale, 1)) var(--v4-font);
}
#npcbody .npc-pane .refine-action:hover:not(:disabled) { background: #00e5ff26; border-color: var(--v4-acc); }
#npcbody .npc-pane .imbsock, #npcbody .npc-pane .imbmenu, #npcbody .npc-pane .imbtiers button { border-radius: 0; }
#npcbody .npc-pane .imbrow { margin-bottom: 10px; }
#npcbody .npc-pane .row { border-bottom-color: #ffffff0d; }

@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  #npcmodal { max-height: calc(100dvh - var(--barh) - 16px); }
  #npcbody .npc-head { padding: 10px 48px 8px 12px; }
  #npcbody .npc-pane { padding: 10px 12px 14px; }
  #npcbody .npc-filters { margin: -10px -12px 8px; padding: 10px 12px 8px; }
  #npcbody .npc-row { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 8px; }
  #npcbody .npc-icon { width: 40px; height: 40px; }
  #npcbody .npc-row > .npc-side { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  #npcbody .npc-row > .npc-act { grid-column: 3; grid-row: 1 / span 2; min-height: 44px; }
  #npcbody .npc-cost { align-items: flex-start; }
  #npcbody .npc-step, #npcbody .npc-qty input { min-height: 40px; }
  #npcbody .npc-step { min-width: 40px; }
  #npcbody .npc-tab { padding: 10px 12px; }
  #npcbody .npc-quick { grid-template-columns: minmax(0, 1fr) auto; }
  #npcbody .npc-quick > .npc-act { grid-column: 1 / -1; min-height: 44px; }
  #npcbody .imbtiers button { min-height: 40px; }
}

/* Selo de versão ("v0.0.1-5a43f2f"), preenchido pelo bootstrap inline a partir de window.PW_VERSION. */
.gatever { margin-top: 6px; font: 11px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--muted, #8a97a6); opacity: .7; text-align: center; user-select: text; }
.gatever:empty { display: none; }

/* Botão ★ de voto TopIdle no cabeçalho do minimapa; o atributo [hidden] o esconde sem URL. */
html #viewwrap #mmpanel #mmvote {
  position: static; margin-left: auto; pointer-events: auto; width: 18px; height: 18px; padding: 0; line-height: 1;
  color: #ffd166; background: #05060ecc; border: 1px solid var(--v4-line, #39dce98a); border-radius: 0; cursor: pointer;
  transform-origin: 50% 100%; animation: mmvote-swing 1.9s ease-in-out infinite;
}
html #viewwrap #mmpanel #mmvote + #mmopen { margin-left: 4px; }
#viewwrap #mmpanel #mmvote:hover { border-color: #ffd166; animation-play-state: paused; }
@keyframes mmvote-swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) { html #viewwrap #mmpanel #mmvote { animation: none; } }

/* ---------- HUD v4.1: barras com o texto dentro, juice, buffs acima da vida, estamina à vista ----------
   Vale nos dois docks (uma linha e empilhado): os seletores levam #bottom de propósito, um id a
   mais que os blocos v4 acima, então não dependem de ordem nem de !important — exceto onde o
   bloco do celular escondia a fileira de status com !important.
   Grade: cabeçalho, buffs, HP, EN, munição e escudo ocupam a largura; o rodapé divide XP (fina,
   à esquerda) e estamina (barra própria + lua de descansar, à direita). */
#left #bottom #vitals #hudstats {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 40%); grid-auto-flow: row;
  align-items: center; gap: 2px 8px;
}
/* Orçamento do dock de 96 px: cabeçalho 15 + buffs 14 + HP 14 + EN 14 + escudo 10 + rodapé 14
   + 5 vãos de 2 = 91. Cada pixel a mais aqui corta o nome do personagem lá em cima. */
#left #bottom #vitals #charheading { margin: 0; padding-top: 0; padding-bottom: 0; line-height: 15px; height: 15px; min-height: 0; overflow: hidden; }
#left #bottom #vitals .hudbarrow { min-height: 0; }
#left #bottom #vitals #charheading,
#left #bottom #vitals #statuses,
#left #bottom #vitals .hudbarrow:not(.xprow):not(.stamrow) { grid-column: 1 / -1; }

/* Fileira de buffs/debuffs: altura reservada, pra barra de vida não pular quando um status entra. */
#left #bottom #vitals #statuses {
  position: static; display: flex !important; align-items: center; gap: 3px; height: 14px; min-height: 14px;
  margin: 0; overflow: hidden;
}
#left #bottom #vitals #statuses:empty::before {
  content: ''; display: block; width: 100%; height: 1px; background: linear-gradient(90deg, var(--v4-line), transparent);
}
.buffico {
  --bc: var(--v4-es); --left: 1;
  position: relative; flex: none; width: 14px; height: 14px; display: grid; place-items: center;
  border: 1px solid var(--bc); background: #05060ecc; color: var(--bc);
  box-shadow: 0 0 5px color-mix(in srgb, var(--bc) 45%, transparent); cursor: default;
}
.buffico.debuff { --bc: var(--v4-red); }
.buffico.debuff[style*="--bc"] { border-color: var(--v4-red); }
.buffico canvas { width: 12px; height: 12px; image-rendering: auto; }
.buffico svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.buffico.svg-rested { --bc: #6ef1b8; }
.buffico.svg-tired { --bc: var(--v4-red); animation: buffwarn 1.4s ease-in-out infinite; }
.buffico.svg-atk { --bc: var(--v4-acc2); }
/* Tempo restante: um filete embaixo que encolhe com o status. */
.buffico .buffleft {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--left) * 100%);
  background: var(--bc); transition: width .25s linear;
}
.buffico .sttime {
  position: absolute; right: -3px; bottom: -6px; padding: 0 1px; z-index: 1;
  font: 700 calc(7px * var(--fontscale, 1)) / 8px monospace; color: #fff; background: #05060ef0; white-space: nowrap;
  pointer-events: none;
}
.buffico .sttime:empty { display: none; }
.buffico.ending { animation: buffwarn .5s ease-in-out infinite; }
@keyframes buffwarn { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* HP / EN / ESCUDO: o rótulo e o valor moram DENTRO da barra. */
#left #bottom #vitals .hudbarrow:not(.xprow):not(.stamrow) {
  position: relative; display: block; min-width: 0; height: auto;
}
#left #bottom #vitals .hudbarrow:not(.xprow):not(.stamrow) > .bar { height: 14px; }
#left #bottom #vitals .hudbarrow:has(#shbar) > .bar { height: 10px; }
#left #bottom #vitals .hudbarrow:has(#shbar) > .hudbar-label,
#left #bottom #vitals .hudbarrow:has(#shbar) > .hudbarval { font-size: calc(8px * var(--fontscale, 1)); }
#left #bottom #vitals .hudbarrow:not(.xprow):not(.stamrow) > .hudbar-label,
#left #bottom #vitals .hudbarrow:not(.xprow):not(.stamrow) > .hudbarval,
#left #bottom #vitals .stambox > .hudbar-label,
#left #bottom #vitals .stambox > .hudbarval {
  position: absolute; top: 0; bottom: 0; z-index: 3; display: flex; align-items: center;
  pointer-events: none; color: #fff; font-weight: 700; letter-spacing: .03em;
  font-size: calc(9.5px * var(--fontscale, 1)); line-height: 1;
  text-shadow: 0 1px 0 #000, 0 0 3px #000, 0 0 1px #000;
}
#left #bottom #vitals .hudbarrow:not(.xprow):not(.stamrow) > .hudbar-label,
#left #bottom #vitals .stambox > .hudbar-label { left: 6px; }
#left #bottom #vitals .hudbarrow:not(.xprow):not(.stamrow) > .hudbarval,
#left #bottom #vitals .stambox > .hudbarval { right: 6px; font-variant-numeric: tabular-nums; }
#left #bottom #vitals #ammorow { display: flex; align-items: center; gap: 6px; }
#left #bottom #vitals #ammorow[hidden] { display: none; }
#left #bottom #vitals #ammorow > .hudbar-label, #left #bottom #vitals #ammorow > .hudbarval { position: static; }

/* O trilho e o enchimento: brilho de vidro em cima, sombra embaixo, e um reflexo que passa. */
#left #bottom #vitals .bar {
  position: relative; overflow: hidden; background: var(--v4-trk); border: 0;
  box-shadow: inset 0 0 0 1px #ffffff14, inset 0 1px 3px #000c;
}
#left #bottom #vitals .bar > div:not(.ghost) {
  position: relative; z-index: 1; height: 100%; transition: width .2s ease-out;
  background-image: linear-gradient(180deg, #ffffff47 0, #ffffff10 45%, #0000 55%, #00000038 100%);
}
#left #bottom #vitals .bar > .ghost { z-index: 0; opacity: 1; }
#left #bottom #vitals #hpbar > div:not(.ghost) { background-color: var(--v4-hp); box-shadow: 0 0 8px #ff3b4e66; }
#left #bottom #vitals #enbar > div:not(.ghost) { background-color: var(--v4-en); box-shadow: 0 0 8px #2f8bff66; }
#left #bottom #vitals #shbar > div:not(.ghost) { background-color: var(--v4-es); box-shadow: 0 0 8px #39ff1444; }
#left #bottom #vitals #hpbar > .ghost { background: #ffffffaa; }
#left #bottom #vitals #enbar > .ghost { background: #cfe2ffaa; }
#left #bottom #vitals #shbar > .ghost { background: #d6ffc8aa; }
#left #bottom #vitals .bar > div:not(.ghost)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, #0000 38%, #ffffff55 50%, #0000 62%) no-repeat;
  background-size: 260% 100%; animation: barsheen 4.2s linear infinite;
}
#left #bottom #vitals #enbar > div:not(.ghost)::after { animation-delay: -1.4s; }
#left #bottom #vitals #shbar > div:not(.ghost)::after { animation-delay: -2.8s; }
@keyframes barsheen { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }
/* Golpe: a barra treme e pisca branco; cura: acende na cor dela. */
#left #bottom #vitals .bar::after {
  content: ''; display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
}
#left #bottom #vitals .bar.hit { animation: barshake .28s ease-out; }
#left #bottom #vitals .bar.hit::after { background: #fff; animation: barflash .32s ease-out; }
#left #bottom #vitals .bar.heal::after { background: linear-gradient(90deg, #0000, #ffffff66, #0000); animation: barflash .5s ease-out; }
#left #bottom #vitals #hpbar.heal { box-shadow: inset 0 0 0 1px #ff3b4eaa, 0 0 10px #ff3b4e88; }
#left #bottom #vitals #enbar.heal { box-shadow: inset 0 0 0 1px #2f8bffaa, 0 0 10px #2f8bff88; }
#left #bottom #vitals #shbar.heal { box-shadow: inset 0 0 0 1px #39ff14aa, 0 0 10px #39ff1488; }
@keyframes barflash { 0% { opacity: .75; } 100% { opacity: 0; } }
@keyframes barshake { 0%, 100% { transform: none; } 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-1px); } }
/* Vida baixa (< 30%) e energia baixa (< 20%): o trilho pulsa, o número fica vermelho. */
#left #bottom #vitals #hpbar.low { animation: lowpulse 1s ease-in-out infinite; }
#left #bottom #vitals #enbar.low { box-shadow: inset 0 0 0 1px #2f8bffaa, inset 0 1px 3px #000c; }
#left #bottom #vitals .hudbarrow:has(#hpbar.low) > .hudbarval { color: #ffd0d6; }
@keyframes lowpulse { 0%, 100% { box-shadow: inset 0 0 0 1px #ff3b4e88, 0 0 0 #ff3b4e00; } 50% { box-shadow: inset 0 0 0 1px #ff3b4e, 0 0 12px #ff3b4ecc; } }

/* Rodapé: XP fina à esquerda, estamina como barra de verdade à direita, com a lua de descansar. */
#left #bottom #vitals .xprow { grid-column: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
#left #bottom #vitals .stamrow {
  grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; margin: 0;
}
#left #bottom #vitals .stambox { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
#left #bottom #vitals #stambar { display: block; height: 12px; margin: 0; }
#left #bottom #vitals .stambox > .hudbar-label, #left #bottom #vitals .stambox > .hudbarval { font-size: calc(8.5px * var(--fontscale, 1)); }
#left #bottom #vitals #stambar > div:not(.ghost) { background-color: var(--stam); box-shadow: 0 0 6px #c4891e55; }
#left #bottom #vitals .stambox > .hudbar-label { color: #fff; }
#left #bottom #vitals .stambox > .hudbarval { color: #fff; }
#left #bottom #vitals .stamrow .stamgain { position: absolute; right: -12px; top: 0; height: 12px; }
#left #bottom #vitals .stamrow.gain .stambox { margin-right: 12px; }
/* Descansado (≥ 90%): verde-água, brilho calmo. */
#left #bottom #vitals .stamrow.rested #stambar { box-shadow: inset 0 0 0 1px #6ef1b888, inset 0 1px 3px #000c; }
#left #bottom #vitals .stamrow.rested #stambar > div:not(.ghost) { background-color: #27bd89; box-shadow: 0 0 9px #6ef1b888; }
/* Cansado (< 10%): vermelho, o trilho pulsa e o rótulo vira o aviso. */
#left #bottom #vitals .stamrow.tired #stambar { animation: lowpulse 1.2s ease-in-out infinite; }
#left #bottom #vitals .stamrow.tired #stambar > div:not(.ghost) { background-color: var(--v4-red); }
#left #bottom #vitals .stamrow.tired .stambox > .hudbarval { color: #ffd0d6; }
#left #bottom #vitals #stambar.max > div:not(.ghost) { background-color: #5a1620; }
#left #bottom #vitals #restbtn {
  display: flex; position: static; flex: none; width: 18px; height: 14px; padding: 0;
  align-items: center; justify-content: center; color: var(--v4-dim); background: #05060ecc;
  border: 1px solid var(--v4-line); border-radius: 0; box-shadow: none; cursor: pointer;
}
#left #bottom #vitals #restbtn svg { width: 11px; height: 11px; fill: currentColor; }
#left #bottom #vitals #restbtn:hover, #left #bottom #vitals #restbtn:focus-visible { color: var(--v4-acc2); border-color: var(--v4-acc2); }
#left #bottom #vitals .stamrow.tired #restbtn { color: #fff; background: var(--v4-red); border-color: var(--v4-red); animation: buffwarn 1.2s ease-in-out infinite; }

/* Mais baixo que o dock padrão (notebook pequeno): a fileira de buffs encolhe junto. */
@media (min-width: 901px) and (max-width: 1080px), (min-width: 561px) and (max-width: 1080px) and (max-height: 699px) {
  /* dock de 84 px: o escudo vazio sai (como já saía aqui) e as barras afinam um pixel. */
  #left #bottom #vitals #hudstats { gap: 2px 6px; }
  #left #bottom #vitals .hudbarrow:not(.xprow):not(.stamrow) > .bar { height: 13px; }
  #left #bottom #vitals .hudbarrow.empty:not(.xprow):not(.stamrow) { display: none; }
}
/* Celular e tablet em pé: o dock tem a altura do que mostra, mas a linha de escudo vazia ainda
   custa tela à toa — sai, como no bloco do celular acima. */
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  #left #bottom #vitals .hudbarrow.empty:not(.xprow):not(.stamrow) { display: none; }
}

/* Botão de passar a liderança no cartão do grupo, ao lado do ×. */
.ppromote {
  width: 16px; height: 16px; padding: 0; line-height: 1; font-size: calc(11px * var(--fontscale, 1));
  color: var(--v4-acc2, #ffd23f); background: transparent; border: 1px solid #ffd23f55; cursor: pointer;
}
.ppromote:hover, .ppromote:focus-visible { background: #ffd23f22; border-color: #ffd23f; }

@media (prefers-reduced-motion: reduce) {
  #left #bottom #vitals .bar > div:not(.ghost)::after,
  #left #bottom #vitals .bar.hit, #left #bottom #vitals .bar.hit::after, #left #bottom #vitals .bar.heal::after,
  #left #bottom #vitals #hpbar.low, #left #bottom #vitals .stamrow.tired #stambar,
  #left #bottom #vitals .stamrow.tired #restbtn, .buffico.svg-tired, .buffico.ending { animation: none; }
}

/* ---------- Ordens do dia do Marechal Ketch (ADR 0168) ----------
   Mesmo bloco no balcão do Ketch e no app Contratos (.compact). Família perto do nível acende
   (.fit), muito acima apaga (.far); chefe leva a faixa vermelha; cumprida fica verde. */
.orders { margin: 8px 0 10px; padding: 8px 10px; border: 1px solid #ffd23f44; background: #0b0d16e6; }
.orders.compact { margin: 0 0 10px; }
.orders .ordhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #ffd23f; }
.orders .ordhead b { letter-spacing: .04em; text-transform: uppercase; font-size: calc(12px * var(--fontscale, 1)); }
.orders .ordmerit { color: #9af4ff; font-weight: 700; font-size: calc(12px * var(--fontscale, 1)); white-space: nowrap; cursor: help; }
.orders .ordsub { color: #8a93a6; font-size: calc(10.5px * var(--fontscale, 1)); margin: 2px 0 6px; }
.orders .ordrow { position: relative; padding: 6px 8px 7px 10px; margin-top: 5px; border-left: 3px solid #3a4258; background: #ffffff06; }
.orders .ordrow.fit { border-left-color: #ffd23f; background: #ffd23f0d; }
.orders .ordrow.far { opacity: .55; }
.orders .ordrow.boss { border-left-color: #ff3b4e; }
.orders .ordrow.boss.fit { background: #ff3b4e12; }
.orders .ordrow.done { border-left-color: #2fe58a; background: #2fe58a0f; opacity: 1; }
.orders .ordname { color: #f2ede0; font-size: calc(12px * var(--fontscale, 1)); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.orders .ordboss { font-style: normal; font-weight: 700; color: #fff; background: #ff3b4e; padding: 0 4px; font-size: calc(9px * var(--fontscale, 1)); letter-spacing: .06em; }
.orders .orddone { margin-left: auto; color: #2fe58a; font-weight: 700; font-size: calc(10.5px * var(--fontscale, 1)); }
.orders .ordmeta { color: #8a93a6; font-size: calc(10.5px * var(--fontscale, 1)); margin-top: 2px; }
.orders .orddiff { font-weight: 700; }
.orders .orddiff.d-easy { color: #9af4ff; }
.orders .orddiff.d-medium { color: #ffd23f; }
.orders .orddiff.d-hard { color: #ff6b7d; }
.orders .ordbar { position: relative; height: 12px; margin-top: 5px; background: #17151f; box-shadow: inset 0 0 0 1px #ffffff14; overflow: hidden; }
.orders .ordbar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ffe58a, #e0a91e); transition: width .3s ease-out; }
.orders .ordrow.boss .ordbar > i { background: linear-gradient(180deg, #ff8a96, #d9304b); }
.orders .ordrow.done .ordbar > i { background: linear-gradient(180deg, #7cffb8, #1fb86a); }
.orders .ordbar > span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px;
  color: #fff; font-weight: 700; font-size: calc(9px * var(--fontscale, 1)); text-shadow: 0 1px 0 #000, 0 0 3px #000;
}
.orders .ordrew { color: #c9cdd6; font-size: calc(10.5px * var(--fontscale, 1)); margin-top: 4px; }
.orders .ordsoon { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #ffffff22; color: #9f896b; font-size: calc(10.5px * var(--fontscale, 1)); font-style: italic; }

/* ---------- Seletor de build no dock e edição das builds (ADR 0170) ----------
   O botão segue o molde da Caçada: wrapper com o botão e o popover acima dele. No celular o
   dock ganha a sexta coluna e o popover vira folha acima do dock, como o da Caçada. */
#buildbox { position: relative; }
#left #bottom > #buildbox { position: relative; display: block; flex: none; width: 74px; height: 80px; padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; }
#left #bottom #buildbox > #buildlaunch { width: 100%; height: 100%; }
#left #buildlaunch .buildactive {
  max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--v4-dim); font-size: 9px; line-height: 1.1;
}
#left #buildlaunch .buildactive:empty { display: none; }
#left #buildlaunch.on .buildactive { color: var(--v4-acc2); }
#left #buildlaunch.on > svg, #left #buildlaunch.on > svg * { stroke: var(--v4-acc2); }
#buildpop {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; width: 300px;
  display: flex; flex-direction: column; gap: 10px; padding: 14px; box-sizing: border-box;
  color: var(--v4-tx); background: var(--v4-pbg); border: 1px solid var(--v4-line); font-family: var(--v4-font);
}
#buildpop[hidden] { display: none; }
#buildpop .huntpophead { display: flex; align-items: center; justify-content: space-between; }
#buildpop .huntpophead b { font-size: calc(15px * var(--fontscale, 1)); font-weight: 700; }
#buildpop #buildpopclose { width: 24px; height: 24px; padding: 0; color: var(--v4-dim); background: transparent; border: 0; cursor: pointer; font-size: 14px; }
#buildpoplist { display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 420px); overflow: auto; }
#buildpop .bpitem {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; width: 100%; padding: 8px 10px;
  text-align: left; color: var(--v4-tx); background: #ffffff06; border: 1px solid var(--v4-line); cursor: pointer;
  font-family: inherit;
}
#buildpop .bpitem:hover:not(:disabled) { border-color: var(--v4-acc); background: #00e5ff10; }
#buildpop .bpitem:disabled { cursor: default; }
#buildpop .bpitem.active { border-color: var(--v4-acc2); background: #ffd23f12; }
#buildpop .bpname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--fontscale, 1)); }
#buildpop .bpcustom { color: #9af4ff; font-style: normal; font-size: calc(10px * var(--fontscale, 1)); }
#buildpop .bpstate { color: var(--v4-dim); font-size: calc(10.5px * var(--fontscale, 1)); white-space: nowrap; }
#buildpop .bpitem.active .bpstate { color: var(--v4-acc2); font-weight: 700; }
#buildpop .bpskills { grid-column: 1 / -1; color: #8a93a6; font-size: calc(10px * var(--fontscale, 1)); line-height: 1.3; }
#buildpop #buildpopedit {
  padding: 8px 10px; color: var(--v4-acc); background: transparent; border: 1px solid var(--v4-acc);
  cursor: pointer; font-family: inherit; font-size: calc(12px * var(--fontscale, 1));
}
#buildpop #buildpopedit:hover { color: #05060e; background: var(--v4-acc); }
@media (min-width: 901px) and (max-width: 1320px), (min-width: 561px) and (max-width: 1320px) and (max-height: 699px) {
  #left #bottom > #buildbox { width: 58px; }
}
@media (min-width: 901px) and (max-width: 1080px), (min-width: 561px) and (max-width: 1080px) and (max-height: 699px) {
  #left #bottom > #buildbox { width: 44px; height: 64px; }
}
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  #left #bottom { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #left #bottom > #bagtab { grid-column: 1; grid-row: 3; }
  #left #bottom > #hunt { grid-column: 2; grid-row: 3; }
  #left #bottom > #phonetab { grid-column: 3; grid-row: 3; }
  #left #bottom > #decktab { grid-column: 4; grid-row: 3; }
  #left #bottom > #buildbox { grid-column: 5; grid-row: 3; width: auto; height: auto; }
  #left #bottom > #menutab { grid-column: 6; grid-row: 3; }
  #left #bottom #buildlaunch > .buildactive { display: none; }
  #buildpop { position: fixed; left: 12px; right: 12px; bottom: calc(var(--barh) + 8px); width: auto; }
}

/* Aba Builds: tirar (×) e pôr (+) habilidades. */
#cards .bldhead .bldrm {
  flex: none; width: 20px; height: 20px; margin-left: 4px; padding: 0; line-height: 1;
  color: #ff8495; background: transparent; border: 1px solid #ff3b4e55; border-radius: 4px; cursor: pointer;
}
#cards .bldhead .bldrm:hover:not(:disabled) { color: #fff; background: #ff3b4e; }
#cards .bldhead .bldrm:disabled { opacity: .3; cursor: default; }
#cards .bldhead em.bldn { margin-left: auto; }
#cards .bldhead i + .bldrm, #cards .bldhead em + .bldrm { margin-left: 6px; }
#cards .bldrow.added { box-shadow: inset 3px 0 0 #00e5ff88; }
#cards .bldkey.any { border-style: dashed; color: #9af4ff; }
#cards .bldadd { display: block; }
#cards .bldadd select {
  width: 100%; padding: 6px 8px; color: #cfeff5; background: #0c1822; border: 1px dashed #00e5ff66; border-radius: 5px;
  font-family: inherit; font-size: calc(11px * var(--fontscale, 1)); cursor: pointer;
}
#cards .bldcustom {
  justify-self: start; padding: 1px 7px; border-radius: 999px; color: #05060e; background: #9af4ff;
  font-size: calc(10px * var(--fontscale, 1)); font-weight: 700;
}
#cards .cdact .bldreset { color: #9fc3cc; }

/* ---------- Inspecionar (ADR 0171) ----------
   Gangue em cima, nome, classe · nível e o paperdoll de 3x3 do mesmo jeito que o #eqgrid. */
#inspectmodal {
  left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: min(300px, 92vw); min-width: 260px; padding: 14px 16px; z-index: 50;
  border: 1px solid #2a3a52;
  background: linear-gradient(180deg, rgba(0, 229, 255, .06), transparent 30%), linear-gradient(180deg, #161a24 0%, #0b0e14 100%);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .55);
}
#inspectmodal .close { right: 10px; top: 8px; }
#inspecthdr { text-align: center; padding: 0 18px 10px; border-bottom: 1px solid #243044; margin-bottom: 12px; }
#inspecttag { color: #ffb347; font-size: calc(11px * var(--fontscale, 1)); letter-spacing: .04em; }
#inspecttag.none { color: var(--dim); font-style: italic; }
#inspectname { color: #e8ecf2; font-size: calc(16px * var(--fontscale, 1)); font-weight: 700; overflow-wrap: anywhere; }
#inspectname.vip { color: #ffd23e; }
#inspectsub { color: var(--cyan); font-size: calc(11px * var(--fontscale, 1)); margin-top: 2px; }
#inspectdoll { display: flex; justify-content: center; }
#inspecteq { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 12px; }
#inspecteq .slot:nth-child(1) { grid-area: 1 / 2; }   /* helmet */
#inspecteq .slot:nth-child(2) { grid-area: 1 / 1; }   /* chip    */
#inspecteq .slot:nth-child(3) { grid-area: 2 / 1; }   /* weapon  */
#inspecteq .slot:nth-child(4) { grid-area: 2 / 2; }   /* armor   */
#inspecteq .slot:nth-child(5) { grid-area: 2 / 3; }   /* gloves  */
#inspecteq .slot:nth-child(6) { grid-area: 3 / 2; }   /* boots   */
#inspecteq .slot:nth-child(7) { grid-area: 1 / 3; }   /* bag     */
#inspecteq .slot, #inspectimp .slot { background: #12161f; box-shadow: inset 0 0 12px rgba(0,0,0,.7); }
#inspecteq .slot:has(canvas), #inspectimp .slot:has(canvas) { border-color: #2b6f80; }
#inspectempty { text-align: center; margin-top: 10px; color: var(--dim); }
#inspectimphead { margin: 12px 0 6px; text-align: center; color: var(--dim); }
#inspectimp { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

/* ---------- Barra de serviços e despacho de loot (ADR 0172) ----------
   Botões em cima do dock, centralizados na view, como os balcões do Huntera: o jogador idle não
   procura NPC pela praça. Só os botões aceitam clique — a faixa em volta deixa o mundo clicável. */
#servicebar {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px);
  pointer-events: none;
}
#servicebar[hidden] { display: none; }
#servicebar .svcbtn {
  pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 10px; min-height: 34px; cursor: pointer;
  font: 700 calc(12px * var(--fontscale, 1)) var(--v4-font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--v4-tx); background: linear-gradient(180deg, #1a1d29 0%, #0b0d14 100%);
  border: 1px solid #3a3f55; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 14px rgba(0, 0, 0, .55);
  transition: border-color .12s, color .12s, transform .08s;
}
#servicebar .svcbtn svg { width: 16px; height: 16px; fill: none; stroke: var(--v4-acc2); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex: none; }
#servicebar .svcbtn:hover { border-color: var(--v4-acc2); color: #fff; }
#servicebar .svcbtn:active { transform: translateY(1px); }
#servicebar .svcbtn:focus-visible { outline: 2px solid var(--v4-acc); outline-offset: 2px; }
#servicebar .svc-sell { border-color: #8a6a2e; box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .18), 0 4px 14px rgba(0, 0, 0, .55); }
#servicebar .svc-leave { color: #ffb3ba; border-color: #7a2a35; }
#servicebar .svc-leave svg { stroke: var(--v4-red); }
#servicebar .svc-leave.leaving { background: linear-gradient(180deg, #3a1219, #1a070b); }
#servicebar .svcwait { font: 700 calc(10px * var(--fontscale, 1)) var(--v4-mono); color: var(--v4-dim); letter-spacing: 0; text-transform: none; }
#servicebar .svcwait:empty { display: none; }
@media (max-width: 560px) {
  #servicebar { gap: 6px; bottom: 6px; }
  #servicebar .svcbtn { padding: 7px; }
  #servicebar .svcbtn span { display: none; }
}

#dispatchmodal {
  left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 50;
  width: min(460px, 94vw); max-width: min(460px, 94vw); padding: 14px 16px;
  border: 1px solid #3a3f55; background: linear-gradient(180deg, #161925 0%, #0a0c12 100%);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .6); font-family: var(--v4-font);
}
#dispatchmodal h3 { color: var(--v4-tx); letter-spacing: .12em; text-transform: uppercase; font-size: calc(13px * var(--fontscale, 1)); }
#dispatchmodal .close { right: 10px; top: 8px; }
#dispatchblurb { margin: 6px 0; padding: 8px 10px; color: var(--v4-tx); background: #1c1a14; border-left: 3px solid var(--v4-acc2); font-size: calc(12px * var(--fontscale, 1)); line-height: 1.45; }
#dispatchmodal .hint { color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); margin-bottom: 8px; }
#dispatchlist { display: flex; flex-direction: column; gap: 5px; max-height: min(46vh, 380px); overflow-y: auto; padding-right: 2px; }
#dispatchmodal .dsprow {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 5px 10px 5px 6px; background: #10131c; border: 1px solid #262b3b; color: var(--v4-tx); cursor: pointer;
}
#dispatchmodal .dsprow:hover { border-color: #4a5170; }
#dispatchmodal .dsprow.on { border-color: var(--v4-acc2); background: #1d1a10; box-shadow: inset 3px 0 0 var(--v4-acc2); }
#dispatchmodal .dspicon canvas { width: 32px; height: 32px; image-rendering: pixelated; display: block; }
#dispatchmodal .dspname { display: flex; flex-direction: column; font-weight: 600; overflow-wrap: anywhere; }
#dispatchmodal .dspname small { color: var(--v4-dim); font: 400 calc(10.5px * var(--fontscale, 1)) var(--v4-mono); }
#dispatchmodal .dsptotal { font: 700 calc(12px * var(--fontscale, 1)) var(--v4-mono); color: var(--v4-acc2); white-space: nowrap; }
#dispatchfoot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #262b3b; }
#dispatchsum { flex: 1; color: var(--v4-dim); font: calc(11px * var(--fontscale, 1)) var(--v4-mono); }
#dispatchmodal #dispatchgo { color: #102728; background: var(--v4-acc2); border-color: var(--v4-acc2); font-weight: 700; }
#dispatchmodal #dispatchgo:disabled { background: #2a2a2a; color: #777; border-color: #3a3a3a; cursor: default; }

/* Mercado em dólar no Leilão (ADR 0172): aba Carteira e anúncios em US$. */
#auction .usdwallet { display: flex; flex-direction: column; gap: 8px; }
#auction .usdwallet h4 { margin-top: 6px; color: #81dfd0; }
#auction .usdcard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 11px; background: #14191f; border: 1px solid #2c3a42; }
#auction .usdcard > span:first-child { color: #9fb3b8; min-width: 120px; }
#auction .usdcard strong { color: #f2ede0; font-family: var(--v4-mono); }
#auction .usdcard button { margin-left: auto; }
#auction .usdorder { padding: 10px 12px; border: 1px solid #6a5a2c; background: #1d1a10; display: flex; flex-direction: column; gap: 6px; }
#auction .usdparts { display: flex; gap: 14px; list-style: none; padding: 0; margin: 0; }
#auction .usdparts li::before { content: '○ '; color: #777; }
#auction .usdparts li.sent::before { content: '◔ '; color: #ffd23f; }
#auction .usdparts li.ok::before { content: '● '; color: #39ff14; }
#auction .usdhist { display: flex; flex-direction: column; gap: 4px; }
#auction .usdrow { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 5px 8px; background: #11151b; border: 1px solid #222b33; }
#auction .usdrow i { color: #9fb3b8; font-style: normal; }
#auction .usdrow em { margin-left: auto; color: #f0d597; font-style: normal; }
#auction .usdrow a { color: #81dfd0; font-family: var(--v4-mono); font-size: .9em; }
#auction .usdsteps { margin: 0; padding-left: 20px; color: #c9d4d6; display: flex; flex-direction: column; gap: 4px; }
#auction .usdrowl { border-color: #4f6a3a; }
#auction .usdprice { color: #7dff9c; }
#auction .usd-note { color: #f0d597; }

/* ---------- Glitches guiados ----------
   Placar, os três passos com o atual aceso, forjas ativas, forja por criatura (a desta caçada
   primeiro) e o caminho dos pontos. Um botão grande por decisão; o select escondido saiu. */
#glitches .glx { display: flex; flex-direction: column; gap: 8px; font-family: var(--v4-font); }
#glitches .glxhead { display: flex; gap: 8px; align-items: stretch; }
#glitches .glxstat { flex: 1; display: flex; flex-direction: column; padding: 8px 10px; background: #10131c; border: 1px solid #262b3b; }
#glitches .glxstat b { font: 700 calc(20px * var(--fontscale, 1)) var(--v4-mono); color: var(--v4-acc); }
#glitches .glxstat span { color: var(--v4-dim); font-size: calc(10.5px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: .08em; }
#glitches .glxhelp { align-self: center; padding: 6px 10px; color: var(--v4-acc2); background: #1c1a10; border: 1px solid #6a5a2c; cursor: pointer; }
#glitches .glxintro { margin: 0; color: var(--v4-tx); font-size: calc(12px * var(--fontscale, 1)); line-height: 1.45; }
#glitches .glxsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#glitches .glxsteps li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; color: var(--v4-dim); background: #0e1018; border: 1px solid #1f2433; font-size: calc(11.5px * var(--fontscale, 1)); }
#glitches .glxsteps li b { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #1f2433; color: var(--v4-dim); font-size: 11px; }
#glitches .glxsteps li.done { color: #8fd9a8; }
#glitches .glxsteps li.done b { background: #1e4a2c; color: #8fff9c; }
#glitches .glxsteps li.now { color: var(--v4-tx); border-color: var(--v4-acc); box-shadow: inset 3px 0 0 var(--v4-acc); }
#glitches .glxsteps li.now b { background: var(--v4-acc); color: #05060e; }
#glitches .glxnext { padding: 8px 10px; background: #1c1a10; border-left: 3px solid var(--v4-acc2); color: var(--v4-tx); font-size: calc(12px * var(--fontscale, 1)); }
#glitches .glxsec { margin: 6px 0 0; color: var(--v4-acc); font-size: calc(11px * var(--fontscale, 1)); letter-spacing: .1em; text-transform: uppercase; }
#glitches .glxcard { padding: 8px 10px; background: #10131c; border: 1px solid #262b3b; display: flex; flex-direction: column; gap: 5px; }
#glitches .glxcard.on { border-color: #2b6f50; box-shadow: inset 3px 0 0 #39ff14; }
#glitches .glxcard.locked { opacity: .9; }
#glitches .glxrow { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
#glitches .glxname { color: var(--v4-tx); font-weight: 700; }
#glitches .glxdesc { color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); }
#glitches .glxtime { font: 700 calc(13px * var(--fontscale, 1)) var(--v4-mono); color: #8fff9c; }
#glitches .glxwarn { margin: 0; color: #f0d597; font-size: calc(11px * var(--fontscale, 1)); }
#glitches .glxmobs { display: flex; flex-direction: column; gap: 4px; }
#glitches .glxmob { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 8px; background: #0b0d14; border: 1px solid #262b3b; }
#glitches .glxmob.short { opacity: .75; }
#glitches .glxmobhead { display: flex; gap: 6px; align-items: baseline; }
#glitches .glxmobhead em, #glitches .glxrung em { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 999px; color: #05060e; background: var(--v4-acc2); }
#glitches .glxmats { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: calc(10.5px * var(--fontscale, 1)); color: var(--v4-tx); }
#glitches .glxmat i { font-style: normal; color: #8fff9c; font-family: var(--v4-mono); }
#glitches .glxmat.short i { color: var(--v4-red); }
#glitches .glxmob button { grid-column: 2; grid-row: 1 / span 2; }
#glitches button:not(.glxhelp) { padding: 5px 12px; color: #05060e; background: var(--v4-acc); border: 1px solid var(--v4-acc); font-weight: 700; cursor: pointer; }
#glitches button:disabled { color: #8a8f9c; background: #1a1d26; border-color: #2a2f3d; cursor: default; font-weight: 400; }
#glitches .glxsmall { align-self: flex-start; padding: 3px 10px !important; color: var(--v4-dim) !important; background: transparent !important; border-color: #3a3f55 !important; font-weight: 400 !important; }
#glitches .glxrungs { display: flex; flex-direction: column; gap: 4px; }
#glitches .glxrung { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: center; font-size: calc(11px * var(--fontscale, 1)); color: var(--v4-tx); }
#glitches .glxrung b { display: flex; gap: 6px; align-items: baseline; }
#glitches .glxbar { height: 6px; background: #1f2433; overflow: hidden; }
#glitches .glxbar i { display: block; height: 100%; background: var(--v4-acc); }
#servicebar .svcbtn.alert { border-color: var(--v4-acc); }
#servicebar .svcbtn.alert::after { content: ''; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--v4-acc2); box-shadow: 0 0 8px var(--v4-acc2); }

/* ---------- Empilhamento de cartas (molde do pokepong) ---------- */
#cards .stackhead { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin-bottom: 8px; background: #10131c; border: 1px solid #262b3b; }
#cards .stackhead p { margin: 0; color: var(--v4-tx); font-size: calc(12px * var(--fontscale, 1)); line-height: 1.45; }
#cards .stackhead .hint { color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); }
#cards .stackall { align-self: flex-start; padding: 6px 14px; font-weight: 700; color: #05060e; background: var(--v4-acc2); border: 1px solid var(--v4-acc2); cursor: pointer; }
#cards .stackall:disabled { color: #8a8f9c; background: #1a1d26; border-color: #2a2f3d; cursor: default; font-weight: 400; }
#cards .stacklist { display: flex; flex-direction: column; gap: 6px; }
#cards .stackrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; background: #0e1018; border: 1px solid #262b3b; }
#cards .stackrow.ready { border-color: var(--v4-acc2); box-shadow: inset 3px 0 0 var(--v4-acc2); }
#cards .stackcard { width: 64px; }
#cards .stackinfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#cards .stackinfo b { color: var(--v4-tx); overflow-wrap: anywhere; }
#cards .stacklv { font: 700 calc(12px * var(--fontscale, 1)) var(--v4-mono); color: var(--v4-acc); }
#cards .stackbar { height: 6px; background: #1f2433; overflow: hidden; }
#cards .stackbar i { display: block; height: 100%; background: var(--v4-acc2); }
#cards .stackacts { display: flex; flex-direction: column; gap: 4px; }
#cards .stackacts button { padding: 5px 10px; cursor: pointer; }
#cards .stackacts .stackup:not(:disabled) { font-weight: 700; color: #05060e; background: var(--v4-acc); border: 1px solid var(--v4-acc); }

/* ---------- HUD com barra superior no PC (ADR 0175) ----------
   Referência: Huntera. Em cima, uma faixa com o personagem, as moedas + Loja, online e os atalhos
   (os botões do dock são movidos pra cá por applyHudTop). Embaixo, um painel central: barras,
   hotbar e os controles da caça; as abas de serviço ficam presas no topo dele, como abas. */
#topbar[hidden] { display: none; }
body.hudtop #topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8; height: 46px; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px; padding: 0 10px 0 12px;
  font-family: var(--v4-font); color: var(--v4-tx);
  background: linear-gradient(180deg, #0d0f17f2 0%, #07080df2 100%);
  border-bottom: 1px solid #3a3f55; box-shadow: 0 4px 16px #0009;
}
body.hudtop #topbar .tbid { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; padding-right: 14px; border-right: 1px solid #262b3b; }
body.hudtop #tbname { font-size: calc(14px * var(--fontscale, 1)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
body.hudtop #tblv { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
/* moedas em pílulas + Loja com moldura dourada */
body.hudtop #left #tbwallet #currencies { display: flex; align-items: center; gap: 8px; width: auto; min-width: max-content; height: auto; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; container-type: normal; }
body.hudtop #left #tbwallet #currencies::before, body.hudtop #left #tbwallet #currencies::after { display: none; content: none; }
body.hudtop #left #tbwallet #currencies #statrow, body.hudtop #left #tbwallet #currencies #hudwallet { display: flex; flex-direction: row; gap: 8px; width: auto; min-width: max-content; margin: 0; padding: 0; background: none; border: 0; container-type: normal; }
body.hudtop #left #tbwallet #currencies .hudcurrency {
  display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 8px; margin: 0; min-height: 0;
  background: #14161f; border: 1px solid #2c3142; border-radius: 14px; box-shadow: inset 0 1px 0 #ffffff0a;
  container-type: normal; width: auto; min-width: max-content; grid-template-columns: none;
}
body.hudtop #left #tbwallet #currencies .hudcurrency svg { display: block; width: 16px; height: 16px; fill: none; stroke-width: 1.8; flex: none; }
body.hudtop #left #tbwallet #currencies .hudcurrency.credits svg { stroke: var(--v4-acc2); }
body.hudtop #left #tbwallet #currencies .hudcurrency.coins svg { stroke: var(--v4-acc); }
body.hudtop #left #tbwallet #currencies .hudcurrency > span { display: none; }
body.hudtop #left #tbwallet #currencies .hudcurrency strong { font: 700 calc(13px * var(--fontscale, 1)) var(--v4-mono); color: var(--v4-tx); text-shadow: none; }
body.hudtop #left #tbwallet #currencies #lojatab {
  display: flex; align-items: center; gap: 6px; width: auto; height: 30px; padding: 0 12px; cursor: pointer;
  color: var(--v4-tx); background: linear-gradient(180deg, #2a2312, #15110a); border: 1px solid #b08a3a; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #ffd23f22, 0 0 10px #ffd23f22; font: 600 calc(12px * var(--fontscale, 1)) var(--v4-font);
}
body.hudtop #left #tbwallet #currencies #lojatab:hover { border-color: var(--v4-acc2); color: #fff; }
body.hudtop #left #tbwallet #currencies #lojatab .lojachest { display: block; width: 18px; height: 18px; }
body.hudtop #left #tbwallet #currencies #lojatab .lojalbl { font-size: inherit; letter-spacing: 0; text-transform: capitalize; text-shadow: none; color: inherit; }
body.hudtop #topbar .tbonline { display: flex; align-items: center; gap: 6px; margin: 0 auto; color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); white-space: nowrap; }
body.hudtop #topbar .tbonline i { width: 7px; height: 7px; border-radius: 50%; background: #45f3b4; box-shadow: 0 0 6px #45f3b4aa; }
body.hudtop #topbar .tbonline b { color: var(--v4-tx); font: 700 calc(12px * var(--fontscale, 1)) var(--v4-mono); }
body.hudtop #onlinecounter { display: none !important; }
/* atalhos: quadrados com moldura, só ícone (nome no tooltip, tecla no canto) */
body.hudtop #left #tbicons { display: flex; align-items: center; gap: 5px; }
body.hudtop #left #tbicons > * { flex: none; margin: 0; }
body.hudtop #left #tbicons .dockbtn {
  position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  color: var(--v4-tx); background: linear-gradient(180deg, #1c2030, #0c0e15); border: 1px solid #3a3f55; border-radius: 3px;
  box-shadow: inset 0 1px 0 #ffffff0d; cursor: pointer;
}
body.hudtop #left #tbicons .dockbtn::before { content: none; }
body.hudtop #left #tbicons .dockbtn:hover, body.hudtop #left #tbicons .dockbtn.on, body.hudtop #left #tbicons .dockbtn.open { border-color: var(--v4-acc2); background: linear-gradient(180deg, #2a2312, #15110a); }
body.hudtop #left #tbicons .dockbtn > svg { width: 19px; height: 19px; fill: none; stroke: var(--v4-acc); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; filter: none; }
body.hudtop #left #tbicons .dockbtn > svg * { fill: none; stroke: var(--v4-acc); }
body.hudtop #left #tbicons .dockbtn > span { display: none; }
body.hudtop #left #tbicons .dockkey {
  position: absolute; right: 2px; bottom: 1px; color: var(--v4-dim); font-size: 8px; line-height: 1; background: none; border: 0; padding: 0;
}
body.hudtop #left #tbicons .dockkey:empty { display: none; }
body.hudtop #left #tbicons #phonetab #tabinfo { display: none; }
body.hudtop #left #tbicons #phonetab #tabface { width: 26px; height: 26px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body.hudtop #left #tbicons #phonetab #tabface::before, body.hudtop #left #tbicons #phonetab #tabface::after { content: none; display: none; }
body.hudtop #left #tbicons #phonetab #tabface canvas { width: 26px; height: 26px; image-rendering: pixelated; }
body.hudtop #left #tbicons .dockbtn::after { content: none; }
body.hudtop #left #tbicons #phonetab.alert::after, body.hudtop #left #tbicons #phonetab.cue::after {
  content: ''; display: block; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--v4-acc2);
}
/* o que mora no canto de cima desce pra baixo da faixa */
/* `#viewwrap #huntrun` (top 16px) e a regra com o cartão do grupo (top 6px) têm dois ids: sem o
   #viewwrap aqui eles venciam e a telemetria ficava escondida atrás da barra superior. */
body.hudtop #viewwrap #huntrun, body.hudtop #viewwrap:has(#partycard:not([hidden])) #huntrun { top: 54px; }
body.hudtop #viewwrap > #partycard { top: 54px; }
body.hudtop #viewwrap:has(#huntrun:not([hidden])) #tutpanel { top: 174px; }
body.hudtop #maintbanner { top: 52px; }
/* faixa de premiações abaixo da barra superior; some durante a barra de chefe, que mora ali */
body.hudtop #ticker { top: 52px; }
body.hudtop #maintbanner:not([hidden]) ~ #ticker { top: 80px; }
#ticker:has(~ #bossbar:not([hidden])) { display: none; }

/* painel central embaixo: barras | hotbar | build + alvo + distância | caçada */
@media (min-width: 901px), (min-width: 561px) and (max-height: 699px) {
  body.hudtop #left #bottom { justify-content: center; gap: 14px; }
  body.hudtop #left #bottom > #vitals { order: 1; flex: 0 1 300px; min-width: 220px; border-left: 0; padding-left: 0; }
  body.hudtop #left #bottom > #hotbar { order: 2; padding: 0 14px; border-left: 1px solid var(--v4-line); border-right: 1px solid var(--v4-line); }
  body.hudtop #left #bottom > #dockctl { order: 3; }
  body.hudtop #left #bottom > #hunt { order: 4; }
  body.hudtop #left #bottom > #dockctl {
    display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 210px; height: 92px;
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  body.hudtop #left #bottom > #dockctl[hidden] { display: none; }
  body.hudtop #left #bottom > #dockctl::before, body.hudtop #left #bottom > #dockctl::after { content: none; display: none; }
  body.hudtop #dockctl #buildbox { position: relative; display: block; width: 100%; height: 28px; padding: 0; background: none; border: 0; box-shadow: none; }
  body.hudtop #dockctl #buildlaunch {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 28px; padding: 0 8px;
    color: var(--v4-tx); background: #10121a; border: 1px solid #2c3142; border-radius: 3px; cursor: pointer;
  }
  body.hudtop #dockctl #buildlaunch:hover, body.hudtop #dockctl #buildlaunch.on { border-color: var(--v4-acc2); }
  body.hudtop #dockctl #buildlaunch > svg { width: 15px; height: 15px; fill: none; stroke: var(--v4-acc); stroke-width: 1.7; flex: none; }
  body.hudtop #dockctl #buildlaunch .buildname { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: .06em; }
  body.hudtop #dockctl #buildlaunch .buildactive { flex: 1; min-width: 0; text-align: right; color: var(--v4-tx); font-size: calc(11px * var(--fontscale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.hudtop #dockctl .dcsel { display: flex; flex-direction: column; gap: 5px; }
  body.hudtop #dockctl .dcsel label { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; }
  body.hudtop #dockctl .dcsel span { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: .06em; }
  body.hudtop #dockctl .dcsel select {
    min-width: 0; height: 24px; padding: 0 6px; color: var(--v4-tx); background: #10121a; border: 1px solid #2c3142; border-radius: 3px;
    font: calc(11px * var(--fontscale, 1)) var(--v4-font);
  }
  body.hudtop #dockctl .dcsel select:focus-visible { outline: 1px solid var(--v4-acc); }
}
/* abas de serviço presas no topo do painel */
body.hudtop #servicebar { bottom: 0; gap: 4px; }
body.hudtop #servicebar .svcbtn {
  min-height: 30px; padding: 6px 14px 6px 10px; border-radius: 5px 5px 0 0; border-bottom: 0;
  font: 700 calc(11.5px * var(--fontscale, 1)) var(--v4-font); letter-spacing: .12em;
  color: #e9dcc0; background: linear-gradient(180deg, #242838 0%, #0e1018 100%); border-color: #5a5f78;
  box-shadow: inset 0 1px 0 #ffffff12, 0 -2px 10px #0008;
}
/* nome e nível já estão na barra de cima */
body.hudtop #left #vitals #charheading { display: none; }

/* Identidade punk-world por cima da referência (ADR 0175): o Huntera dá a ORGANIZAÇÃO (topo com
   personagem/moedas/atalhos, abas de serviço presas ao painel), o acabamento é o nosso — neon
   ciano/magenta, vidro escuro, números em mono. Nada de moldura dourada de RPG medieval. */
body.hudtop #topbar { border-bottom: 0; }
body.hudtop #topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #00e5ffaa 20%, #ff2ec8aa 80%, transparent);
}
body.hudtop #topbar .tbid { position: relative; padding-bottom: 3px; }
#tbrate[hidden] { display: none; }
body.hudtop #tbrate {
  display: flex; flex-direction: column; align-items: center; justify-content: center; height: 30px; padding: 0 10px;
  border: 1px solid #39ff1455; background: #39ff140d; line-height: 1.05; cursor: help;
}
body.hudtop #tbrate small { color: var(--v4-dim); font-size: calc(8.5px * var(--fontscale, 1)); letter-spacing: .1em; text-transform: uppercase; }
body.hudtop #tbrate b { color: #7dff5c; font: 700 calc(12px * var(--fontscale, 1)) var(--v4-mono); }
body.hudtop #tbrate.bad { border-color: #ff3b4e66; background: #ff3b4e12; }
body.hudtop #tbrate.bad b { color: #ff7a87; }
body.hudtop #left #tbwallet #currencies #lojatab {
  background: linear-gradient(180deg, #2a0f24, #12060f); border-color: #ff2ec8aa; box-shadow: 0 0 10px #ff2ec833;
}
body.hudtop #left #tbwallet #currencies #lojatab:hover { border-color: #ff8ad4; box-shadow: 0 0 14px #ff2ec866; }
body.hudtop #left #tbicons .dockbtn { background: linear-gradient(180deg, #0f1a24, #070a10); border-color: #14b8c455; }
body.hudtop #left #tbicons .dockbtn:hover { border-color: var(--v4-acc); background: #00e5ff14; box-shadow: 0 0 10px #00e5ff33; }
body.hudtop #left #tbicons .dockbtn.on, body.hudtop #left #tbicons .dockbtn.open { border-color: #ff2ec8; background: #ff2ec814; box-shadow: 0 0 10px #ff2ec833; }
/* abas de serviço: vidro com a aresta de cima acesa; venda rápida no amarelo dos créditos */
body.hudtop #servicebar .svcbtn {
  color: var(--v4-tx); background: linear-gradient(180deg, #0f1a24f2 0%, #06080ef2 100%);
  border-color: #14b8c466; border-top: 2px solid #00e5ffaa;
}
body.hudtop #servicebar .svcbtn svg { stroke: var(--v4-acc); }
body.hudtop #servicebar .svcbtn:hover { color: #fff; border-color: #ff2ec8; border-top-color: #ff2ec8; background: linear-gradient(180deg, #2a0f24f2 0%, #0a050cf2 100%); }
body.hudtop #servicebar .svcbtn:hover svg { stroke: #ff8ad4; }
body.hudtop #servicebar .svc-sell { color: #ffe39a; border-color: #ffd23f55; border-top-color: #ffd23f; }
body.hudtop #servicebar .svc-sell svg { stroke: var(--v4-acc2); }
body.hudtop #servicebar .svc-leave { color: #ffb3ba; border-color: #ff3b4e55; border-top-color: #ff3b4e; }
body.hudtop #servicebar .svc-leave svg { stroke: var(--v4-red); }
/* fora do #bottom direto, o build perdeu o "clip-path: none" dos filhos do dock e o popover sumia */
body.hudtop #dockctl #buildbox, body.hudtop #left #bottom > #dockctl { clip-path: none; backdrop-filter: none; }
body.hudtop #dockctl #buildbox::before, body.hudtop #dockctl #buildbox::after { content: none; display: none; }

/* ---------- Revisão de design da HUD do PC: baixa carga cognitiva (ADR 0175) ----------
   Uma camada de navegação por intenção: a aba abre o serviço encostado nela, a aba ativa se
   funde com o painel, ciano = ativo e magenta = só hover. Ícones com nome. Caçar é o botão. */
body.hudtop #servicebar { display: flex; flex-wrap: nowrap; gap: 4px; }
body.hudtop #servicebar .svcbtn { flex: 1 1 0; justify-content: center; min-width: 0; }
body.hudtop #servicebar .svcbtn.on {
  color: #fff; background: #05060ef4; border-color: var(--v4-line); border-top: 2px solid var(--v4-acc);
  box-shadow: none; z-index: 41;
}
body.hudtop #servicebar .svcbtn.on svg { stroke: var(--v4-acc); }
body.hudtop #servicebar .svcbtn.on:hover { border-top-color: var(--v4-acc); }
body.hudtop #servicebar .svc-sell .svcwait {
  min-width: 18px; padding: 1px 5px; border-radius: 9px; text-align: center;
  color: #05060e; background: var(--v4-acc2); font-size: calc(10px * var(--fontscale, 1));
}
/* venda rápida não compete com os créditos: o amarelo fica só no contador */
body.hudtop #servicebar .svc-sell { color: var(--v4-tx); border-color: #14b8c466; border-top-color: #00e5ffaa; }
body.hudtop #servicebar .svc-sell svg { stroke: var(--v4-acc); }

/* balcão aberto por uma aba: em cima dela, sem saudação nem abas próprias (renderNpc) */
body.hudtop #npcmodal.svcmode {
  transform: translateX(-50%); width: min(620px, calc(100vw - 16px));
  border-top: 2px solid var(--v4-acc); border-bottom: 0;
  max-height: min(62vh, calc(100dvh - var(--barh) - 110px));
}
body.hudtop #npcmodal.svcmode .npc-head h3 { color: var(--v4-acc); letter-spacing: .12em; text-transform: uppercase; }

/* refino enxuto: uma linha de risco, custo em vermelho quando falta, alvo como texto */
#npcbody .npc-pane .refine-notice { padding: 6px 10px; line-height: 1.3; cursor: help; }
#npcbody .npc-pane .refine-notice i { font-style: normal; color: var(--v4-dim); }
#npcbody .npc-pane .refine-target { padding: 0; border: 0; background: none; color: var(--v4-dim); font-family: var(--v4-mono); }
#npcbody .npc-pane .refine-cost strong.short { color: var(--v4-red); }
#npcbody .refine-stat > span:first-child { text-transform: lowercase; }
#npcbody .refine-stat > span:first-child::first-letter { text-transform: uppercase; }

/* atalhos do topo com nome; online pequeno no canto */
body.hudtop #left #tbicons { margin-left: auto; }
body.hudtop #left #tbicons .dockbtn { flex-direction: column; gap: 2px; width: auto; min-width: 54px; height: 40px; padding: 0 8px; }
body.hudtop #left #tbicons .dockbtn > svg { width: 17px; height: 17px; }
body.hudtop #left #tbicons .dockbtn > span { display: block; color: var(--v4-tx); font-size: calc(10px * var(--fontscale, 1)); line-height: 1; white-space: nowrap; }
body.hudtop #left #tbicons .dockkey { top: 2px; right: 3px; bottom: auto; }
body.hudtop #left #tbicons #phonetab { gap: 2px; }
body.hudtop #left #tbicons #phonetab #tabface, body.hudtop #left #tbicons #phonetab #tabface canvas { width: 18px; height: 18px; }
body.hudtop #left #tbicons #phonetab #tabinfo { display: block; padding: 0; background: none; border: 0; }
body.hudtop #left #tbicons #phonetab #tabname, body.hudtop #left #tbicons #phonetab #tabmood { display: none; }
body.hudtop #left #tbicons #phonetab #tabrole {
  display: block; color: var(--v4-tx); font-size: calc(10px * var(--fontscale, 1)); font-style: normal; line-height: 1;
  letter-spacing: 0; text-transform: none; background: none; border: 0; padding: 0;
}
body.hudtop #topbar .tbonline { order: 9; margin: 0 0 0 4px; font-size: calc(10px * var(--fontscale, 1)); }
body.hudtop #topbar .tbonline b { font-size: calc(10px * var(--fontscale, 1)); }
body.hudtop #left #tbwallet #currencies .hudcurrency.credits strong::after { content: ' cr'; color: var(--v4-dim); font-weight: 400; }
body.hudtop #left #tbwallet #currencies .hudcurrency.coins strong::after { content: ' pc'; color: var(--v4-dim); font-weight: 400; }
body.hudtop #left #tbwallet #currencies .hudcurrency.credits strong { color: var(--v4-acc2); }
body.hudtop #tbrate { height: 32px; padding: 0 12px; }
body.hudtop #tbrate small { font-size: calc(9px * var(--fontscale, 1)); }
body.hudtop #tbrate b { font-size: calc(13px * var(--fontscale, 1)); }

/* painel: Build em cima, o resumo do ajuste e o botão Caçar embaixo */
@media (min-width: 901px), (min-width: 561px) and (max-height: 699px) {
  body.hudtop #left #bottom > #dockctl { width: 230px; gap: 4px; }
  body.hudtop #dockctl #hunt {
    position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; height: auto;
    padding: 0; background: none; border: 0; box-shadow: none; clip-path: none; overflow: visible;
  }
  body.hudtop #dockctl #hunt::before, body.hudtop #dockctl #hunt::after { content: none; display: none; }
  body.hudtop #dockctl #huntsum {
    width: 100%; height: 22px; padding: 0 8px; text-align: left; cursor: pointer;
    color: var(--v4-dim); background: none; border: 1px dashed #2c3142; border-radius: 3px;
    font: calc(10.5px * var(--fontscale, 1)) var(--v4-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.hudtop #dockctl #huntsum::after { content: ' ▾'; }
  body.hudtop #dockctl #huntsum:hover { color: var(--v4-tx); border-color: var(--v4-acc); }
  body.hudtop #dockctl #huntlaunch {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 34px; padding: 0 10px; cursor: pointer;
    color: #05060e; background: var(--v4-acc); border: 1px solid var(--v4-acc); border-radius: 3px;
    box-shadow: 0 0 14px #00e5ff44;
  }
  body.hudtop #dockctl #huntlaunch:hover { filter: brightness(1.12); }
  body.hudtop #dockctl #huntlaunch > svg { width: 16px; height: 16px; stroke: #05060e; }
  body.hudtop #dockctl #huntlaunch > svg * { stroke: #05060e; }
  body.hudtop #dockctl #huntlaunch .huntcta { font: 700 calc(13px * var(--fontscale, 1)) var(--v4-font); letter-spacing: .08em; text-transform: uppercase; }
  body.hudtop #dockctl #huntlaunch .huntname, body.hudtop #dockctl #huntlaunch .dockkey { display: none; }
  body.hudtop #dockctl #huntlaunch .huntband { max-width: 110px; color: #05060ecc; font-size: calc(10px * var(--fontscale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.hudtop #dockctl #huntlaunch.exit { color: #fff; background: #ff3b4e; border-color: #ff3b4e; box-shadow: 0 0 14px #ff3b4e44; }
  body.hudtop #dockctl #huntlaunch.exit > svg, body.hudtop #dockctl #huntlaunch.exit > svg * { stroke: #fff; }
  body.hudtop #dockctl #huntlaunch.exit .huntband { color: #ffffffcc; }
  body.hudtop #dockctl #huntpop { bottom: calc(100% + 8px); top: auto; left: 0; right: auto; }
}
#huntsum { display: none; }
body.hudtop #huntsum { display: block; }
body.hudtop #left #tbicons .dockbtn > span, body.hudtop #left #tbicons #phonetab #tabrole { text-transform: none; letter-spacing: 0; }
body.hudtop #servicebar .svcbtn { white-space: nowrap; letter-spacing: .06em; padding: 6px 8px; gap: 6px; max-width: none; }
body.hudtop #servicebar .svcbtn span { overflow: hidden; text-overflow: ellipsis; }
body.hudtop #left #tbicons #phonetab #tabinfo #tabrole { text-transform: none; }

/* ---------- Estados visíveis dos controles da HUD do PC (ADR 0175) ----------
   Todo controle clicável tem cara de botão (fundo, borda sólida, ícone de ação) e três estados
   que se enxergam: hover (mais claro + brilho), pressionado (afunda) e ativo. As regras antigas
   do dock (`#left #bottom .dockbtn:hover/.on`) trocavam o fundo por quase transparente e o texto
   escuro do Caçar sumia — por isso estes seletores levam #left #bottom #dockctl. */
@media (min-width: 901px), (min-width: 561px) and (max-height: 699px) {
  /* Caçar: ciano cheio; hover acende, nunca apaga */
  body.hudtop #left #bottom #dockctl #huntlaunch,
  body.hudtop #left #bottom #dockctl #huntlaunch.on,
  body.hudtop #left #bottom #dockctl #huntlaunch.open {
    color: #05060e; background: var(--v4-acc); border: 1px solid var(--v4-acc);
    box-shadow: 0 0 12px #00e5ff40, inset 0 -2px 0 #0008; transition: background .12s, box-shadow .12s, transform .06s;
  }
  body.hudtop #left #bottom #dockctl #huntlaunch:hover,
  body.hudtop #left #bottom #dockctl #huntlaunch:focus-visible {
    color: #05060e; background: #6ff3ff; border-color: #c9fbff; filter: none;
    box-shadow: 0 0 22px #00e5ff99, inset 0 -2px 0 #0006; outline: none;
  }
  body.hudtop #left #bottom #dockctl #huntlaunch:active { transform: translateY(1px); box-shadow: 0 0 8px #00e5ff66, inset 0 2px 0 #0006; }
  body.hudtop #left #bottom #dockctl #huntlaunch > svg,
  body.hudtop #left #bottom #dockctl #huntlaunch > svg * { stroke: #05060e; }
  body.hudtop #left #bottom #dockctl #huntlaunch .huntcta,
  body.hudtop #left #bottom #dockctl #huntlaunch .huntband { color: #05060e; text-shadow: none; }
  /* Sair / cancelar: vermelho cheio, com o mesmo hover */
  body.hudtop #left #bottom #dockctl #huntlaunch.exit { color: #fff; background: #e8293c; border-color: #ff3b4e; box-shadow: 0 0 12px #ff3b4e55, inset 0 -2px 0 #0008; }
  body.hudtop #left #bottom #dockctl #huntlaunch.exit:hover,
  body.hudtop #left #bottom #dockctl #huntlaunch.exit:focus-visible { background: #ff5a6a; border-color: #ffc2c9; box-shadow: 0 0 22px #ff3b4e99; }
  body.hudtop #left #bottom #dockctl #huntlaunch.exit > svg,
  body.hudtop #left #bottom #dockctl #huntlaunch.exit > svg *,
  body.hudtop #left #bottom #dockctl #huntlaunch.exit .huntcta,
  body.hudtop #left #bottom #dockctl #huntlaunch.exit .huntband { color: #fff; stroke: #fff; }

  /* Resumo de foco/distância: botão de verdade (borda sólida, fundo, seta), não texto tracejado */
  body.hudtop #left #bottom #dockctl #huntsum {
    position: relative; height: 24px; padding: 0 24px 0 8px; color: var(--v4-tx); background: #10121a;
    border: 1px solid #3a4258; border-radius: 3px; cursor: pointer; transition: border-color .12s, background .12s;
  }
  body.hudtop #left #bottom #dockctl #huntsum::after {
    content: ''; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
    border-right: 1.5px solid var(--v4-acc); border-bottom: 1.5px solid var(--v4-acc); transform: rotate(45deg);
  }
  body.hudtop #left #bottom #dockctl #huntsum:hover,
  body.hudtop #left #bottom #dockctl #huntsum:focus-visible { color: #fff; background: #00e5ff1a; border-color: var(--v4-acc); outline: none; }
  body.hudtop #left #bottom #dockctl #hunt.popopen #huntsum,
  body.hudtop #left #bottom #dockctl #huntsum[aria-expanded="true"] { border-color: var(--v4-acc); background: #00e5ff14; }
  body.hudtop #left #bottom #dockctl #huntsum:active { transform: translateY(1px); }

  /* Build: mesmo vocabulário do resumo */
  body.hudtop #left #bottom #dockctl #buildlaunch { border-color: #3a4258; transition: border-color .12s, background .12s; }
  body.hudtop #left #bottom #dockctl #buildlaunch:hover,
  body.hudtop #left #bottom #dockctl #buildlaunch:focus-visible,
  body.hudtop #left #bottom #dockctl #buildlaunch.on,
  body.hudtop #left #bottom #dockctl #buildlaunch.open { color: #fff; background: #00e5ff1a; border-color: var(--v4-acc); outline: none; }
  body.hudtop #left #bottom #dockctl #buildlaunch:active { transform: translateY(1px); }
}
/* abas de serviço e atalhos do topo: o hover clareia o fundo, além da borda */
body.hudtop #servicebar .svcbtn:hover, body.hudtop #servicebar .svcbtn:focus-visible { outline: none; box-shadow: 0 0 12px #ff2ec855; }
body.hudtop #servicebar .svcbtn:active { transform: translateY(1px); }
body.hudtop #left #tbicons .dockbtn:hover > span, body.hudtop #left #tbicons .dockbtn:focus-visible > span { color: #fff; }
body.hudtop #left #tbicons .dockbtn:focus-visible { outline: none; border-color: var(--v4-acc); box-shadow: 0 0 10px #00e5ff55; }
body.hudtop #left #tbicons .dockbtn:active { transform: translateY(1px); }
body.hudtop #left #tbwallet #currencies #lojatab:active { transform: translateY(1px); }
/* o #hunt herdava backdrop-filter, que cria camada própria e prendia o popover da Caçada abaixo
   das abas de serviço (z 6): sem filtro e com z acima delas, o popover fica por cima */
body.hudtop #left #bottom #dockctl #hunt { backdrop-filter: none; z-index: 9; }
/* no PC o Caçar já é a ação principal: o botão "Escolha uma caçada" do popover seria a mesma coisa duas vezes */
body.hudtop #dockctl #huntpop #huntleave { display: none; }
/* rótulo das abas: o overflow do ellipsis cortava o acento das maiúsculas (DEPÓSITO, RESSONÂNCIA) */
body.hudtop #servicebar .svcbtn span { line-height: 1.4; padding-top: 2px; }

/* ---------- Build no lugar da barra de skills (ADR 0176) ----------
   A HUD não mostra mais as skills uma a uma: fica Q/E (consumíveis) e a faixa Build, com as
   skills na ordem do piloto. Os slots de skill continuam no DOM (teclas, cooldown, ordem), só não
   aparecem. Vale no PC e no celular. */
#left #hotbar .hb-head,
#left #hotbar .hb-grid > .hot.is-ab,
#left #hotbar .hb-grid > .hot.free { display: none; }
#left #bottom > #hotbar { display: flex; flex-direction: row; align-items: center; gap: 8px; }
#left #hotbar .hb-grid { display: flex; flex-wrap: wrap; align-content: center; gap: 4px; width: auto; max-width: 92px; padding: 0; }
#buildstrip {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-width: 0; flex: 1 1 auto; padding: 6px 10px; cursor: pointer; text-align: left;
  color: var(--v4-tx); background: linear-gradient(180deg, #0f1a24, #070a10); border: 1px solid #14b8c466;
  border-radius: 3px; font-family: var(--v4-font); transition: border-color .12s, background .12s, box-shadow .12s;
}
#buildstrip:hover, #buildstrip:focus-visible { outline: none; border-color: var(--v4-acc); background: #00e5ff14; box-shadow: 0 0 12px #00e5ff44; }
#buildstrip:active { transform: translateY(1px); }
#buildstrip.fresh { border-color: var(--v4-acc2); box-shadow: 0 0 12px #ffd23f55; }
#buildstrip .bs-lbl { display: flex; align-items: center; gap: 6px; color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .1em; text-transform: uppercase; }
#buildstrip .newtag { padding: 1px 5px; color: #05060e; background: var(--v4-acc2); font-style: normal; font-weight: 700; letter-spacing: .04em; }
#buildstrip .bs-icons { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
#buildstrip .bs-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border: 1px solid #2c3142; background: #ffffff05; }
#buildstrip .bs-ic.off { opacity: .4; }
#buildstrip .bs-ic img, #buildstrip .bs-ic canvas, #buildstrip .bs-ic .abglyph { max-width: 26px; max-height: 26px; }
#buildstrip .bs-edit { position: absolute; right: 8px; top: 6px; color: var(--v4-acc); font-size: calc(10px * var(--fontscale, 1)); }
#buildstrip .bs-edit::after { content: ' ›'; }
@media (min-width: 901px), (min-width: 561px) and (max-height: 699px) {
  #left #bottom > #hotbar { height: 92px; }
  #buildstrip { width: 300px; flex: none; height: 92px; }
}
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  #left #hotbar .hb-grid { flex-wrap: nowrap; max-width: none; }
  #buildstrip { height: 44px; flex-direction: row; align-items: center; gap: 8px; padding: 4px 8px; }
  #buildstrip .bs-lbl { flex: none; }
  #buildstrip .bs-ic { width: 26px; height: 26px; }
  #buildstrip .bs-edit { position: static; margin-left: auto; flex: none; }
}

/* aviso de skill nova: no meio, em cima da view; toque abre a Build */
#newskill[hidden] { display: none; }
#newskill {
  position: absolute; left: 50%; top: 22%; z-index: 20; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 22px; cursor: pointer;
  color: var(--v4-tx); background: #05060ef2; border: 1px solid var(--v4-acc); box-shadow: 0 0 26px #00e5ff66;
  font-family: var(--v4-font); text-align: center;
}
#newskill b { color: var(--v4-acc); font-size: calc(16px * var(--fontscale, 1)); letter-spacing: .08em; text-transform: uppercase; }
#newskill span { font-size: calc(13px * var(--fontscale, 1)); font-weight: 700; }
#newskill em { color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); font-style: normal; }
#newskill:hover { border-color: #fff; }
#newskill.show { animation: newskillpop .35s ease-out; }
@keyframes newskillpop { from { opacity: 0; transform: translate(-50%, 8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { #newskill.show { animation: none; } }

/* janela Build: uma linha por skill — prioridade, nome, quando usar, cartas */
#cards .bsklist { display: flex; flex-direction: column; gap: 6px; }
#cards .skcard.bsk { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
#cards .skcard.bsk > .skc-cards { grid-column: 2 / -1; }
#cards .bsk .bsk-ord { display: flex; flex-direction: column; align-items: center; gap: 1px; }
#cards .bsk .bsk-ord b { color: var(--v4-dim); font: 700 calc(11px * var(--fontscale, 1)) var(--v4-mono); }
#cards .bsk .bsk-ord button {
  width: 22px; height: 16px; padding: 0; line-height: 1; font-size: 9px; cursor: pointer;
  color: var(--v4-acc); background: #10121a; border: 1px solid #2c3142; border-radius: 2px;
}
#cards .bsk .bsk-ord button:hover:not(:disabled) { border-color: var(--v4-acc); background: #00e5ff1a; }
#cards .bsk .bsk-ord button:disabled { opacity: .25; cursor: default; }
#cards .bsk .bsk-rule {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; cursor: pointer; white-space: nowrap;
  color: var(--v4-dim); background: #10121a; border: 1px solid #3a4258; border-radius: 13px;
  font: calc(11px * var(--fontscale, 1)) var(--v4-font);
}
#cards .bsk .bsk-rule i { width: 7px; height: 7px; border-radius: 50%; background: #555c70; }
#cards .bsk .bsk-rule.on { color: var(--v4-tx); border-color: #39ff1466; }
#cards .bsk .bsk-rule.on i { background: #39ff14; box-shadow: 0 0 6px #39ff14aa; }
#cards .bsk .bsk-rule:hover, .bsk .bsk-rule:focus-visible { outline: none; color: #fff; border-color: var(--v4-acc); background: #00e5ff1a; }
#cards .bsk.off .skc-head { opacity: .55; }
#cards .bsk.fresh { box-shadow: inset 3px 0 0 var(--v4-acc2); }
#cards .bsk.fresh .newtag { padding: 1px 5px; color: #05060e; background: var(--v4-acc2); font-size: 9px; font-weight: 700; }
#cards .bsk.locked { opacity: .45; }
#cards .bsk.locked .skc-head i { color: var(--v4-dim); font-style: normal; }

/* Uma Build só na HUD: a faixa já mostra a build montada e abre a janela (com a troca rápida na
   aba Trocar build). O seletor antigo do dock sairia como um segundo "Build" ao lado. */
#left #bottom #buildbox, #left #bottom > #buildbox { display: none; }
#buildstrip .bs-name { color: var(--v4-tx); font-weight: 700; letter-spacing: 0; text-transform: none; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  #left #bottom { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #left #bottom > #menutab { grid-column: 5; grid-row: 3; }
}
/* celular: Q/E com tamanho próprio (a grade antiga dava a largura pelas 8 colunas) */
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  #left #hotbar .hb-grid > .hot.is-use { flex: none; width: 44px; height: 44px; }
}
/* o rótulo "Caçar" é do botão principal do PC; no dock antigo o botão segue "Caçada" */
body:not(.hudtop) #huntlaunch .huntcta, body:not(.hudtop) #huntsum { display: none; }

/* ---------- Build enxuta (ADR 0176) ----------
   Uma linha por skill: ordem | skill | cartas | ligada. Trancadas viram a linha "Próxima".
   Passivas sem carta viram uma linha; o estoque de cartas só abre com o "+". */
#cards .skcard.bsk { grid-template-columns: 26px minmax(0, 1fr) auto auto; padding: 5px 8px; }
#cards .skcard.bsk > .skc-cards { grid-column: auto; margin: 0; flex-wrap: nowrap; }
#cards .bsk .skc-cards .mcard.small { width: 30px; height: 40px; }
#cards .bsk .skc-add { width: 26px; height: 26px; }
#cards .bsk .skc-head > div { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
#cards .bsk .skc-head > div > b { overflow: hidden; text-overflow: ellipsis; }
#cards .bsk .bsk-ord { flex-direction: row; gap: 2px; }
#cards .bsk .bsk-ord b { display: none; }
#cards .skcard.bsk { grid-template-columns: 46px minmax(0, 1fr) auto auto; }
#cards .bsk .bsk-rule { height: 24px; padding: 0 9px; }
#cards .bsknext { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); opacity: .8; }
#cards .bsknext img, #cards .bsknext canvas { max-width: 22px; max-height: 22px; opacity: .6; }
#cards .decksec .bldaddline {
  width: 100%; height: 32px; padding: 0 12px; text-align: left; cursor: pointer;
  color: var(--v4-acc); background: #10121a; border: 1px dashed #3a4258; border-radius: 3px; font-family: var(--v4-font);
}
#cards .decksec .bldaddline:hover { border-style: solid; border-color: var(--v4-acc); background: #00e5ff14; }
#cards .bldstoreclose { margin-left: auto; height: 24px; padding: 0 10px; cursor: pointer; color: var(--v4-tx); background: #10121a; border: 1px solid #3a4258; }
#cards .bldstoreclose:hover { border-color: var(--v4-acc); }

/* ---------- Minha build com as cartas ao lado (ADR 0176) ---------- */
.appmodal[data-app="cards"] { max-width: min(1040px, calc(100vw - 16px)); }
#cards .bldsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 14px; align-items: start; }
#cards .bldright {
  position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  max-height: calc(100dvh - var(--barh, 158px) - 150px); overflow-y: auto;
  padding: 8px; background: #070910; border: 1px solid #1d2433;
}
#cards .bldseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#cards .bldseg button { height: 30px; cursor: pointer; color: var(--v4-dim); background: #10121a; border: 1px solid #2c3142; font-family: var(--v4-font); }
#cards .bldseg button.on { color: #05060e; background: var(--v4-acc); border-color: var(--v4-acc); font-weight: 700; }
#cards .bldseg button:not(.on):hover { color: var(--v4-tx); border-color: var(--v4-acc); }
#cards .bldsearch { width: 100%; height: 28px; padding: 0 8px; color: var(--v4-tx); background: #10121a; border: 1px solid #2c3142; }
#cards .bldgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
#cards .bldhint { margin: 0; color: var(--v4-dim); font-size: calc(10.5px * var(--fontscale, 1)); }
#cards .bldright .dexhero { display: none; }
#cards .bldright .dexfilters .cardchips { gap: 3px; }
#cards .bldright .mgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
#cards .bldright .carddetail { grid-template-columns: 1fr; }
/* arraste: alvos válidos acendem, o que está sob o cursor fica cheio */
#cards.dragging .bsk:not(.dropok), #cards.dragging .decksec.passives:not(.dropok) { opacity: .45; }
#cards .bsk.dropok, #cards .decksec.passives.dropok { outline: 1px dashed var(--v4-acc); outline-offset: 2px; }
#cards .bsk.dropover, #cards .decksec.passives.dropover { outline: 2px solid var(--v4-acc); background: #00e5ff14; }
.carddragghost {
  position: fixed; z-index: 9999; pointer-events: none; padding: 6px 10px; max-width: 220px;
  color: var(--v4-tx); background: #05060ef2; border: 2px solid; box-shadow: 0 6px 18px #000a;
  font: 700 calc(12px * var(--fontscale, 1)) var(--v4-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 820px) {
  #cards .bldsplit { grid-template-columns: 1fr; }
  #cards .bldright { position: static; max-height: none; }
}
/* Build compacta: uma linha com o nome da build ativa; o clique abre a edição (ADR 0176) */
#buildstrip { flex-direction: row; align-items: center; gap: 8px; height: 30px; padding: 0 10px; flex: 0 1 auto; }
#buildstrip .bs-lbl { flex: none; }
#buildstrip .bs-name { flex: 1 1 auto; min-width: 0; max-width: none; color: var(--v4-tx); font-weight: 700; font-size: calc(12px * var(--fontscale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#buildstrip .bs-go { flex: none; color: var(--v4-acc); font-size: 16px; line-height: 1; }
#buildstrip .newtag { flex: none; }
@media (min-width: 901px), (min-width: 561px) and (max-height: 699px) {
  #buildstrip { width: auto; height: 26px; }
  #left #bottom > #hotbar { height: auto; }
  body.hudtop #dockctl #buildstrip { width: 100%; }
}
@media (max-width: 560px), (max-width: 900px) and (min-height: 700px) {
  #buildstrip { height: 44px; flex: 1 1 auto; }
}

/* ---------- Seletor de caçada em dois passos (ADR 0177) ----------
   Referência Huntera, com a nossa régua de baixa carga: 1) catálogo em cards (nome, faixa, a
   criatura, o seu recorde); 2) o detalhe da escolhida com um Iniciar só. O #huntbody antigo usa
   !important na grade — aqui a especificidade maior vence com o mesmo !important. */
#huntui[data-step="list"] #huntbody { grid-template-columns: minmax(0, 1fr) !important; overflow-y: auto !important; }
#huntui[data-step="list"] #huntdetail { display: none; }
#huntui[data-step="list"] #huntpicks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; align-content: start; overflow: visible;
}
#huntui[data-step="list"] #huntpicks .huntpick { min-height: 92px; align-items: start; padding: 10px; }
#huntui[data-step="list"] #huntpicks .huntpick:hover:not([disabled]) { border-color: var(--v4-acc); background: #00e5ff10; }
#huntui[data-step="list"] #huntfoot .huntactions { display: none !important; }
#huntui[data-step="detail"] #huntbody { grid-template-columns: minmax(0, 1fr) !important; }
#huntui[data-step="detail"] #huntpicks { display: none; }
.huntpick .huntbestline { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid #ffffff12; font-size: calc(10.5px * var(--fontscale, 1)); color: var(--v4-dim); }
.huntpick .huntbestline b, .huntbest b { color: var(--v4-tx); font-family: var(--v4-mono); }
.huntpick .huntbestline b.cr, .huntbest b.cr { color: var(--v4-acc2); }
.huntpick .huntbestline em, .huntbest em { font-style: italic; color: var(--v4-dim); }
#huntback {
  align-self: flex-start; height: 26px; padding: 0 10px; cursor: pointer; color: var(--v4-acc);
  background: #10121a; border: 1px solid #2c3142; border-radius: 3px; font-family: var(--v4-font);
}
#huntback:hover { border-color: var(--v4-acc); background: #00e5ff14; }
.huntchosen .huntbest {
  display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; margin-left: auto; min-width: 150px;
  background: #0b0e16; border: 1px solid #262b3b; font-size: calc(11px * var(--fontscale, 1));
}
.huntchosen .huntbest > span { color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); letter-spacing: .08em; text-transform: uppercase; }
/* criaturas: nome, nível e elemento; tipo de dano e resistências no tooltip da linha */
#huntroster .rchip, #huntroster > .hint { display: none; }
/* rodapé: Iniciar em destaque; grupo em botões compactos, sem os parágrafos */
#huntui[data-step="detail"] #huntfoot .huntactions { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }
#huntui[data-step="detail"] #huntfoot .huntaction { padding: 0; border: 0; background: none; flex: 0 0 auto; }
#huntui[data-step="detail"] #huntfoot .huntaction.primary { flex: 1 1 260px; }
#huntui[data-step="detail"] #huntfoot .huntaction.primary #huntgo { width: 100%; height: 40px; font-weight: 700; }
#huntui[data-step="detail"] #huntfoot #huntgohint, #huntui[data-step="detail"] #huntfoot #huntcreatehint { display: none !important; }
#huntui[data-step="detail"] #huntfoot #huntq, #huntui[data-step="detail"] #huntfoot #huntcreate { height: 32px; padding: 0 14px; }
#huntui[data-step="detail"] #huntfoot #huntqhint:empty, #huntui[data-step="detail"] #huntfoot #huntrecruiting:empty { display: none; }
#huntui[data-step="detail"] #huntfoot #huntqhint, #huntui[data-step="detail"] #huntfoot #huntrecruiting { font-size: calc(10px * var(--fontscale, 1)); margin: 0; }
#huntui[data-step="detail"] #huntfoot #huntrecruiting { display: none !important; }

/* ---------- PC: minimapa em cima à direita, grupo embaixo à direita (ADR 0175) ----------
   O mapa é consulta rápida e fica junto da barra de cima; o cartão do grupo cresce para cima a
   partir do canto de baixo, com altura máxima e rolagem própria, sem cobrir o minimapa. */
html body.hudtop:not(.freelayout) #viewwrap #mmpanel { top: 54px; bottom: auto; right: 8px; width: 150px; height: 150px; }
body.hudtop:not(.freelayout) #viewwrap > #partycard {
  top: auto; bottom: 8px; right: 8px; width: 260px;
  max-height: calc(100% - 54px - 150px - 24px); overflow-y: auto;
}
body.hudtop:not(.freelayout) #viewwrap > #partycard.min { bottom: 8px; top: auto; }

/* ---------- Glitches: só a forja (ADR 0178) ---------- */
#glitches .glxhead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
#glitches .glxhead .glxintro { margin: 0; }
#glitches .glxpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
#glitches .glxpick > span { color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); margin-right: 2px; }
#glitches .glxpick button { height: 28px; padding: 0 10px; cursor: pointer; color: var(--v4-tx); background: #10121a; border: 1px solid #2c3142; border-radius: 14px; }
#glitches .glxpick button.ok { border-color: #39ff1466; }
#glitches .glxpick button.on { color: #05060e; background: var(--v4-acc); border-color: var(--v4-acc); font-weight: 700; }
#glitches .glxcost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
#glitches .glxcost > span { color: var(--v4-dim); font-size: calc(11px * var(--fontscale, 1)); }
#glitches .glxlist { display: flex; flex-direction: column; gap: 6px; }
#glitches .glxcard .glxrow > button { flex: none; }

/* ---------- Seletor de caçada no PC (ADR 0177, revisão) ----------
   Uma janela centrada do tamanho do conteúdo, não a tela inteira. Catálogo: cards. Detalhe: à
   esquerda o que tem na caçada (criaturas em blocos, loot só em ícones — o nome está no hover), à
   direita a decisão (recorde, dificuldade, Iniciar, grupo). As condições de saída seguem na coluna
   do lado (#huntreview). Uma fonte só, a da HUD. O prefixo [data-layout="pc"] vence as camadas
   antigas do seletor, que usam !important. */
#huntplanner[data-layout="pc"] {
  inset: 8px 16px calc(var(--barh) + 10px) 16px !important;
  width: min(1180px, calc(100vw - 32px)) !important;
  height: min(510px, calc(100vh - var(--barh) - 24px)) !important;
  margin: auto !important;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 10px;
  font-family: var(--v4-font);
}
body.hudtop #huntplanner[data-layout="pc"] {
  inset: 54px 16px calc(var(--barh) + 10px) 16px !important;
  height: min(510px, calc(100vh - var(--barh) - 68px)) !important;
}
#huntplanner[data-layout="pc"] #huntmodal {
  padding: 14px 16px !important; gap: 10px;
  background: #090b12f5 !important; border: 1px solid #2c3142 !important; border-radius: 6px;
  box-shadow: 0 18px 48px #000c, inset 0 1px 0 #ffffff0a !important;
}
#huntplanner[data-layout="pc"] #huntmodal, #huntplanner[data-layout="pc"] #huntmodal * { font-family: var(--v4-font); letter-spacing: 0; }
#huntplanner[data-layout="pc"] #hunttitle { margin: 0; font-size: calc(15px * var(--fontscale, 1)); color: var(--v4-tx); text-transform: none; letter-spacing: .02em; }
#huntplanner[data-layout="pc"] #huntreview #partycard { border-radius: 6px; background: #090b12f5 !important; border: 1px solid #2c3142 !important; height: 100% !important; }
#huntplanner[data-layout="pc"] #huntui { gap: 10px !important; }
#huntplanner[data-layout="pc"] #hunttabs button { height: 30px; padding: 0 14px; font-size: calc(12px * var(--fontscale, 1)); border-radius: 4px; text-transform: none; letter-spacing: 0; }
#huntplanner[data-layout="pc"] #huntsearch { height: 34px; padding: 0 12px; font-size: calc(13px * var(--fontscale, 1)); border-radius: 4px; background: #0d1018; border: 1px solid #2c3142; }
#huntplanner[data-layout="pc"] #huntcount { font-size: calc(11px * var(--fontscale, 1)); color: var(--v4-dim); text-transform: none; letter-spacing: 0; }
#huntplanner[data-layout="pc"] #huntfoot { display: none !important; }

/* --- catálogo --- */
#huntplanner[data-layout="pc"] #huntui[data-step="list"] #huntpicks { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
#huntplanner[data-layout="pc"] #huntpicks .huntpick {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start;
  min-height: 104px; padding: 12px; text-align: left; cursor: pointer;
  background: #0f121b; border: 1px solid #262b3b; border-radius: 6px; box-shadow: none;
  transition: border-color .12s, background .12s, transform .12s;
}
#huntplanner[data-layout="pc"] #huntpicks .huntpick canvas { width: 48px; height: 48px; background: #070910; border: 1px solid #262b3b; border-radius: 4px; }
#huntplanner[data-layout="pc"] #huntpicks .huntpick > span { display: flex; flex-direction: column; gap: 3px; font-size: calc(11px * var(--fontscale, 1)); color: var(--v4-dim); }
#huntplanner[data-layout="pc"] #huntpicks .huntpick b { font-size: calc(14px * var(--fontscale, 1)); color: var(--v4-tx); }
#huntplanner[data-layout="pc"] #huntpicks .huntpick:hover:not([disabled]) { border-color: var(--v4-acc); background: #00e5ff12; transform: translateY(-1px); }
#huntplanner[data-layout="pc"] #huntpicks .huntpick.on { border-color: #00e5ff88; background: #00e5ff0d; box-shadow: none; }

/* --- detalhe: cabeçalho --- */
#huntplanner[data-layout="pc"] #huntui[data-step="detail"] #hunttabs,
#huntplanner[data-layout="pc"] #huntui[data-step="detail"] #huntsearch,
#huntplanner[data-layout="pc"] #huntui[data-step="detail"] #huntcount { display: none !important; }
#huntplanner[data-layout="pc"] #huntui[data-step="detail"] { grid-template-rows: minmax(0, 1fr) !important; }
#huntplanner[data-layout="pc"] #huntui[data-step="detail"] #huntbody { overflow: hidden !important; }
#huntplanner[data-layout="pc"] #huntstage { gap: 12px; }
#huntplanner[data-layout="pc"] .huntchosen {
  grid-template-columns: auto 56px minmax(0, 1fr); gap: 4px 12px; padding: 0 0 12px;
  background: none; border: 0; border-bottom: 1px solid #262b3b;
}
#huntplanner[data-layout="pc"] #huntback {
  align-self: center; height: 32px; padding: 0 12px; font-size: calc(12px * var(--fontscale, 1));
  color: var(--v4-acc); background: #0f121b; border: 1px solid #2c3142; border-radius: 4px; cursor: pointer;
}
#huntplanner[data-layout="pc"] #huntback:hover { border-color: var(--v4-acc); background: #00e5ff14; }
#huntplanner[data-layout="pc"] #hunttank { border: 1px solid #262b3b; border-radius: 4px; background: #070910; }
#huntplanner[data-layout="pc"] .huntchosen h4 { font-size: calc(18px * var(--fontscale, 1)); color: var(--v4-tx); display: flex; align-items: center; gap: 8px; }
#huntplanner[data-layout="pc"] .huntchosenmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#huntplanner[data-layout="pc"] .huntchosen .huntrec { font-size: calc(11px * var(--fontscale, 1)); }
#huntplanner[data-layout="pc"] .huntchosen .huntmob { display: none; }
#huntplanner[data-layout="pc"] .huntchosen .huntdesc { font-size: calc(12px * var(--fontscale, 1)); -webkit-line-clamp: 2; color: var(--v4-dim); }

/* --- detalhe: duas colunas --- */
#huntplanner[data-layout="pc"] .huntcols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 16px; }
#huntplanner[data-layout="pc"] .huntmaincol { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #00e5ff66 transparent; }
#huntplanner[data-layout="pc"] .huntsheets { flex: none; overflow: visible; }
#huntplanner[data-layout="pc"] #huntroster { overflow: visible !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
#huntplanner[data-layout="pc"] #huntroster h5,
#huntplanner[data-layout="pc"] #huntsetup #huntloot h4 {
  grid-column: 1 / -1; margin: 0 0 2px; font-size: calc(11px * var(--fontscale, 1)); font-weight: 700;
  color: var(--v4-dim); letter-spacing: .08em; text-transform: uppercase;
}
#huntplanner[data-layout="pc"] #huntroster .rosrow {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 0;
  padding: 6px 8px; margin: 0; cursor: pointer; background: #0f121b; border: 1px solid #262b3b; border-radius: 4px;
}
#huntplanner[data-layout="pc"] #huntroster .rosrow:hover { border-color: #00e5ff88; }
#huntplanner[data-layout="pc"] #huntroster .rosrow.on { border-color: var(--v4-acc); background: #00e5ff0d; }
#huntplanner[data-layout="pc"] #huntroster .rosrow.boss { border-left: 3px solid var(--v4-acc2); }
#huntplanner[data-layout="pc"] #huntroster .rosrow canvas { width: 36px; height: 36px; }
#huntplanner[data-layout="pc"] #huntroster .rnm { font-size: calc(12px * var(--fontscale, 1)); color: var(--v4-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#huntplanner[data-layout="pc"] #huntroster .rnm .tag { margin-left: 4px; padding: 0 4px; font-size: calc(9px * var(--fontscale, 1)); vertical-align: 1px; }
#huntplanner[data-layout="pc"] #huntroster .rchips { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#huntplanner[data-layout="pc"] #huntroster .rlv { font-size: calc(10px * var(--fontscale, 1)); color: var(--v4-dim); padding: 0; border: 0; background: none; }

/* loot: só ícones, raridade na moldura, nome e preço no hover; apagado = fica no chão */
#huntplanner[data-layout="pc"] #huntstage #huntsetup { flex: none; padding: 0 !important; border: 0; overflow: visible !important; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot { overflow: visible; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot h4 .lootskiphint { margin-left: 8px; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootlist { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start; gap: 6px; overflow: visible !important; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow {
  position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: #0f121b; border: 1px solid var(--rc, #2c3142); border-radius: 4px; box-shadow: inset 0 0 10px color-mix(in srgb, var(--rc, transparent) 25%, transparent);
}
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow:hover { background: #1a1f2c; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow canvas { width: 32px; height: 32px; pointer-events: none; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow .lootmeta { display: none; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow.off { opacity: .32; filter: grayscale(1); }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow.cr {
  width: auto; padding: 0 12px 0 6px; display: flex; gap: 8px; border-color: #ffd23f66; box-shadow: none;
}
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow.cr .lootmeta { display: flex; flex-direction: column; line-height: 1.2; font-size: calc(11px * var(--fontscale, 1)); }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow.cr .lootmeta em { font-style: normal; color: var(--v4-acc2); }

/* coluna da decisão */
#huntplanner[data-layout="pc"] .huntside { min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-left: 16px; border-left: 1px solid #262b3b; }
#huntplanner[data-layout="pc"] .huntside .huntbest {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; margin: 0; min-width: 0;
  background: #0f121b; border: 1px solid #262b3b; border-radius: 4px; font-size: calc(12px * var(--fontscale, 1));
}
#huntplanner[data-layout="pc"] .huntside .huntbest > span,
#huntplanner[data-layout="pc"] .huntside .huntdiff > span {
  color: var(--v4-dim); font-size: calc(10px * var(--fontscale, 1)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
#huntplanner[data-layout="pc"] .huntside .huntdiff { display: flex; flex-direction: column; align-items: stretch; gap: 4px; height: auto; }
#huntplanner[data-layout="pc"] .huntside .huntdiff > span { text-align: left; }
#huntplanner[data-layout="pc"] .huntside .huntdiff button { width: 100%; }
#huntplanner[data-layout="pc"] .huntside .huntdiff > span { margin-bottom: 2px; }
#huntplanner[data-layout="pc"] .huntside .huntdiff button {
  height: 34px; padding: 0 12px; text-align: left; font-size: calc(13px * var(--fontscale, 1)); cursor: pointer;
  color: var(--v4-tx); background: #0f121b; border: 1px solid #2c3142; border-radius: 4px;
}
#huntplanner[data-layout="pc"] .huntside .huntdiff button:hover { border-color: #00e5ff88; background: #00e5ff10; }
#huntplanner[data-layout="pc"] .huntside .huntdiff button.on { color: #041018; background: var(--v4-acc); border-color: var(--v4-acc); font-weight: 700; }
#huntplanner[data-layout="pc"] .huntside .huntactions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
#huntplanner[data-layout="pc"] .huntside .huntaction { display: block; padding: 0; margin: 0; border: 0; background: none; }
#huntplanner[data-layout="pc"] .huntside .huntaction[hidden] { display: none; }
#huntplanner[data-layout="pc"] .huntside .huntaction .hint { display: none; }
#huntplanner[data-layout="pc"] .huntside .huntaction #huntqhint:not(:empty),
#huntplanner[data-layout="pc"] .huntside .huntaction #huntrecruiting:not(:empty) { display: block; margin: 4px 0 0; font-size: calc(11px * var(--fontscale, 1)); color: var(--v4-dim); }
#huntplanner[data-layout="pc"] .huntside .huntaction button {
  width: 100%; height: 36px; font-size: calc(13px * var(--fontscale, 1)); cursor: pointer;
  color: var(--v4-tx); background: #0f121b; border: 1px solid #2c3142; border-radius: 4px; text-transform: none; letter-spacing: 0;
}
#huntplanner[data-layout="pc"] .huntside .huntaction button:hover:not([disabled]) { border-color: var(--v4-acc); background: #00e5ff14; }
#huntplanner[data-layout="pc"] .huntside .huntaction.primary { order: -1; }
#huntplanner[data-layout="pc"] .huntside .huntaction.primary #huntgo {
  height: 46px; font-size: calc(15px * var(--fontscale, 1)); font-weight: 700; letter-spacing: .04em;
  color: #041018; background: var(--v4-acc); border-color: var(--v4-acc); box-shadow: 0 0 18px #00e5ff40;
}
#huntplanner[data-layout="pc"] .huntside .huntaction.primary #huntgo:hover:not([disabled]) { background: #5ff1ff; box-shadow: 0 0 24px #00e5ff70; }
#huntplanner[data-layout="pc"] .huntside #huntstop { height: 34px; border-radius: 4px; }
/* Celular: os mesmos dois passos — no detalhe some o catálogo (abas, busca, cards); no catálogo,
   o rodapé de ações. Uma fonte só, a da HUD. */
#huntplanner[data-layout="compact"] #huntmodal, #huntplanner[data-layout="compact"] #huntmodal * { font-family: var(--v4-font); letter-spacing: 0; }
#huntplanner[data-layout="compact"] #huntui[data-step="detail"] #hunttabs,
#huntplanner[data-layout="compact"] #huntui[data-step="detail"] #huntsearch,
#huntplanner[data-layout="compact"] #huntui[data-step="detail"] #huntcount,
#huntplanner[data-layout="compact"] #huntui[data-step="detail"] #huntpicks,
#huntplanner[data-layout="compact"] #huntui[data-step="list"] #huntdetail,
#huntplanner[data-layout="compact"] #huntui[data-step="list"] #huntfoot { display: none !important; }
#huntplanner[data-layout="compact"] #huntui[data-step="list"] #huntbody,
#huntplanner[data-layout="compact"] #huntui[data-step="list"] #huntpicks { overflow-y: auto !important; }
#huntplanner[data-layout="compact"] #huntui[data-step="list"] #huntpicks { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; max-height: none !important; }
#huntplanner[data-layout="compact"] #huntui[data-step="list"] #huntpicks .huntpick { width: auto !important; min-width: 0 !important; }
#huntplanner:not([data-layout="pc"]) .lootskiphint { display: none; }
#huntplannav button { font-family: var(--v4-font); letter-spacing: 0; }
/* Alinhamento do detalhe no PC: sem a caixa antiga do #huntstage dentro da janela, o voltar como
   link acima do nome, loot numa grade de 44px, botões com o mesmo peso e sem texto solto entre eles. */
#huntplanner[data-layout="pc"] #huntstage { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
#huntplanner[data-layout="pc"] #huntui[data-step="detail"] ~ #hunttitle,
#huntplanner[data-layout="pc"] #huntmodal:has(#huntui[data-step="detail"]) #hunttitle { display: none; }
#huntplanner[data-layout="pc"] .huntchosen {
  grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "tank back" "tank main";
  align-items: start; gap: 2px 14px; padding: 0 28px 14px 0;
}
#huntplanner[data-layout="pc"] .huntchosen #huntback {
  grid-area: back; justify-self: start; height: auto; padding: 0; border: 0; background: none;
  font-size: calc(12px * var(--fontscale, 1)); font-weight: 600; color: var(--v4-acc);
}
#huntplanner[data-layout="pc"] .huntchosen #huntback:hover { background: none; text-decoration: underline; }
#huntplanner[data-layout="pc"] .huntchosen #hunttank { grid-area: tank; width: 64px; height: 64px; margin: 0; }
#huntplanner[data-layout="pc"] .huntchosen #hunttank canvas { width: 62px; height: 62px; }
#huntplanner[data-layout="pc"] .huntchosen .huntchosenmain { grid-area: main; }
#huntplanner[data-layout="pc"] .huntchosen h4 { margin: 0; line-height: 1.2; }
#huntplanner[data-layout="pc"] .huntcols { grid-template-columns: minmax(0, 1fr) 240px; gap: 0; }
#huntplanner[data-layout="pc"] .huntmaincol { padding: 0 20px 0 0; }
#huntplanner[data-layout="pc"] .huntside { padding-left: 20px; gap: 14px; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootlist {
  display: grid !important; grid-template-columns: repeat(auto-fill, 44px) !important; grid-auto-rows: 44px; gap: 6px !important;
}
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow { width: 44px; height: 44px; margin: 0; box-sizing: border-box; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow canvas { position: static; margin: 0 !important; transform: none; }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow.cr { grid-column: span 2; width: auto; justify-content: flex-start; padding: 0 8px; }
#huntplanner[data-layout="pc"] .huntside .huntdiff button,
#huntplanner[data-layout="pc"] .huntside .huntdiff button.on { font-weight: 600 !important; letter-spacing: 0 !important; text-align: left; }
#huntplanner[data-layout="pc"] .huntside .huntdiff button.on { font-weight: 700 !important; }
#huntplanner[data-layout="pc"] .huntside .huntactions { margin-top: 6px; }
#huntplanner[data-layout="pc"] .huntside .huntaction button {
  padding: 0 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-align: center; line-height: 1;
}
#huntplanner[data-layout="pc"] .huntside .huntaction.primary #huntgo { font-weight: 700 !important; letter-spacing: .02em !important; }
#huntplanner[data-layout="pc"] .huntside .huntaction #huntrecruiting:not(.on) { display: none !important; }
#huntplanner[data-layout="pc"] .huntside .huntaction #huntrecruiting.on { color: var(--v4-acc); }
#huntplanner[data-layout="pc"] #huntsetup #huntloot .lootrow:not(.cr) { display: flex !important; align-items: center; justify-content: center; grid-template-columns: none !important; }
/* Dica do B-BOP001 no PC: balão preso ao botão Guia da barra de cima (placeCoach), acima das
   janelas (deckZ começa em 9500) e abaixo do menu de contexto e do tooltip; não pega clique. */
body.hudtop > #coach {
  position: fixed; right: auto; bottom: auto; transform: none; z-index: 9950; pointer-events: none;
  width: 320px; padding: 8px 12px; box-sizing: border-box; overflow: visible; clip-path: none;
  color: var(--v4-tx); background: #0b0e16f2; border: 1px solid var(--v4-acc); border-radius: 6px;
  box-shadow: 0 8px 24px #000a, 0 0 12px #00e5ff30; font-family: var(--v4-font); font-size: calc(12px * var(--fontscale, 1));
}
body.hudtop > #coach::before {
  display: block; content: ''; position: absolute; top: -6px; left: calc(var(--coachx, 290px) - 6px); right: auto; width: 10px; height: 10px;
  background: #0b0e16; border-left: 1px solid var(--v4-acc); border-top: 1px solid var(--v4-acc); transform: rotate(45deg);
}
body.hudtop > #coach #coachface { width: 24px; height: 24px; background: none; border: 0; }
body.touchui.hudtop > #coach.on { pointer-events: auto; }

/* Card de equipamento: veredito + uma tabela (atributo · esta peça · diferença para a vestida). */
#tooltip .gearverdict { margin: 6px 0 4px; padding: 5px 8px; font-size: calc(12px * var(--fontscale, 1)); font-weight: 700; border-radius: 3px; border: 1px solid; }
#tooltip .gearverdict.good { color: #2fe58a; border-color: #2fe58a55; background: #2fe58a14; }
#tooltip .gearverdict.bad { color: var(--hp); border-color: #ff3b5c55; background: #ff3b5c14; }
#tooltip .gearverdict.mixed { color: #ffd23e; border-color: #ffd23e55; background: #ffd23e12; }
#tooltip .gearverdict.dim { color: var(--dim); border-color: #ffffff1a; background: none; font-weight: 400; }
#tooltip .geartable { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; font-size: calc(12px * var(--fontscale, 1)); }
#tooltip .geartable.cmp { grid-template-columns: minmax(0, 1fr) auto 64px; }
#tooltip .geartable .gh { font-size: calc(9.5px * var(--fontscale, 1)); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; text-align: right; padding-bottom: 2px; border-bottom: 1px solid #ffffff14; }
#tooltip .geartable .gh:first-child { text-align: left; }
#tooltip .geartable .gl { color: var(--dim); }
#tooltip .geartable .gv { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
#tooltip .geartable .gv.neg { color: var(--hp); }
#tooltip .geartable .gv.none { color: var(--dim); }
#tooltip .geartable .gd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#tooltip .geartable .gd.up { color: #2fe58a; }
#tooltip .geartable .gd.down { color: var(--hp); }
#tooltip .gearfx { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--border); font-size: calc(11px * var(--fontscale, 1)); color: var(--text); }
#tooltip .gearfx > div + div { margin-top: 2px; }
#tooltip .geartable .same { opacity: .55; }
#tooltip { font-family: var(--v4-font); }
#tooltip .gearhead .tipkind { white-space: normal; }
/* Selo oficial de voto do TopIdle em destaque: login, lobby e a barra de cima do PC. */
.topidlevote { display: inline-flex; flex: none; line-height: 0; border-radius: 6px; transition: transform .12s, filter .12s; }
.topidlevote img { display: block; max-width: 100%; height: auto; }
.topidlevote:hover { transform: translateY(-1px); filter: brightness(1.1) drop-shadow(0 0 8px #ffd23f66); }
.topidlevote:focus-visible { outline: 2px solid var(--v4-acc, #00e5ff); outline-offset: 2px; }
#login .gatepanel > .topidlevote { align-self: center; margin: 12px auto 0; }
#lobby > .topidlevote { margin: 14px auto 0; }
#topbar #tbvote { display: none; }
body.hudtop #topbar #tbvote { display: inline-flex; align-self: center; }
body.hudtop #topbar #tbvote img { width: auto; height: 34px; }
@media (max-width: 1240px) { body.hudtop #topbar #tbvote { display: none; } }
/* ---------- Barra de chefe (HUD) ----------
   Topo central da tela, abaixo da barra superior do PC. Chefe em magenta, elite em âmbar; vida com
   rastro do dano; fases à direita; entrada e troca de fase com o nome grande abaixo da barra. */
#bossbar {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 7; pointer-events: none;
  width: min(520px, calc(100% - 32px)); box-sizing: border-box; padding: 8px 12px 10px;
  font-family: var(--v4-font); color: var(--v4-tx);
  background: linear-gradient(180deg, #0d0f17f0, #07080df0); border: 1px solid var(--bbc, #ff2d95);
  border-radius: 6px; box-shadow: 0 8px 24px #000a, 0 0 18px color-mix(in srgb, var(--bbc, #ff2d95) 35%, transparent);
  --bbc: #ff2d95;
}
#bossbar[hidden] { display: none; }
#bossbar.elite { --bbc: #ffb23f; }
body.hudtop #bossbar { top: 56px; }
#bossbar .bbtop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; white-space: nowrap; }
#bossbar .bbtag { font-style: normal; font-size: calc(10px * var(--fontscale, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #05060e; background: var(--bbc); padding: 2px 6px; border-radius: 3px; }
#bossbar .bbname { font-size: calc(15px * var(--fontscale, 1)); color: var(--bbc); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#bossbar .bblv { font-size: calc(11px * var(--fontscale, 1)); color: var(--v4-dim); }
#bossbar .bbphase { margin-left: auto; font-size: calc(11px * var(--fontscale, 1)); font-weight: 700; color: var(--v4-tx); }
#bossbar .bbtrack { position: relative; height: 14px; background: #1a0d18; border: 1px solid #00000099; border-radius: 3px; overflow: hidden; }
#bossbar .bbfill, #bossbar .bbghost { position: absolute; left: 0; top: 0; bottom: 0; }
#bossbar .bbghost { background: #fff3; }
#bossbar .bbfill { background: linear-gradient(180deg, color-mix(in srgb, var(--bbc) 85%, #fff), var(--bbc)); transition: width .12s linear; }
#bossbar.low .bbfill { background: linear-gradient(180deg, #ff6b7d, #d9304b); }
#bossbar .bbhp { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(10px * var(--fontscale, 1)); font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
#bossbar.enraged { animation: bbpulse 1.4s ease-in-out infinite; }
@keyframes bbpulse { 50% { box-shadow: 0 8px 24px #000a, 0 0 28px color-mix(in srgb, var(--bbc) 70%, transparent); } }
#bossbar .bbintro { position: absolute; left: 0; right: 0; top: calc(100% + 18px); display: none; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
#bossbar .bbintro i { font-style: normal; font-size: calc(11px * var(--fontscale, 1)); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--v4-tx); text-shadow: 0 2px 6px #000; }
#bossbar .bbintro b { font-size: calc(28px * var(--fontscale, 1)); line-height: 1.1; color: var(--bbc); text-shadow: 0 0 18px color-mix(in srgb, var(--bbc) 70%, transparent), 0 3px 8px #000; }
#bossbar.intro .bbintro, #bossbar.phaseup .bbintro { display: flex; animation: bbintro 2.2s ease-out both; }
#bossbar.phaseup .bbtrack { animation: bbflash .5s ease-out; }
@keyframes bbintro { 0% { opacity: 0; transform: scale(1.25); } 12% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bbflash { 0% { filter: brightness(3); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { #bossbar, #bossbar .bbintro, #bossbar .bbtrack { animation: none !important; } }
/* seletor: figurão é Elite (âmbar), chefe segue magenta */
#huntroster .rnm .tag.elite { color: #ffb23f; border-color: #ffb23f; }
#huntplanner[data-layout="pc"] #huntroster .rosrow.elite { border-left: 3px solid #ffb23f; }
/* Discord e Convidar ao lado do selo do TopIdle (barra de cima do PC); no login e no lobby o
   Discord e o selo ficam lado a lado. */
#topbar .tbpill { display: none; }
body.hudtop #topbar .tbpill {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 11px; box-sizing: border-box;
  font-family: var(--v4-font); font-size: calc(12px * var(--fontscale, 1)); font-weight: 700; color: #fff; text-decoration: none;
  border-radius: 15px; border: 1px solid; cursor: pointer; transition: filter .12s, transform .12s;
}
body.hudtop #topbar .tbpill:hover { filter: brightness(1.15); transform: translateY(-1px); }
body.hudtop #topbar .tbpill:focus-visible { outline: 2px solid var(--v4-acc); outline-offset: 2px; }
body.hudtop #topbar .tbpill img, body.hudtop #topbar .tbpill svg { width: 16px; height: 16px; flex: none; }
body.hudtop #topbar .tbpill.discord { background: #5865f2; border-color: #7983f5; }
body.hudtop #topbar .tbpill.discord img { filter: brightness(0) invert(1); }
body.hudtop #topbar .tbpill.invite { color: #05060e; background: #2fe58a; border-color: #6ff0ae; }
body.hudtop #topbar .tbpill.invite svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.hudtop #topbar .tbpill.invite.ok { background: #fff; border-color: #fff; }
@media (max-width: 1400px) { body.hudtop #topbar .tbpill span { display: none; } body.hudtop #topbar .tbpill { width: 30px; padding: 0; justify-content: center; } }
@media (max-width: 1240px) { body.hudtop #topbar .tbpill { display: none; } }
.gatelinks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.gatelinks .discord-join, .gatelinks .topidlevote { margin: 0 !important; }
#lobby > .gatelinks { margin-top: 14px; }
.gatelinks { flex-wrap: nowrap; }
.gatelinks .topidlevote img { width: auto; height: 40px; }
.gatelinks .discord-join { height: 40px; box-sizing: border-box; white-space: nowrap; }
@media (max-width: 480px) { .gatelinks { flex-wrap: wrap; } }

/* ---------- Menu no PC (barra superior) ----------
   Um painel centrado abaixo da barra de cima, não um "celular" por cima dela: só título, busca e
   fechar; grupos em grade cheia; sem relógio, dinheiro (já estão na barra) nem a navegação. */
body.hudtop #phone {
  position: fixed !important; top: 56px !important; left: 50% !important; right: auto !important; bottom: auto !important;
  transform: translateX(-50%) !important; width: min(780px, calc(100vw - 32px)) !important;
  height: auto !important; max-height: calc(100vh - 56px - var(--barh) - 16px) !important;
  border: 1px solid #2c3142 !important; border-radius: 8px; box-shadow: 0 18px 48px #000c !important; overflow: hidden;
}
body.hudtop #phone #phonebody { display: flex; flex-direction: column; height: auto; max-height: inherit; }
body.hudtop #phone #phonebar { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 0; height: auto; background: none; border: 0; }
body.hudtop #phone #phonebar > :not(#phoneclose) { display: none; }
body.hudtop #phone #phoneclose { position: static; width: 32px; height: 32px; display: grid; place-items: center; font-size: 18px; color: var(--v4-tx); background: #0f121b; border: 1px solid #2c3142; border-radius: 4px; cursor: pointer; }
body.hudtop #phone #phoneclose:hover { border-color: var(--hp); color: var(--hp); }
body.hudtop #phone #phonenav { display: none; }
body.hudtop #phone #phonescreen { flex: 1 1 auto; min-height: 0; overflow: hidden; }
body.hudtop #phone #apphome { display: flex; flex-direction: column; height: auto; max-height: inherit; }
body.hudtop #phone #homebar { padding: 14px 56px 12px 18px; gap: 14px; border-bottom: 1px solid #262b3b; }
body.hudtop #phone #hometitle { font-family: var(--v4-font); font-size: calc(17px * var(--fontscale, 1)); }
body.hudtop #phone #appsearchwrap { flex: 1; max-width: none; }
body.hudtop #phone #homebody { overflow-y: auto; padding: 14px 18px 18px; max-height: calc(100vh - 56px - var(--barh) - 90px); }
body.hudtop #phone #appgrid { gap: 18px; }
body.hudtop #phone #appgrid .appgrouplbl { font-family: var(--v4-font); font-weight: 700; }
body.hudtop #phone #appgrid .appgroupgrid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
body.hudtop #phone #appgrid .appicon {
  min-height: 78px; padding: 10px 6px; gap: 8px; border-radius: 6px;
  background: #0f121b; border: 1px solid #262b3b; font-family: var(--v4-font);
}
body.hudtop #phone #appgrid .appicon:hover { background: #00e5ff10; border-color: var(--v4-acc); transform: translateY(-1px); }
body.hudtop #phone #appgrid .appicon .glyph svg { width: 24px; height: 24px; }
body.hudtop #phone #appgrid .appicon .lbl { font-size: calc(12.5px * var(--fontscale, 1)); }

/* ---------- Opções: janela de configurações (fora do celular) ----------
   Seções à esquerda, conteúdo à direita; botões no visual da HUD, não o branco do sistema. */
#escbody.split { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; min-height: 380px; font-family: var(--v4-font); color: var(--v4-tx); }
#escbody.split, #escbody.split * { letter-spacing: 0; }
#escbody.split #escmain { display: flex !important; flex-direction: column; gap: 4px; padding-right: 16px; border-right: 1px solid #262b3b; }
#escbody.split .escbtn {
  display: flex; align-items: center; width: 100%; height: 38px; margin: 0; padding: 0 12px; box-sizing: border-box;
  font-family: var(--v4-font); font-size: calc(13px * var(--fontscale, 1)); font-weight: 600; text-align: left; text-transform: none;
  color: var(--v4-tx); background: #0f121b; border: 1px solid #262b3b; border-radius: 4px; cursor: pointer; box-shadow: none;
}
#escbody.split .escbtn:hover { border-color: #00e5ff88; background: #00e5ff10; }
#escbody.split .escbtn.on { color: var(--v4-acc); border-color: var(--v4-acc); background: #00e5ff14; }
#escbody.split #btn_escresume { color: #05060e; background: var(--v4-acc); border-color: var(--v4-acc); margin-bottom: 8px; }
body.optsindeck #escbody.split #btn_escresume { display: none; }
#escbody.split #btn_tolobby { margin-top: auto; }
#escbody.split .escbtn.danger { color: var(--hp); border-color: #ff3b5c66; }
#escbody.split .escbtn.danger:hover { background: #ff3b5c14; border-color: var(--hp); }
#escbody.split #escmain .hint { margin: 2px 2px 0; }
#escbody.split .escback { display: none !important; }
#escbody.split .escsec { min-width: 0; }
#escbody.split .escsec h4 { margin: 0 0 12px; font-size: calc(17px * var(--fontscale, 1)); color: var(--v4-tx); text-transform: none; }
#escbody.split .optrow { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 6px 0; border-bottom: 1px solid #ffffff0d; }
#escbody.split .optrow > span:first-child { flex: 0 0 190px; color: var(--v4-tx); }
#escbody.split .optrow input[type=range] { flex: 1; accent-color: var(--v4-acc); }
#escbody.split .optrow b { min-width: 46px; text-align: center; font-family: var(--v4-mono); color: var(--v4-acc); }
#escbody.split .stepbtn, #escbody.split .sidebtn {
  height: 30px; min-width: 30px; padding: 0 10px; font-family: var(--v4-font); color: var(--v4-tx);
  background: #0f121b; border: 1px solid #2c3142; border-radius: 4px; cursor: pointer;
}
#escbody.split .stepbtn:hover, #escbody.split .sidebtn:hover { border-color: var(--v4-acc); }
#escbody.split .sidebtn.on { color: #05060e; background: var(--v4-acc); border-color: var(--v4-acc); }
#escbody.split .optcheck { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 0; border-bottom: 1px solid #ffffff0d; cursor: pointer; }
#escbody.split .optcheck input { width: 18px; height: 18px; accent-color: var(--v4-acc); }
#escmenu:has(#escbody.split) { width: min(760px, calc(100vw - 32px)); max-width: none; padding: 16px; border: 1px solid #2c3142; border-radius: 8px; background: #090b12f5; }
body.hudtop #phone #deckfeed { display: none; }   /* nome, nível e dinheiro já estão na barra de cima */
/* só o conteúdo rola; a coluna de seções fica parada (Sair/Seleção de personagem sempre à vista) */
#escbody.split { height: min(520px, calc(100vh - 230px)); min-height: 0; }
#escbody.split .escsec.on { overflow-y: auto; min-height: 0; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #00e5ff66 transparent; }
#escbody.split #escmain { min-height: 0; overflow-y: auto; }
#escbody.split .escsec button:not(.stepbtn):not(.sidebtn):not(.escbtn) {
  min-height: 30px; padding: 0 12px; font-family: var(--v4-font); font-size: calc(12px * var(--fontscale, 1)); color: var(--v4-tx);
  background: #0f121b; border: 1px solid #2c3142; border-radius: 4px; cursor: pointer; box-shadow: none;
}
#escbody.split .escsec button:not(.stepbtn):not(.sidebtn):not(.escbtn):hover { border-color: var(--v4-acc); background: #00e5ff10; }
#escbody.split .escsec button.on:not(.stepbtn):not(.escbtn) { color: #05060e; background: var(--v4-acc); border-color: var(--v4-acc); }
#escmenu:has(#escbody.split) > h3 { margin: 0 0 14px; font-family: var(--v4-font); font-size: calc(17px * var(--fontscale, 1)); color: var(--v4-tx); text-transform: none; letter-spacing: 0; }
/* Subida da Torre (ADR 0183): mesmo molde do balcão do Gauntlet. */
#towermodal {
  position: fixed; z-index: 30; right: 24px; top: 24px; width: min(310px, calc(100vw - 16px)); max-height: calc(var(--vh) - 48px);
  overflow: auto; padding: 14px; color: var(--text); background: rgba(12,15,25,.96);
  border: 1px solid #6f4d35; box-shadow: 0 0 20px rgba(255,143,54,.18); font-size: 12px;
}
#towermodal h3 { color: #ffb15c; margin-bottom: 8px; }
#towermodal button { display: block; width: 100%; margin-top: 8px; text-align: left; }
#towermodal button.primary { border-color: #ffb15c; color: #ffd6a0; }