* { 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: #131829; --panel2: #1a1d26; --border: #2A3247;
  --text: #c9cdd6; --dim: #6b7280; --neon: #FF2EC8; --cyan: #00E5FF;
  --hp: #FF3B4E; --en: #00E5FF; --sh: #F2EDE0; --xp: #FF2EC8;
  --dockw: 348px;   /* full-height right sidebar width — fitViewport reads the same value */
  --barh: 174px;    /* bottom strip height under the view */
  --vh: 100vh;      /* 100dvh when the browser knows it — mobile chrome stops eating the HUD */
}
@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;
}
body:has(#app.on).deckleft #app { flex-direction: row-reverse; }

#left {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: flex-start;
  padding: 4px 6px 0; overflow: hidden;
  position: relative;
}
/* Toma tudo que sobra acima da faixa. O canvas é medido contra este box — leftover de
   tile-inteiro deixa de ser faixa preta e vira mais mundo. */
#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,.10),
    0 0 18px rgba(0,229,255,.13),
    0 0 46px rgba(255,46,200,.07);
}
#viewwrap #viewport,
#viewwrap #glass {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
}
/* 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 { 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; }
#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; }

/* Meter da caçada: terminal HUNT.OS no canto da view, some com o idle.
   Ciano dos menus sobre painel azul — não é janela do layout livre. */
#huntrun {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  width: 228px; max-width: min(228px, 44%);
  pointer-events: none;
  padding: 7px 9px 6px;
  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;
}
#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);
}
#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(--cyan); letter-spacing: 2px; }
@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); }
#huntrun .hrhead { margin-bottom: 4px; }
#huntrun .hrhead b { font-size: calc(16px * var(--fontscale, 1)); color: var(--cyan); text-shadow: 0 0 9px rgba(0, 229, 255, .45); }
/* 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. Without it the row is as tall as its tallest child, and the chat
   log — which never stops growing — dragged the whole layout down instead of scrolling. 174px is
   what the minimap panel needs (header + its 140px canvas + padding); everything else stretches
   to match and scrolls inside. */
/* 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. */
/* Vitals and minimap are CENTRED, which in flexbox means the two ends have to be the same
   size — hence the identical `flex: 1 1 0` on the hotbar and the hunt. Give either end a bigger
   basis and the middle drifts off centre. */
#bottom {
  display: flex; gap: 6px; align-items: stretch;
  height: var(--barh); flex: none; min-width: 0;
}
/* 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 #mmpanel,
body.freelayout #hunt, body.freelayout #hotbar, body.freelayout #phonetab {
  /* 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) */
}
/* 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; }
/* Hunt visibility 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; }
#hotbar { border: 2px solid var(--border); background: var(--panel); }

/* Floating chat window above the bottom bar. Closed until the flip in the hunt bar opens it. */
#chatbox {
  position: absolute;
  width: 380px; height: 210px;
  min-width: 240px; min-height: 120px;
  max-width: calc(100% - 24px); max-height: calc(var(--vh) - var(--barh) - 40px);
  z-index: 5;
  background: rgba(19, 24, 41, 0.88);
  border: 2px solid var(--border);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  display: none; flex-direction: column;
  overflow: hidden;
  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);
}
#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. */
#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; }
#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%);
}

/* Chat tabs are a FILTER over one log, not four buffers: switching sets a class on #chatlog and
   CSS hides the rest. Nothing re-renders, no line is stored twice, scrollback stays shared. */
#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;
}
#chattabs { display: flex; flex: 1; gap: 2px; padding: 2px 2px 0; min-width: 0; }
.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 { font-size: calc(10px * var(--fontscale, 1)); text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px;
  color: var(--dim); cursor: pointer; user-select: none; }
.ctab.on { color: var(--text); background: var(--panel); box-shadow: inset 0 -2px 0 var(--cyan); }
.ctab.new { color: var(--cyan); }
.ctab.new::after { content: ' •'; }
/* `div` pra o ::before spacer não ser escondido pelo filtro (ele não tem classe de canal). */
#chatlog.f-talk > div:not(.say):not(.chat):not(.whisper):not(.gang):not(.party),
#chatlog.f-game > div:not(.xp):not(.loot):not(.quest):not(.levelup):not(.death),
#chatlog.f-sys > div:not(.sys) { display: none; }

/* hunt: launch + flip phone side by side; the picker is a modal. */
#hunt { padding: 0; flex-direction: row; align-items: stretch; gap: 0; }
#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, .04); }
#huntlaunch.on { color: var(--cyan); }
#huntlaunch .hunticon { width: 36px; height: 36px; display: block; }
#huntlaunch .huntname {
  font-size: calc(16px * var(--fontscale, 1)); font-weight: bold;
  color: var(--text); letter-spacing: 3px;
}
#huntlaunch.on .huntname { color: var(--cyan); }
#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 #huntlaunch {
  flex: 0 0 auto; gap: 3px; padding: 6px 4px 4px;
}
#hunt.steering #huntlaunch .hunticon { width: 22px; height: 22px; }
#hunt.steering #huntlaunch .huntname {
  font-size: calc(12px * var(--fontscale, 1)); letter-spacing: 2px;
}
#huntsteer {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 0; flex: 1; overflow: auto;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--border);
}
#huntsteer[hidden] { display: none !important; }
#huntsteer > .hint {
  margin: 0; color: var(--dim);
  font-size: calc(10px * var(--fontscale, 1)); line-height: 1.3;
}
#huntsell {
  align-self: stretch; margin-top: 4px; padding: 6px 8px;
  background: linear-gradient(180deg, #1a3040, #101820);
  border: 1px solid var(--cyan); color: var(--cyan); font-weight: bold;
}
#huntsell:hover:not(:disabled) { box-shadow: 0 0 10px rgba(0,229,255,.25); }
#huntsell:disabled { opacity: .45; border-color: var(--border); color: var(--dim); }
/* 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, #161b28 0%, #0b0e14 100%);
  border: 0; border-left: 1px solid var(--border);
  cursor: pointer; color: inherit;
  overflow: hidden;
}
#chatflip:hover { background: linear-gradient(180deg, #1c2230 0%, #10141c 100%); }
#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: rgba(0,229,255,.35); }
#huntmodal {
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 920px; height: 540px;
  max-width: 96vw; max-height: 78vh;
  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, #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); }
#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(220px, 1.05fr) minmax(240px, 1.2fr) minmax(200px, 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: .48; filter: grayscale(1);
}
#huntpicks .huntpick.soon.on {
  opacity: .72; filter: grayscale(.55);
}
#huntpicks .huntpick i.tag, #huntstage h4 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); }
#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: 180px; height: 148px; 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: 180px; height: 148px; 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; }
#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: var(--panel2); color: var(--dim); border: 1px solid var(--border);
  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); }
.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; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
#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: var(--cyan); }
#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; }
}

/* 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; }
.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 */
}
#minimap { width: 196px; height: 140px; image-rendering: pixelated; background: #050508; display: block; }

.bar { position: relative; height: 14px; background: #0e0f16; border: 1px solid var(--border); margin: 2px 0; }
/* 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;
}
/* background-COLOR, not the shorthand — the shorthand would wipe the .bar>div tick gradient */
#hpbar > div { background-color: var(--hp); } #enbar > div { background-color: var(--en); }
#shbar > div { background-color: var(--sh); } #xpbar > div { background-color: var(--xp); }
/* 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 { display: flex; justify-content: space-between; font-size: calc(11px * var(--fontscale, 1)); color: var(--dim); margin-top: 3px; }
.stico { position: relative; width: 14px; height: 14px; 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); }

/* Medidor de radiação — verde de dosímetro. Três estados, porque a barra tem três: cinza-esverdeado
   dentro da carência (não custa nada ainda), âmbar quando a penalidade começou a morder, e vermelho
   pulsando no saturado. Pulsar só no topo: aviso que pisca o tempo todo deixa de ser aviso. */
#radbar > div { background-color: #4E7C4A; }
#radbar.warn > div { background-color: #C8A02E; }
#radbar.max > div { background-color: #E23A2E; animation: radpulse 1.6s ease-in-out infinite; }
@keyframes radpulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }

/* 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)); }
.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 .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 */
#gauntletmodal {
  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;
}
#gauntletmodal h3 { color: #ffb15c; margin-bottom: 8px; }
#gauntletmodal button { display: block; width: 100%; margin-top: 8px; text-align: left; }
#gauntletmodal button.safe { border-color: #2fe58a; }
#gauntletmodal button.danger { border-color: #d9304b; color: #ff8495; }
#gauntletmodal button.primary { border-color: #ffb15c; color: #ffd6a0; }
.gauntlet-desc, .gauntlet-question { color: #c9cdd6; line-height: 1.35; margin-bottom: 8px; }
.gauntlet-muted { color: #8a93a6; margin: 5px 0; }
.gauntlet-room { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #2a3247; }
.gauntlet-room span { color: #8a93a6; text-align: right; }
.gauntlet-head { color: #ffd6a0; margin-bottom: 7px; }
.gauntlet-choice { color: #ffb15c; margin-top: 12px; }
.gauntlet-result { color: #2fe58a; font-size: 14px; }
.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: 24px; padding: 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); }
/* auto-fill, not a fixed four: the grid deals itself as many columns as the window it lives in
   can hold — three in a narrow dock, more in a popped-out window */
#invgrid { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 3px; justify-content: center; }
.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 */
.slot .qty { position: absolute; right: 2px; bottom: 1px; font-size: calc(10px * var(--fontscale, 1)); color: #fff; text-shadow: 1px 1px 0 #000; }
.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; }

/* intro coach: one line above the action bar, gone when the step is done. Not a modal. */
#coach {
  display: none; text-align: center; pointer-events: none;
  padding: 6px 10px; margin: 0 0 4px;
  background: var(--panel); border: 2px solid var(--neon); 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);
}
#coach.on { display: block; }

/* 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(--panel); border: 2px solid var(--border);
  overflow: hidden;
  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);
}
.hb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 2px; flex: none; border-bottom: 1px solid rgba(42, 50, 71, 0.6);
}
.hb-title {
  font-size: calc(10px * var(--fontscale, 1)); font-weight: bold;
  color: var(--dim); letter-spacing: 1.5px; text-transform: uppercase;
}

.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;
}
.hot:hover { border-color: var(--cyan); }
.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); }
/* 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); }
#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; }
/* Depot chest: same golden-box language as the loot container, parked mid-left so it does not
   cover the hotbar or the chest tile you are standing next to. */
#chestmodal {
  left: 60px; top: 80px;
  min-width: 240px; max-width: 300px; max-height: min(60vh, 480px);
  border-color: #c9a227;
  z-index: 12;
}
#chestmodal h3 { color: #ffd23e; font-size: calc(12px * var(--fontscale, 1)); padding-right: 18px; }
#chestfilter { display: flex; gap: 6px; margin: 5px 0 7px; }
#chestsearch, #chesttype {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  font: inherit; font-size: calc(11px * var(--fontscale, 1)); padding: 3px 6px;
}
#chestsearch { flex: 1 1 0; min-width: 0; }   /* the select keeps its own width; the box takes the rest */
#chesttype { color: var(--cyan); }
#chestsearch:focus, #chesttype:focus { outline: none; border-color: var(--cyan); }
#chestmodal .row { padding: 2px 0; cursor: pointer; }
#chestmodal .row canvas { width: 24px; height: 24px; }

/* 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); }

/* 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;
}
@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: auto;
}
#pixieid { min-width: 0; flex: 1; }
#pixietitle {
  color: var(--cyan); letter-spacing: 1.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 .lv { color: var(--dim); flex: none; }
#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 */
#login, #lobby, #charnew, #loading {
  position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, #1a1030, #050508 70%);
  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);
}
/* 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-size: calc(44px * var(--fontscale, 1)); color: var(--neon); letter-spacing: 6px;
  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: 240px; height: 4px; 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); }
/* ---------- criação de personagem: bancada em duas colunas ---------- */
/* Identidade à esquerda (preview girando, nome, sexo, criar), escolhas à direita (classe →
   aparência). A tela inteira rola (overflow-y) em vez de espremer: é o que segura qualquer
   altura de janela; a coluna da esquerda fica sticky pra CRIAR nunca sair de vista. */
#charnew {
  justify-content: flex-start; padding: 26px 18px 28px; gap: 10px; overflow-y: auto;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 16%, rgba(0, 229, 255, .09), transparent 28%),
    radial-gradient(circle at 22% 7%, rgba(255, 46, 200, .14), transparent 32%),
    linear-gradient(145deg, #080812 0%, #100b1d 52%, #050508 100%);
}
#charnew h1 {
  font-size: calc(30px * var(--fontscale, 1)); letter-spacing: 5px;
  text-shadow: 0 0 12px rgba(255, 46, 200, .9), 0 0 34px rgba(255, 46, 200, .28);
}
#cnhead { position: relative; z-index: 1; text-align: center; flex: none; }
#cnhead::after {
  content: ''; display: block; width: 190px; height: 1px; margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--neon), var(--cyan), transparent);
  box-shadow: 0 0 12px rgba(0, 229, 255, .45);
}
#cnclass, #cnlook {
  position: relative; z-index: 1; margin-top: 8px;
}
#charnew.cnclass #cnlook, #charnew.cnlook #cnclass { display: none; }
#cnclass { width: min(1100px, 96vw); }
#cnlook {
  display: grid; grid-template-columns: 294px minmax(0, 1fr); gap: 20px;
  width: min(1340px, 96vw); align-items: start;
}
#cnhead .sexpick { justify-content: center; max-width: 280px; margin: 14px auto 0; }
#cnid { display: flex; gap: 6px; align-items: stretch; }
#cnid #c_name { flex: 1; min-width: 0; }
#charnew.cnlook {
  padding: 10px 14px 14px; gap: 4px;
}
#charnew.cnlook h1 {
  font-size: calc(18px * var(--fontscale, 1)); letter-spacing: 3px;
}
#charnew.cnlook .sub { display: none; }
#charnew.cnlook #cnhead::after { display: none; }
#charnew.cnlook #cnhead .sexpick { margin: 6px auto 0; max-width: 220px; }
#charnew.cnlook .sexpick button { padding: 4px 8px; }
#charnew.cnlook #cnlook {
  grid-template-columns: 220px minmax(0, 1fr); gap: 12px;
  width: min(1080px, 96vw); margin-top: 4px; align-items: stretch;
}
#charnew.cnlook #cnleft { gap: 8px; padding: 10px; }
#charnew.cnlook #cnprev { height: 318px; padding: 10px 10px 8px; }
#charnew.cnlook #cnprev canvas { width: 72px; height: 72px; margin: 6px 0 0; }
#charnew.cnlook #c_name { width: auto; flex: 1; min-width: 0; padding: 7px 8px; font-size: calc(13px * var(--fontscale, 1)); }
#charnew.cnlook #btn_lookrand { flex: 0 0 auto; padding: 7px 10px; }
#charnew.cnlook .cnsec { display: none; }
#charnew.cnlook .lookpick { margin: 0; padding: 10px 12px; }
#charnew.cnlook .swaxes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; min-width: 0;
}
#charnew.cnlook .pickrow { padding: 3px 6px; }
#charnew.cnlook .pickrow:has(#eyepick),
#charnew.cnlook #chanpick,
#charnew.cnlook .palette { grid-column: 1 / -1; }
#charnew.cnlook .lookstep { gap: 6px; }
#charnew.cnlook .lookstep button { flex: 0 0 28px; width: 28px; height: 28px; font-size: 16px; }
#charnew.cnlook .lookstep b { min-width: 58px; }
#charnew.cnlook .eyepick { margin: 0; padding: 2px 0; }
#charnew.cnlook .chanpick { margin: 2px 0 0; gap: 4px; }
#charnew.cnlook .chanpick .chan { padding: 5px 2px; }
#charnew.cnlook .palette {
  grid-template-columns: repeat(19, minmax(0, 1fr));
  width: 100%;
}
#cnleft {
  position: sticky; top: 4px;
  display: flex; flex-direction: column; gap: 11px;
  background: linear-gradient(180deg, rgba(24, 25, 39, .97), rgba(9, 10, 17, .98));
  border: 1px solid #35405a; border-radius: 14px; padding: 14px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .035);
}
#cnleft::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 12px rgba(0, 229, 255, .42);
}
/* vitrine: foto 1:2 com margem igual; o canvas LPC é a miniatura da aparência, embaixo */
#cnprev {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  height: 318px; padding: 10px 10px 8px; border-radius: 10px; overflow: hidden;
  border: 1px solid #34405a;
  background: #090a12;
}
#cnprev::before { display: none; }
#cnprevart {
  position: relative; z-index: 0; inset: auto;
  width: auto; height: 220px; aspect-ratio: 1 / 2;
  object-fit: contain; object-position: center;
  pointer-events: none;
}
#cnprev canvas {
  position: relative; z-index: 2; width: 72px; height: 72px; margin: 6px 0 0;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .65));
}
#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: .16;
  font-size: clamp(28px, 11vw, 64px); white-space: nowrap;
}
#cnprevcls { z-index: 1; }
#charnew #c_name {
  width: 100%; box-sizing: border-box; text-align: center;
  font-size: calc(15px * var(--fontscale, 1)); padding: 10px 12px;
  border-radius: 7px; background: rgba(21, 26, 43, .9);
}
#charnew #c_name:focus { box-shadow: 0 0 0 2px rgba(0, 229, 255, .1), 0 0 14px rgba(0, 229, 255, .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); }
#classes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 12px; align-items: stretch;
}
.sexpick { display: flex; gap: 8px; }
/* prefixado com #charnew: a base `#charnew button` é um seletor de id e ganharia destes */
#charnew .sexpick button {
  flex: 1; padding: 8px 10px; font-weight: bold; border-radius: 7px;
  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); }
/* botão principal: o único CTA da tela, e parece um */
#charnewbtns, #cnclassbtns { display: flex; gap: 8px; }
#cnclassbtns { margin-top: 8px; }
#charnew #btn_charcreate, #charnew #btn_charnext {
  flex: 1; padding: 11px; font-weight: bold; letter-spacing: 2px; border-radius: 7px;
  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: 6px; }
/* ---------- personalização (pele/cabelo/roupa/rosto) ---------- */
.lookpick {
  margin: 0 0 14px; padding: 16px; border-radius: 12px; min-width: 0;
  background:
    radial-gradient(circle at 90% 0, rgba(0, 229, 255, .055), transparent 34%),
    linear-gradient(180deg, rgba(20, 23, 37, .92), rgba(10, 11, 18, .92));
  border: 1px solid #30394f; box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.swaxes { display: flex; flex-direction: column; gap: 8px; 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); }
/* Roupa / penteado / acessório: um índice por vez. A silhueta está no preview, não na fileira. */
.pickrow {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px; min-width: 0;
  border-radius: 7px; background: rgba(8, 9, 15, .34);
}
.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: 6px;
}
.lookstep b {
  min-width: 72px; text-align: center; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
/* Presets de olhos: círculos legíveis no tamanho pequeno, enquanto a paleta completa abaixo
   continua disponível quando o jogador quer uma cor fora da seleção rápida. */
.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); }
/* Canal (pele/cabelo/camisa/calça/botas/olhos) + a paleta de outfit inteira: 7 faixas x 19 tons.
   A grade é fixa em 19 colunas porque é assim que a paleta É — reflow por largura
   embaralharia a ordem das faixas e o jogador perderia a referência de onde a cor mora. */
.chanpick { display: flex; gap: 6px; margin: 4px 0 2px; }
.chanpick .chan {
  flex: 1; padding: 6px 2px; border: 2px solid var(--border); border-radius: 6px;
  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); }
/* 19 colunas fixas: a paleta É 7 faixas x 19 tons — reflow embaralharia a referência.
   As células esticam com a largura disponível (mínimo de toque razoável). */
.palette { display: grid; grid-template-columns: repeat(19, minmax(12px, 22px)); gap: 2px; }
.palette .pcell { aspect-ratio: 1; border: 1px solid transparent; border-radius: 3px; 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: 348px; padding: 0; border-radius: 12px; cursor: pointer; text-align: center;
  font-size: calc(11px * var(--fontscale, 1));
  background: linear-gradient(180deg, rgba(23, 27, 43, .98), rgba(10, 11, 18, .98));
  border: 1px solid #303950;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .025);
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.clscard[data-class="mercenary"], #classdetail[data-class="mercenary"],
.charcard[data-class="mercenary"], #cnprev[data-class="mercenary"] { --cls: #ff5067; --cls-rgb: 255, 80, 103; }
.clscard[data-class="gunslinger"], #classdetail[data-class="gunslinger"],
.charcard[data-class="gunslinger"], #cnprev[data-class="gunslinger"] { --cls: #37bfff; --cls-rgb: 55, 191, 255; }
.clscard[data-class="netrunner"], #classdetail[data-class="netrunner"],
.charcard[data-class="netrunner"], #cnprev[data-class="netrunner"] { --cls: #a66bff; --cls-rgb: 166, 107, 255; }
.clscard[data-class="engineer"], #classdetail[data-class="engineer"],
.charcard[data-class="engineer"], #cnprev[data-class="engineer"] { --cls: #ffad3d; --cls-rgb: 255, 173, 61; }
.clscard:hover {
  transform: translateY(-4px); border-color: rgba(var(--cls-rgb), .78);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45), 0 0 16px rgba(var(--cls-rgb), .13);
}
.clscard:focus-visible { outline: 2px solid var(--cls); outline-offset: 3px; }
.clscard.sel {
  transform: translateY(-3px); border-color: var(--cls);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .48), 0 0 20px rgba(var(--cls-rgb), .28), inset 0 0 28px rgba(var(--cls-rgb), .055);
}
.clscard.sel::after {
  content: '✓'; position: absolute; z-index: 3; right: 9px; top: 9px;
  width: 24px; height: 24px; display: grid; place-items: center;
  color: #08090f; background: var(--cls); border-radius: 50%; font-weight: bold;
  box-shadow: 0 0 14px rgba(var(--cls-rgb), .6);
}
.classhero {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 304px; padding: 12px; overflow: hidden; background: #090a12;
}
.classhero::after {
  content: ''; position: absolute; z-index: 2; inset: 12px; pointer-events: none; border-radius: 4px;
  background: linear-gradient(180deg, transparent 58%, rgba(8, 9, 15, .22) 78%, rgba(8, 9, 15, .7) 100%);
}
.clscard .classart {
  position: relative; z-index: 1;
  height: 100%; width: auto; max-width: 100%; aspect-ratio: 1 / 2;
  object-fit: contain; object-position: center bottom;
  filter: saturate(.9) brightness(.94);
  transition: filter .2s ease;
}
.clscard:hover .classart, .clscard.sel .classart { filter: saturate(1.06) brightness(1.04); }
.classtitle { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 14px; text-align: left; }
.classtitle span {
  display: block; color: rgba(235, 239, 249, .72); font-size: calc(9px * var(--fontscale, 1));
  letter-spacing: 1.4px; text-transform: uppercase; text-shadow: 0 1px 4px #000;
}
.classtitle b {
  display: block; margin-top: 2px; color: #fff; font-size: calc(16px * var(--fontscale, 1));
  letter-spacing: 1px; text-shadow: 0 2px 7px #000;
}
.clscard.sel .classtitle b { color: var(--cls); }
.classcopy { flex: 1; display: flex; flex-direction: column; padding: 9px 11px 11px; }
.clscard .d {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  color: #8e96a7; line-height: 1.38; min-height: 45px;
}
/* Uma coluna em tela estreita; o painel de identidade deixa de ser sticky pra não roubar altura.
   980 cobre tablet em paisagem; com o meta viewport o celular (390) já cai no 720 abaixo. */
@media (max-width: 980px) {
  #cnlook, #charnew.cnlook #cnlook { grid-template-columns: 1fr; }
  #cnleft { position: static; }
  #cnprev { height: 300px; }
  #cnprev canvas { width: 64px; height: 64px; }
  #charnew.cnlook .swaxes { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  #login h1, #lobby h1, #loading h1 {
    font-size: calc(28px * var(--fontscale, 1)); letter-spacing: 3px;
  }
  #charlist { grid-template-columns: minmax(0, 1fr); width: min(360px, 96vw); }
  #lobbybtns, #loginbtns { flex-wrap: wrap; justify-content: center; }
  #charnew { padding-inline: 10px; }
  #classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classhero { height: 248px; }
}
#loginbtns { display: flex; gap: 10px; }
#google_button { display: flex; justify-content: center; margin-top: 12px; }
#google_login { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(340px, 90vw); }
#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; }
/* cash shop rides the market's wallet/tab styles; these are only what it adds */
.shoprow.active { outline: 1px solid #2fe58a; outline-offset: -1px; }
.shoprow.vfx { box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .35); }
.shoprow canvas { image-rendering: pixelated; width: 48px; height: auto; flex: 0 0 auto; }
.shoprow .owned { color: #2fe58a; font-style: normal; font-size: calc(10px * var(--fontscale, 1)); }

.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);
}
#tooltip .tiplock {
  margin: 5px 0 2px; color: var(--hp); font-size: calc(10px * var(--fontscale, 1));
}
#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; }
.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; }

/* ---- 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 .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%; }
.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: character slots ---- */
/* 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(2, minmax(0, 300px)); gap: 10px; max-height: 56vh; overflow-y: auto; padding: 2px; width: min(620px, 96vw); }
.charcard {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; text-align: left;
  background: var(--panel); border: 1px solid var(--border); padding: 8px; cursor: pointer;
}
.charcard:hover { border-color: var(--cyan); }
.charcard.empty { display: flex; cursor: default; opacity: .4; justify-content: center; align-items: center; color: var(--dim); border-style: dashed; min-height: 72px; }
.charcard .cprev, .charcard .cinfo, .charcard .cdel { position: relative; z-index: 1; }
.charcard .cprev {
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 160px; padding: 8px; flex: none;
  background: #090a12; border: 1px solid rgba(255,255,255,.04); border-radius: 6px;
  overflow: hidden;
}
.charcard .cprev .classart {
  display: block; width: 72px; height: 144px;
  object-fit: contain; object-position: center;
}
.charcard canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.charcard .cinfo { min-width: 0; }
.charcard .cclsbg { font-size: 26px; letter-spacing: .1em; opacity: .14; }
.charcard .cname { color: var(--cyan); font-size: calc(15px * var(--fontscale, 1)); }
.charcard .cmeta { color: var(--dim); font-size: calc(11px * var(--fontscale, 1)); }
.charcard .conline { color: #2fe58a; font-size: calc(11px * var(--fontscale, 1)); }
.charcard .cdel { color: var(--hp); border-color: var(--hp); font-size: calc(11px * var(--fontscale, 1)); padding: 1px 7px; }
.classhero .cclsbg { font-size: clamp(36px, 8vw, 72px); opacity: .12; inset: 12px; }
#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); }

/* ---- class picker: compact cards + one wide gameplay explanation ---- */
.clscard .diff { margin: 0 0 5px; letter-spacing: 3px; color: var(--cls); font-size: calc(11px * var(--fontscale, 1)); }
.clscard .diff i { color: #2f3444; font-style: normal; }
.clscard .tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; min-height: 38px; margin: 2px 0 7px; align-content: center; }
.clscard .tags span {
  font-size: calc(9px * var(--fontscale, 1)); color: #b9c5d7;
  border: 1px solid rgba(var(--cls-rgb), .25); background: rgba(var(--cls-rgb), .055);
  padding: 2px 5px; border-radius: 999px;
}
.clscard .stats {
  color: #717a8c; font-size: calc(10px * var(--fontscale, 1)); margin-top: auto; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .045);
}
#classdetail {
  --cls: var(--cyan); --cls-rgb: 0, 229, 255;
  position: relative; overflow: hidden; margin: 0 0 18px; border-radius: 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(180px, 23%) 1fr; align-items: center; 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: block; margin: 2px 0 5px; color: #f2f4f8; font-size: calc(17px * var(--fontscale, 1)); }
.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; }
}

/* ============================================================================
   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; }

/* 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: linear-gradient(180deg, #1c2230 0%, #0b0e14 70%);
  border: 2px solid var(--border);
  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: inset 0 0 18px rgba(0,0,0,.55);
  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: inset 0 0 18px rgba(0,0,0,.55);
}
#phonetab:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(0,229,255,.25), inset 0 0 18px rgba(0,0,0,.55);
}
/* Menu open: subtle cyan edge only — no neon/magenta pulse that steals focus from the fight */
#phonetab.on {
  border-color: var(--cyan);
  box-shadow: 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: 0 0 10px rgba(0,229,255,.25), 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 #1d2432;
  box-shadow: inset 0 0 0 1px #0a0c10;
  overflow: hidden;
}
#pixie { display: block; width: 100%; height: 100%; }
#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: 1.5px; color: var(--cyan);
  line-height: 1.2;
}
#tabname i { font-style: normal; color: var(--dim); letter-spacing: 1px; font-size: .85em; }
#tabrole {
  font-size: calc(9px * var(--fontscale, 1)); color: var(--dim); letter-spacing: .5px;
  text-transform: lowercase;
}
#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); }
/* a quest ready to hand in: the launcher pulses magenta until you look */
#phonetab.alert { animation: tabalert 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 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;
  animation: deckin .15s ease-out;
}
@keyframes deckin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

/* 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: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;
  animation: deckin .15s ease-out;
  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.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); }
.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.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: 118px; }
  #mmpanel { display: none; }
  #phonetab { flex: 0 0 72px; width: 72px; padding: 4px; }
  #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; }
  #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 #charname, #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; }
  #huntlaunch .huntname, #huntlaunch .huntband { display: none; }
  #huntlaunch .hunticon { width: 22px; height: 22px; }
  #phonetab { flex: 0 0 64px; width: 64px; height: 64px; }
  #hunt.steering #huntsteer {
    position: absolute; bottom: calc(100% + 4px); left: 0; right: auto;
    width: min(280px, calc(100vw - 16px)); z-index: 6;
    background: var(--panel); border: 2px solid var(--border);
    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:last-child, .ranking-table th:last-child { text-align:right; }
.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; }